@zohodesk/react-cli 1.1.22 → 1.1.23-exp.1

package/README.md

@@ -44,6 +44,61 @@ Now to run app
 
 # Change Logs
 
+# 1.1.23 (28-06-2024)
+
+**Features**
+
+  - alias feature added for library, application and jest. To enable it , configure your `react-cli.config.js` as below
+
+  ```
+     {
+      alias: {
+        "@components": './src/components, 
+      }
+     }
+  ```
+
+  - For devmapping  config jsConfig.json ad below 
+
+  ```
+    {
+      "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@components/*":   [ "./src/components/*"],
+        }
+      }
+    }
+  ```
+
+  - Customized Script loading strategy added. To enabled it, configure your `react-cli.config.js` as below
+
+      ```  
+          {
+            app: {
+              htmlTemplate: {
+                customScriptLoadingStrategey: {
+                  enable: true,
+                  options: {
+                    async: [/.*js$/],
+                    defer: [/^main.*\.js$/]
+                  }
+                }
+              }
+            }
+          }
+      ```
+
+**Changes**
+
+  - Worker loading logic
+
+# 1.1.22 (6-6-2024) 
+
+**Changes** 
+
+  - Bug fix in Typescript
+
 # 1.1.21 (4-6-2024)
 
 - TypeScript support has been added for the application, library, and Jest.
@@ -59,6 +114,28 @@ Now to run app
    ```
 - The Memory leak issue while downloading i18n and CSS files has been fixed
 
+
+# 1.1.20-exp.1
+
+**Changes**
+
+- Added memory leak fixes for script, links tags
+
+**Feature**
+- Custom Script loading strategy support for initial html script tags.
+
+# 1.1.19-exp.18
+
+**Changes**
+
+- To do further build size optimization by utilizing webpack provided config.
+
+```
+  innerGraph: true,
+  usedExports: true,
+  sideEffects: true
+```
+
 # 1.1.20 (27-5-2024)
 
 **Feature**

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

@@ -18,12 +18,16 @@ const {
   babelCustomizationForLibrary: {
     babelPlugins
   },
-  enableTypeScript
+  enableTypeScript,
+  alias
 } = (0, _utils.getOptions)();
 const isProd = mode.toLowerCase() === 'prod';
 const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
   __DOCS__: false
-} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), [require.resolve('babel-plugin-module-resolver'), {
+  "root": ["./"],
+  alias
+}]];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
   resolvedPlugins.push(require.resolve(plugin));

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

@@ -19,12 +19,16 @@ const {
   babelCustomizationForLibrary: {
     babelPlugins
   },
-  enableTypeScript
+  enableTypeScript,
+  alias
 } = (0, _utils.getOptions)();
 const isProd = mode.toLowerCase() === 'prod';
 const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
   __DOCS__: false
-} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), [require.resolve('babel-plugin-module-resolver'), {
+  "root": ["./"],
+  alias
+}]];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
   resolvedPlugins.push(require.resolve(plugin));

package/lib/configs/libAlias.js

@@ -3,12 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.aliasPathCreation = aliasPathCreation;
 exports.libAlias = exports.jestModuleNameMapper = void 0;
+
+var _utils = require("../utils");
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // the reason for alias at the time was code tree shaking
 // tree shaking was most compactable with ES module system
 // FIXME: But there is a posiblity when these  package  does not have lib,
 //  app will work because of alias, But may be jest won't work because of not alais
 //  So need to think about use alais in jest 
+const appPath = process.cwd();
+const {
+  alias,
+  app
+} = (0, _utils.getOptions)();
+const {
+  disableES5Transpile
+} = app;
+
+function aliasPathCreation(customAlias) {
+  if (customAlias == null) {
+    return {};
+  }
+
+  const newAlias = {};
+  Object.keys(customAlias).forEach(key => {
+    if (customAlias[key].startsWith('.')) {
+      newAlias[key] = _path.default.resolve(appPath, customAlias[key]);
+    } else {
+      newAlias[key] = customAlias[key];
+    }
+  });
+  return newAlias;
+}
+
 const libAlias = {
   '@zohodesk/components/lib': '@zohodesk/components/es',
   // '@zohodesk/zc-custom/lib': '@zohodesk/zc-custom/es',
@@ -31,8 +64,9 @@ const libAlias = {
 // '^@components(.*)$': '<rootDir>/src/components$1',
 
 exports.libAlias = libAlias;
-const jestModuleNameMapper = Object.keys(libAlias).reduce((previousValue, key) => {
-  previousValue[`^${key}(.*)$`] = `${libAlias[key]}$1`;
+const totalAlias = disableES5Transpile ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
+const jestModuleNameMapper = Object.keys(totalAlias).reduce((previousValue, key) => {
+  previousValue[`^${key}(.*)$`] = `${totalAlias[key]}$1`;
   return previousValue;
 }, {});
 exports.jestModuleNameMapper = jestModuleNameMapper;

package/lib/configs/resolvers.js

@@ -21,6 +21,7 @@ function moduleResolver(options) {
     moduleResolvePath,
     disableES5Transpile
   } = options.app;
+  const customAlias = options.alias;
   let required = moduleResolvePath && (0, _requireLocalOrGlobal.requireLocal)(moduleResolvePath);
 
   if (!required) {
@@ -32,10 +33,11 @@ function moduleResolver(options) {
   }
 
   const nodeModulesPath = required ? required.nodeModulesPath : _client_packages_group.nodeModulesPath;
+  const totalAlias = disableES5Transpile ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
   return {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),
-    alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
+    alias: totalAlias // alias: { ...libAlias, ...clientDependenies }
 
   };
 }

package/lib/loaders/workerLoader.js

@@ -19,32 +19,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
-  'type': 'object',
-  'properties': {
-    'publicPath': {
-      'anyOf': [{
-        'type': 'string'
+  type: 'object',
+  properties: {
+    publicPath: {
+      anyOf: [{
+        type: 'string'
       }, {
-        'instanceof': 'Function'
+        instanceof: 'Function'
       }]
     },
-    'filename': {
-      'anyOf': [{
-        'type': 'string',
-        'minLength': 1
+    filename: {
+      anyOf: [{
+        type: 'string',
+        minLength: 1
       }, {
-        'instanceof': 'Function'
+        instanceof: 'Function'
       }]
     },
-    'chunkFilename': {
-      'type': 'string',
-      'minLength': 1
+    chunkFilename: {
+      type: 'string',
+      minLength: 1
     },
-    'esModule': {
-      'type': 'boolean'
+    esModule: {
+      type: 'boolean'
     }
   },
-  'additionalProperties': false
+  additionalProperties: false
 }; // eslint-disable-next-line
 
 function loader() {}
@@ -112,25 +112,40 @@ function pitch(request) {
     }
 
     function workerCode() {
+      if (this.workerInstance) {
+        return this.workerInstance;
+      }
+
       let blob;
 
       try {
         blob = new Blob([`importScripts('${this.workerUrl}');`], {
-          'type': 'application/javascript'
+          type: 'application/javascript'
         });
       } catch (e1) {
         throw new Error(e1);
       }
 
-      let url = window.URL || window.webkitURL;
-      let blobUrl = url.createObjectURL(blob);
-      let worker = new Worker(blobUrl);
-      return worker;
+      const url = window.URL || window.webkitURL;
+      const blobUrl = url.createObjectURL(blob);
+      this.workerInstance = new Worker(blobUrl);
+      return this.workerInstance;
     }
 
-    return cb(null, `${options.esModule ? 'export default' : 'module.exports ='} {\n
+    return cb(null, `const workerObj ={\n
+      workerInstance: null, \n
 			workerUrl: __webpack_public_path__ + ${JSON.stringify(entry)}, \n
 			getInstance: ${workerCode} \n
-		}`);
+		};\n
+    workerObj.getInstance();
+    ${options.esModule ? 'export default' : 'module.exports ='} workerObj;
+    `); // return cb(
+    //   null,
+    //   `${options.esModule ? 'export default' : 'module.exports ='} {\n
+    //   workerInstance: null, \n
+    // 	workerUrl: __webpack_public_path__ + ${JSON.stringify(entry)}, \n
+    // 	getInstance: ${workerCode} \n
+    // }`
+    // );
   });
 }

package/lib/pluginUtils/configHtmlWebpackPlugins.js

@@ -13,6 +13,10 @@ var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-we
 
 var _common = require("../common");
 
+var _utils = require("../utils");
+
+var _CustomScriptLoadingStrategyPlugin = _interopRequireDefault(require("../plugins/CustomScriptLoadingStrategyPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultHTMLMiniFyOption = {
@@ -26,6 +30,51 @@ const defaultHTMLMiniFyOption = {
   removeStyleLinkTypeAttributes: true,
   useShortDoctype: true
 };
+const defaultScriptLoadingStrategy = 'defer';
+const allowedScriptLoadingStrategies = ['blocking', 'defer', 'async', 'module'];
+
+function isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey) {
+  return allowedScriptLoadingStrategies.includes(scriptLoadingStategey);
+}
+
+function getScriptLoadingStrategyForStringType(scriptLoadingStategey) {
+  if (isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey)) {
+    return scriptLoadingStategey;
+  }
+
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategyForObject(scriptLoadingStategey) {
+  if (Object.keys(scriptLoadingStategey).length === 0) {
+    return defaultScriptLoadingStrategy;
+  }
+
+  const isAllowedScriptLoadingStrategy = Object.keys(scriptLoadingStategey).every(key => isAllowedScriptLoadingStrategyUsed(key));
+
+  if (isAllowedScriptLoadingStrategy) {
+    return Object.assign({}, scriptLoadingStategey);
+  }
+
+  console.warn('un supported script loading strategy used', scriptLoadingStategey);
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategy(scriptLoadingStategey) {
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'string') {
+    return {
+      [getScriptLoadingStrategyForStringType(scriptLoadingStategey)]: [/.*/]
+    };
+  }
+
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'object') {
+    return getScriptLoadingStrategyForObject(scriptLoadingStategey);
+  }
+
+  return {
+    [defaultScriptLoadingStrategy]: [/.*/]
+  };
+}
 
 function configHtmlWebpackPlugins(plugins, {
   enableChunkHash = false,
@@ -33,7 +82,8 @@ function configHtmlWebpackPlugins(plugins, {
   inject,
   crossorigin,
   hasEFC,
-  minify: minifyHtmlOptions = false
+  minify: minifyHtmlOptions = false,
+  customScriptLoadingStrategey = {}
 }) {
   const optionsHtmlWebpack = {
     chunksSortMode: 'none',
@@ -44,7 +94,7 @@ function configHtmlWebpackPlugins(plugins, {
     // ? minifyHtmlOptions
     // : minifyHtmlOptions,,
     templateParameters: _common.templateParameters,
-    scriptLoading: 'defer',
+    scriptLoading: defaultScriptLoadingStrategy,
     inject: inject
   };
 
@@ -56,4 +106,14 @@ function configHtmlWebpackPlugins(plugins, {
   crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
     crossorigin: 'anonymous'
   }));
+
+  if (customScriptLoadingStrategey.enable) {
+    const currentScriptLoadingStrategy = getScriptLoadingStrategy(customScriptLoadingStrategey.options);
+
+    if ((0, _utils.getTypeOf)(currentScriptLoadingStrategy) === 'object') {
+      plugins.push(new _CustomScriptLoadingStrategyPlugin.default({
+        scriptLoadingStategey: currentScriptLoadingStrategy
+      }));
+    }
+  }
 }

package/lib/pluginUtils/getDevPlugins.js

@@ -62,7 +62,8 @@ const getDevPlugins = (options, publicPath) => {
         mode
       },
       htmlTemplate: {
-        inject
+        inject,
+        customScriptLoadingStrategey
       },
       crossorigin
     },
@@ -161,15 +162,15 @@ const getDevPlugins = (options, publicPath) => {
   pluginsArr.push(new _lodashWebpackPlugin.default({
     collections: true,
     shorthands: true
-  }));
-  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
-    enableChunkHash: false,
-    folder,
-    minify: false,
-    inject,
-    crossorigin,
-    hasEFC
-  });
+  })); // configHtmlWebpackPlugins(pluginsArr, {
+  //   enableChunkHash: false,
+  //   folder,
+  //   minify: false,
+  //   inject,
+  //   crossorigin,
+  //   hasEFC,
+  //   customScriptLoadingStrategey,
+  // });
 
   if (hasEFC) {
     pluginsArr.push(new _plugins.EFCPlugin({

package/lib/pluginUtils/getProdPlugins.js

@@ -80,7 +80,8 @@ const getProdPlugins = (options, publicPath = '') => {
   } = options.app;
   const {
     inject,
-    minify: minifyHtmlOptions
+    minify: minifyHtmlOptions,
+    customScriptLoadingStrategey
   } = htmlTemplate;
   const {
     i18n
@@ -178,6 +179,7 @@ const getProdPlugins = (options, publicPath = '') => {
     folder,
     inject,
     minify: minifyHtmlOptions,
+    customScriptLoadingStrategey,
     crossorigin,
     hasEFC
   });

package/lib/plugins/CustomScriptLoadingStrategyPlugin.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const pluginName = 'CustomScriptLoadingStrategyPlugin';
+
+class CustomScriptLoadingStrategyPlugin {
+  constructor({
+    scriptLoadingStategey
+  } = {}) {
+    this.scriptLoadingStrategy = scriptLoadingStategey;
+    this.tagNamesToMatch = ['script'];
+  }
+
+  getFileNameFromTagSrc(src) {
+    const fileNameArr = src.split('/');
+    return fileNameArr[fileNameArr.length - 1];
+  }
+
+  addAttributestToTag(tag, attributes) {
+    tag.attributes = Object.assign({}, tag.attributes, attributes);
+  }
+
+  matchFileName(tag, fileName) {
+    return fileName.test(this.getFileNameFromTagSrc(tag.attributes.src));
+  }
+
+  blockingStrategy(tag) {
+    delete tag.attributes.defer;
+    delete tag.attributes.async;
+  }
+
+  deferStrategy(tag) {
+    delete tag.attributes.async;
+  }
+
+  asyncStrategy(tag) {
+    delete tag.attributes.defer;
+  }
+
+  moduleStrategy(tag) {
+    this.deferStrategy(tag);
+  }
+
+  matchStrategy(scriptLoadingStrategy, tag) {
+    if (scriptLoadingStrategy === 'blocking') {
+      this.blockingStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'defer') {
+      this.deferStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'async') {
+      this.asyncStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'module') {
+      this.moduleStrategy(tag);
+    }
+  }
+
+  matchAndApplyCustomLoadingStrategyToScripts(tags) {
+    Object.keys(this.scriptLoadingStrategy).forEach(scriptLoadingStrategy => {
+      const filesToMatch = this.scriptLoadingStrategy[scriptLoadingStrategy];
+      tags.forEach(tag => {
+        if (this.tagNamesToMatch.includes(tag.tagName) && tag.attributes.src) {
+          const isFileMatch = filesToMatch.some(fileName => this.matchFileName(tag, fileName));
+
+          if (isFileMatch) {
+            this.matchStrategy(scriptLoadingStrategy, tag);
+            this.addAttributestToTag(tag, {
+              [scriptLoadingStrategy]: true
+            });
+          }
+        } // filesToMatch.forEach(fileName => {
+        //   if (!this.matchFileName(tag, fileName)) {
+        //     return;
+        //   }
+        //   this.matchStrategy(scriptLoadingStrategy, tag);
+        //   this.addAttributestToTag(tag, fileName, {
+        //     [scriptLoadingStrategy]: true
+        //   });
+        // });
+
+      });
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync(pluginName, (data, callback) => {
+        const tags = [...data.bodyTags, ...data.headTags];
+        this.matchAndApplyCustomLoadingStrategyToScripts(tags);
+        callback(null, data);
+      });
+    });
+  }
+
+}
+
+exports.default = CustomScriptLoadingStrategyPlugin;

package/lib/plugins/EventsHandlingPlugin.js

@@ -18,10 +18,10 @@ class EventsHandlingPlugin {
       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 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 = () =>  { 
+          linkTag.onerror = linkTag.onload = null;
           resolve();
-          linkTag.onerror = linkTag.onload = null
         };`);
           return replacedSourceStr;
         });

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -229,8 +229,8 @@ class I18nDownlodLogic {
       }
       var scriptTag = document.createElement("script");
       scriptTag.onload = () =>  { 
-        resolve();
         scriptTag.onerror = scriptTag.onload = null;
+        resolve();
       };
       scriptTag.onerror = function(event) {
         scriptTag.onerror = scriptTag.onload = null;

package/lib/schemas/index.js

@@ -15,6 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
+  alias: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -322,7 +323,11 @@ var _default = {
     },
     htmlTemplate: {
       minify: null,
-      inject: true
+      inject: true,
+      customScriptLoadingStrategey: {
+        enable: false,
+        options: null
+      }
     },
     removePropTypes: false,
     customChunksBaseConfig: null,

package/lib/utils/index.js

@@ -167,6 +167,20 @@ var _getComponents = _interopRequireDefault(require("./getComponents"));
 
 var _ssTestHack = _interopRequireDefault(require("./ssTestHack"));
 
+var _typeCheck = require("./typeCheck");
+
+Object.keys(_typeCheck).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _typeCheck[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typeCheck[key];
+    }
+  });
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-duplicate-imports

package/lib/utils/typeCheck.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTypeOf = getTypeOf;
+
+function getTypeOf(value) {
+  return Object.prototype.toString.call(value).split(/\s/)[1].replace(/\]/, '').toLowerCase();
+}