@zohodesk/react-cli 1.1.18 → 1.1.19-exp.2

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;
+}

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
+  });
+}