@zohodesk/react-cli 1.1.16-exp.2 → 1.1.16-exp.3

package/lib/loaderUtils/getCSSLoaders.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
-const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification', 'autoPrefixer'];
+const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification'];
 
 function calculatePostCssPluginOrder(postCssPluginOrder, pluginOrder) {
   // if(typeof postCssPluginOrder === Boolean)
@@ -39,7 +39,6 @@ const getCSSLoaders = optionsObj => {
     patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
-    prefixConfig,
     classNameBlob,
     cssUniqueness,
     selectorReplace,
@@ -70,9 +69,7 @@ const getCSSLoaders = optionsObj => {
     cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns);
   }
 
-  const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log(require('autoprefixer'));
-  // console.log(require('autoprefixer')());
-  // console.log('selector weight config : ', selectorWeightConfig);
+  const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);
 
   const postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
     addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
@@ -82,8 +79,7 @@ const getCSSLoaders = optionsObj => {
 
       return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
     }
-  }), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig), plugins.autoPrefixer && require('../postcss-plugins/AutoPrefixer')(prefixConfig) // require('autoprefixer')({ flexbox: true, grid: false })
-  // ,
+  }), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig) // ,
   // plugins.composeMinification &&
   //   require('../postcss-plugins/composePlugin')()
   ].filter(Boolean);
@@ -110,56 +106,56 @@ const getCSSLoaders = optionsObj => {
         // console.log('check here : ', params.resourcePath);
         // getCSSLoaders for all postcss filtering
 
-        /*
-        input : 
-        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
-        patterns : [
-            // include all files
-           "valueReplacer": [ 
-              "*"
-            ],
-            // include all files
-            "selectorReplace": [
-              "*"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "hoverActive": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "combinerMediaQuery": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "hasRTL": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "cssVariableReplacement": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "selectorWeight": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include all files
-            "cssUniqueness": [
-              "*"
-            ]
-        ],
-        
-        [ postcssPlugins that are implemented ]
-            */
+        /*
+        input : 
+        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+        patterns : [
+            // include all files
+           "valueReplacer": [ 
+              "*"
+            ],
+            // include all files
+            "selectorReplace": [
+              "*"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hoverActive": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "combinerMediaQuery": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hasRTL": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "selectorWeight": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include all files
+            "cssUniqueness": [
+              "*"
+            ]
+        ],
+        
+        [ postcssPlugins that are implemented ]
+          */
         //  console.log(params.resourcePath);
         //  console.log(postcssPlugins);
         const finalPostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({

package/lib/loaders/workerLoader.js

@@ -16,7 +16,7 @@ var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntry
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
+/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
   'type': 'object',
@@ -80,14 +80,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/lib/pluginUtils/getDevPlugins.js

@@ -117,11 +117,11 @@ const getDevPlugins = (options, publicPath) => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].i18n.js';

package/lib/pluginUtils/getProdPlugins.js

@@ -131,11 +131,11 @@ const getProdPlugins = (options, publicPath = '') => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';

package/lib/plugins/CustomAttributePlugin.md

@@ -1,35 +1,35 @@
-# CustomAttributePlugin
- In this plugin we added all dynamic chunks tags (like js script tags , css script tags, i18n split script tags) to extra custom attribute
-
-## Options
-
-```json
-{
-  "name": "some",
-  "react-cli": {
-    "app": {
-      "customAttributes": {// this is the all options
-        "enable": false,
-        "attributes": null,
-        "jsAttributes": null,
-        "cssAttributes": null,
-        "i18nAttributes": null
-      }
-  }
-}
-```
-
-### enable   [Boolean]
-this decides is this plugin or feature needs to be enabled of not.
-
-
-### attributes   [Object] 
-It  was object of key value pairs Example Given Option {"data-app-name":"myapp"}  
-Then all dynamically (js script tags , css script tags, i18n split script tags) added tags via webpack 
-
-### jsAttributes   [Object] 
-same as [attributes] but only for js script tags
-### cssAttributes   [Object] 
-same as [attributes] but only for css script tags
-### i18nAttributes   [Object] 
-same as [attributes] but only for i18n split script tags
+# CustomAttributePlugin
+ In this plugin we added all dynamic chunks tags (like js script tags , css script tags, i18n split script tags) to extra custom attribute
+
+## Options
+
+```json
+{
+  "name": "some",
+  "react-cli": {
+    "app": {
+      "customAttributes": {// this is the all options
+        "enable": false,
+        "attributes": null,
+        "jsAttributes": null,
+        "cssAttributes": null,
+        "i18nAttributes": null
+      }
+  }
+}
+```
+
+### enable   [Boolean]
+this decides is this plugin or feature needs to be enabled of not.
+
+
+### attributes   [Object] 
+It  was object of key value pairs Example Given Option {"data-app-name":"myapp"}  
+Then all dynamically (js script tags , css script tags, i18n split script tags) added tags via webpack 
+
+### jsAttributes   [Object] 
+same as [attributes] but only for js script tags
+### cssAttributes   [Object] 
+same as [attributes] but only for css script tags
+### i18nAttributes   [Object] 
+same as [attributes] but only for i18n split script tags

package/lib/plugins/EFCPlugin.md

@@ -1,6 +1,6 @@
-# EFC Plugin
-
-In EFC plugin we are create sdk file for efc related purpose
-
-
-# document will be soon
+# EFC Plugin
+
+In EFC plugin we are create sdk file for efc related purpose
+
+
+# document will be soon

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -115,10 +115,10 @@ class I18NInjectIntoIndexPlugin {
         i18nObj = i18nFiles.reduce((res, next) => {
           const fileName = next.replace(`i18n${_path.default.sep}`, '');
           const splittedFileName = fileName.split('.');
-          /* if (this.isDevelopment) {
-            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
-          } else {
-            res[splittedFileName[0]] = fileName;
+          /* if (this.isDevelopment) {
+            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          } else {
+            res[splittedFileName[0]] = fileName;
           } */
 
           res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -13,23 +13,23 @@ var _hashUtils = require("./utils/hashUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * this plugin for the download i18n files
- * So, if need to downoad i18n in browser this plugin handle that
- *
- *
- * this plugin works
- * how it works?
- *  this plugin hook the requireEnsure method and we write logic for current compiled file download logic
- *
- * hinds:-
- *  requireEnsure method was loader for all js chunk's ,
- *  which means if we use dynamic import then this function will create script tag for that dynamic resource
- *  so every dynamic js chunk will load by this function,
- *  So we update this function with when  dynamic jschunk call the nour code also execute
- *
- * some thing  missing  in this definetion
- *
+/**
+ * this plugin for the download i18n files
+ * So, if need to downoad i18n in browser this plugin handle that
+ *
+ *
+ * this plugin works
+ * how it works?
+ *  this plugin hook the requireEnsure method and we write logic for current compiled file download logic
+ *
+ * hinds:-
+ *  requireEnsure method was loader for all js chunk's ,
+ *  which means if we use dynamic import then this function will create script tag for that dynamic resource
+ *  so every dynamic js chunk will load by this function,
+ *  So we update this function with when  dynamic jschunk call the nour code also execute
+ *
+ * some thing  missing  in this definetion
+ *
  */
 // import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
 const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
@@ -126,20 +126,20 @@ class I18nDownlodLogic {
       return _webpack.Template.asString([source, '', '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(mainChunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
     });
     mainTemplate.hooks.requireEnsure.tap(pluginName, (source, mainChunk, hash) => {
-      /**
-       * for Information this is tapped in mainTemplate ,
-       * So this hooks argument chunk is main chunk means entry chunk mostly.
-       * if any chunk has i18n then we must write our download  i18n logic,
+      /**
+       * for Information this is tapped in mainTemplate ,
+       * So this hooks argument chunk is main chunk means entry chunk mostly.
+       * if any chunk has i18n then we must write our download  i18n logic,
        */
       const chunkMap = this.getI18nChunkObject(mainChunk);
 
       if (!Object.keys(chunkMap).length) {
         return source;
       }
-      /**
-       *   chunkMaps has
-       *  @property  {Object} hash  [it has key  as chunk id and value as chunkHash ]
-       *  @property  {Object} name  [it has key  as chunk id and value as chunk name ]
+      /**
+       *   chunkMaps has
+       *  @property  {Object} hash  [it has key  as chunk id and value as chunkHash ]
+       *  @property  {Object} name  [it has key  as chunk id and value as chunk name ]
        */
 
 
@@ -176,23 +176,23 @@ class I18nDownlodLogic {
         },
         contentHashType: MODULE_TYPE
       });
-      /** IDEA:
-       *      as my suggestion ignore this `jsop` approch,
-       *      Because json parse is faster then js parse.
-       *      my suggestion  is make ajax or fetch request
+      /** IDEA:
+       *      as my suggestion ignore this `jsop` approch,
+       *      Because json parse is faster then js parse.
+       *      my suggestion  is make ajax or fetch request
        */
 
       const buf = [];
-      /*
-        if (REGEXP_HASH.test(filenameTemplate)) {
-          buf.push(
-            `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
-          );
-        }
-        if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
-          buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
-        }
-        */
+      /*
+      if (REGEXP_HASH.test(filenameTemplate)) {
+        buf.push(
+          `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
+        );
+      }
+      if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
+        buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
+      }
+      */
 
       if ((0, _hashUtils.hasContentHash)(filenameTemplate)) {
         const hashLength = getContentHashMaxLength(filenameTemplate);
@@ -205,12 +205,19 @@ class I18nDownlodLogic {
 
       const publicPath = this.publicPath ? JSON.stringify(this.publicPath) : `${mainTemplate.requireFn}.p`;
       return _webpack.Template.asString([source, `
-(function() {
+function downloadScriptTagForI18nDynamicChunks(chunkName = '', language = '') {
   // ${pluginName} I18N loading
   var i18nChunks = ${JSON.stringify(chunkMap)};
   var locale = ${localeVarName};
   // ${pluginName} I18N hasehes
   ${hashUtils}
+  if(chunkName) {
+    chunkId = chunkName;
+  }
+  if (language) {
+    window.userLangCode = language;
+    locale = language;
+  }
   if(installedI18nChunks[chunkId]) {
     promises.push(installedI18nChunks[chunkId]);
   } else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
@@ -245,10 +252,31 @@ class I18nDownlodLogic {
         }` : ''}
       document.body.appendChild(scriptTag);
     }).then(function() {
-      installedI18nChunks[chunkId] = 0;
+      installedI18nChunks[chunkId] = 0;  
     }));
   }
-})()`]);
+  return installedI18nChunks[chunkId];
+};
+downloadScriptTagForI18nDynamicChunks();      
+${mainTemplate.requireFn}.changeLanguage = function changeLanguage(language) {
+  window.change(language);
+  return new Promise((resolve, reject) => {
+    const chunkPromises = Object.keys(installedI18nChunks).map(chunks => {
+      if (chunks !== './runtime~main' && installedI18nChunks[chunks] == 0) {
+        installedI18nChunks[chunks] = null;
+        return downloadScriptTagForI18nDynamicChunks(chunks, language);
+      }
+    });
+
+    Promise.all(chunkPromises)
+      .then(() => {
+        resolve();
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+};`]);
     });
   }
 
@@ -256,7 +284,8 @@ class I18nDownlodLogic {
     compiler.hooks.thisCompilation.tap(pluginName, compilation => {
       const {
         mainTemplate
-      } = compilation;
+      } = compilation; // this.createChangeLanguageFunction(mainTemplate);
+
       this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
     });
   }

package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js

@@ -13,8 +13,8 @@ var _getI18nKeysFormModules = _interopRequireDefault(require("./utils/getI18nKey
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * this plugin was creating the chunk specific i18n chunk's.
+/**
+ * this plugin was creating the chunk specific i18n chunk's.
  */
 // this plugin's kick  starter is apply method
 const pluginName = 'I18nFilesEmitter';
@@ -141,40 +141,40 @@ class I18nFilesEmitter {
   }
 
   apply(compiler) {
-    /*
-      compiler.hooks.thisCompilation.tap(pluginName, compilation => {
-        compilation.mainTemplate.hooks.renderManifest.tap(
-          pluginName,
-          (result, { chunk }) => {
-            this.renderChunk(result, compilation, chunk);
-          }
-        );
-            compilation.chunkTemplate.hooks.renderManifest.tap(
-          pluginName,
-          (result, { chunk }) => {
-            this.renderChunk(result, compilation, chunk);
-          }
-        );
-      });
+    /*
+      compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+        compilation.mainTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+           compilation.chunkTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+      });
       */
     // this below hook was tapped for create asssets(file) for chunk specific i18nChunk Files
     compiler.hooks.emit.tap(pluginName, compilation => {
       this.emitI18nAssert(compilation);
     });
   }
-  /*
-    renderChunk(result, compilation, chunk) {
-      const i18nKeys = getI18nKeysFormModules(chunk.modulesIterable);
-      // TODO: need to discuss with vimal ji can we chose this place for add i18n locale files ????
-      // IDEA:  we chose this place for add i18n locale files ????
-      if (i18nKeys.length > 0) {
-        Object.keys(this.allI18nObject).forEach(locale => {
-          result.push(
-            this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation)
-          );
-        });
-      }
-    }
+  /*
+    renderChunk(result, compilation, chunk) {
+      const i18nKeys = getI18nKeysFormModules(chunk.modulesIterable);
+      // TODO: need to discuss with vimal ji can we chose this place for add i18n locale files ????
+      // IDEA:  we chose this place for add i18n locale files ????
+      if (i18nKeys.length > 0) {
+        Object.keys(this.allI18nObject).forEach(locale => {
+          result.push(
+            this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation)
+          );
+        });
+      }
+    }
     */
 
 

package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js

@@ -14,14 +14,14 @@ var _NullFactory = _interopRequireDefault(require("webpack/lib/NullFactory"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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.
+/**
+ * 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 {