imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enable support for TypeScript in components

Browse source 
Includes: compilation, translations, IDE support (use .tsx not .ts), typings, and other build tools.

TypeScript component have to import PropTypes and React with `import * as React from 'react';`
This commit is contained in:
Travis Ralston 2020-03-11 17:47:18 -06:00
parent d470f9649d
commit 7dd7417f12
6 changed files with 31 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scripts/gen-i18n.js
View file

@ -237,7 +237,7 @@ const walkOpts = {
const fullPath = path.join(root, fileStats.name);
let trs;
if (fileStats.name.endsWith('.js')) {
if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.tsx')) {
trs = getTranslationsJs(fullPath);
} else if (fileStats.name.endsWith('.html')) {
trs = getTranslationsOther(fullPath);

11
scripts/reskindex.js
View file

@ -8,11 +8,14 @@ var chokidar = require('chokidar');
var componentIndex = path.join('src', 'component-index.js');
var componentIndexTmp = componentIndex+".tmp";
var componentsDir = path.join('src', 'components');
var componentGlob = '**/*.js';
var componentJsGlob = '**/*.js';
var componentTsGlob = '**/*.tsx';
var prevFiles = [];
function reskindex() {
var files = glob.sync(componentGlob, {cwd: componentsDir}).sort();
var jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort();
var tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort();
var files = [...tsFiles, ...jsFiles];
if (!filesHaveChanged(files, prevFiles)) {
return;
}
@ -36,7 +39,7 @@ function reskindex() {
strm.write("let components = {};\n");
for (var i = 0; i < files.length; ++i) {
var file = files[i].replace('.js', '');
var file = files[i].replace('.js', '').replace('.tsx', '');
var moduleName = (file.replace(/\//g, '.'));
var importName = moduleName.replace(/\./g, "$");
@ -79,7 +82,7 @@ if (!args.w) {
}
var watchDebouncer = null;
chokidar.watch(path.join(componentsDir, componentGlob)).on('all', (event, path) => {
chokidar.watch(path.join(componentsDir, componentJsGlob)).on('all', (event, path) => {
if (path === componentIndex) return;
if (watchDebouncer) clearTimeout(watchDebouncer);
watchDebouncer = setTimeout(reskindex, 1000);