@zohodesk/react-cli 0.0.1-exp.176.4 → 0.0.1-exp.178.2

package/README.md

@@ -2,22 +2,104 @@
 
 A CLI tool for build modern web application and libraries
 
-# 0.0.1-exp.176.4
+# Installation
 
-React and React DOM version 18 and splitchunks config
+Below Steps:-
+
+> `npm i -g @zohodesk/react-cli`
+
+# Usage
+
+## Step 1
+
+> `mkdir <your-project-folder> && cd mkdir <your-project-folder>`
+
+## Step 2
+
+- create `package.json` file
+- add this to your `package.json`
+
+```json
+{
+  "scripts": {
+    "start": "react-cli start",
+    "build": "react-cli build"
+  }
+}
+```
+
+## Step 3
+
+- create below files
+- `src/index.js`
+- `src/index.html`
+
+## Step 4
+
+Now to run app
+
+> `npm run start`
+
+---
+
+# Change Logs
+
+
+# 0.0.1-exp.178.2
+
+**Changes:**
+
+- File support added for `.webm` for `docs`, `dev` and `prod` mode
+
+# 0.0.1-exp.178.1
+
+**Breaking Changes:**
+
+- We have remove ssl certificate for security reasons.  
+  So default https server won't run.  
+  In order to make it work as before you  need to specify two things
+  1. install `@zohodesk-private/client_dev_cert`
+  2.  `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
+  unless configaration are proper this may break `start` , `docs` , `nowatchstart`.
+  So Please be carefull when you update this version or above without proper configaration.
+
+# 0.0.1-beta.177
+
+**Changes:**
+
+- We have added extra new Error option `MULTIPLE_OCCURANCES` support for **convert px to custom variables**.
+- In case css --variables are not assigned an error will be thrown and logged in `.cli/logs/unassignedVariables.log`. The unassigned variables can be manually assigned in `variableMapping.json` through two keys :
+  - `changes` : for the variables that have to be converted, manual values can be added ( eg. "--wms_height": "height" )
+  - `ignore` : for the variables that do not have to be considered, they can be added as keys with some value in `ignore` key (eg. "--gc_widget_video_bg": "undefined"). These values will be ignored.
+- strict mode can be enabled for checking --variables in `cssVariableReplacementOptions.strictMode`
+  For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
+
+- and this version has same as `0.0.1-exp.176.12`, `0.0.1-exp.176.11`
+
+# 0.0.1-exp.176.12
+
+**Changes:**
+
+- Earlier versions of react-cli, we have been putting video files under images folder in build output, now, we have moved the video files under videos folder in build output.
+
+# 0.0.1-exp.176.11
+
+**Issue Fix:**
+
+- When we use `react-cli.app.publicPaths.callback` this option and video files import, in place of publicPath url, **null** was there instead of file type `video` issue fixed.
 
 # 0.0.1-beta.176
 
 **Features:**
 
 - we have added feature to **increase Selector weight** for all css classes in your project during build time.
-  To enable this feature you have to `react-cli.app.plugins.selectorWeight` set as `true` in **package.json**.
+  To enable this feature you have to set `react-cli.app.plugins.selectorWeight` as `true` in **package.json**.
   For more [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/SelectorWeight.md)
 - Updates to variable replacement are given :
   - css variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
   - `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
   - support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
-    For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/ValueReplaVariableConversioncer.md)
+    For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 # 0.0.1-beta.175
 
@@ -29,13 +111,9 @@ React and React DOM version 18 and splitchunks config
 
 - `minifiy` option supported for minimize index.html file in during build time. You can use this option as "react-cli.app.htmlTemplate.minify" the options are same as https://github.com/jantimon/html-webpack-plugin#minification
 
-# 0.0.1-exp.167.3
-
-Splitchunks config test
-
-# 0.0.1-beta.174
+> `npm i -g @zohodesk/react-cli`
 
-cli has been updated to fix compose issue faced when classname:hover exists and classname does not before compose
+add in you project `package.json`
 
 **Issue Fix:-**
 
@@ -60,7 +138,7 @@ cli has been updated to fix compose issue faced when classname:hover exists and
 
 Conversion for css Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
-For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/ValueReplaVariableConversioncer.md)
+For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 # 0.0.1-beta.172
 

package/docs/DevServerPort.md

@@ -0,0 +1,39 @@
+# Dev server port
+
+in react-cli dev server ports are below
+
+In summary 
+for https port will be same as given
+for http2 port will be same as given + 1
+for http  port will be same as given + 2 
+
+with https certificate `react-cli.app.sercer.httpsCerts` given value
+in default port `react-cli.app.server.port` is 9090
+
+| Protocal | Port |
+| :------: | :--: |
+|  HTTPS   | 9090 |
+|  HTTP2   | 9091 |
+|   HTTP   | 9092 |
+
+in custom port `react-cli.app.server.port` is 5050
+
+| Protocal | Port |
+| :------: | :--: |
+|  HTTPS   | 5050 |
+|  HTTP2   | 5051 |
+|   HTTP   | 5052 |
+
+with out https certificate 
+
+in custom port `react-cli.app.server.port` is 9090
+
+| Protocal | Port |
+| :------: | :--: |
+|   HTTP   | 9092 |
+
+in custom port `react-cli.app.server.port` is 5050
+
+| Protocal | Port |
+| :------: | :--: |
+|   HTTP   | 5052 |

package/docs/VariableConversion.md

@@ -5,18 +5,27 @@
 Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
 **Features:** 
-  below features are added form `0.0.1-beta.173`
+# Features below are added form `0.0.1-beta.173`
 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
 2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
 4. To enable specific errors in the error log generation / error display on console, `DECLARATION_IGNORED`(for ignoring that particular line / declaration),`UNIT_ERROR` (when the Unit doesnt match the available units for the property),`RANGE_ERROR` (when the value does not fall within the range that is given for the property), `VARIABLE_PRESENT`(whether the value supposed to be in px for conversion sake is not converted from var() to px or if it's properly converted to px for conversion from px to var through our plugin) are to be individually made `true` in `cssVariableReplacementOptions.json`
 
-  below features are added form `0.0.1-beta.176`
+# Features below are added form `0.0.1-beta.176`
   
 * variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
 *  `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
 * support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
 
+# Features below are added form `0.0.1-beta.177`
+
+* new Error `MULTIPLE_OCCURANCES` supported.
+* In case css --variables are not assigned an error will be thrown and logged in `.cli/logs/unassignedVariables.log`. The unassigned variables can be manually assigned in `variableMapping.json` through two keys : 
+  * `changes` : for the variables that have to be converted, manual values can be added ( eg. "--wms_height": "height" )
+  * `ignore` : for the variables that do not have to be considered, they can be added as keys with some value in `ignore` key (eg. "--gc_widget_video_bg": "undefined"). These values will be ignored.
+* strict mode can be enabled for checking --variables in `cssVariableReplacementOptions.strictMode`
+
+For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 <!-- file paths :
 
@@ -77,10 +86,13 @@ jsapps\supportapp\plugins\variableIgnore.js ( adding variable:ignore comment to
     "errorLog": false,
     "errorInConsole": false,
     "errorsAllowed":{
-      "DECLARATION_IGNORED" : true,
-      "UNIT_ERROR" : true,
-      "RANGE_ERROR" : true,
-      "VARIABLE_PRESENT" : true
+      "DECLARATION_IGNORED": true,
+      "UNIT_ERROR": true,
+      "DECIMAL_CHECK": true,
+      "DECIMAL_REJECT": true,
+      "RANGE_ERROR": true,
+      "VARIABLE_PRESENT": true,
+      "MULTIPLE_OCCURANCES": false
     },
     "settings": {
       "font-size": {
@@ -701,10 +713,12 @@ Consider the below mentioned :
 => `DECLARATION_IGNORED` : Lines that succeed the /*Variable:Ignore*/ comment.
 => `UNIT_ERROR` : the units that are not present in the corresponding property's `allowed` array are used.
 => `RANGE_ERROR` : numerical values that are not present within the range of the corresponding property's `range` is used.
-=> `DECIMAL_CHECK` : Decimal values containing . will be shown
-=> `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown
+=> `DECIMAL_CHECK` : Decimal values containing . will be shown ( flex : 1.3 )
+=> `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown ( font-size : 12.5px )
 => `VARIABLE_PRESENT` : conversion to px (Step 2) wasn't done properly and hence there are residues that contain `var` in it are found.
+=> `MULTIPLE_OCCURANCES` : using --vars in multiple places ( using --zd_avatar_padding_left in left and right ), which results in confusion during conversion 
 
+. --variables can be checked and debugged when the `strictMode` flag is enabled in `cssVariableReplacementOptions.json` file. The variables unassigned will be logged in the `unassignedVariable.log`. The manual assigning of all keys present will be split into `ignore` and `changes` for ignoring the variable and changing the variable respectively. 
 
 * First two conversions are to be done manually by the use of the commands, `npm run variable:addignore` and `npm run variable:convert`
 * Final conversion is done by react-cli on compilation of the source folder `npm run start --app:port=**** --app:domain=****`

package/lib/common/splitChunks.js

@@ -61,30 +61,6 @@ let defaultChunks = {
     test: isVendor,
     // priority: 19,
     priority: -10
-  },
-  zdvendorsAsync: {
-    chunks: 'async',
-    minChunks: 2,
-    automaticNamePrefix: 'zdvendors-async',
-    test: module => {
-      let {
-        userRequest
-      } = module;
-      return userRequest && userRequest.endsWith('.css') === false && /[\\/]node_modules[\\/]((@zohodesk).*)[\\/]/.test(userRequest);
-    },
-    priority: -10
-  },
-  commons: {
-    chunks: 'all',
-    minChunks: 2,
-    priority: -20,
-    reuseExistingChunk: true,
-    test: module => {
-      let {
-        userRequest
-      } = module;
-      return userRequest && userRequest.endsWith('.css') === false;
-    }
   }
 };
 let customChunksConfig = {};
@@ -141,16 +117,7 @@ customChunks.map((obj, index) => ({
   return customChunksConfig[name] = obj;
 });
 var _default = {
-  chunks: 'all',
-  // minSize: 30,
-  minSize: 20000,
-  minChunks: 1,
-  // maxAsyncRequests: 5,
-  // maxInitialRequests: 3,
-  // minChunks: 1,
-  maxAsyncRequests: 5,
-  maxInitialRequests: 3,
-  enforceSizeThreshold: 50000,
+  minSize: 12000,
   cacheGroups: Object.assign({
     default: false,
     vendors: false

package/lib/configs/resolvers.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loaderResolver = loaderResolver;
+exports.moduleResolver = moduleResolver;
+
+var _constants = require("../constants");
+
+var _libAlias = require("./libAlias");
+
+var _client_packages_group = require("@zohodesk/client_packages_group");
+
+function moduleResolver(options) {
+  const {
+    moduleResolvePath,
+    disableES5Transpile
+  } = options.app;
+  const nodeModulesPath = moduleResolvePath ? require(require.resolve(moduleResolvePath, {
+    paths: [options.cwd]
+  })).nodeModulesPath : _client_packages_group.nodeModulesPath; // const {unstableDepsInverse} = options;
+
+  return {
+    modules: [nodeModulesPath, _constants.cliNodemodulesPath, 'node_modules'].filter(Boolean),
+    alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
+
+  };
+}
+
+function loaderResolver(options) {
+  // const unstableDepsInverse = false;
+  const {
+    unstableDepsInverse
+  } = options;
+  return {
+    modules: unstableDepsInverse ? ['node_modules', _constants.cliNodemodulesPath] : [_constants.cliNodemodulesPath, 'node_modules'] // alias:  libAlias
+
+  };
+}

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

@@ -10,15 +10,14 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
-var _libAlias = require("./libAlias");
-
 var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const options = (0, _utils.getOptions)();
 const {
-  unstableDepsInverse,
   app: {
     folder,
     context,
@@ -37,7 +36,6 @@ const {
     cssHashSelectors,
     classNamePrefix,
     selectorReplace,
-    disableES5Transpile,
     devConsoleExculde,
     sourcemap,
     crossorigin
@@ -147,11 +145,6 @@ module.exports = {
   externals: {
     ZC: '$ZC'
   },
-  resolve: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
-    alias: disableES5Transpile ? _libAlias.libAlias : {}
-  },
-  resolveLoader: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  }
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -8,18 +8,16 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
-var _libAlias = require("./libAlias");
-
 var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const options = (0, _utils.getOptions)();
 const {
-  unstableDepsInverse,
   docs: {
     componentFolder,
-    disableES5Transpile,
     enableChunkHash,
     cssUniqueness,
     plugins,
@@ -116,11 +114,6 @@ module.exports = isSSTest => ({
   externals: {
     ZC: '$ZC'
   },
-  resolve: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
-    alias: disableES5Transpile ? _libAlias.libAlias : {}
-  },
-  resolveLoader: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  }
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 });

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

@@ -10,6 +10,8 @@ var _getLibraryImactPlugins = _interopRequireDefault(require("../pluginUtils/get
 
 var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const options = (0, _utils.getOptions)();
@@ -39,6 +41,7 @@ module.exports = {
   },
   devtool: 'none',
   mode: 'development',
+  stats: 'errors-only',
   output: {
     path: _path.default.join(appPath, 'build'),
     filename: 'js/[name].js',
@@ -112,11 +115,6 @@ module.exports = {
   externals: {
     ZC: '$ZC'
   },
-  resolve: {
-    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  },
-  resolveLoader: {
-    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  },
-  stats: 'errors-only'
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -10,20 +10,18 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
-var _libAlias = require("./libAlias");
-
 var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
 const options = (0, _utils.getOptions)();
-let {
-  unstableDepsInverse,
+const {
   app: {
     folder,
     context,
-    enableChunkHash,
     outputFolder,
     disableES5Transpile,
     removeAttribute,
@@ -48,6 +46,9 @@ let {
     crossorigin
   }
 } = options;
+let {
+  enableChunkHash
+} = options.app;
 const appPath = process.cwd();
 const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
 enableChunkHash = !isDevelopment && enableChunkHash;
@@ -183,7 +184,7 @@ module.exports = {
           fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
         }
       }]
-    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './images/[name].[hash:20].[ext]' : './images/[name].[ext]'), {
+    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './videos/[name].[hash:20].[ext]' : './videos/[name].[ext]'), {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
       use: [{
         loader: 'url-loader',
@@ -233,11 +234,6 @@ module.exports = {
   externals: {
     ZC: '$ZC'
   },
-  resolve: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
-    alias: disableES5Transpile ? _libAlias.libAlias : {}
-  },
-  resolveLoader: {
-    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  }
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

package/lib/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cliRootPath = exports.cliNodemodulesPath = exports.appPath = exports.CONFIG_ROOT = exports.BASE_CONFIG_KEY = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BASE_CONFIG_KEY = 'react-cli';
+exports.BASE_CONFIG_KEY = BASE_CONFIG_KEY;
+
+const cliRootPath = _path.default.resolve(__dirname, '..');
+
+exports.cliRootPath = cliRootPath;
+const CONFIG_ROOT = 'react-cli';
+exports.CONFIG_ROOT = CONFIG_ROOT;
+
+const cliNodemodulesPath = _path.default.resolve(cliRootPath, 'node_modules'); // export const babelrcPath = join(cliRootPath, '.babelrc');
+
+
+exports.cliNodemodulesPath = cliNodemodulesPath;
+const appPath = process.cwd(); // export const appInitialHTMLTemplatePath = path.join(
+//   process.cwd(),
+//   'src',
+//   'index.html'
+// );
+
+exports.appPath = appPath;

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -20,7 +20,7 @@ const ImageExtRegex = /\.jpe?g$|\.gif$|\.png$/;
 const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
 const SVGExtRegex = /\.svg$/;
 const AudioExtRegex = /\.ogg$/;
-const VidioExtRegex = /\.mp4$/;
+const VidioExtRegex = /\.mp4|\.webm$/;
 
 function createLoaderOptionQueryString(loaderName, nameTemplate, limit = 1000) {
   return `${loaderName}?limit=${limit}&name=${nameTemplate}`;
@@ -57,7 +57,7 @@ function configAudioLoader(nameTemplate) {
 function configVideoLoader(nameTemplate) {
   return {
     test: VidioExtRegex,
-    use: createLoaderOptionQueryString('url-loader', `./images/${nameTemplate}`, 1)
+    use: createLoaderOptionQueryString('url-loader', `./videos/${nameTemplate}`, 1)
   };
 }