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

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

@@ -1,25 +1,25 @@
-# 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.
-
-Ok, 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, Which mean we diside to create for each js chunk has its own i18n chunks, 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.
-
-Ok, How to you do this thing?
-we have read the js chunk and collect I18n keys what are used in that chunk and we will create i18n chunk files with only used key.
-
-Ok, How do you collect that keys?
-we now have two experimental stage to collect I18n keys.
-
-1. we read jsResource.properties (or all keys I18n file) then we walk this AST of js and we collect all string which is jsResource.properties.
-2. for dynamic we discide to use comment some thing like
-   `// I18n support.tickekt.email.notvalid`
-
-ok, how do you downlowd and give to app?
-we have over write defualt webpack require ensure function.
-So every dynamic chunk requset are done by that function.
-So 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.
+# 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.
+
+Ok, 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, Which mean we diside to create for each js chunk has its own i18n chunks, 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.
+
+Ok, How to you do this thing?
+we have read the js chunk and collect I18n keys what are used in that chunk and we will create i18n chunk files with only used key.
+
+Ok, How do you collect that keys?
+we now have two experimental stage to collect I18n keys.
+
+1. we read jsResource.properties (or all keys I18n file) then we walk this AST of js and we collect all string which is jsResource.properties.
+2. for dynamic we discide to use comment some thing like
+   `// I18n support.tickekt.email.notvalid`
+
+ok, how do you downlowd and give to app?
+we have over write defualt webpack require ensure function.
+So every dynamic chunk requset are done by that function.
+So 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.

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createHash = createHash;
 
-var _webpack = require("webpack");
-
 function createHash({
+  compiler,
   outputOptions,
   content
 }) {
@@ -16,9 +15,10 @@ function createHash({
     hashDigest,
     hashDigestLength
   } = outputOptions;
-
-  const hash = _webpack.util.createHash(hashFunction);
-
+  const {
+    createHash
+  } = compiler.webpack.util;
+  const hash = createHash(hashFunction);
   hash.update(content);
   return hash.digest(hashDigest).substring(0, hashDigestLength);
 }

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18nDependency = getI18nDependency;
+exports.i18nDependencyCache = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable class-methods-use-this */
+const i18nDependencyCache = new WeakMap();
+exports.i18nDependencyCache = i18nDependencyCache;
+
+function getI18nDependency(webpack) {
+  if (i18nDependencyCache.has(webpack)) {
+    return i18nDependencyCache.get(webpack);
+  }
+
+  class I18nDependency extends webpack.Dependency {
+    constructor({
+      identifier,
+      content
+    }, context, identifierIndex) {
+      super();
+      this.identifier = identifier;
+      this.identifierIndex = identifierIndex;
+      this.content = content; // ## this.layer = layer;
+      // ## this.supports = supports;
+      // ## this.media = media;
+      // ## this.sourceMap = sourceMap;
+
+      this.context = context;
+      this.assets = undefined;
+      this.assetsInfo = undefined;
+    }
+
+    getResourceIdentifier() {
+      return `i18n-module-${this.identifier}-${this.identifierIndex}`;
+    }
+
+    getModuleEvaluationSideEffectsState() {
+      return webpack.ModuleGraphConnection.TRANSITIVE_ONLY;
+    }
+
+    serialize(context) {
+      const {
+        write
+      } = context;
+      write(this.identifier);
+      write(this.content); // ## write(this.layer);
+      // ## write(this.supports);
+      // ## write(this.media);
+      // ## write(this.sourceMap);
+
+      write(this.context);
+      write(this.identifierIndex);
+      write(this.assets);
+      write(this.assetsInfo);
+      super.serialize(context);
+    }
+
+    deserialize(context) {
+      super.deserialize(context);
+    }
+
+  }
+
+  i18nDependencyCache.set(webpack, I18nDependency);
+  webpack.util.serialization.register(I18nDependency, _path.default.resolve(__dirname, 'I18nDependency-new'), null, {
+    serialize(instance, context) {
+      instance.serialize(context);
+    },
+
+    deserialize(context) {
+      const {
+        read
+      } = context;
+      const dep = new I18nDependency({
+        identifier: read(),
+        content: read() // ## layer: read(),
+        // ## supports: read(),
+        // ## media: read(),
+        // ## sourceMap: read()
+
+      }, read(), read());
+      const assets = read();
+      const assetsInfo = read();
+      dep.assets = assets;
+      dep.assetsInfo = assetsInfo;
+      dep.deserialize(context);
+      return dep;
+    }
+
+  });
+  return I18nDependency;
+}

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getI18nLoadingRuntimeModule = getI18nLoadingRuntimeModule;
 
-var _webpack = require("webpack");
-
 /* eslint-disable no-restricted-syntax */
 const getChunksMapObject = i18nChunks => {
   const obj = {};
@@ -19,9 +17,16 @@ const getChunksMapObject = i18nChunks => {
 };
 
 function getI18nLoadingRuntimeModule({
+  webpack,
   getI18nChunks
 }) {
-  class I18nLoadingRuntimeModule extends _webpack.RuntimeModule {
+  const {
+    Template,
+    RuntimeGlobals,
+    RuntimeModule
+  } = webpack;
+
+  class I18nLoadingRuntimeModule extends RuntimeModule {
     constructor(runtimeRequirements, {
       runtimeOptions,
       prefixFunc
@@ -49,10 +54,10 @@ function getI18nLoadingRuntimeModule({
       // const i18nChunks = getI18nChunks(entryRuntimeChunk);
 
       const i18nChunks = getI18nChunks(chunk);
-      const withLoading = runtimeRequirements.has(_webpack.RuntimeGlobals.ensureChunkHandlers) && i18nChunks.length > 0;
+      const withLoading = runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) && i18nChunks.length > 0;
 
       if (!withLoading) {
-        return '// no i18n chunks loading';
+        return '';
       }
 
       const chunkMap = getChunksMapObject(i18nChunks);
@@ -61,13 +66,13 @@ function getI18nLoadingRuntimeModule({
         scriptType,
         insert: insertRoot
       } = this.runtimeOptions;
-      const insertPlace = typeof insertRoot === 'function' ? `(${insertRoot.toString()})(scriptTag)` : _webpack.Template.asString([`var target = document.querySelector("${insertRoot}");`, 'target.parentNode.insertBefore(scriptTag, target.nextSibling);']);
-      return _webpack.Template.asString([`${prefixFunc(i18nChunks)}`, `var createI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId, fullsrc, resolve, reject', ['var scriptTag = document.createElement("script");', attributes ? _webpack.Template.asString(Object.entries(attributes).map(entry => {
+      const insertPlace = typeof insertRoot === 'function' ? `(${insertRoot.toString()})(scriptTag)` : Template.asString([`var target = document.querySelector("${insertRoot}");`, 'target.parentNode.insertBefore(scriptTag, target.nextSibling);']);
+      return Template.asString([`${prefixFunc(i18nChunks)}`, `var createI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId, fullsrc, resolve, reject', ['var scriptTag = document.createElement("script");', attributes ? Template.asString(Object.entries(attributes).map(entry => {
         const [key, value] = entry;
         return `scriptTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
-      })) : '', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', _webpack.Template.indent(['resolve();']), '} else {', _webpack.Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? _webpack.Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', _webpack.Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || _webpack.Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', _webpack.Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', _webpack.Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${_webpack.RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${_webpack.RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(
+      })) : '', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', Template.indent(['resolve();']), '} else {', Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, withLoading ? Template.asString(['// object to store loaded I18N chunks', 'var installedI18nChunks = {', Template.indent(
       /** @type {string[]} */
-      chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${_webpack.RuntimeGlobals.ensureChunkHandlers}.miniI18n = ${runtimeTemplate.basicFunction('chunkId, promises', [`var i18nChunks = ${JSON.stringify(chunkMap)};`, 'if(installedI18nChunks[chunkId]) promises.push(installedI18nChunks[chunkId]);', 'else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {', _webpack.Template.indent([`promises.push(installedI18nChunks[chunkId] = loadI18nScriptTag(chunkId).then(${runtimeTemplate.basicFunction('', 'installedI18nChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedI18nChunks[chunkId];', 'throw e;'])}));`]), '}'])};`, '']);
+      chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${RuntimeGlobals.ensureChunkHandlers}.miniI18n = ${runtimeTemplate.basicFunction('chunkId, promises', [`var i18nChunks = ${JSON.stringify(chunkMap)};`, 'if(installedI18nChunks[chunkId]) promises.push(installedI18nChunks[chunkId]);', 'else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {', Template.indent([`promises.push(installedI18nChunks[chunkId] = loadI18nScriptTag(chunkId).then(${runtimeTemplate.basicFunction('', 'installedI18nChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedI18nChunks[chunkId];', 'throw e;'])}));`]), '}'])};`]) : '// no chunk loading', '']);
     }
 
   }

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

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18nModule = getI18nModule;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-underscore-dangle */
+const i18nModuleCache = new WeakMap();
+
+function getI18nModule(webpack) {
+  if (i18nModuleCache.has(webpack)) {
+    return i18nModuleCache.get(webpack);
+  }
+
+  class I18nModule extends webpack.Module {
+    constructor({
+      context,
+      identifier,
+      identifierIndex,
+      content,
+      // ## layer,
+      // ## supports,
+      // ## media,
+      // ## sourceMap,
+      assets,
+      assetsInfo
+    }) {
+      super(_constants.MODULE_TYPE, context);
+      this.id = '';
+      this._context = context;
+      this._identifier = identifier;
+      this._identifierIndex = identifierIndex;
+      this.content = content; // ## this.layer = layer;
+      // ## this.supports = supports;
+      // ## this.media = media;
+      // ## this.sourceMap = sourceMap;
+
+      this.assets = assets;
+      this.assetsInfo = assetsInfo;
+      this._needBuild = true;
+    }
+
+    size() {
+      return this.content.length;
+    }
+
+    identifier() {
+      return `i18n|${this._identifier}|${this._identifierIndex}`;
+    }
+
+    readableIdentifier(requestShortener) {
+      return `i18n ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ''}`;
+    } // eslint-disable-next-line class-methods-use-this
+
+
+    getSourceTypes() {
+      return _constants.TYPES;
+    } // eslint-disable-next-line class-methods-use-this
+
+
+    codeGeneration() {
+      return _constants.CODE_GENERATION_RESULT;
+    }
+
+    nameForCondition() {
+      const resource = this._identifier.split('!').pop();
+
+      const idx = resource.indexOf('?');
+
+      if (idx >= 0) {
+        return resource.substring(0, idx);
+      }
+
+      return resource;
+    }
+
+    updateCacheModule(module) {
+      if (this.content !== module.content || // ## this.layer !== module.layer ||
+      // ## this.supports !== module.supports ||
+      // ## this.media !== module.media ||
+      // ## this.sourceMap !== module.sourceMap ||
+      this.assets !== module.assets || this.assetsInfo !== module.assetsInfo) {
+        this._needBuild = true;
+        this.content = module.content; // ## this.layer = module.layer;
+        // ## this.supports = module.supports;
+        // ## this.media = module.media;
+        // ## this.sourceMap = module.sourceMap;
+
+        this.assets = module.assets;
+        this.assetsInfo = module.assetsInfo;
+      }
+    }
+
+    needRebuild() {
+      return this._needBuild;
+    }
+
+    needBuild(context, callback) {
+      callback(undefined, this._needBuild);
+    }
+
+    build(options, compilation, resolver, fileSystem, callback) {
+      this.buildInfo = {
+        assets: this.assets,
+        assetsInfo: this.assetsInfo,
+        cacheable: true,
+        hash: this._computeHash(compilation.outputOptions.hashFunction)
+      };
+      this.buildMeta = {};
+      this._needBuild = false;
+      callback();
+    }
+
+    _computeHash(hashFunction) {
+      const hash = webpack.util.createHash(hashFunction);
+      hash.update(this.content); // ## if (this.layer) {
+      // ##   hash.update(this.layer);
+      // ## }
+      // ## hash.update(this.supports || '');
+      // ## hash.update(this.media || '');
+      // ## hash.update(this.sourceMap || '');
+
+      return hash.digest('hex');
+    }
+
+    updateHash(hash, context) {
+      super.updateHash(hash, context);
+      hash.update(this.buildInfo.hash);
+    }
+
+    serialize(context) {
+      const {
+        write
+      } = context;
+      write(this._context);
+      write(this._identifier);
+      write(this._identifierIndex);
+      write(this.content); // ## write(this.layer);
+      // ## write(this.supports);
+      // ## write(this.media);
+      // ## write(this.sourceMap);
+
+      write(this.assets);
+      write(this.assetsInfo);
+      write(this._needBuild);
+      super.serialize(context);
+    }
+
+    deserialize(context) {
+      this._needBuild = context.read();
+      super.deserialize(context);
+    }
+
+  }
+
+  i18nModuleCache.set(webpack, I18nModule);
+  webpack.util.serialization.register(I18nModule, _path.default.resolve(__dirname, 'I18nModule-new'), null, {
+    serialize(instance, context) {
+      instance.serialize(context);
+    },
+
+    deserialize(context) {
+      const {
+        read
+      } = context;
+      const contextModule = read();
+      const identifier = read();
+      const identifierIndex = read();
+      const content = read(); // ## const layer = read();
+      // ## const supports = read();
+      // ## const media = read();
+      // ## const sourceMap = read();
+
+      const assets = read();
+      const assetsInfo = read();
+      const dep = new I18nModule({
+        context: contextModule,
+        identifier,
+        identifierIndex,
+        content,
+        // ## layer,
+        // ## supports,
+        // ## media,
+        // ## sourceMap,
+        assets,
+        assetsInfo
+      });
+      dep.deserialize(context);
+      return dep;
+    }
+
+  });
+  return I18nModule;
+}