@zohodesk/react-cli 1.1.16-exp.4 → 1.1.16-exp.6

package/packages/client_build_tool/lib/commandsRouter.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.route = route;
-exports.runCommand = runCommand;
 
 var _fs = require("fs");
 
@@ -12,60 +11,56 @@ var _path = require("path");
 
 var _allCommandsConfigs = _interopRequireDefault(require("./allCommandsConfigs"));
 
-var _logger = require("./logger");
+var _buildToolLoggers = require("./buildToolLoggers");
 
-var _readOptions = require("./schemas/readOptions");
+var _readOptions = require("./shared/schemas/readOptions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function runCommand(commandConfig, options) {
+function runCommand(commandConfig) {
+  const options = (0, _readOptions.getOptions)();
   const {
     dirname
   } = commandConfig;
 
   function runRespectiveFile(name, data) {
-    const commandExecutorPath = (0, _path.join)(dirname, `${name}.js`);
+    const commandExecutorPath = (0, _path.join)(dirname, name + ".js");
 
     if ((0, _fs.existsSync)(commandExecutorPath)) {
-      // eslint-disable-next-line import/no-dynamic-require, global-require
       const commandExecutor = require(commandExecutorPath);
 
       return (commandExecutor[name] || commandExecutor.default)(data);
+    } else {
+      (0, _buildToolLoggers.debugLogger)("file not found", commandExecutorPath);
     }
-
-    (0, _logger.verboseLogger)('file not found', commandExecutorPath);
-    return null;
   }
 
-  const processedOption = runRespectiveFile('optionsProcessor', options) || options;
-  runRespectiveFile('deprecationHandler', processedOption); // runRespectiveFile("errorHandler", () => {
+  const processedOption = runRespectiveFile("optionsProcesser", options) || options;
+  runRespectiveFile("deprecationHandler", processedOption); // runRespectiveFile("errorHandler", () => {
 
-  runRespectiveFile('preProcessor', processedOption);
-  runRespectiveFile('commandExecutor', processedOption);
-  runRespectiveFile('postProcessor', processedOption); // });
+  runRespectiveFile("preProcesser", processedOption);
+  runRespectiveFile("commandExecutor", processedOption);
+  runRespectiveFile("postProcesser", processedOption); // });
 }
 
 function route(option, args) {
   // TODO:  need to modify this log
-  (0, _logger.verboseLogger)(`the command was ${option}`, args); // eslint-disable-next-line no-use-before-define
-
+  (0, _buildToolLoggers.debugLogger)("the command was " + option, args);
   const commandConfig = findCommandConfig(option);
 
   if (commandConfig) {
     try {
-      const options = (0, _readOptions.getOptions)();
-      runCommand(commandConfig, options);
+      runCommand(commandConfig);
     } catch (error) {
-      (0, _logger.errorLogger)(error);
+      console.error(error);
     }
   } else {
     // TODO: need to  write proper error message
-    (0, _logger.warnLogger)('Un known command', option, 'please check the document');
+    (0, _buildToolLoggers.warnLogger)("Un known command", option, "please check the document");
   }
 }
 
 function findCommandConfig(option) {
-  // eslint-disable-next-line no-restricted-syntax
   for (const commandConfig of _allCommandsConfigs.default) {
     if (commandConfig.name === option || commandConfig.alias.includes(option)) {
       return commandConfig;

package/packages/client_build_tool/lib/shared/bundler/webpack/common/decidePublicPath.js

@@ -18,7 +18,9 @@ function modifiedServerOptions(options) {
   const {
     server
   } = options;
-  const port = Number(server.port);
+  const {
+    port
+  } = server;
   const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
   const machineDomain = (0, _getServerURL.getServerDomain)(server);
   const httpPort = port + 1;

package/packages/client_build_tool/lib/shared/bundler/webpack/common/nameTemplates.js

@@ -3,17 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isI18nFile = void 0;
 exports.nameTemplates = nameTemplates;
-
-var _modeUtils = require("./modeUtils");
-
-// nameTemplate.js
 // NOTE: these below code can be done in js,
-//   we did copy paste in order to avoid unnecessary confusion
-// NOTE: array[0] is dev mode file templates and array[1] is prod mode file templates 
+//   we did copy paste in order to aviod unnecessary confussion
 const templates = {
-  html: ['index.html', 'index.[contenthash].html'],
   js: ['js/[name].js', 'js/[name].[contenthash].js'],
   chunkjs: ['js-chunks/[name].js', 'js-chunks/[name].[contenthash].js'],
   i18njs: ['i18n-chunks/[locale]/[name].i18n.js', 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'],
@@ -23,11 +16,11 @@ const templates = {
   workerjs: ['js/[name].js', 'js/[name].[contenthash].js'],
   css: ['css/[name].css', 'css/[name].[contenthash].css'],
 
-  /**
-   * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
-   *   custom_plugins/RtlSplitPlugin/*
-   *   pluginConfigs/configMiniCSSExtractPlugin.js
-   *   pluginConfigs/configRtlCssPlugin.js
+  /**
+   * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
+   *   custom_plugins/RtlSplitPlugin/*
+   *   pluginConfigs/configMiniCSSExtractPlugin.js
+   *   pluginConfigs/configRtlCssPlugin.js
    *  */
   cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash].[dir].css'],
   image: ['images/[name][ext]', 'images/[name].[contenthash][ext]'],
@@ -37,34 +30,22 @@ const templates = {
   video: ['videos/[name][ext]', 'videos/[name].[contenthash][ext]']
 };
 
-function createNameTemplate(name, useHash) {
-  // const ext = `${useHash ? '.[hash:20]' : ''}[ext]`;
-  return useHash ? name[1] : name[0];
+function createNameTemplate(name, enableChunkHash) {
+  // const ext = `${enableChunkHash ? '.[hash:20]' : ''}[ext]`;
+  return enableChunkHash ? name[1] : name[0];
 }
 
 function nameTemplates(type, options) {
   const {
-    enableChunkHash,
-    mode
+    enableChunkHash
   } = options;
   const tname = templates[type];
 
   if (!tname) {
-    throw Error(`specified type not valid Type: ${type}`);
-  }
-
-  let useHash = (0, _modeUtils.isProductionMode)(mode) || enableChunkHash;
-
-  if ((0, _modeUtils.isDevelopmentMode)(mode) && type === 'html') {
-    useHash = false;
+    throw Error(`specifiyed type not valid Type: ${type}`);
   }
 
-  return createNameTemplate(tname, useHash);
+  return createNameTemplate(tname, enableChunkHash);
 } // export function cssDirNameTemplate(dir, options) {
 //   return nameTemplates('cssdir', options).replace(/\[dir\]/g, dir);
-// }
-
-
-const isI18nFile = url => url.endsWith('.i18n.js');
-
-exports.isI18nFile = isI18nFile;
+// }

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/CdnChangePlugin.js

@@ -9,12 +9,20 @@ var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
 var _webpack = require("webpack");
 
-var _nameTemplates = require("../common/nameTemplates");
+var _readOptions = require("../../../schemas/readOptions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import { Template } from 'webpack';
-const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
+const pluginName = 'CdnChangePlugin';
+const MODULE_TYPE = 'css/mini-extract';
+
+const isI18nFile = url => url.endsWith('.i18n.js');
+
+const {
+  app: {
+    enableSMap
+  }
+} = (0, _readOptions.getOptions)();
 
 class CdnChangeRuntimePlugin extends _webpack.RuntimeModule {
   constructor(compiler, {
@@ -38,7 +46,7 @@ class CdnChangeRuntimePlugin extends _webpack.RuntimeModule {
 
 class CdnChangePlugin {
   constructor(options) {
-    this.enableSMap = options.enableSMap || '{{__I18N_CDN__}}';
+    console.log("Insdie", options);
     this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
     this.variableName = options.variableName || '__CSS_CDN__';
     this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
@@ -55,7 +63,11 @@ class CdnChangePlugin {
         }
 
         enabledChunks.add(entryRuntimeChunk);
-        set.add(_webpack.RuntimeGlobals.getFullHash);
+
+        if (typeof chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(chunkFilename)) {
+          set.add(_webpack.RuntimeGlobals.getFullHash);
+        }
+
         set.add(_webpack.RuntimeGlobals.getChunkCssFilename);
         compilation.addRuntimeModule(entryRuntimeChunk, new CdnChangeRuntimePlugin(set, {
           compiler,
@@ -67,20 +79,17 @@ class CdnChangePlugin {
     });
     compiler.hooks.compilation.tap(pluginName, compilation => {
       _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, (data, cb) => {
-        const {
-          enableSMap
-        } = this;
-        data.assets = { ...data.assets,
+        data.assets = Object.assign({}, data.assets, {
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
           js: data.assets.js.map(js => {
-            if (enableSMap && !(0, _nameTemplates.isI18nFile)(js)) {
-              console.log('js file ==>', js);
+            if (enableSMap && !isI18nFile(js)) {
+              console.log("js file ==>", js);
               js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
             }
 
-            return `${(0, _nameTemplates.isI18nFile)(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
+            return `${isI18nFile(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
           })
-        };
+        });
         cb && cb(null, data);
       });
     });
@@ -90,8 +99,8 @@ class CdnChangePlugin {
 
 var _default = CdnChangePlugin; // Cdn Change Plugin for runtime chunks???
 
-/**
- * the filename of the script part of the chunk
+/**
+ * the filename of the script part of the chunk
  */
 // exports.getChunkScriptFilename = "__webpack_require__.u";
 // /**

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/EFCPlugin.js

@@ -0,0 +1 @@
+"use strict";

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/ContributionGuide.md

@@ -1,11 +1,11 @@
-# I18n Split Plugin ContributionGuide
-we have modifyed mini-css-extract-plugin to sute our needs of i18n related extraction and downloading.
-So In future may be when we need to update mini-css-extract-plugin Kindly cross check with this I18n Plugin as well.
-
-Even not breaking change, may be just performacne update or feature update. addeding that to this plugin will be use full. Kindly consider it.
-
-## Thing we Ignored 
- * we use webpack ast hook for adding I18nDependency. So we did not need `loader.js`
- * we ignore order of import in single chunk since I18n going to be download as object.  
-      we did not need it.
+# I18n Split Plugin ContributionGuide
+we have modifyed mini-css-extract-plugin to sute our needs of i18n related extraction and downloading.
+So In future may be when we need to update mini-css-extract-plugin Kindly cross check with this I18n Plugin as well.
+
+Even not breaking change, may be just performacne update or feature update. addeding that to this plugin will be use full. Kindly consider it.
+
+## Thing we Ignored 
+ * we use webpack ast hook for adding I18nDependency. So we did not need `loader.js`
+ * we ignore order of import in single chunk since I18n going to be download as object.  
+      we did not need it.
  * 

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/I18nKeysIdentifer.js

@@ -7,26 +7,67 @@ exports.default = void 0;
 
 var _utils = require("./utils");
 
-var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
-
 /* eslint-disable max-classes-per-file */
-const pluginName = 'I18nKeysIdentifier';
-/**
- * this plugin search the i18 keys and make it as I18nDependency.
- * how it works?
- *  this plugin get jsResourceI18nKeys in constructor.
- *  we walk thought the js files AST
- *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
- *  after the walk of AST we get some I18n keys
- *  then we make it as I18nDependency.
+// import { I18nDependency } from './1I18nDependency';
+const pluginName = 'I18nKeysIdentifer';
+/**
+ * this plugin search the i18 keys and make it as I18nDependency.
+ * how it works?
+ *  this plugin get jsResourceI18nKeys in constructor.
+ *  we walk throught the js files AST
+ *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
+ *  after the walk of AST we get some I18n keys
+ *  then we make it as I18nDependency.
  */
 
 class I18nKeysIdentifer {
   constructor({
     jsResourceI18nKeys
+  }, {
+    I18nDependency,
+    I18nModule
   }) {
     this.jsResourceI18nKeys = jsResourceI18nKeys;
-    this.store = new _LocaleChunkAssetsStore.LocaleChunkAssetsStore();
+    this.I18nDependency = I18nDependency;
+    this.I18nModule = I18nModule;
+    this.modulesI18nKeysMap = {};
+  }
+
+  defineConfigarationForI18nDependency(compilation) {
+    const {
+      I18nModule,
+      I18nDependency
+    } = this;
+
+    class I18nModuleFactory {
+      // eslint-disable-next-line class-methods-use-this
+      create({
+        dependencies: [dependency]
+      }, callback) {
+        callback(undefined, new I18nModule(dependency));
+      }
+
+    }
+
+    compilation.dependencyFactories.set(I18nDependency, new I18nModuleFactory());
+
+    class I18nDependencyTemplate {
+      // eslint-disable-next-line class-methods-use-this
+      apply() {}
+
+    }
+
+    compilation.dependencyTemplates.set(I18nDependency, new I18nDependencyTemplate());
+  }
+
+  addI18nDependency(module, i18nKeys) {
+    const identifier = `i18n ${module.resource}`;
+    const dep = new this.I18nDependency({
+      identifier,
+      content: JSON.stringify(i18nKeys),
+      i18nKeys
+    }, module.context, 0);
+    module.addDependency(dep);
   }
 
   apply(compiler) {
@@ -37,13 +78,15 @@ class I18nKeysIdentifer {
     //   }
     // }
     compiler.hooks.thisCompilation.tap(pluginName, compilation => {
-      this.store.updateCompilation(compilation);
-      (0, _LocaleChunkAssetsStore.setLocaleChunkAssetsStore)(compilation, this.store);
+      // this below  hook was tapped for  we use I18nDependency
+      // so we must define module factory for I18nDependency
+      // and we must define how it import statement look like I18nDependencyTemplate
+      this.defineConfigarationForI18nDependency(compilation);
     });
     compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
       // handler for parser
       const handler = parser => {
-        parser.hooks.program.tap(pluginName, (ast, comments) => {
+        parser.hooks.program.tap(pluginName, (ast, commmets) => {
           const {
             module
           } = parser.state; //
@@ -55,14 +98,19 @@ class I18nKeysIdentifer {
 
           let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
           i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
-          (0, _utils.collectI18nKeysfromComments)(comments, this.jsResourceI18nKeys));
+          (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
 
           if (i18nKeys.length) {
-            // console.log('i18nKeys.length', module.resource, i18nKeys);
-            this.store.updateModuleI18nKeys(module.resource, i18nKeys);
+            // console.log(
+            //   'i18nKeys.length',
+            //   module.resource,
+            //   i18nKeys.length < 5 ? i18nKeys : i18nKeys.length
+            // );
+            this.modulesI18nKeysMap[module.resource] = i18nKeys;
+            this.addI18nDependency(module, i18nKeys);
           }
         });
-      }; // this below  hook was tapped for collect I18n Key from files and add as Dependency
+      }; // this below  hook was tapped for collect I18n Key from files and add as Deppenensy
       // const factory = params.normalModuleFactory;
 
 
@@ -71,6 +119,18 @@ class I18nKeysIdentifer {
     });
   }
 
-}
+} // I18nKeysIdentifer.isChunkHasI18n = function (chunk) {
+//   // eslint-disable-next-line no-restricted-syntax
+//   for (const module of chunk.modulesIterable) {
+//     // eslint-disable-next-line no-restricted-syntax
+//     for (const dep of module.dependencies) {
+//       if (dep instanceof I18nDependency) {
+//         return true;
+//       }
+//     }
+//   }
+//   return false;
+// };
+
 
 exports.default = I18nKeysIdentifer;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/I18nSplit.md

@@ -1,95 +1,95 @@
-# I18n Split As Chunks Plugin
-
-generaly we have manage our all I18n keys and values as language specific i18n files and then we download all i18n in initial page load.
-
-### what is the problem with this?.
-
-the problem is i18n file keep get's grown it will affect the the inital page load and critial rendering path.
-So, We have decide to create a plugin for split i18n per chunk's of js vise.
-
-### what is i18n split?
-
-it is like code split for i18n.
-we will collect i18n from js chunk and we will create separate i18n chunk per js chunk,  
- with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.  
- when js download's we will download i18n with it.
-
-### How to we going to i18n split?
-
-we will read the js chunk and collect I18n keys form it,  
- then we will create i18n chunk files with these used keys.
-
-### how do you collect i18n keys from js files?
-
-we will traverse the js file's AST (static analysis) and find i18 keys,  
- we will concider all string which is in jsResource file as i18n keys.  
- and you can tell dynamic i18n key by js comments,  
- Like Below:-
-
-```js
-fetch('tickets?view=view1').then(data => {
-  // I18n support.ticketsEmpty
-  // I18n support.viewNotFount
-  // I18n support.permissionDenied
-  let text = getI18nValue(data.i18nkey);
-});
-```
-
-### is there any posiblity for unwanted keys in some chunk?
-
-Yes, there is two posiblity
-
-1. js comment , if you write js comment but it is not needed then it will be add into i18n chunk  
-   `To Resolve` we currently do not have perfect idea for this, But we can check this by chunk size limit.  
-   `idea's will be welcome`
-2. like we said "we will concider all string which is in jsResource file as i18n keys",  
-   So if you use string not for i18n but it was in jsResource then it will be add into i18n chunk.  
-   `To Resolve` this problem we can use some kinda prefix or something.
-
-### how do we downlowd and give to app?
-
-we have over write defualt webpack requireEnsure (every dynamic chunk requests are done by that function) function.  
- and we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.  
-So we send i18nkeys , when it was download,  
-you must store all i18n keys, we give asycrnsly by that function download in that patticular.  
-so you must store and update (like append or assign) everytime that function call.
-
-### how to use this feature?
-
-to use this feature use have give the below oprtions  
- `package.json`
-
-```json
-{
-  /// ...some things
-  "react-cli": {
-    //  ...some things
-    "i18n": {
-      "chunkSplitEnable": true,
-      "jsResource": "./deskapp/properties/JSResources.properties",
-      "localeVarName": "window.userInfo.langCode",
-      "jsonpFunc": "window.loadI18nChunk",
-      "templateLabel": "{{--user-locale}}", // this is  for html template i18n file path locate template
-      "propertiesFolder": "./deskapp/properties"
-    }
-    //  ...some things
-  }
-}
-```
-
-<!-- not need below -->
-<!--we have added new feature for css to write logic to how hover related css work in hoverhover and a
-
-### is there any problems with static analysis?
-  Yes,
-
-### how do we use dynamic i18n key?
-
-  and we will download i18n file with
-
-  and when js chunk download's then we will download i18n as need.
-  we all know in our app we loading i18n as one single big file for each locale(language).
-  we are going to split i18n as per js chunk, and when js chunk download's then we will download i18n as need.
-
-
-  -->
+# I18n Split As Chunks Plugin
+
+generaly we have manage our all I18n keys and values as language specific i18n files and then we download all i18n in initial page load.
+
+### what is the problem with this?.
+
+the problem is i18n file keep get's grown it will affect the the inital page load and critial rendering path.
+So, We have decide to create a plugin for split i18n per chunk's of js vise.
+
+### what is i18n split?
+
+it is like code split for i18n.
+we will collect i18n from js chunk and we will create separate i18n chunk per js chunk,  
+ with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.  
+ when js download's we will download i18n with it.
+
+### How to we going to i18n split?
+
+we will read the js chunk and collect I18n keys form it,  
+ then we will create i18n chunk files with these used keys.
+
+### how do you collect i18n keys from js files?
+
+we will traverse the js file's AST (static analysis) and find i18 keys,  
+ we will concider all string which is in jsResource file as i18n keys.  
+ and you can tell dynamic i18n key by js comments,  
+ Like Below:-
+
+```js
+fetch('tickets?view=view1').then(data => {
+  // I18n support.ticketsEmpty
+  // I18n support.viewNotFount
+  // I18n support.permissionDenied
+  let text = getI18nValue(data.i18nkey);
+});
+```
+
+### is there any posiblity for unwanted keys in some chunk?
+
+Yes, there is two posiblity
+
+1. js comment , if you write js comment but it is not needed then it will be add into i18n chunk  
+   `To Resolve` we currently do not have perfect idea for this, But we can check this by chunk size limit.  
+   `idea's will be welcome`
+2. like we said "we will concider all string which is in jsResource file as i18n keys",  
+   So if you use string not for i18n but it was in jsResource then it will be add into i18n chunk.  
+   `To Resolve` this problem we can use some kinda prefix or something.
+
+### how do we downlowd and give to app?
+
+we have over write defualt webpack requireEnsure (every dynamic chunk requests are done by that function) function.  
+ and we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.  
+So we send i18nkeys , when it was download,  
+you must store all i18n keys, we give asycrnsly by that function download in that patticular.  
+so you must store and update (like append or assign) everytime that function call.
+
+### how to use this feature?
+
+to use this feature use have give the below oprtions  
+ `package.json`
+
+```json
+{
+  /// ...some things
+  "react-cli": {
+    //  ...some things
+    "i18n": {
+      "chunkSplitEnable": true,
+      "jsResource": "./deskapp/properties/JSResources.properties",
+      "localeVarName": "window.userInfo.langCode",
+      "jsonpFunc": "window.loadI18nChunk",
+      "templateLabel": "{{--user-locale}}", // this is  for html template i18n file path locate template
+      "propertiesFolder": "./deskapp/properties"
+    }
+    //  ...some things
+  }
+}
+```
+
+<!-- not need below -->
+<!--we have added new feature for css to write logic to how hover related css work in hoverhover and a
+
+### is there any problems with static analysis?
+  Yes,
+
+### how do we use dynamic i18n key?
+
+  and we will download i18n file with
+
+  and when js chunk download's then we will download i18n as need.
+  we all know in our app we loading i18n as one single big file for each locale(language).
+  we are going to split i18n as per js chunk, and when js chunk download's then we will download i18n as need.
+
+
+  -->