@zohodesk/react-cli 1.1.17 → 1.1.18-exp.1

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

@@ -0,0 +1,401 @@
+"use strict";
+
+var _webpack = require("webpack");
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _constants = require("./constants");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
+
+var _getI18nModule = require("./getI18nModule");
+
+var _getI18nDependency = require("./getI18nDependency");
+
+var _optionsHandler = require("./optionsHandler");
+
+var _getI18nLoadingRuntimeModule = require("./getI18nLoadingRuntimeModule");
+
+var _createHash = require("./createHash");
+
+var _pathCreator = require("./pathCreator");
+
+var _templateFileName = require("./templateFileName");
+
+var _hashUtils = require("./utils/hashUtils");
+
+var _propertiesUtils = require("./utils/propertiesUtils");
+
+var _urlConcat = require("../../../../server/urlConcat");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-restricted-syntax */
+
+/* eslint-disable no-nested-ternary */
+// import getI18nKeysFormModules from './utils/getI18nKeysFormModules';
+const pluginName = 'mini-i18n-extract-plugin';
+const pluginSymbol = Symbol(pluginName);
+
+function getChunkModules(chunk, chunkGraph) {
+  return typeof chunkGraph !== 'undefined' ? chunkGraph.getChunkModules(chunk) : chunk.modulesIterable;
+}
+
+class I18nExtractPlugin {
+  constructor(options = {}) {
+    // initialize options
+    this.options = (0, _optionsHandler.optionsHandler)(options);
+  }
+
+  getI18nKeysForChunk(chunk, chunkGraph) {
+    const {
+      modulesI18nKeysMap
+    } = this.i18nKeysIdentifer;
+    const i18nKeysMap = {};
+
+    for (const mod of getChunkModules(chunk, chunkGraph)) {
+      const keys = modulesI18nKeysMap[mod.resource];
+
+      if (keys) {
+        for (const key of keys) {
+          i18nKeysMap[key] = 1;
+        }
+      }
+    }
+
+    return Object.keys(i18nKeysMap);
+  }
+
+  getI18nContentForkeys(i18nKeys, locale) {
+    const {
+      allI18nObject
+    } = this.options;
+    const data = {};
+
+    for (const key of i18nKeys) {
+      data[key] = allI18nObject[locale][key];
+    }
+
+    return data;
+  }
+
+  getI18nChunkFileContent(i18nKeys, loc) {
+    const {
+      jsonpFunc
+    } = this.options;
+    const data = this.getI18nContentForkeys(i18nKeys, loc);
+    return `${jsonpFunc}(${(0, _propertiesUtils.jsonToString)(data)})`;
+  }
+
+  filterI18nUsedChunks(chunks) {
+    const {
+      localeChunkAssestMap
+    } = this;
+    return Array.from(chunks).filter(c => localeChunkAssestMap[c.id]);
+  }
+
+  getContentHashes(locale) {
+    const {
+      localeChunkAssestMap
+    } = this;
+    const contentHashes = {};
+    Object.keys(localeChunkAssestMap).forEach(chunkId => {
+      if (localeChunkAssestMap[chunkId] && localeChunkAssestMap[chunkId][locale] && localeChunkAssestMap[chunkId][locale].contentHash) {
+        contentHashes[chunkId] = localeChunkAssestMap[chunkId][locale].contentHash;
+      } // console.log(localeChunkAssestMap[chunkId][locale]);
+
+    }); // console.log({ contentHashes });
+
+    return contentHashes;
+  }
+
+  apply(compiler) {
+    const {
+      webpack
+    } = compiler;
+    this.addToDefaultTypes(compiler);
+    const I18nModule = (0, _getI18nModule.getI18nModule)(webpack);
+    const I18nDependency = (0, _getI18nDependency.getI18nDependency)(webpack); // initialize base data's and plugis
+
+    this.i18nKeysIdentifer = new _I18nKeysIdentifer.default(this.options, {
+      I18nModule,
+      I18nDependency
+    });
+    this.i18nKeysIdentifer.apply(compiler);
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.localeChunkAssestMap = {};
+      compilation.hooks.beforeHash.tap(pluginName, () => {
+        const {
+          locales
+        } = this.options;
+        const {
+          chunks
+        } = compilation;
+        this.localeChunkAssestMap = {};
+        const {
+          localeChunkAssestMap
+        } = this;
+
+        for (const chunk of chunks) {
+          const {
+            chunkGraph
+          } = compilation;
+          const i18nKeys = this.getI18nKeysForChunk(chunk, chunkGraph);
+
+          if (i18nKeys.length) {
+            localeChunkAssestMap[chunk.id] = {};
+
+            for (const loc of locales) {
+              const content = this.getI18nChunkFileContent(i18nKeys, loc);
+              localeChunkAssestMap[chunk.id][loc] = {
+                content
+              };
+            }
+          }
+        }
+      });
+      compilation.hooks.chunkHash.tap(pluginName, (chunk, hash) => {
+        const {
+          localeChunkAssestMap
+        } = this;
+        const {
+          locales
+        } = this.options;
+
+        if (localeChunkAssestMap[chunk.id]) {
+          for (const loc of locales) {
+            const {
+              content
+            } = localeChunkAssestMap[chunk.id][loc];
+            hash.update(content);
+          }
+        }
+      });
+
+      function createFilenameWithHash({
+        fileNameTemplate,
+        chunk,
+        locale,
+        content
+      }) {
+        const fileName = fileNameTemplate.replaceAll('[locale]', locale);
+        const contentHash = (0, _createHash.createHash)({
+          compiler,
+          outputOptions: compilation.outputOptions,
+          content
+        });
+        const filename = (0, _pathCreator.pathCreator)(fileName, compilation, {
+          hash: compilation.hash,
+          chunkId: chunk.id,
+          chunkHash: chunk.hash,
+          contentHash
+        });
+        return {
+          contentHash,
+          filename
+        };
+      }
+
+      compilation.hooks.contentHash.tap(pluginName, chunk => {
+        const {
+          RawSource
+        } = webpack.sources;
+        const {
+          locales,
+          chunkFilename,
+          filename
+        } = this.options;
+        const fileNameTemplate = chunk.canBeInitial() ? filename : chunkFilename; // const { chunks } = compilation;
+
+        const {
+          localeChunkAssestMap
+        } = this; // function filterI18nUsedChunks(chunks) {
+        //   return Array.from(chunks).filter(c => localeChunkAssestMap[c.id]);
+        // }
+        // for (const chunk of chunks) {
+
+        if (localeChunkAssestMap[chunk.id]) {
+          for (const locale of locales) {
+            const localObject = localeChunkAssestMap[chunk.id][locale];
+            const {
+              content
+            } = localObject;
+            const {
+              contentHash,
+              filename
+            } = createFilenameWithHash({
+              fileNameTemplate,
+              chunk,
+              locale,
+              content
+            });
+            localObject.contentHash = contentHash;
+            localObject.filename = filename;
+            compilation.emitAsset(filename, new RawSource(content));
+          }
+        }
+      });
+
+      if (!this.options.runtime) {
+        return;
+      }
+
+      this.createI18nDownloadCodeInRuntimeFile(webpack, compilation, compiler); // ## compilation.hooks.runtimeRequirementInTree
+      // ##   .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+      // ##   .tap(pluginName, handler);
+
+      _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, hookOptions => {
+        const {
+          assets
+        } = hookOptions;
+        const {
+          templateLabel,
+          filename,
+          publicPath = ''
+        } = this.options;
+        const dummyContent = '// dummy comment';
+        const initialChunks = compilation.chunks.filter(c => c.canBeInitial() && c.id !== c.runtime);
+        const initialI18nAssets = initialChunks.map(c => {
+          const data = createFilenameWithHash({
+            fileNameTemplate: filename,
+            chunk: c,
+            locale: templateLabel,
+            content: dummyContent
+          });
+          return (0, _urlConcat.urlConcat)(publicPath, data.filename);
+        });
+        const allJSAssets = [...initialI18nAssets, ...assets.js].map(url => url.replaceAll('[locale]', templateLabel).replaceAll('%5Blocale%5D', templateLabel));
+        console.log('HtmlWebpackPluginallJSAssets', {
+          assets,
+          filename,
+          allJSAssets
+        });
+        return {
+          assets: { ...assets,
+            js: allJSAssets
+          }
+        };
+      });
+    });
+  }
+
+  createI18nDownloadCodeInRuntimeFile(webpack, compilation, compiler) {
+    const {
+      RuntimeGlobals
+    } = webpack;
+    const {
+      RawSource
+    } = webpack.sources;
+    const {
+      chunkFilename,
+      locales
+    } = this.options;
+    const chunkFilenameHasContentHash = (0, _hashUtils.hasContentHash)(chunkFilename);
+
+    const getI18nChunks = mainChunk => this.filterI18nUsedChunks(mainChunk.getAllAsyncChunks());
+
+    const I18nLoadingRuntimeModule = (0, _getI18nLoadingRuntimeModule.getI18nLoadingRuntimeModule)({
+      getI18nChunks,
+      webpack
+    });
+    const enabledChunks = new WeakSet();
+
+    const chunkFilenameUrlgenerator = (i18nChunks, locale) => (0, _templateFileName.templateFileName)({
+      compiler,
+      compilation,
+      locale,
+      dynamicFilename: chunkFilename,
+      contentHashes: this.getContentHashes(locale),
+      chunks: i18nChunks
+    });
+
+    const prefixFunc = () => _constants.I18N_CHUNK_NAME_GENERATION_SEGMENT;
+
+    const handler = (entryRuntimeChunk, set) => {
+      if (enabledChunks.has(entryRuntimeChunk)) {
+        return;
+      }
+
+      enabledChunks.add(entryRuntimeChunk);
+      const {
+        chunkFilename,
+        // filename: initialFilename,
+        runtimeOptions
+      } = this.options;
+
+      if (typeof chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(chunkFilename)) {
+        set.add(RuntimeGlobals.getFullHash);
+      }
+
+      set.add(RuntimeGlobals.publicPath);
+      compilation.addRuntimeModule(entryRuntimeChunk, new I18nLoadingRuntimeModule(set, {
+        prefixFunc: chunkFilenameHasContentHash ? prefixFunc : chunkFilenameUrlgenerator,
+        compiler,
+        runtimeOptions,
+        chunkFilename
+      }));
+    };
+
+    compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.ensureChunkHandlers).tap(pluginName, handler);
+
+    if (chunkFilenameHasContentHash) {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_DERIVED // additionalAssets: true
+
+      }, assets => {
+        // eslint-disable-next-line no-underscore-dangle
+        const entries = compilation._getChunkGraphEntries();
+
+        function createRuntimeFilePerLocale({
+          locale,
+          runtimeFileName,
+          runtimeFileSourceStr,
+          i18nChunks
+        }) {
+          const newRuntimeName = runtimeFileName.replaceAll('[locale]', locale);
+          const replaceText = chunkFilenameUrlgenerator(i18nChunks, locale);
+          const replacedStr = runtimeFileSourceStr.replace(_constants.I18N_CHUNK_NAME_GENERATION_SEGMENT, replaceText);
+          compilation.emitAsset(newRuntimeName, new RawSource(replacedStr));
+        }
+
+        for (const entryChunk of entries) {
+          const i18nChunks = getI18nChunks(entryChunk);
+          const runtimeFileName = entryChunk.files[0];
+          const runtimeFileSourceStr = assets[runtimeFileName].source();
+          locales.forEach(locale => createRuntimeFilePerLocale({
+            locale,
+            entryChunk,
+            runtimeFileName,
+            runtimeFileSourceStr,
+            i18nChunks
+          })); // NOTE: we don't delete, Because of HTML plugin needs to add runtime file in html
+          // compilation.deleteAsset(runtimeFileName);
+        }
+      });
+    }
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  addToDefaultTypes(compiler) {
+    const {
+      splitChunks
+    } = compiler.options.optimization;
+
+    if (splitChunks) {
+      if (splitChunks.defaultSizeTypes.includes('...')) {
+        splitChunks.defaultSizeTypes.push(_constants.MODULE_TYPE);
+      }
+    }
+  }
+
+}
+
+I18nExtractPlugin.pluginName = pluginName;
+I18nExtractPlugin.pluginSymbol = pluginSymbol; // I18nExtractPlugin.loader = require.resolve('./loader');
+
+module.exports = I18nExtractPlugin;
+/**
+ * TODO:
+ * move `localeChunkAssestMap` as separate module or file or class
+ */

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionsHandler = optionsHandler;
+
+var _constants = require("./constants");
+
+var _readI18nValues = require("./readI18nValues");
+
+/* eslint-disable no-use-before-define */
+function optionsHandler(options) {
+  const {
+    disableDefault,
+    jsResource,
+    propertiesFolder
+  } = options;
+  const {
+    jsResourceI18nKeys,
+    allI18nObject,
+    locales
+  } = (0, _readI18nValues.readI18nValues)({
+    jsResource,
+    propertiesFolder,
+    disableDefault
+  });
+  return {
+    filename: options.filename || _constants.DEFAULT_FILENAME,
+    chunkFilename: options.chunkFilename || chunkNameDecider(options.filename),
+    templateLabel: options.templateLabel,
+    publicPath: options.publicPath,
+    disableDefault: options.disableDefault,
+    i18nManifestFileName: options.i18nManifestFileName,
+    jsonpFunc: options.jsonpFunc,
+    localeVarName: options.localeVarName,
+    jsResource: options.jsResource,
+    propertiesFolder: options.propertiesFolder,
+    jsResourceI18nKeys,
+    allI18nObject,
+    locales,
+    // template: (object, locale) => `window.loadI18n(${JSON.stringify(object)}, ${JSON.stringify(locale)})`,
+    runtime: true,
+    runtimeOptions: {
+      insert: options.insert,
+      scriptType: typeof options.scriptType === 'boolean' && options.scriptType === true || typeof options.scriptType === 'undefined' ? 'text/javascript' : options.scriptType,
+      attributes: options.attributes
+    }
+  };
+}
+
+function chunkNameDecider(filename) {
+  if (typeof filename !== 'function') {
+    const hasName = filename.includes('[name]');
+    const hasId = filename.includes('[id]');
+    const hasChunkHash = filename.includes('[chunkhash]');
+    const hasContentHash = filename.includes('[contenthash]');
+
+    if (hasChunkHash || hasContentHash || hasName || hasId) {
+      return filename;
+    }
+
+    return filename.replace(/(^|\/)([^/]*(?:\?|$))/, '$1[id].$2');
+  }
+
+  return _constants.DEFAULT_CHUNK_FILENAME;
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pathCreator = pathCreator;
+
+var _constants = require("./constants");
+
+function pathCreator(filenameTemplate, compilation, data) {
+  return compilation.getAssetPath(filenameTemplate.replace(/\[locale\]/gi, data.locale), {
+    hash: data.hash,
+    chunk: {
+      id: data.chunkId,
+      hash: data.chunkHash,
+      contentHash: {
+        [_constants.MODULE_TYPE]: data.contentHash
+      },
+      name: data.chunkName
+    },
+    contentHashType: _constants.MODULE_TYPE
+  });
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.readI18nValues = readI18nValues;
+
+var _propertiesUtils = require("./utils/propertiesUtils");
+
+// gethere i18n keys and values
+function readI18nValues({
+  jsResource,
+  propertiesFolder,
+  disableDefault
+}) {
+  const jsResourceI18nKeys = jsResource ? (0, _propertiesUtils.getPropertiesAsJSON)(jsResource) : {};
+  const allI18nObject = (0, _propertiesUtils.getAllI18n)({
+    folderPath: propertiesFolder,
+    disableDefault,
+    jsResourceI18nKeys
+  }); // initialize base data's and plugis
+
+  const locales = Object.keys(allI18nObject);
+  return {
+    jsResourceI18nKeys,
+    allI18nObject,
+    locales
+  };
+}

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.templateFileName = templateFileName;
+
+var _templateHashHelpers = require("./templateHashHelpers");
+
+function templateFileName({
+  compiler,
+  compilation,
+  dynamicFilename,
+  locale,
+  chunks,
+  contentHashes
+}) {
+  const {
+    webpack
+  } = compiler;
+  const {
+    Template,
+    RuntimeGlobals
+  } = webpack;
+  const MODULE_TYPE = 'text/mini-i18n';
+  const {
+    mapExpr,
+    mapExprWithLength
+  } = (0, _templateHashHelpers.templateHashHelpers)(chunks); // "i18n-chunk/[locale]/[name].[chunkhash].js"
+
+  const i18nURLPathTemplate = compilation.getPath(JSON.stringify(dynamicFilename).replace(/\[locale\]/gi, '"+ locale +"'), {
+    hash: `" + ${RuntimeGlobals.getFullHash}() + "`,
+    hashWithLength: length => `" + ${RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
+    chunk: {
+      id: '" + chunkId + "',
+      hash: mapExpr(c => c.renderedHash),
+      hashWithLength: mapExprWithLength(c => c.renderedHash),
+      name: mapExpr(c => c.name || c.id),
+      contentHash: {
+        [MODULE_TYPE]: mapExpr(c => contentHashes[c.id])
+      },
+      contentHashWithLength: {
+        [MODULE_TYPE]: mapExprWithLength(c => contentHashes[c.id])
+      }
+    },
+    contentHashType: MODULE_TYPE
+  });
+  return Template.asString([`var locale = ${JSON.stringify(locale)};`, `${RuntimeGlobals.require}.miniI18nF = function(chunkId){return (${i18nURLPathTemplate})}`]);
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.templateHashHelpers = templateHashHelpers;
+
+/**
+ * this function will be used for chunk name, chunk hash, contentHash
+ * in these, sometime chunk name and chunk id same for some chunkss so below logic has little towek
+ * @param {Chunk} chunks
+ * @returns { mapExpr, mapExprWithLength }
+ */
+function templateHashHelpers(chunks) {
+  /**
+   * @param {function(Chunk): string | number} fn function from chunk to value
+   * @returns {string} code with static mapping of results of fn
+   */
+  const createMap = fn => {
+    const obj = {};
+    let useId = false;
+    let lastKey;
+    let entries = 0; // eslint-disable-next-line no-restricted-syntax
+
+    for (const c of chunks) {
+      const value = fn(c);
+
+      if (value === c.id) {
+        useId = true;
+      } else {
+        obj[c.id] = value;
+        lastKey = c.id;
+        entries++;
+      }
+    }
+
+    if (entries === 0) {
+      return 'chunkId';
+    }
+
+    if (entries === 1) {
+      return useId ? `(chunkId === ${JSON.stringify(lastKey)} ? ${JSON.stringify(obj[lastKey])} : chunkId)` : JSON.stringify(obj[lastKey]);
+    }
+
+    return useId ? `(${JSON.stringify(obj)}[chunkId] || chunkId)` : `${JSON.stringify(obj)}[chunkId]`;
+  };
+  /**
+   * @param {function(Chunk): string | number} fn function from chunk to value
+   * @returns {string} code with static mapping of results of fn for including in quoted string
+   */
+
+
+  const mapExpr = fn => `" + ${createMap(fn)} + "`;
+  /**
+   * @param {function(Chunk): string | number} fn function from chunk to value
+   * @returns {function(number): string} function which generates code with static mapping of results of fn for including in quoted string for specific length
+   */
+
+
+  const mapExprWithLength = fn => length => // console.log('called with lentch', length),
+  `" + ${createMap(c => `${fn(c)}`.slice(0, length))} + "`;
+
+  return {
+    mapExpr,
+    mapExprWithLength
+  };
+}
+/**
+  function mapExpr(fn) {
+    const obj = {};
+    // eslint-disable-next-line no-restricted-syntax
+    for (const c of chunks) {
+      obj[c.id] = fn(c);
+    }
+    return `(${JSON.stringify(obj)})[chunkId]`;
+  }
+ */