@zohodesk/react-cli 1.1.11-exp.3 → 1.1.11-exp.4

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/promise.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+const terser = require('terser');
+
+test('remove dead codes and minimize the parameter names', () => {
+  const code = `
+  const promise = new Promise((resolve, reject) => {
+  const res = true;
+  if (res) {
+    resolve('Resolved!');
+  }
+  else {
+    reject(Error('Error'));
+  }
+  });
+  promise.then((res) => console.log(res), (err) => console.error(err));
+   `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const promise=new Promise(((o,e)=>{o("Resolved!")}));promise.then((o=>console.log(o)),(o=>console.error(o)));');
+  });
+});
+test('remove dead codes and minimize the variables', () => {
+  const code = `
+
+    const msg = async function () { 
+    const msg = await helloWorld();
+    console.log('message',msg);
+    }
+    const msg1 = async () => { 
+    const msg = await helloWorld();
+    console.log('message',msg);
+    }
+    msg();
+    msg1(); 
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const msg=async function(){const s=await helloWorld();console.log("message",s)},msg1=async()=>{const s=await helloWorld();console.log("message",s)};msg(),msg1();');
+  });
+});
+test('minimize the set timeout timer', () => {
+  const code = `
+    function helloWorld() {
+    return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('Hello World!');
+    }, 2000);
+    });
+    }
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('function helloWorld(){return new Promise((e=>{setTimeout((()=>{e("Hello World!")}),2e3)}))}');
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/removeCommentsAndEmptySpace.test.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const terser = require('terser');
+
+test('removeComments', () => {
+  const code = `
+    function add(a, b) {
+       return a + b;
+    }`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('function add(n,d){return n+d}');
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/removeUnusedStrings.test.js

@@ -0,0 +1,14 @@
+"use strict";
+
+const terser = require('terser');
+
+test('removeUnusedStrings', () => {
+  const code = `
+    let age = 7;
+
+    'Tommy is ' + age + ' years old.';;
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let age=7;');
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/variableDeclaration.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const terser = require('terser');
+
+describe('variable declaration', () => {
+  it('check let statement', () => {
+    const code = `
+        let juiceCount = 5;
+        let juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let juiceCount=5,juiceName="apple";');
+    });
+  });
+  it('check var statement', () => {
+    const code = `
+        var juiceCount = 5;
+        var juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('var juiceCount=5,juiceName="apple";');
+    });
+  });
+  it('check const statement', () => {
+    const code = `
+        const juiceCount = 5;
+        const juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('const juiceCount=5,juiceName="apple";');
+    });
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/entryConfig.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.entryConfig = entryConfig;
+
+var _constants = require("../../constants");
+
+function entryConfig(options) {
+  const {
+    hasEFC,
+    entryFile,
+    entryPointName
+  } = options.efc;
+  const {
+    entryFile: mainEntry
+  } = options.app;
+  const entry = {
+    main: (0, _constants.joinWithAppPath)(mainEntry)
+  };
+
+  if (hasEFC && entryFile) {
+    entry[entryPointName] = (0, _constants.joinWithAppPath)(entryFile);
+  }
+
+  return entry;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/externals.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.externals = externals;
+
+// eslint-disable-next-line no-unused-vars
+function externals(options) {
+  return {
+    ZC: '$ZC'
+  };
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/getCSSLoaders.js

@@ -7,24 +7,21 @@ exports.getCSSLoaders = getCSSLoaders;
 
 var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _getCssLoaderOptions = require("./loaderConfigs/getCssLoaderOptions");
+var _configPostCssLoader = require("./loaderConfigs/configPostCssLoader");
 
-var _postcssPlugins = require("./postcssPlugins");
+var _getCssLoaderOptions = require("./loaderConfigs/getCssLoaderOptions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getCSSLoaders(options) {
-  const neededPostCssPlugins = (0, _postcssPlugins.postcssPlugins)(options);
   const cssLoaderOptions = (0, _getCssLoaderOptions.getCssLoaderOptions)(options);
-  return [_miniCssExtractPlugin.default.loader, {
-    loader: 'css-loader',
-    options: cssLoaderOptions
-  }, neededPostCssPlugins.length && {
-    loader: 'postcss-loader',
+  return [{
+    loader: _miniCssExtractPlugin.default.loader,
     options: {
-      postcssOptions: {
-        plugins: neededPostCssPlugins
-      }
+      publicPath: '../'
     }
-  }].filter(Boolean);
+  }, {
+    loader: 'css-loader',
+    options: cssLoaderOptions
+  }, (0, _configPostCssLoader.configPostCssLoader)(options)].filter(Boolean);
 }

package/packages/client_build_tool/lib/shared/bundler/webpack/getSourceMapType.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.devtoolConfig = devtoolConfig;
+
+function devtoolConfig(options) {
+  return options.devtool;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/assetLoaders.js

@@ -8,7 +8,5 @@ exports.assetLoaders = assetLoaders;
 var _configsAssetsLoaders = require("./configsAssetsLoaders");
 
 function assetLoaders(options) {
-  // const { enableChunkHash } = options;
-  // const nameTemplate = createNameTemplate(enableChunkHash);
   return [(0, _configsAssetsLoaders.configImageLoader)(options), (0, _configsAssetsLoaders.configFontLoader)(options), (0, _configsAssetsLoaders.configSVGLoader)(options), (0, _configsAssetsLoaders.configAudioLoader)(options), (0, _configsAssetsLoaders.configVideoLoader)(options)];
 }

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/babelLoaderConfig.js

@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.babelLoaderConfig = babelLoaderConfig;
-const supportedBrowserVersions = ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions'];
+
+var _babelWebConfig = require("../../../babel/babelWebConfig");
 
 function babelLoaderConfig(options) {
+  const babelConfig = (0, _babelWebConfig.babelWebConfig)(options);
   return {
     loader: 'babel-loader',
-    options: {
-      presets: [[require.resolve('@babel/preset-env'), {
-        modules: false,
-        useBuiltIns: 'usage',
-        corejs: 3,
-        targets: {
-          browsers: supportedBrowserVersions
-        }
-      }], require.resolve('@babel/preset-react')],
+    options: { ...babelConfig,
       cacheDirectory: true
     }
   };

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/checkIsPatternsMatchFilename.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIsPatternsMatchFilename = checkIsPatternsMatchFilename;
+exports.modifyAsExclude = modifyAsExclude;
+
+var _ignore = _interopRequireDefault(require("ignore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** 
+  @param {Array<String>} patterns: 
+  // include src folder, include deskapp folder, exclude node modules
+  [
+    "src",
+    "deskapp",
+    "!node_modules"
+  ]
+  @param {String} filename : 
+  filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+
+  @return {Boolean} : true or false
+*/
+function checkIsPatternsMatchFilename(patterns, filename) {
+  if (typeof patterns === 'undefined') {
+    return true;
+  }
+
+  if (typeof patterns === 'function') {
+    return patterns(filename);
+  }
+
+  if (typeof patterns === 'string') {
+    // eslint-disable-next-line no-param-reassign
+    patterns = [patterns];
+  }
+
+  if (Array.isArray(patterns)) {
+    return patterns.length ? (0, _ignore.default)({
+      allowRelativePaths: true
+    }).add(patterns).ignores(filename) : true;
+  } // eslint-disable-next-line no-throw-literal
+
+
+  throw `UnKnown pattern Error ${JSON.stringify(patterns)}`;
+}
+
+function modifyAsExclude(patterns) {
+  return patterns.map(pattern => pattern[0] === '!' ? pattern.slice(1) : `!${pattern}`);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/configPostCssLoader.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configPostCssLoader = configPostCssLoader;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _filterPluginsAllowedForSpecficFile = require("../../../postcss/filterPluginsAllowedForSpecficFile");
+
+var _getAllowedPostCssPlugins = require("../../../postcss/getAllowedPostCssPlugins");
+
+var _constants = require("../../../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import EmptyPlugin from '../custom_postcss_plugins/EmptyPlugin';
+function configPostCssLoader(options) {
+  const pluginsOptions = options.css.plugins;
+  const enabledPlugins = (0, _filterPluginsAllowedForSpecficFile.getEnabledPlugins)(pluginsOptions);
+  const getAllowedPostCssPlugins = (0, _getAllowedPostCssPlugins.postcssPluginGetter)(options);
+
+  function configPostCssPlugins(params) {
+    const filename = _path.default.relative(_constants.appPath, params.resourcePath);
+
+    const allowedPostCssPlugins = getAllowedPostCssPlugins(filename);
+    return allowedPostCssPlugins;
+  }
+
+  return enabledPlugins.length && {
+    loader: 'postcss-loader',
+    options: {
+      postcssOptions: configPostCssPlugins
+    }
+  };
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/configsAssetsLoaders.js

@@ -47,14 +47,14 @@ function createAssetLoader({
 
   return conf;
 }
-/**
- * @typedef {Object} LoaderConfig
- * @property {Number} enableChunkHash
+/**
+ * @typedef {Object} LoaderConfig
+ * @property {Number} enableChunkHash
  */
 
-/**
- * @param {LoaderConfig} options
- * @returns
+/**
+ * @param {LoaderConfig} options
+ * @returns
  */
 
 
@@ -95,44 +95,44 @@ function configVideoLoader(options) {
     nameTemplate: (0, _nameTemplates.nameTemplates)('video', options)
   });
 }
-/*
-export function createNameTemplate(enableChunkHash) {
-  const ext = `${enableChunkHash ? ".[hash:20]" : ""}.[ext]`;
-  return `[name]${ext}`;
-}
-
-export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
-  const nameTemplate = createNameTemplate(enableChunkHash);
-  return [
-    configImageLoader(nameTemplate),
-    configFontLoader(nameTemplate),
-    configSVGLoader(nameTemplate),
-    configAudioLoader(nameTemplate)
-  ];
-}
+/*
+export function createNameTemplate(enableChunkHash) {
+  const ext = `${enableChunkHash ? ".[hash:20]" : ""}.[ext]`;
+  return `[name]${ext}`;
+}
+
+export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
+  const nameTemplate = createNameTemplate(enableChunkHash);
+  return [
+    configImageLoader(nameTemplate),
+    configFontLoader(nameTemplate),
+    configSVGLoader(nameTemplate),
+    configAudioLoader(nameTemplate)
+  ];
+}
 */
 
-/*
-export function createLoaderOptionObject(
-  loaderName,
-  nameTemplate,
-  fallback,
-  limit = 1000
-) {
-  return {
-    loader: loaderName,
-    options: {
-      limit,
-      name: nameTemplate,
-      fallback
-    }
-  };
-}
-
-function configLoaderObject(filter, loaderAndOptions) {
-  return {
-    test: filter,
-    use: loaderAndOptions
-  };
-}
+/*
+export function createLoaderOptionObject(
+  loaderName,
+  nameTemplate,
+  fallback,
+  limit = 1000
+) {
+  return {
+    loader: loaderName,
+    options: {
+      limit,
+      name: nameTemplate,
+      fallback
+    }
+  };
+}
+
+function configLoaderObject(filter, loaderAndOptions) {
+  return {
+    test: filter,
+    use: loaderAndOptions
+  };
+}
 */

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/cssClassNameGenerate.js

@@ -7,52 +7,38 @@ exports.default = void 0;
 
 var _crypto = require("crypto");
 
-var _os = _interopRequireDefault(require("os"));
-
 var _path = _interopRequireDefault(require("path"));
 
+var _checkIsPatternsMatchFilename = require("./checkIsPatternsMatchFilename");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function getHash(str) {
-  return (0, _crypto.createHash)('md5').update(str).digest();
+function getHash(str, length) {
+  return (0, _crypto.createHash)('md5').update(str).digest('hex').slice(0, length);
 }
 
-const isWindows = _os.default.platform().toLowerCase() === 'win32';
-
-const isFileEligibleToHashClass = (resourcePath, machineBasedPatterns) => {
-  if (!resourcePath.includes('node_modules')) {
-    return false;
-  }
+const defaultSelectorBlob = '[prefix]-[filename]-[local]';
 
-  return machineBasedPatterns.some(p => resourcePath.includes(p));
-};
+function getSuitableBlob(customizations = [], filename) {
+  const custom = customizations.find(({
+    enable,
+    patterns
+  }) => enable && (0, _checkIsPatternsMatchFilename.checkIsPatternsMatchFilename)(patterns, filename));
+  return custom && custom.blob || defaultSelectorBlob;
+}
 
 var _default = options => {
   const {
     classNameOptions
   } = options.css;
   const {
-    cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    customizations
   } = classNameOptions;
-  let canApplyHashClassName = null;
-
-  if (cssHashSelectors) {
-    const {
-      filenames,
-      packages
-    } = cssHashSelectors;
-    const machineBasedPatterns = isWindows ? packages.map(e => e.replace(/\//g, '\\')) : packages;
-
-    canApplyHashClassName = function canApplyHashClassName(resourcePath, cleanFileName) {
-      return isFileEligibleToHashClass(resourcePath, machineBasedPatterns) || filenames.indexOf(cleanFileName);
-    };
-  }
-
   return (context, localIdentName, localName) => {
-    // NOTE:  in build macine we use date as folder path.
+    // NOTE:  in build machine we use date as folder path.
     // So every time we create new build there is path will alway different
-    // in order to minmaze that problem we try in relative path;
+    // So, in order to minimize that problem we try in relative path;
     // console.log('context.resourcePath', context.resourcePath, context);
     // let contextResourcePath = context.resourcePath;
     const {
@@ -62,21 +48,11 @@ var _default = options => {
 
     const relativePath = _path.default.relative(rootContext, resourcePath);
 
-    if (resourcePath.endsWith('.plain.css')) {
-      return localName;
-    }
-
     const fileNameWithoutExt = _path.default.parse(relativePath).name;
 
-    const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); // css file has casesensitive selector issue so can't toLowerCase
-    // let local = localName.toLowerCase()
-
-    if (canApplyHashClassName && canApplyHashClassName(resourcePath, cleanFileName)) {
-      const h = getHash(`${relativePath}-${localName}`, 10);
-      return `${classNamePrefix}${h}`;
-    }
-
-    return `${classNamePrefix}-${cleanFileName}-${localName}`;
+    const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
+    const suitableBlob = getSuitableBlob(customizations, resourcePath);
+    return suitableBlob.replaceAll('[local]', localName).replaceAll('[prefix]', classNamePrefix).replaceAll('[filename]', cleanFileName).replaceAll('[hash]', getHash(`${relativePath}-${localName}`, 10));
   };
 };
 

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/getCssLoaderOptions.js

@@ -10,11 +10,9 @@ var _cssClassNameGenerate = _interopRequireDefault(require("./cssClassNameGenera
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getCssLoaderOptions(options) {
-  // const { classNameOptions } = options.css;
   const cssLoaderOptions = {
     importLoaders: 1,
     modules: {
-      // localIdentName: classNameOptions.classNameBlob,
       getLocalIdent: (0, _cssClassNameGenerate.default)(options)
     },
     sourceMap: true

package/packages/client_build_tool/lib/shared/bundler/webpack/loaders/workerLoader.js

@@ -77,14 +77,14 @@ function pitch(request) {
     globalObject: 'self'
   };
   workerContext.compiler = this._compilation.createChildCompiler(`worker-loader ${request}`, workerContext.options);
-  /* 
-  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
-  
-  if (compilerOptions.externals) {
-    new ExternalsPlugin(
-      getExternalsType(compilerOptions),
-      compilerOptions.externals
-    ).apply(workerContext.compiler);
+  /* 
+  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
+  
+  if (compilerOptions.externals) {
+    new ExternalsPlugin(
+      getExternalsType(compilerOptions),
+      compilerOptions.externals
+    ).apply(workerContext.compiler);
   } */
 
   new _SingleEntryPlugin.default(this.context, `!!${request}`, _path.default.parse(this.resourcePath).name).apply(workerContext.compiler);

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

@@ -9,6 +9,8 @@ var _nameTemplates = require("./common/nameTemplates");
 
 var _hashUtils = require("./custom_plugins/I18nSplitPlugin/utils/hashUtils");
 
+var _configCSSMinifierPlugin = require("./pluginConfigs/configCSSMinifierPlugin");
+
 var _splitChunksConfig = require("./splitChunksConfig");
 
 function optimizationConfig(options) {
@@ -20,17 +22,19 @@ function optimizationConfig(options) {
   } = options.i18nChunkSplit;
   const i18nChunkFilename = (0, _nameTemplates.nameTemplates)('i18nchunkjs', options);
   const chunkFilenameHasContentHash = (0, _hashUtils.hasContentHash)(i18nChunkFilename);
-  /**
-   * NOTE: we only need multiple runtime files when we use contentHash 
-   * other wise we don't need multiple runtime files based locale
-   * that's why  we added chunkSplitEnable && chunkFilenameHasContentHash logic 
+  /**
+   * NOTE: we only need multiple runtime files when we use contentHash
+   * other wise we don't need multiple runtime files based locale
+   * that's why  we added chunkSplitEnable && chunkFilenameHasContentHash logic
    */
 
   const suffix = // chunkSplitEnable ? '_[locale]' : '';
   chunkSplitEnable && chunkFilenameHasContentHash ? '_[locale]' : '';
-  const char = changeRuntimeChunkChar ? '-' : '~';
+  const char = changeRuntimeChunkChar;
   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),
     moduleIds: 'named',
     runtimeChunk: {
       name: entrypoint => `runtime${char}${entrypoint.name}${suffix}`

package/packages/client_build_tool/lib/shared/bundler/webpack/pluginConfigs/configBundleAnalyzer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configBundleAnalyzer = configBundleAnalyzer;
+
+var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
+
+var _modeUtils = require("../common/modeUtils");
+
+/* eslint-disable no-use-before-define */
+function configBundleAnalyzer(options) {
+  const mode = (0, _modeUtils.getWebpackMode)(options);
+
+  if ((0, _modeUtils.isProductionMode)(mode) && options.bundleAnalyze) {
+    const bundleAnalyzerOptions = getBundleAnalyzerOptions(options);
+    return new _webpackBundleAnalyzer.BundleAnalyzerPlugin(bundleAnalyzerOptions);
+  }
+
+  return null;
+} // eslint-disable-next-line no-unused-vars
+
+
+function getBundleAnalyzerOptions(options) {
+  return {
+    analyzerMode: 'static',
+    generateStatsFile: true,
+    openAnalyzer: false,
+    statsOptions: {
+      source: false,
+      normal: true,
+      chunks: false,
+      chunkGroups: false,
+      module: false,
+      assets: true,
+      assetsSort: 'name'
+    }
+  };
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configCSSMinifierPlugin = configCSSMinifierPlugin;
+
+var _cssMinimizerWebpackPlugin = _interopRequireDefault(require("css-minimizer-webpack-plugin"));
+
+var _modeUtils = require("../common/modeUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import UglifyCSSPlugin from '../custom_plugins/UglifyCSSPlugin';
+// eslint-disable-next-line no-unused-vars
+function configCSSMinifierPlugin(options) {
+  if ((0, _modeUtils.isNotProduction)(options)) {
+    return null;
+  } // return null;
+  // return new UglifyCSSPlugin();
+
+
+  return new _cssMinimizerWebpackPlugin.default();
+}