@zohodesk/react-cli 0.0.1-beta.99 → 0.0.1-betaa.138.2

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -1,75 +1,141 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _utils = require("../utils");
 
-var _path = require('path');
+var _urlConcat = require("../utils/urlConcat");
 
-var _path2 = _interopRequireDefault(_path);
+var _path = _interopRequireDefault(require("path"));
 
-var _webpackSources = require('webpack-sources');
+var _webpackSources = require("webpack-sources");
+
+var _hashUtils = require("./I18nSplitPlugin/utils/hashUtils");
+
+var _getI18nFileUrlPathTemplate = require("./I18nSplitPlugin/utils/getI18nFileUrlPathTemplate");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+let i18nObj = null;
+let options = (0, _utils.getOptions)();
 
-var i18nObj = null;
+function newAssign(target, data) {
+  return Object.assign({}, target, data);
+}
 
-var I18NInjectIntoIndexPlugin = function () {
-  function I18NInjectIntoIndexPlugin(options) {
-    _classCallCheck(this, I18NInjectIntoIndexPlugin);
+const {
+  i18n
+} = options;
 
-    this.isDevelopment = options.mode === 'dev' || options.mode === 'prod' || options.mode === 'dev-no-warn';
+class I18NInjectIntoIndexPlugin {
+  constructor(options) {
+    this.isDevelopment = options.isDevelopment;
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
     this.publicPath = options.publicPath;
+    this.templateLabel = options.templateLabel || '{{--user-locale}}';
+    this.i18nManifestFileName = options.i18nManifestFileName;
+    this.entryPointName = options.mainChunkName;
+  }
+
+  getI18nFileUrlPath(chunk, compilation) {
+    let urlpath = (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, this.templateLabel);
+    return (0, _urlConcat.urlConcat)(this.publicPath, urlpath);
+  }
+
+  getI18nManifest(compilation) {
+    const i18nManifestFile = compilation.assets[this.i18nManifestFileName];
+
+    if (!i18nManifestFile) {
+      return {};
+    }
+
+    const manifest = JSON.parse(i18nManifestFile.source());
+    return manifest;
+  }
+
+  injectI18nURLsToHTML(compilation) {
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync('I18NInjectIntoIndexPlugin', (data, cb) => {
+      const {
+        assets
+      } = data; // Manipulate the content
+
+      const i18nManifest = this.getI18nManifest(compilation);
+      const entryPoint = compilation.entrypoints.get(this.entryPointName);
+      const i18nScriptURLs = entryPoint.chunks.filter(c => !!i18nManifest[c.id]).map(c => this.getI18nFileUrlPath(c, compilation)); // .map(url => getI18nScriptTagObj(url));
+      // .join('');
+      // Tell webpack to move on
+
+      cb(null, newAssign(data, {
+        assets: newAssign(assets, {
+          js: i18nScriptURLs.concat(assets.js)
+        })
+      }));
+    });
   }
 
-  _createClass(I18NInjectIntoIndexPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      var _this = this;
-
-      compiler.hooks.emit.tap('I18NInjectIntoIndexPlugin', function (compilation) {
-        // let cdns = Object.keys(this.publicPaths);
-        if (i18nObj === null) {
-          var i18nFiles = Object.keys(compilation.assets).filter(function (assert) {
-            return assert.indexOf('i18n' + _path2.default.sep) !== -1;
-          });
-          //hook for i18n url contains i18n/ may cause problem
-          i18nObj = i18nFiles.reduce(function (res, next) {
-            var fileName = next.replace('i18n' + _path2.default.sep, '');
-            var splittedFileName = fileName.split('.');
-            if (_this.isDevelopment) {
-              res[splittedFileName[0]] = _this.publicPath + '/i18n/' + fileName;
-            } else {
-              res[splittedFileName[0]] = fileName;
-            }
-            return res;
-          }, {});
-        }
-
-        var _Object$keys$filter = Object.keys(compilation.assets).filter(function (filename) {
-          return (/\.html$/g.test(filename)
-          );
-        }),
-            _Object$keys$filter2 = _slicedToArray(_Object$keys$filter, 1),
-            indexFile = _Object$keys$filter2[0];
-
-        if (indexFile) {
-          var source = compilation.assets[indexFile].source();
-          compilation.assets[indexFile] = new _webpackSources.RawSource(source.replace(new RegExp('<!--I18nInfoToServer(.*)I18nInfoToServer-->', 'g'), function (match, arg) {
-            return match.replace(arg, JSON.stringify(i18nObj));
-          }));
-        }
+  withI18nSpitHandling(compiler) {
+    compiler.hooks.make.tap('I18NInjectIntoIndexPlugin', compilation => {
+      // let cdns = Object.keys(this.publicPaths);
+      // console.log('compilation.assets', Object.keys(compilation.assets).filter(a => a.includes('i18n')));
+      if (!(0, _hashUtils.hasContentHash)(this.i18nFileNameTemplate)) {
+        this.injectI18nURLsToHTML(compilation);
+        return;
+      }
+
+      _htmlWebpackPlugin.default.getHooks(compilation).beforeEmit.tapAsync('I18NInjectIntoIndexPlugin', (data, cb) => {
+        // Manipulate the content
+        const i18nManifest = this.getI18nManifest(compilation);
+        const entryPoint = compilation.entrypoints.get(this.entryPointName);
+        let i18nAssets = (0, _hashUtils.getShortI18nAssets)(entryPoint.chunks, i18nManifest, this.publicPath);
+        data.html = data.html.replace(new RegExp('<!--I18nInfoToServer(.*?)I18nInfoToServer-->', 'g'), (match, arg) => match.replace(arg, JSON.stringify(i18nAssets))); // Tell webpack to move on
+
+        cb(null, data);
       });
+    });
+  }
+
+  apply(compiler) {
+    if (i18n.chunkSplitEnable) {
+      this.withI18nSpitHandling(compiler);
+    } else {
+      this.withoutI18nSpitHandling(compiler);
     }
-  }]);
+  }
+
+  withoutI18nSpitHandling(compiler) {
+    compiler.hooks.emit.tap('I18NInjectIntoIndexPlugin', compilation => {
+      // let cdns = Object.keys(this.publicPaths);
+      if (i18nObj === null) {
+        let i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1); //hook for i18n url contains i18n/ may cause problem
+
+        i18nObj = i18nFiles.reduce((res, next) => {
+          let fileName = next.replace(`i18n${_path.default.sep}`, '');
+          let splittedFileName = fileName.split('.');
+          /* if (this.isDevelopment) {
+            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          } else {
+            res[splittedFileName[0]] = fileName;
+          } */
+
+          res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          return res;
+        }, {});
+      }
+
+      let [indexFile] = Object.keys(compilation.assets).filter(filename => /\.html$/g.test(filename));
+
+      if (indexFile) {
+        let source = compilation.assets[indexFile].source();
+        compilation.assets[indexFile] = new _webpackSources.RawSource(source.replace(new RegExp('<!--I18nInfoToServer(.*)I18nInfoToServer-->', 'g'), (match, arg) => match.replace(arg, JSON.stringify(i18nObj))));
+      }
+    });
+  }
 
-  return I18NInjectIntoIndexPlugin;
-}();
+}
 
 exports.default = I18NInjectIntoIndexPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+const pluginName = 'I18nDebugPlugin'; // this plugin  only for debug  related purpose
+
+class I18nDebugPlugin {
+  constructor(jsResourceI18nKeys) {
+    this.jsResourceI18nKeys = jsResourceI18nKeys;
+    this.warnings = [];
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation, compilationParams) => {
+      // TEMP : only for debugging purpose
+      this.compilation1 = compilation;
+      this.compilationParams = compilationParams.normalModuleFactory;
+    });
+    compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
+      if (!this.compilationParams || this.compilationParams.normalModuleFactory === factory) {
+        return;
+      } // console.log('skiped');
+
+
+      let handler = parser => {
+        parser.hooks.program.tap(pluginName, (ast, commmets) => {
+          const {
+            module
+          } = parser.state; //
+
+          if (!(module && /\.jsx?$/.test(module.resource))) {
+            return;
+          } // i18n grep proper contract regex
+
+
+          let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
+          i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
+          (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
+          i18nKeys.length && this.warnings.push({
+            message: 'skiped i18n keys',
+            reason: 'may be some child compiler',
+            fileName: module.resource,
+            i18nKeys
+          });
+        });
+      };
+
+      factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+      factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler); // factory.hooks.parser.for('javascript/esm').tap(pluginName, handler);
+    });
+  }
+
+}
+
+exports.default = I18nDebugPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDependency.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nDependencyTemplate = exports.I18nDependency = void 0;
+
+var _webpack = require("webpack");
+
+// const webpack = require('webpack');
+class I18nDependency extends _webpack.Dependency {
+  constructor({
+    identifier,
+    i18nKeys
+  }, context, identifierIndex) {
+    super();
+    this.identifier = identifier;
+    this.identifierIndex = identifierIndex;
+    this.i18nKeys = i18nKeys;
+    this.context = context;
+  }
+
+  getResourceIdentifier() {
+    return `i18n-module-${this.identifier}-${this.identifierIndex}`;
+  }
+
+}
+
+exports.I18nDependency = I18nDependency;
+
+class I18nDependencyTemplate {
+  //eslint-disable-next-line no-empty-function
+  apply() {} // apply(dep, source) {
+  // if (typeof dep.range === "number") {
+  // source.insert(0, `/* comment by I18nSplitPlugin , i18n keys = ${JSON.stringify(dep.i18nKeys)} */`);
+  // 	return;
+  // }
+  // source.replace(dep.range[0], dep.range[1] - 1, dep.expression);
+  // }
+
+
+}
+
+exports.I18nDependencyTemplate = I18nDependencyTemplate;

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpack = require("webpack");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
+
+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
+ *
+ */
+// import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
+const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
+
+const MODULE_TYPE = 'json/i18n';
+
+const ltype = locale => `${MODULE_TYPE}/${locale}`;
+
+function hashesWithLength(hashes, length) {
+  const shortChunkHashMap = {};
+
+  for (let key of Object.keys(hashes)) {
+    if (typeof hashes[key] === 'string') {
+      shortChunkHashMap[key] = hashes.slice(0, length);
+    }
+  }
+
+  return shortChunkHashMap;
+}
+
+function getContentHashMaxLength(filenameTemplate) {
+  let length = 0;
+  let matches = filenameTemplate.match(_hashUtils.REGEXP_CONTENTHASH);
+
+  for (let match of matches) {
+    let tem = match.match(/\d+/);
+
+    if (tem) {
+      length = Math.max(parseInt(tem[0]), length);
+    } else {
+      length = 0;
+      break;
+    }
+  }
+
+  return length;
+}
+
+class I18nDownlodLogic {
+  constructor({
+    filenameTemplate,
+    publicPath,
+    localeVarName = 'document.documentElement.lang',
+    locales
+  }) {
+    this.locales = locales;
+    this.publicPath = publicPath;
+    this.options = {
+      filenameTemplate,
+      localeVarName
+    };
+  }
+
+  getShortContentHashes(chunk, hashLength) {
+    let allContenHashes = {};
+    const chunkMaps = chunk.getChunkMaps();
+    this.locales.forEach(locale => {
+      allContenHashes[locale] = chunkMaps.contentHash[ltype(locale)];
+    });
+
+    if (!length) {
+      return allContenHashes;
+    }
+
+    let shortContentHashMap = {};
+
+    for (const locale of this.locales) {
+      shortContentHashMap[locale] = hashesWithLength(allContenHashes[locale], hashLength);
+    }
+
+    return shortContentHashMap;
+  }
+
+  getI18nChunkObject(mainChunk) {
+    const obj = {};
+
+    for (const chunk of mainChunk.getAllAsyncChunks()) {
+      if (_I18nKeysIdentifer.default.isChunkHasI18n(chunk)) {
+        obj[chunk.id] = 1;
+      }
+    }
+
+    return obj;
+  }
+
+  addDownloadLogicOfI18nInMainTemplate(mainTemplate) {
+    mainTemplate.hooks.localVars.tap(pluginName, (source, mainChunk) => {
+      const chunkMap = this.getI18nChunkObject(mainChunk);
+
+      if (!Object.keys(chunkMap).length) {
+        return source;
+      }
+
+      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,
+       */
+      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 ]
+       */
+
+
+      const chunkMaps = mainChunk.getChunkMaps();
+      const {
+        crossOriginLoading
+      } = mainTemplate.outputOptions;
+      const {
+        filenameTemplate,
+        localeVarName = 'document.documentElement.lang'
+      } = this.options;
+      const i18nSrcPath = mainTemplate.getAssetPath(JSON.stringify(filenameTemplate).replace(/\[locale\]/gi, '"+ locale +"'), // "i18n-chunk/[locale]/[name].[chunkhash].js"
+      {
+        hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
+        hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
+        chunk: {
+          id: '" + chunkId + "',
+          hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
+
+          hashWithLength(length) {
+            const shortChunkHashMap = hashesWithLength(chunkMaps.hash, length);
+            return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
+          },
+
+          // contentHash: contentHashMap,
+          // contentHashWithLength: contentHashLengthMap,
+          contentHash: {
+            [MODULE_TYPE]: '" + contentHash + "'
+          },
+          contentHashWithLength: {
+            [MODULE_TYPE]: length => `" + contentHash.slice(0,${length}) + "`
+          },
+          name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`
+        },
+        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
+       */
+
+      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 ((0, _hashUtils.hasContentHash)(filenameTemplate)) {
+        const hashLength = getContentHashMaxLength(filenameTemplate);
+        const contentHashes = this.getShortContentHashes(mainChunk, hashLength);
+        buf.push(_webpack.Template.asString(['// all i18n files contentHash ', `var i18nContentHashes = ${JSON.stringify(contentHashes)};`, '', 'if (!i18nContentHashes[locale]) {', '  console.warn("this locale is "+locale + " not has support")', '  return;', '}', 'if (!i18nContentHashes[locale][chunkId]) {', '  console.warn("this chunkId is " + chunkId + " does not have \'"+locale+"\' locale chunk")', '  return;', '}']));
+        buf.push('var contentHash = i18nContentHashes[locale][chunkId]');
+      }
+
+      const hashUtils = _webpack.Template.asString(buf);
+
+      const publicPath = this.publicPath ? JSON.stringify(this.publicPath) : `${mainTemplate.requireFn}.p`;
+      return _webpack.Template.asString([source, `
+(function() {
+  // ${pluginName} I18N loading
+  var i18nChunks = ${JSON.stringify(chunkMap)};
+  var locale = ${localeVarName};
+  // ${pluginName} I18N hasehes
+  ${hashUtils}
+  if(installedI18nChunks[chunkId]) {
+    promises.push(installedI18nChunks[chunkId]);
+  } else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
+    promises.push(installedI18nChunks[chunkId] = new Promise(function(resolve, reject) {
+      var srcPath = (${i18nSrcPath});
+      ${'' // TODO: I think this is the area for download chunk of i18n we can
+      //  change mainTemplate.requireFn as our cdn server urls !!!
+      //  and we can change the i18n download logic here
+      }
+      var fullsrcPath = ${publicPath} + srcPath;
+      var existingLinkTags = document.getElementsByTagName("script");
+      for(var i = 0; i < existingLinkTags.length; i++) {
+        var tag = existingLinkTags[i];
+        var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");
+        if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
+      }
+      var scriptTag = document.createElement("script");
+      scriptTag.onload = resolve;
+      scriptTag.onerror = function(event) {
+        var request = event && event.target && event.target.src || fullsrcPath;
+        var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + request + ")");
+        err.code = "I18N_CHUNK_LOAD_FAILED";
+        err.request = request;
+        delete installedI18nChunks[chunkId];
+        scriptTag.parentNode.removeChild(scriptTag);
+        reject(err);
+      };
+      ${mainTemplate.requireFn}.nc && scriptTag.setAttribute("nonce", ${mainTemplate.requireFn}.nc);
+      scriptTag.src = fullsrcPath;
+      ${crossOriginLoading ? `if (scriptTag.src.indexOf(window.location.origin + '/') !== 0) {
+          scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};
+        }` : ''}
+      document.body.appendChild(scriptTag);
+    }).then(function() {
+      installedI18nChunks[chunkId] = 0;
+    }));
+  }
+})()`]);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      const {
+        mainTemplate
+      } = compilation;
+      this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
+    });
+  }
+
+}
+
+exports.default = I18nDownlodLogic;