@zohodesk/client_build_tool 0.0.6-exp.3 → 0.0.6-exp.31

package/lib/schemas/defaultConfigValues.js

@@ -291,6 +291,7 @@ var _default = {
     allowPrefetchingMultipleChunks: false
   },
   devModeContentHashAllowedTypes: null,
+  nameTemplateCustomization: null,
   devLikeHash: {
     value: false,
     cli: 'dev_like_hash'
@@ -323,11 +324,16 @@ var _default = {
     cssAttributes: null,
     i18nAttributes: null
   },
+  externals: null,
   typeScript: {
     enable: {
       value: false,
-      cli: '--type_script_enable'
+      cli: 'type_script_enable'
     }
+  },
+  optimization: {
+    jsExcludePath: '',
+    cssExcludePath: ''
   }
 };
 exports.default = _default;

package/lib/shared/babel/babelWebConfig.js

@@ -25,8 +25,11 @@ function babelWebConfig(options, mode) {
     plugins: babelPlugins,
     browserList
   } = options.babelCustomizations;
+  const {
+    enable: typeScriptEnable
+  } = options.typeScript;
   return {
-    presets: [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
+    presets: typeScriptEnable ? [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')] : [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react')],
     plugins: customBabelPlugins(babelPlugins).concat((0, _getBabelPlugin.getBabelPlugin)(options)).filter(Boolean)
   };
 }

package/lib/shared/babel/runBabelForTsFile.js

@@ -25,6 +25,6 @@ function runBabelForTSFile({
     // const jsSourceCode = readFileSync(filename).toString();
     const babelConfig = (0, _babelWebConfig.babelWebConfig)(options, mode);
     const result = (0, _core.transformFileSync)(filename, babelConfig);
-    (0, _copyFile.writeFile)(outputFile.replace('.ts', '.js'), result.code);
+    (0, _copyFile.writeFile)(outputFile.replace('.tsx', '.js'), result.code);
   }
 }

package/lib/shared/bundler/webpack/common/nameTemplates.js

@@ -12,13 +12,13 @@ var _modeUtils = require("./modeUtils");
 // NOTE: these below code can be done in js,
 //   we did copy paste in order to avoid unnecessary confusion
 // NOTE: array[0] is dev mode file templates and array[1] is prod mode file templates
-const templates = {
+const defaultTemplates = {
   html: ['index.html', 'index.[contenthash].html'],
   js: ['js/[name].js', 'js/[name].[contenthash].js'],
-  chunkjs: ['js-chunks/[name].js', 'js-chunks/[name].[contenthash].js'],
-  i18njs: ['i18n-chunks/[locale]/[name].i18n.js', 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'],
-  i18nchunkjs: ['i18n-chunks/[locale]/[name].i18n.js', // 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'
-  'i18n-chunks/[locale]/[name].[contenthash].i18n.js'],
+  chunkjs: ['js-chunk/[name].js', 'js-chunks/[name].[contenthash].js'],
+  i18njs: ['i18n-chunk/[locale]/[name].i18n.js', 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js'],
+  i18nchunkjs: ['i18n-chunk/[locale]/[name].i18n.js', // 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js'
+  'i18n-chunk/[locale]/[name].[contenthash].i18n.js'],
   i18nmanifest: ['i18n-manifest.json', 'i18n-manifest.json'],
   workerjs: ['js/[name].js', 'js/[name].[contenthash].js'],
   css: ['css/[name].css', 'css/[name].[contenthash].css'],
@@ -54,12 +54,16 @@ function nameTemplates(type, options) {
   const {
     enableFileNameHashing,
     mode,
-    devLikeHash
+    devLikeHash,
+    nameTemplateCustomization
   } = options;
   let {
     devModeContentHashAllowedTypes
   } = options;
   devModeContentHashAllowedTypes = devModeContentHashAllowedTypes || defaultDevModeContentHashAllowedTypes;
+  const templates = { ...defaultTemplates,
+    ...nameTemplateCustomization
+  };
   const templateName = templates[type];
 
   if (!templateName) {

package/lib/shared/bundler/webpack/custom_plugins/{CdnChangePlugin.js → CdnChangePlugin/index.js}

@@ -7,14 +7,20 @@ exports.default = void 0;
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _nameTemplates = require("../common/nameTemplates");
+var _webpack = require("webpack");
 
-var _modeUtils = require("../common/modeUtils");
+var _nameTemplates = require("../../common/nameTemplates");
+
+var _modeUtils = require("../../common/modeUtils");
+
+var _webpackCustomJsUrlLoader = _interopRequireDefault(require("./webpackCustomJsUrlLoader"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RuntimeGlobals, RuntimeModule } from 'webpack';
+// eslint-disable-next-line import/extensions
 // import { Template } from 'webpack';
+// eslint-disable-next-line import/extensions
 const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
 // class CdnChangeRuntimePlugin extends RuntimeModule {
 //   constructor(compiler, { variableName }) {
@@ -33,7 +39,7 @@ class CdnChangePlugin {
   constructor(options) {
     this.createSeparateSMap = options.createSeparateSMap;
     this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
-    this.variableName = options.variableName || '__CSS_CDN__';
+    this.variableName = options.variableName || 'window.__SMAP_PATH__';
     this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
     this.jsTemplate = options.jsTemplate || '{{__JS_CDN__}}';
     this.mode = options.mode || 'prod';
@@ -71,8 +77,12 @@ class CdnChangePlugin {
         data.assets = { ...data.assets,
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
           js: data.assets.js.map(js => {
-            if (((0, _modeUtils.isProductionMode)(mode) || createSeparateSMap) && !(0, _nameTemplates.isI18nFile)(js)) {
-              js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+            if ((0, _modeUtils.isProductionMode)(mode) && createSeparateSMap && !(0, _nameTemplates.isI18nFile)(js)) {
+              if (js.includes('smap')) {
+                js = js.replace('smap/js/', `{{--js-smap}}js/`); //eslint-disable-line
+              } else {
+                js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+              }
             }
 
             return `${(0, _nameTemplates.isI18nFile)(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
@@ -80,6 +90,16 @@ class CdnChangePlugin {
         };
         cb && cb(null, data);
       });
+
+      compilation.hooks.runtimeRequirementInTree.for(_webpack.RuntimeGlobals.getChunkScriptFilename).tap(pluginName, (chunk, set) => {
+        if (typeof compilation.outputOptions.chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(compilation.outputOptions.chunkFilename)) {
+          set.add(_webpack.RuntimeGlobals.getFullHash);
+        }
+
+        compilation.addRuntimeModule(chunk, // eslint-disable-next-line new-cap
+        new _webpackCustomJsUrlLoader.default('javascript', 'javascript', _webpack.RuntimeGlobals.getChunkScriptFilename, chunk => chunk.filenameTemplate || (chunk.canBeInitial() ? compilation.outputOptions.filename : compilation.outputOptions.chunkFilename), false, this.variableName));
+        return true;
+      });
     });
   }
 

package/lib/shared/bundler/webpack/custom_plugins/CdnChangePlugin/webpackCustomJsUrlLoader.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _GetChunkFilenameRuntimeModule = _interopRequireDefault(require("webpack/lib/runtime/GetChunkFilenameRuntimeModule"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { RuntimeGlobals, RuntimeModule, Template } from 'webpack';
+// const GetChunkFilenameRuntimeModule = require('webpack/lib/runtime/GetChunkFilenameRuntimeModule');
+// import GetChunkFilenameRuntimeModule from 'webpack/lib/runtime/GetChunkFilenameRuntimeModule';
+// const first = set => {
+//   const entry = set.values().next();
+//   return entry.done ? undefined : entry.value;
+// };
+class CustomizedGetChunkFilenameRuntimeModule extends _GetChunkFilenameRuntimeModule.default {
+  /**
+   * @param {string} contentType the   to use the content hash for
+   * @param {string} name kind of filename
+   * @param {string} global function name to be assigned
+   * @param {function(Chunk): string | FilenameFunction} getFilenameForChunk functor to get the filename or function
+   * @param {boolean} allChunks when false, only async chunks are included
+   */
+  constructor(contentType, name, global, getFilenameForChunk, allChunks, variableName) {
+    super(contentType, name, global, getFilenameForChunk, allChunks);
+    this.contentType = contentType;
+    this.global = global;
+    this.getFilenameForChunk = getFilenameForChunk;
+    this.allChunks = allChunks;
+    this.dependentHash = true;
+    this.variableName = variableName;
+  }
+
+  generate() {
+    const sourceCode = super.generate().toString();
+    const replaceCode = sourceCode.replaceAll('"js-chunks/', `${this.variableName} + "js-chunks/`);
+    return replaceCode;
+  }
+
+}
+
+var _default = CustomizedGetChunkFilenameRuntimeModule;
+exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/getI18nLoadingRuntimeModule.js

@@ -65,7 +65,7 @@ function getI18nLoadingRuntimeModule({
       return _webpack.Template.asString([`${prefixFunc(i18nChunks)}`, `var createI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId, fullsrc, resolve, reject', ['var scriptTag = document.createElement("script");', attributes ? _webpack.Template.asString(Object.entries(attributes).map(entry => {
         const [key, value] = entry;
         return `scriptTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
-      })) : '', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', _webpack.Template.indent(['resolve();']), '} else {', _webpack.Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? _webpack.Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', _webpack.Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || _webpack.Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', _webpack.Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', _webpack.Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${_webpack.RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${_webpack.RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(
+      })) : '', '__webpack_require__.nc && scriptTag.setAttribute("nonce", __webpack_require__.nc)', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', _webpack.Template.indent(['resolve();']), '} else {', _webpack.Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? _webpack.Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', _webpack.Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || _webpack.Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', _webpack.Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', _webpack.Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${_webpack.RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${_webpack.RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(
       /** @type {string[]} */
       chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${_webpack.RuntimeGlobals.ensureChunkHandlers}.miniI18n = ${runtimeTemplate.basicFunction('chunkId, promises', [`var i18nChunks = ${JSON.stringify(chunkMap)};`, 'if(installedI18nChunks[chunkId]) promises.push(installedI18nChunks[chunkId]);', 'else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {', _webpack.Template.indent([`promises.push(installedI18nChunks[chunkId] = loadI18nScriptTag(chunkId).then(${runtimeTemplate.basicFunction('', 'installedI18nChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedI18nChunks[chunkId];', 'throw e;'])}));`]), '}'])};`, '']);
     }

package/lib/shared/bundler/webpack/custom_plugins/InitialHtmlPlugin.js

@@ -37,6 +37,10 @@ class InitialHtmlPlugin {
         const headTags = [];
         const bodyTags = [];
         data.headTags.forEach(tag => {
+          Object.assign(tag.attributes, {
+            nonce: '{{--CSP-nonce}}'
+          });
+
           if (tag.tagName === 'link') {
             headTags.push(tag);
           } else {

package/lib/shared/bundler/webpack/custom_plugins/ResourceHintsPlugin.js

@@ -117,6 +117,7 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
         let link = document.createElement("link");
         link.href = href;
         link.rel = rel;
+        __webpack_require__.nc && link.setAttribute("nonce", __webpack_require__.nc)
         if(href.endsWith(".css")) {
           link.as="style";
         } else if (href.endsWith(".js")) {

package/lib/shared/bundler/webpack/custom_plugins/SourceMapPlugin/index.js

@@ -13,7 +13,7 @@ function checkSmapFilePattern(assetName) {
 }
 
 function skipRuntimeFiles(assetName) {
-  return !assetName.includes('runtime') || !assetName.includes('[locale]');
+  return !assetName.includes('[locale]');
 }
 
 const pluginName = 'SplitSourceMapPlugin'; // Purpose:
@@ -45,6 +45,21 @@ class SourceMapPlugin {
           }
         });
       });
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_DERIVED // additionalAssets: true
+
+      }, assets => {
+        Object.keys(assets).forEach(assetName => {
+          if (assetName.includes('runtime') && skipRuntimeFiles(assetName)) {
+            const runtimeAssetCode = assets[assetName].source();
+            const newAssetName = `smap/${assetName}`;
+            compilation.emitAsset(newAssetName, new RawSource(runtimeAssetCode));
+          }
+
+          ;
+        });
+      });
     });
   }
 

package/lib/shared/bundler/webpack/custom_plugins/TPHashMappingPlugin/index.js

@@ -29,7 +29,7 @@ class TPHashMappingPlugin {
 
   getFiles() {
     const hashMapping = {};
-    this.fileMappings.filter(f => f.enable).forEach(fileInfo => {
+    this.fileMappings.forEach(fileInfo => {
       const filePath = _path.default.join(this.tpFolder, fileInfo.filePath);
 
       if (_fs.default.existsSync(filePath)) {

package/lib/shared/bundler/webpack/devtoolConfig.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.devtoolConfig = devtoolConfig;
 
+// eslint-disable-next-line consistent-return
 function devtoolConfig(options) {
-  return options.devtool;
+  if (options.createSeparateSMap) {
+    return options.devtool;
+  }
 }

package/lib/shared/bundler/webpack/optimizationConfig.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.optimizationConfig = optimizationConfig;
 
+var _terserWebpackPlugin = _interopRequireDefault(require("terser-webpack-plugin"));
+
 var _nameTemplates = require("./common/nameTemplates");
 
 var _hashUtils = require("./custom_plugins/I18nSplitPlugin/utils/hashUtils");
@@ -13,6 +15,8 @@ var _configCSSMinifierPlugin = require("./pluginConfigs/configCSSMinifierPlugin"
 
 var _splitChunksConfig = require("./splitChunksConfig");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function optimizationConfig(options) {
   const {
     changeRuntimeChunkChar
@@ -31,10 +35,19 @@ function optimizationConfig(options) {
   const suffix = // chunkSplitEnable ? '_[locale]' : '';
   chunkSplitEnable && chunkFilenameHasContentHash ? '_[locale]' : '';
   const char = changeRuntimeChunkChar;
+  const excludeList = options.optimization.jsExcludePath;
   return {
     splitChunks: (0, _splitChunksConfig.splitChunksConfig)(options),
     minimizer: [// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
-    '...', (0, _configCSSMinifierPlugin.configCSSMinifierPlugin)(options)].filter(Boolean),
+    // '...',
+    excludeList !== '' ? new _terserWebpackPlugin.default({
+      exclude: excludeList,
+      extractComments: false // Do not extract comments to .LICENSE.txt files
+
+    }) : new _terserWebpackPlugin.default({
+      extractComments: false // Do not extract comments to .LICENSE.txt files
+
+    }), (0, _configCSSMinifierPlugin.configCSSMinifierPlugin)(options)].filter(Boolean),
     moduleIds: 'named',
     runtimeChunk: {
       name: entrypoint => `runtime${char}${entrypoint.name}${suffix}`

package/lib/shared/bundler/webpack/pluginConfigs/configCSSMinifierPlugin.js

@@ -14,11 +14,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // import UglifyCSSPlugin from '../custom_plugins/UglifyCSSPlugin';
 // eslint-disable-next-line no-unused-vars
 function configCSSMinifierPlugin(options) {
+  const excludeList = options.optimization.cssExcludePath;
+
   if ((0, _modeUtils.isNotProduction)(options)) {
     return null;
   } // return null;
   // return new UglifyCSSPlugin();
 
 
-  return new _cssMinimizerWebpackPlugin.default();
+  return excludeList !== '' ? new _cssMinimizerWebpackPlugin.default({
+    exclude: excludeList
+  }) : new _cssMinimizerWebpackPlugin.default();
 }

package/lib/shared/bundler/webpack/pluginConfigs/configMiniCSSExtractPlugin.js

@@ -15,7 +15,8 @@ function configMiniCSSExtractPlugin(options) {
   const {
     enableRTLSplit
   } = options.css.plugins.rtlSplit;
-  const cssLTRFileNameTempalte = enableRTLSplit ? (0, _nameTemplates.nameTemplates)('cssdir', options) : (0, _nameTemplates.nameTemplates)('css', options);
+  const cssLTRFileNameTempalte = enableRTLSplit ? (0, _nameTemplates.nameTemplates)('cssdir', options) : (0, _nameTemplates.nameTemplates)('css', options); // eslint-disable-next-line no-undef
+
   return new _miniCssExtractPlugin.default({
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte

package/lib/shared/bundler/webpack/resolvers.js

@@ -62,7 +62,8 @@ function moduleResolver(options) {
     modules: useAppNodeModulesAsPreferred(preferLocalFirst, [nodeModulesPath, _constants.cliNodeModulesPath].filter(Boolean)),
     alias: { ...(defaultAlias ? _libAlias.libAlias : {}),
       ...(alias || {})
-    }
+    },
+    extensions: ['.ts', '.js', '.json', '.tsx']
   };
 }
 

package/lib/shared/bundler/webpack/tsLoaders.js

@@ -5,19 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tsLoaders = tsLoaders;
 
-function tsLoaders(options) {
-  const {
-    enable
-  } = options.typeScript;
-
-  if (enable) {
-    return [{
-      test: /\.js$/,
-      exclude: /node_modules/,
-      use: 'ts-loader' // include: path.join(appPath, folder)
+var _babelLoaderConfig = require("./loaderConfigs/babelLoaderConfig");
 
-    }];
-  }
+function tsLoaders(options) {
+  return [{
+    test: /\.tsx$/,
+    exclude: /node_modules/,
+    use: [(0, _babelLoaderConfig.babelLoaderConfig)(options)] // include: path.join(appPath, folder)
 
-  return [];
+  }];
 }

package/lib/shared/fileUtils/watchRun.js

@@ -25,7 +25,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const isJs = ext => ext === '.js';
 
-const isTs = ext => ext === '.ts';
+const isTs = ext => ext === '.ts' || ext === '.tsx';
 
 const isCss = ext => ext === '.css';