@zohodesk/react-cli 0.0.1-exp.162.2 → 0.0.1-exp.162.3

package/.eslintrc.js

@@ -108,6 +108,8 @@ let commonConfigs = {
     'comma-dangle': [logLevel],
     'comma-spacing': [logLevel],
     'func-call-spacing': [logLevel],
+    // reference to this https://stackoverflow.com/questions/56337176/prettier-and-eslint-indents-not-working-together
+    // when using prettier, we should disable eslint's indent rule
     indent: ['off', 2, { SwitchCase: 1 }],
     'jsx-quotes': [logLevel, 'prefer-single'],
     'key-spacing': [logLevel],
@@ -140,8 +142,6 @@ let commonConfigs = {
     'prefer-template': [logLevel],
     'prefer-rest-params': [logLevel],
     'no-useless-constructor': [logLevel],
-    'no-duplicate-imports': [logLevel],
-    'array-callback-return': [logLevel],
     'no-use-before-define': [logLevel],
 
     'react/default-props-match-prop-types': [logLevel],
@@ -152,7 +152,6 @@ let commonConfigs = {
     'react/no-this-in-sfc': [logLevel],
     'react/no-will-update-set-state': [logLevel],
     'react/no-unused-state': [logLevel],
-    'react/no-will-update-set-state': [logLevel],
     // 'react/require-default-props': [logLevel],
     // 'react/require-optimization': [logLevel],
 
@@ -171,9 +170,6 @@ let commonConfigs = {
     'react/jsx-no-duplicate-props': [logLevel],
     'react/no-deprecated': [logLevel],
     'react/no-children-prop': [logLevel],
-    'react/no-unused-state': [logLevel],
-    'react/destructuring-assignment': [logLevel],
-    'react/default-props-match-prop-types': [logLevel],
 
     'css-modules/no-unused-class': [logLevel, { camelCase: true }],
     'css-modules/no-undef-class': [logLevel, { camelCase: 'only' }]

package/README.md

@@ -2,6 +2,29 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-beta.164
+
+- typo fix
+
+# 0.0.1-beta.163
+
+- **Issue Fix:-**
+
+  - if git not installed react-cli throws error for any command due to `getCurrentBranch` in `shemas/index.js` now fixed
+  - jest test cases not runnig issue fix (typo moduleNameMapper => libAlias)
+
+- **Features :-**
+  - feature added for pre process logic
+    - tailer made requirement for preprocess, just write node js file
+    - mention file in `"react-cli" => "preprocess" => "runner"`
+  - option parse logic added for react-cli (exprimental)
+  - `--stop_nodemon` usally preprocessor run in `nodemon` so to stop it this option is provided
+
+# 0.0.1-exp.162.3
+
+- **Optimazation:-**
+  - Split chunks Optimization check
+
 # 0.0.1-exp.162.2
 
 - **Optimazation:-**
@@ -20,6 +43,10 @@ A CLI tool for build modern web application and libraries
     - mention file in `"react-cli" => "preprocess" => "runner"`
   - option parse logic added for react-cli (exprimental)
 
+# 0.0.1-beta.162
+
+- @zohodesk/datetimejs package updated to beta.8
+
 # 0.0.1-beta.161
 
 - **Features :-**
@@ -51,7 +78,7 @@ A CLI tool for build modern web application and libraries
   - feature added for efc `cdnStatement`
 - Issue fixes:-
   - css classname hash change issue fix
-  - debug package conflit issue fix in nock in (react-cli test)npm i @zohodesk/virtualizer
+  - debug package conflit issue fix in nock in (react-cli test)
   - manifest.json css file name correction issue for rtl and ltr
 
 # 0.0.1-beta.160

package/bin/cli.js

@@ -1,28 +1,30 @@
 #!/usr/bin/env node
 
-let path = require('path');
-let os = require('os');
-let { spawnSync, spawn } = require('child_process');
-let { getOptions } = require('../lib/utils/index.js');
+const path = require('path');
+const os = require('os');
+const { existsSync } = require('fs');
+const { spawnSync, spawn } = require('child_process');
+const { getOptions } = require('../lib/utils/index.js');
 
-let { log } = require('../lib/utils');
+const { log } = require('../lib/utils');
 //initPreCommitHook();
 
-let options = getOptions();
+const options = getOptions();
 
-let { esLint: esLintOptions } = options || {};
-let {
+const { esLint: esLintOptions } = options || {};
+const { preprocess } = options;
+const {
   ignoreFilePaths: esLintIgnorePaths,
   fix: esLintFix,
   isCI: isCI,
   reportPath: reportPath
 } = esLintOptions || {};
 
-let isWindows = os.platform().toLowerCase() === 'win32';
+const isWindows = os.platform().toLowerCase() === 'win32';
 
-let [, , option] = process.argv;
-let args = process.argv.slice(3);
-let appPath = process.cwd();
+const [, , option] = process.argv;
+const args = process.argv.slice(3);
+const appPath = process.cwd();
 
 const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
 
@@ -35,28 +37,23 @@ function getCliPath(libName) {
   return _getCliPath(libName) + suffixExt;
 }
 
-let webpack = getCliPath('webpack');
+const webpack = getCliPath('webpack');
 
-let nodemon = getCliPath('nodemon');
-let babel = getCliPath('babel');
-let propertyToJson = getCliPath('propertyToJson');
-let esLint = getCliPath('eslint');
+const nodemon = getCliPath('nodemon');
+const babel = getCliPath('babel');
+const propertyToJson = getCliPath('propertyToJson');
+const esLint = getCliPath('eslint');
 
-let preprocesserPath = options.preprocessor.runner
-  ? path.join(process.cwd(), options.preprocessor.runner)
+const preprocesserPath = preprocess.runner
+  ? path.join(process.cwd(), preprocess.runner)
   : '';
-
-// console.log(
-//   'options.app.preprocessor',
-//   options.preprocessor.runner,
-//   preprocesserPath
-// );
-if (preprocesserPath) {
+const preprocessCli = preprocess.stopNodemon ? 'node' : nodemon;
+if (preprocesserPath && existsSync(preprocesserPath)) {
   // eslint-disable-next-line default-case
   switch (option) {
     case 'start':
     case 'docs':
-      spawn(nodemon, [preprocesserPath], {
+      spawn(preprocessCli, [preprocesserPath], {
         stdio: 'inherit',
         cwd: preprocesserPath.slice(0, preprocesserPath.lastIndexOf('/') + 1)
       });
@@ -79,14 +76,14 @@ if (preprocesserPath) {
 let result;
 switch (option) {
   case 'preprocessor':
-    if (preprocesserPath) {
-      result = spawnSync(nodemon, [preprocesserPath], {
+    if (preprocesserPath && existsSync(preprocesserPath)) {
+      result = spawnSync(preprocessCli, [preprocesserPath], {
         stdio: 'inherit',
         cwd: preprocesserPath.slice(0, preprocesserPath.lastIndexOf('/') + 1)
       });
       process.exit(result.status);
     } else {
-      console.error('preProcessor not exists ');
+      console.error(`preProcessor not exists ${preprocesserPath}`);
     }
     break;
   case 'lint-setup': {
@@ -200,10 +197,11 @@ switch (option) {
     break;
 
   case 'clean':
-    args = args.map(arg => path.join(appPath, arg));
     result = spawnSync(
       'node',
-      [require.resolve('../lib/utils/clean')].concat(args),
+      [require.resolve('../lib/utils/clean')].concat(
+        args.map(arg => path.join(appPath, arg))
+      ),
       { stdio: 'inherit' }
     );
     process.exit(result.status);
@@ -263,10 +261,10 @@ switch (option) {
     result = spawnSync(
       webpack,
       [
+        // '--progress',
+        // '--profile',
         '--config',
         require.resolve('../lib/configs/webpack.prod.config.js'),
-        '--progress',
-        '--profile'
       ].concat(args),
       { stdio: 'inherit' }
     );

package/lib/common/splitChunks.js

@@ -39,22 +39,75 @@ let isReact = module => {
   } = module;
   let reactBundle = ['react', 'react-dom'];
   return userRequest && reactBundle.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
-};
+}; // let defaultChunks = {
+//   'react.vendor': {
+//     name: 'react.vendor',
+//     chunks: 'all',
+//     minChunks: 1,
+//     test: isReact,
+//     priority: -10
+//   },
+//   vendor: {
+//     name: 'vendor',
+//     chunks: 'all',
+//     minChunks: 1,
+//     test: isVendor,
+//     priority: -10
+//   },
+//   zohocharts: {
+//     chunks: 'all',
+//     minChunks: 1,
+//     test: /[\\/]node_modules[\\/]((@zohodesk|@zohocharts))[\\/]((zc-custom|d3).*)/,
+//     priority: 30,
+//     enforce: true
+//   }
+// };
+
 
 let defaultChunks = {
-  'react.vendor': {
-    name: 'react.vendor',
-    chunks: 'all',
-    minChunks: 1,
-    test: isReact,
+  vendors: {
+    // picks up everything from node_modules as long as the sum of node modules is larger than minSize
+    //test: /[\\/]node_modules[\\/]((?!react).*)[\\/]/,
+    test: isVendor,
+    name: 'vendors',
+    priority: 19,
+    enforce: true,
+    // causes maxInitialRequests to be ignored, minSize still respected if specified in cacheGroup
+    minSize: 30000 // use the default minSize
+
+  },
+  vendorsAsync: {
+    // vendors async chunk, remaining asynchronously used node modules as single chunk file
+    test: /[\\/]node_modules[\\/]((?!react).*)[\\/]/,
+    name: 'vendors.async',
+    chunks: 'async',
+    priority: 9,
+    reuseExistingChunk: true,
+    minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
+
+  },
+  react: {
+    automaticNamePrefix: 'react',
+    test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
     priority: -10
   },
-  vendor: {
-    name: 'vendor',
+  commonsAsync: {
+    // commons async chunk, remaining asynchronously used modules as single chunk file
+    name: 'commons.async',
+    minChunks: 2,
+    // Minimum number of chunks that must share a module before splitting
+    chunks: 'async',
+    priority: -10,
+    reuseExistingChunk: true,
+    //minSize: 10000  // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
+    minSize: 5000
+  },
+  zohocharts: {
     chunks: 'all',
     minChunks: 1,
-    test: isVendor,
-    priority: -10
+    test: /[\\/]node_modules[\\/]((@zohodesk|@zohocharts))[\\/]((zc-custom|d3).*)/,
+    priority: 30,
+    enforce: true
   }
 };
 let customChunksConfig = {};

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

@@ -57,9 +57,9 @@ module.exports = {
   entry: (0, _common.getEntries)(options, 'dev'),
   devtool: sourcemap,
   mode: 'development',
-  watchOptions: {
-    ignored: /node_modules.(?!@zohodesk)/
-  },
+  // watchOptions: {
+  //   ignored: /node_modules.(?!@zohodesk)/
+  // },
   output,
   stats: options.app.disableWatch ? 'errors-only' : {
     children: false

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

@@ -12,10 +12,9 @@ var _loaderUtils = require("../loaderUtils");
 
 var _libAlias = require("./libAlias");
 
-var _terserWebpackPlugin = _interopRequireDefault(require("terser-webpack-plugin"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// import TerserPlugin from 'terser-webpack-plugin';
 let options = (0, _utils.getOptions)();
 let {
   app: {
@@ -68,10 +67,6 @@ if (isDevelopment) {
 }
 
 let shouldRemovePropTypes = !isDevelopment && removePropTypes;
-const useEsbulid = false; // const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
-// const smp = new SpeedMeasurePlugin();
-// module.exports =  smp.wrap({
-
 module.exports = {
   entry: (0, _common.getEntries)(options, 'production'),
   devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
@@ -86,18 +81,21 @@ module.exports = {
     minimize: true,
     // by  default if  minimize: true in webpack minimize then webpack automaticaly add TerserPlugin,
     //  So we are overrideing it. 
-    minimizer: [new _terserWebpackPlugin.default({
-      cache: true,
-      parallel: true,
-      sourceMap: isDevelopment && enableSMap,
-      exclude: /\/smap/
-    })],
+    // minimizer: [
+    //   new TerserPlugin({
+    //     cache: true,
+    //     parallel: true,
+    //     sourceMap: isDevelopment && enableSMap,
+    //     exclude: /\/smap/
+    //   })
+    // ],
     moduleIds: 'named'
   },
   stats: {
     children: false,
     colors: true,
-    excludeAssets: /./,
+    // excludeAssets: /i18n/,
+    // excludeAssets: /./,
     warningsFilter: /\[mini-css-extract-plugin\]/
   },
   plugins: (0, _pluginUtils.getProdPlugins)(options, output.publicPath),
@@ -106,15 +104,7 @@ module.exports = {
     strictExportPresence: true,
     rules: [{
       test: /\.js$/,
-      use: [useEsbulid && {
-        loader: 'esbuild-loader',
-        options: {
-          loader: 'jsx',
-          // Remove this if you're not using JSX
-          target: 'es2015' // Syntax to compile to (see options below for possible values)
-
-        }
-      }, !useEsbulid && {
+      use: [{
         loader: 'babel-loader',
         options: {
           presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {

package/lib/pluginUtils/getProdPlugins.js

@@ -35,10 +35,7 @@ var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import { ESBuildMinifyPlugin } from 'esbuild-loader';
-const useEsbulid = false; // console.log('build is runnnig');
 // eslint-disable-next-line no-unused-vars
-
 let getProdPlugins = (options, publicPath = '') => {
   let {
     enableChunkHash,
@@ -97,7 +94,7 @@ let getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), !useEsbulid && new _plugins.UglifyCSSPlugin()].filter(Boolean);
+  }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
 
   if (enableRTLSplit) {
     plugins.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -226,11 +223,8 @@ let getProdPlugins = (options, publicPath = '') => {
   hasShadowDOM && plugins.push(new _plugins.ShadowDOMSupportPlugin());
 
   if (!isDevelopment) {
-    enableSMap && enableSMapHook && plugins.push(new _plugins.SourceMapHookPlugin()); // optimize && plugins.push(new OptimizeJSPlugin());
-    // optimize &&
-    //   plugins.push(
-    //   );
-
+    enableSMap && enableSMapHook && plugins.push(new _plugins.SourceMapHookPlugin());
+    optimize && plugins.push(new _plugins.OptimizeJSPlugin());
     plugins.push(new _plugins.ManifestPlugin({
       fileName: manifestFileName
     }));

package/lib/schemas/index.js

@@ -18,10 +18,16 @@ var _default = {
     value: null,
     cli: 'ssl_cert_url'
   },
-  preprocessor: {
+  preprocess: {
+    // This option is for tell the  react-cli which in preprocessor js file path
     runner: {
       value: '',
       cli: 'preprocessor'
+    },
+    // usally preprocessor run in nodemon for, start and docs , preprocessor
+    stopNodemon: {
+      value: false,
+      cli: 'stop_nodemon'
     }
   },
   i18n: {

package/lib/utils/getOptions.js

@@ -16,7 +16,7 @@ var _schemas = _interopRequireDefault(require("../schemas"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { argv } from 'process';
-let args = process.argv.slice(2); // console.log('argv', argv);
+const args = process.argv.slice(2); // console.log('argv', argv);
 
 const NPM_CONFIG_PREFIX = 'npm_config_'; // TODO: we have to do option parse logic little better
 // if user use react-cli stritly without using npm scripts options won't work,
@@ -62,13 +62,14 @@ function getCWD() {
   try {
     let ress = (0, _child_process.execSync)('npm bin').toString();
     let i = ress.lastIndexOf('node_modules');
-    cwd = i === -1 ? cwd : ress.slice(0, ress.lastIndexOf('node_modules'));
+    cwd = i === -1 ? cwd : ress.slice(0, i);
   } catch (error) {
     console.log(error);
   }
 
   return cwd;
-}
+} // experimental argumnet parsing logic
+
 
 args.forEach(option => {
   if (/^--./.test(option)) {
@@ -82,7 +83,7 @@ args.forEach(option => {
       value = true;
     }
 
-    key = key.replace(/-/g, '_').replace(/:/g, '_');
+    key = key.replace(/-|:/g, '_');
     processEnv[key] = value;
   }
 });
@@ -137,7 +138,8 @@ let getOptions = () => {
     userSchemas = require(packagePath)['react-cli'] || {};
   }
 
-  let options = defaulter(_schemas.default, userSchemas || {});
+  let options = defaulter(_schemas.default, userSchemas || {}); // for future may be for npm 8 edge cases
+
   options.npmVersion = getNpmVersion();
   options.cwd = getCWD();
   options.packageVersion = process.env.npm_package_version;

package/lib/utils/jsonHelper.js

@@ -45,12 +45,21 @@ let fileHandler = {
 };
 exports.fileHandler = fileHandler;
 
+const isObject = obj => obj && obj.constructor === {}.constructor;
+
+const isArray = obj => obj && obj.constructor === [].constructor; // In below funtion 
+//  this function is for concat two json  object like _.extend, 
+//  if botha array we  concat them 
+//  if  both object we use call this  function  recurcively
+//  if both differend data type we will just  assign it  
+
+
 let jsonConcate = (receiverObj, senterObj) => {
   Object.keys(senterObj).map(key => {
     if (Object.prototype.hasOwnProperty.call(receiverObj, key)) {
-      if (receiverObj[key].constructor === {}.constructor && senterObj[key].constructor === {}.constructor) {
+      if (isObject(receiverObj[key]) && isObject(senterObj[key])) {
         jsonConcate(receiverObj[key], senterObj[key]);
-      } else if (receiverObj[key].constructor === [].constructor && senterObj[key].constructor === [].constructor) {
+      } else if (isArray(receiverObj[key]) && isArray(senterObj[key])) {
         receiverObj[key] = receiverObj[key].concat(senterObj[key]);
       } else {
         receiverObj[key] = senterObj[key];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-exp.162.2",
+  "version": "0.0.1-exp.162.3",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -35,7 +35,7 @@
     "@babel/preset-env": "7.11.0",
     "@babel/preset-react": "7.10.4",
     "@babel/runtime": "7.11.2",
-    "@zohodesk/datetimejs": "1.0.0-beta.7",
+    "@zohodesk/datetimejs": "1.0.0-beta.8",
     "@zohodesk/eslint-plugin-react-performance": "1.0.3",
     "@zohodesk/eslint-plugin-zsecurity": "0.0.1-beta.4",
     "@zohodesk/normalizer": "1.0.2",
@@ -56,7 +56,6 @@
     "core-js": "3.6.5",
     "css-loader": "4.2.1",
     "debug": "4.3.3",
-    "esbuild-loader": "^2.18.0",
     "escodegen": "2.0.0",
     "eslint": "7.6.0",
     "eslint-html-reporter": "0.7.4",
@@ -101,7 +100,7 @@
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
     "react-router-redux": "4.0.8",
-    "react-test-renderer": "16.13.1",
+    "react-test-renderer": "18.0.0-rc.0",
     "react-transition-group": "2.7.1",
     "redis": "3.0.2",
     "redux": "4.0.5",
@@ -114,7 +113,6 @@
     "script-loader": "0.7.2",
     "selectn": "1.1.2",
     "simple-normalizr": "1.2.5",
-    "terser-webpack-plugin": "^1.4.3",
     "uglifycss": "0.0.29",
     "url-loader": "4.1.0",
     "velocity-react": "1.4.3",
@@ -142,8 +140,5 @@
       ],
       "@babel/react"
     ]
-  },
-  "devDependencies": {
-    "speed-measure-webpack-plugin": "^1.5.0"
   }
 }

package/eslint/NOTES.md

@@ -1,3 +0,0 @@
-Suggestions :
-
-1. 'lint-setup', 'add-lint-scripts' not need to exposed

package/eslint/mockapi.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>mock api</title>
-  </head>
-  <body>
-    <h1>We are going to see how to use mock api</h1>
-    <ul>
-      <li>
-        Step 1:-
-        you need to start the app with "react-cli"."app"."server"."hasMock" as "true" in package.json
-        <code>npm run start --app-port=9090</code>
-      </li>
-    </ul>
-  </body>
-</html>

package/eslint/mockapi.md

@@ -1,5 +0,0 @@
-# We are going to see how to use `Mock api`
-
-- Step 1:-
-  you need to start the app with **"react-cli"."app"."server"."hasMock"** as `true` and **"react-cli"."app"."server"."hasMock"** as `true` in package.json <code>npm run start --app-port=9090</code>
-- Step 2:- you need to start the app with **"react-cli"."app"."server"."hasMock"** as `true` in package.json <code>npm run start --app-port=9090</code>