@zohodesk/react-cli 1.1.20 → 1.1.22

package/README.md

@@ -44,7 +44,22 @@ Now to run app
 
 # Change Logs
 
-# 1.1.19 (27-5-2024)
+# 1.1.21 (4-6-2024)
+
+- TypeScript support has been added for the application, library, and Jest.
+
+- The `enable_typescript` option has been added in the react-cli.config.js. Set it to true to enable TypeScript
+
+- Support for adding plugins is now available. To use this, configure your react-cli.config.js file as follows:
+
+   ```
+      babelCustomizationForLibrary: {
+        babelPlugins: [<`your plugins`>]
+      },
+   ```
+- The Memory leak issue while downloading i18n and CSS files has been fixed
+
+# 1.1.20 (27-5-2024)
 
 **Feature**
 

package/bin/cli.js

@@ -300,6 +300,8 @@ switch (option) {
         'src',
         '-d',
         'lib',
+        '--extensions',
+        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/cmjs-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),
@@ -316,6 +318,8 @@ switch (option) {
         'src',
         '--out-dir',
         'es',
+        '--extensions',
+        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/es-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),

package/lib/babel/cmjs-plugins-presets.js

@@ -11,20 +11,35 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let {
+const {
   module: {
     mode
-  }
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins
+  },
+  enableTypeScript
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  resolvedPlugins.push(require.resolve(plugin));
+});
+const plugins = [...defaultPlugins, ...resolvedPlugins];
+const presets = [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
+  disableES5Transpile: false
+})];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
 
 var _default = () => ({
-  presets: [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
-    disableES5Transpile: false
-  })],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}]]
+  presets: presets,
+  plugins: plugins
 });
 
 exports.default = _default;

package/lib/babel/es-plugins-presets.js

@@ -11,30 +11,45 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let {
+const {
   module: {
     mode,
     disableES5Transpile
-  }
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins
+  },
+  enableTypeScript
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  resolvedPlugins.push(require.resolve(plugin));
+});
+const plugins = [...defaultPlugins, ...resolvedPlugins];
+const presets = [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
+  modules: false,
+  useBuiltIns: 'usage',
+  corejs: 3,
+  targets: {
+    browsers: ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions']
+  }
+} : {
+  modules: false
+}], (0, _babelPresetReactOption.default)({
+  disableES5Transpile
+})];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
 
 var _default = () => ({
-  presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
-    modules: false,
-    useBuiltIns: 'usage',
-    corejs: 3,
-    targets: {
-      browsers: ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions']
-    }
-  } : {
-    modules: false
-  }], (0, _babelPresetReactOption.default)({
-    disableES5Transpile
-  })],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}], require.resolve('@babel/plugin-syntax-dynamic-import')]
+  presets: presets,
+  plugins: plugins
 });
 
 exports.default = _default;

package/lib/configs/jest.config.js

@@ -17,7 +17,7 @@ const commonConfig = {
   collectCoverage: true,
   moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
   transform: {
-    '^.+\\.(js|jsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
+    '^.+\\.(js|jsx|ts|tsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
     '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
   },
@@ -28,7 +28,7 @@ const commonConfig = {
   // },
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
-  moduleFileExtensions: ['js'],
+  moduleFileExtensions: ['js', 'ts', 'tsx'],
   setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
@@ -52,7 +52,7 @@ module.exports = (...args) => {
     testPathIgnorePatterns: ['/node_modules/', 'docs'],
     unmockedModulePathPatterns: ['__tests__', 'node_modules', '.*'],
     roots: [`<rootDir>/${appFolder}/`],
-    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node)$',
+    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node|ts|tsx)$',
     testResultsProcessor: _path.default.resolve(__dirname, '..', 'jest', 'result.js')
   });
 };

package/lib/configs/resolvers.js

@@ -33,6 +33,7 @@ function moduleResolver(options) {
 
   const nodeModulesPath = required ? required.nodeModulesPath : _client_packages_group.nodeModulesPath;
   return {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
     modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),
     alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
 

package/lib/configs/webpack.dev.config.js

@@ -44,7 +44,8 @@ const {
     postCssPluginOrder,
     externals,
     enableMjsLoader
-  }
+  },
+  enableTypeScript
 } = options;
 const {
   disableContextURL
@@ -146,7 +147,11 @@ module.exports = {
           minimize: true
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$|\.tsx$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),

package/lib/configs/webpack.prod.config.js

@@ -50,7 +50,8 @@ const {
     crossorigin,
     postCssPluginOrder,
     externals
-  }
+  },
+  enableTypeScript
 } = options;
 let {
   enableChunkHash
@@ -131,7 +132,7 @@ module.exports = {
             modules: false
           }], (0, _babelPresetReactOption.default)({
             disableES5Transpile
-          })],
+          }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
           plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve(
           //   '@babel/plugin-proposal-object-rest-spread'
           // ), REMOVING IT, BECAUSE WE ALREADY SUPPORT SPREAD SYNTAX FROM LIBRARIES.
@@ -237,7 +238,11 @@ module.exports = {
           minimize: false
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$|\.tsx$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),

package/lib/jest/preProcessors/jsPreprocessor.js

@@ -4,7 +4,28 @@ var _babelJest = _interopRequireDefault(require("babel-jest"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const getOptions = require('../../../lib/utils/getOptions').default;
+
+const {
+  enableTypeScript,
+  babelCustomizationForLibrary
+} = getOptions();
+const {
+  babelPlugins
+} = babelCustomizationForLibrary;
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  resolvedPlugins.push(require.resolve(plugin));
+});
+const presets = [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
+
+const defaultPlugins = [require.resolve('babel-plugin-transform-dynamic-import')];
+const plugins = [...defaultPlugins, ...resolvedPlugins];
 module.exports = _babelJest.default.createTransformer({
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
-  plugins: [require.resolve('babel-plugin-transform-dynamic-import')]
+  presets: presets,
+  plugins: plugins
 });

package/lib/loaderUtils/getDevJsLoaders.js

@@ -18,6 +18,7 @@ let getDevJsLoaders = options => {
       instrumentScript,
       devConsoleExculde
     },
+    enableTypeScript,
     esLint: {
       enable: enableEslint
     }
@@ -44,7 +45,7 @@ let getDevJsLoaders = options => {
         modules: false
       }], (0, _babelPresetReactOption.default)({
         disableES5Transpile
-      })],
+      }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
       plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve('@babel/plugin-proposal-object-rest-spread'),
       devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']

package/lib/pluginUtils/getDevPlugins.js

@@ -37,6 +37,8 @@ var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
 var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
 
+var _EventsHandlingPlugin = require("../plugins/EventsHandlingPlugin");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { windowsModification } from '../loaderUtils/windowsModification';
@@ -217,12 +219,13 @@ const getDevPlugins = (options, publicPath) => {
       exclude: exclude.selectorWeight,
       patterns
     }));
-  } // if (pluginObject.minifier) {
+  }
+
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin()); // if (pluginObject.minifier) {
   //   // console.log('minifier active');
   //   pluginsArr.push(new MinifierPlugin());
   // }
 
-
   return pluginsArr.filter(Boolean);
 };
 

package/lib/pluginUtils/getProdPlugins.js

@@ -27,6 +27,8 @@ var _VariableConversionCollector = _interopRequireDefault(require("../plugins/Va
 
 var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"));
 
+var _EventsHandlingPlugin = require("../plugins/EventsHandlingPlugin");
+
 var _plugins = require("../plugins");
 
 var _CustomAttributePlugin = require("../plugins/CustomAttributePlugin");
@@ -306,6 +308,7 @@ const getProdPlugins = (options, publicPath = '') => {
     statsOutputExcludeKeys,
     statsFileName
   }));
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin());
   return pluginsArr;
 };
 

package/lib/plugins/EventsHandlingPlugin.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventsHandlingPlugin = void 0;
+
+/* eslint-disable no-use-before-define */
+class EventsHandlingPlugin {
+  constructor(options) {}
+
+  apply(compiler) {
+    // NOTE: we not using this, Reason currently this option is only need for EFC,
+    // So it do not needed.
+    compiler.hooks.thisCompilation.tap({
+      name: 'CustomAttributePlugin',
+      stage: 1,
+      fn: compilation => {
+        compilation.mainTemplate.hooks.requireEnsure.tap('CustomAttributePlugin', source => {
+          // const str = attributeSetTemplate(cssAttributes, 'linkTag');
+          const sourceStr = source.replace('linkTag.onerror = function(event) {', 'linkTag.onerror = function(event) { linkTag.onerror = linkTag.onload = null');
+          const replacedSourceStr = sourceStr.replace('linkTag.onload = resolve', `linkTag.onload = () =>  { 
+          resolve();
+          linkTag.onerror = linkTag.onload = null
+        };`);
+          return replacedSourceStr;
+        });
+      }
+    });
+  }
+
+}
+
+exports.EventsHandlingPlugin = EventsHandlingPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -228,8 +228,12 @@ class I18nDownlodLogic {
         if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
       }
       var scriptTag = document.createElement("script");
-      scriptTag.onload = resolve;
+      scriptTag.onload = () =>  { 
+        resolve();
+        scriptTag.onerror = scriptTag.onload = null;
+      };
       scriptTag.onerror = function(event) {
+        scriptTag.onerror = scriptTag.onload = null;
         var request = event && event.target && event.target.src || fullsrcPath;
         var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + request + ")");
         err.code = "I18N_CHUNK_LOAD_FAILED";

package/lib/schemas/index.js

@@ -738,6 +738,13 @@ var _default = {
     fileName: null,
     options: null,
     excludeKeys: null
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins: []
+  },
+  enableTypeScript: {
+    value: false,
+    cli: 'enable_typescript'
   }
 };
 exports.default = _default;