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

package/README.md

@@ -59,28 +59,6 @@ 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

@@ -23,7 +23,7 @@ const {
 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('../utils/addModulePathAlias')];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
   resolvedPlugins.push(require.resolve(plugin));

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

@@ -24,7 +24,7 @@ const {
 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('../utils/addModulePathAlias')];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
   resolvedPlugins.push(require.resolve(plugin));

package/lib/configs/resolvers.js

@@ -21,6 +21,7 @@ function moduleResolver(options) {
     moduleResolvePath,
     disableES5Transpile
   } = options.app;
+  const customAlias = options.app.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 = Object.assign({}, _libAlias.libAlias, customAlias);
   return {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),
-    alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
+    alias: disableES5Transpile ? totalAlias : {} // alias: { ...libAlias, ...clientDependenies }
 
   };
 }

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

@@ -103,10 +103,7 @@ module.exports = {
     //     exclude: /\/smap/
     //   })
     // ],
-    moduleIds: 'named',
-    usedExports: true,
-    // innerGraph: true, // this property present on webpack 5
-    sideEffects: true
+    moduleIds: 'named'
   },
   stats: {
     children: false,

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,40 +112,25 @@ 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);
       }
 
-      const url = window.URL || window.webkitURL;
-      const blobUrl = url.createObjectURL(blob);
-      this.workerInstance = new Worker(blobUrl);
-      return this.workerInstance;
+      let url = window.URL || window.webkitURL;
+      let blobUrl = url.createObjectURL(blob);
+      let worker = new Worker(blobUrl);
+      return worker;
     }
 
-    return cb(null, `const workerObj ={\n
-      workerInstance: null, \n
+    return cb(null, `${options.esModule ? 'export default' : 'module.exports ='} {\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,10 +13,6 @@ 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 = {
@@ -30,47 +26,6 @@ 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 'defer';
-}
 
 function configHtmlWebpackPlugins(plugins, {
   enableChunkHash = false,
@@ -78,8 +33,7 @@ function configHtmlWebpackPlugins(plugins, {
   inject,
   crossorigin,
   hasEFC,
-  minify: minifyHtmlOptions = false,
-  customScriptLoadingStrategey = {}
+  minify: minifyHtmlOptions = false
 }) {
   const optionsHtmlWebpack = {
     chunksSortMode: 'none',
@@ -102,14 +56,4 @@ 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,8 +62,7 @@ const getDevPlugins = (options, publicPath) => {
         mode
       },
       htmlTemplate: {
-        inject,
-        customScriptLoadingStrategey
+        inject
       },
       crossorigin
     },
@@ -169,8 +168,7 @@ const getDevPlugins = (options, publicPath) => {
     minify: false,
     inject,
     crossorigin,
-    hasEFC,
-    customScriptLoadingStrategey
+    hasEFC
   });
 
   if (hasEFC) {

package/lib/pluginUtils/getProdPlugins.js

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

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 = () =>  { 
-        scriptTag.onerror = scriptTag.onload = null;
         resolve();
+        scriptTag.onerror = scriptTag.onload = null;
       };
       scriptTag.onerror = function(event) {
         scriptTag.onerror = scriptTag.onload = null;

package/lib/schemas/index.js

@@ -125,6 +125,7 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    alias: {},
     moduleResolvePath: {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
@@ -322,11 +323,7 @@ var _default = {
     },
     htmlTemplate: {
       minify: null,
-      inject: true,
-      customScriptLoadingStrategey: {
-        enable: false,
-        options: null
-      }
+      inject: true
     },
     removePropTypes: false,
     customChunksBaseConfig: null,

package/lib/utils/addModulePathAlias.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _getOptions = _interopRequireDefault(require("./getOptions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const options = (0, _getOptions.default)();
+const alias = options.app.alias;
+
+module.exports = () => ({
+  visitor: {
+    ImportDeclaration(path) {
+      const source = path.node.source.value;
+      const aliasName = Object.keys(alias);
+      aliasName.forEach(name => {
+        if (source.includes(name)) {
+          path.node.source.value = source.replace(name, alias[name]);
+        }
+      });
+    }
+
+  }
+});

package/lib/utils/index.js

@@ -167,20 +167,6 @@ 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/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.22-exp.1",
+  "version": "1.1.22",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.22-exp.1",
+      "version": "1.1.22",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.22-exp.1",
+  "version": "1.1.22-exp.2",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",

package/lib/plugins/CustomScriptLoadingStrategyPlugin.js

@@ -1,108 +0,0 @@
-"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;
-  }
-
-  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 (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/utils/typeCheck.js

@@ -1,10 +0,0 @@
-"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();
-}