@zohodesk/react-cli 1.1.11-exp.3 → 1.1.11-exp.5

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/EFCTemplatePlugin.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EFCTemplatePlugin = void 0;
+
+var _fs = require("fs");
+
+var _logger = require("../../../../logger");
+
+var _LocaleChunkAssetsStore = require("./I18nSplitPlugin/LocaleChunkAssetsStore");
+
+var _constants = require("../../../constants");
+
+var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
+
+const INITIAL_ASSETS_TEMPLATE = '// <--getInitialAssets-->';
+const PUBLIC_PATH_TEMPLATE = '"<--publicPath-->"';
+const pluginName = 'EFCTemplatePlugin';
+
+class EFCTemplatePlugin {
+  constructor(options = {}) {
+    const {
+      i18nFileNameTemplate,
+      entryPointName,
+      outputFile,
+      version,
+      publicPath,
+      templateFilePath
+    } = options;
+    this.options = options;
+    this.templateFilePath = (0, _constants.joinWithAppPath)(templateFilePath);
+    this.i18nFileNameTemplate = i18nFileNameTemplate;
+    this.publicPath = publicPath; // NOTE: this logic may be needed for i18n splitted file name with contenthash cases
+    // this.i18nManifestFileName = options.i18nManifestFileName;
+    // IMPORTANT: here we merging options from package.json  and options via constructor
+    // So when debugging consider this as well
+    // this.options = Object.assign({}, efcOptions, options);
+
+    this.entryPointName = entryPointName || 'efc';
+    this.outputFile = outputFile.replace('[version]', version);
+  } // NOTE: this logic may be needed for i18n splitted file name with contenthash cases
+  // getI18nManifest(compilation) {
+  //   const i18nManifestFile =
+  //     compilation.assets[this.options.i18nManifestFileName];
+  //   if (i18nManifestFile) {
+  //     const manifest = JSON.parse(i18nManifestFile.source());
+  //     return manifest;
+  //   }
+  //   return {};
+  // }
+  // eslint-disable-next-line class-methods-use-this
+
+
+  templateReplacer(entryPoint, compilation) {
+    const {
+      enableRTLSplit
+    } = this.options; // const i18nManifest = this.getI18nManifest(compilation);
+
+    const initialAssetsFuncTemplate = (0, _getInitialAssetsFuncTemplate.getInitialAssetsFuncTemplate)({
+      entryPoint,
+      compilation,
+      enableRTLSplit,
+      i18nStore: this.store,
+      chunkSplitEnable: this.options.chunkSplitEnable,
+      i18nFileNameTemplate: this.i18nFileNameTemplate,
+      functionName: 'getInitialAssets'
+    });
+    const templateStr = (0, _fs.readFileSync)(this.templateFilePath).toString();
+    return templateStr.replace(INITIAL_ASSETS_TEMPLATE, initialAssetsFuncTemplate).replace(PUBLIC_PATH_TEMPLATE, this.publicPath);
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+    });
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, () => {
+        const {
+          entryPointName,
+          outputFile
+        } = this;
+        const entryPoint = compilation.entrypoints.get(entryPointName);
+
+        if (!entryPoint) {
+          return;
+        }
+
+        if (!(0, _fs.existsSync)(this.templateFilePath)) {
+          (0, _logger.errorLogger)(`EFC Template file not exists ${this.templateFilePath}`);
+          return;
+        }
+
+        const source = new RawSource(this.templateReplacer(entryPoint, compilation));
+        compilation.emitAsset(outputFile, source);
+        (0, _logger.messageLogger)('The EFC embedded code was created successfully..!!!');
+        (0, _logger.messageLogger)(`The EFC SDK File name ${outputFile}`);
+      });
+    });
+  }
+
+}
+
+exports.EFCTemplatePlugin = EFCTemplatePlugin;

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

@@ -1,11 +1,11 @@
-# I18n Split Plugin ContributionGuide
-we have modifyed mini-css-extract-plugin to sute our needs of i18n related extraction and downloading.
-So In future may be when we need to update mini-css-extract-plugin Kindly cross check with this I18n Plugin as well.
-
-Even not breaking change, may be just performacne update or feature update. addeding that to this plugin will be use full. Kindly consider it.
-
-## Thing we Ignored 
- * we use webpack ast hook for adding I18nDependency. So we did not need `loader.js`
- * we ignore order of import in single chunk since I18n going to be download as object.  
-      we did not need it.
+# I18n Split Plugin ContributionGuide
+we have modifyed mini-css-extract-plugin to sute our needs of i18n related extraction and downloading.
+So In future may be when we need to update mini-css-extract-plugin Kindly cross check with this I18n Plugin as well.
+
+Even not breaking change, may be just performacne update or feature update. addeding that to this plugin will be use full. Kindly consider it.
+
+## Thing we Ignored 
+ * we use webpack ast hook for adding I18nDependency. So we did not need `loader.js`
+ * we ignore order of import in single chunk since I18n going to be download as object.  
+      we did not need it.
  * 

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

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nFilesEmitPlugin = void 0;
+
+var _webpack = require("webpack");
+
+var _createHash = require("./createHash");
+
+var _pathCreator = require("./pathCreator");
+
+var _propertiesUtils = require("./utils/propertiesUtils");
+
+var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
+
+/* eslint-disable no-restricted-syntax */
+const pluginName = 'I18nFilesEmitPlugin';
+const {
+  RawSource
+} = _webpack.sources;
+
+class I18nFilesEmitPlugin {
+  constructor(options) {
+    this.options = options; // this.options = {
+    //   locales: options.locales,
+    //   chunkFilename: options.chunkFilename,
+    //   filename: options.filename,
+    //   allI18nObject: options.allI18nObject,
+    //   jsonpFunc: options.jsonpFunc
+    // };
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+      const i18nStore = this.store;
+      compilation.hooks.beforeHash.tap(pluginName, () => {
+        i18nStore.clear();
+        this.createAndStoreFileContentForEveryChunkAndLocale(compilation);
+      });
+      compilation.hooks.chunkHash.tap(pluginName, (chunk, hash) => {
+        this.updateChunkHashForEveryLocale(chunk, hash);
+      });
+      compilation.hooks.contentHash.tap(pluginName, chunk => {
+        if (!i18nStore.isChunkHasI18n(chunk.id)) {
+          return;
+        }
+
+        this.emitI18nFileForEveryLocale(chunk, compilation);
+      });
+    });
+  }
+
+  createAndStoreFileContentForEveryChunkAndLocale(compilation) {
+    const {
+      chunks
+    } = compilation;
+    const {
+      locales
+    } = this.options;
+    const i18nStore = this.store;
+
+    for (const chunk of chunks) {
+      const i18nKeys = i18nStore.getI18nKeysForChunk(chunk);
+
+      if (!i18nKeys.length) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      for (const locale of locales) {
+        const content = this.getI18nChunkFileContent(i18nKeys, locale);
+        i18nStore.storeData(chunk.id, locale, {
+          content
+        });
+      }
+    }
+  }
+
+  updateChunkHashForEveryLocale(chunk, hash) {
+    const {
+      locales
+    } = this.options;
+    const i18nStore = this.store;
+
+    if (i18nStore.isChunkHasI18n(chunk.id)) {
+      for (const loc of locales) {
+        const content = i18nStore.getContent(chunk.id, loc);
+        hash.update(content);
+      }
+    }
+  }
+
+  emitI18nFileForEveryLocale(chunk, compilation) {
+    const i18nStore = this.store;
+    const {
+      locales,
+      chunkFilename,
+      filename
+    } = this.options;
+    const fileNameTemplate = chunk.canBeInitial() ? filename : chunkFilename; // const { chunks } = compilation;
+
+    for (const locale of locales) {
+      const content = i18nStore.getContent(chunk.id, locale);
+      const contentHash = (0, _createHash.createHash)({
+        outputOptions: compilation.outputOptions,
+        content
+      });
+      const {
+        filename
+      } = I18nFilesEmitPlugin.createFilenameWithHash({
+        compilation,
+        contentHash,
+        fileNameTemplate,
+        chunk,
+        locale
+      });
+      i18nStore.storeData(chunk.id, locale, {
+        contentHash,
+        filename
+      });
+      compilation.emitAsset(filename, new RawSource(content));
+    }
+  }
+
+  static createFilenameWithHash({
+    compilation,
+    fileNameTemplate,
+    chunk,
+    locale,
+    contentHash
+  }) {
+    const fileName = fileNameTemplate.replaceAll('[locale]', locale);
+    const filename = (0, _pathCreator.pathCreator)(fileName, compilation, {
+      hash: compilation.hash,
+      chunkId: chunk.id,
+      chunkHash: chunk.hash,
+      contentHash
+    });
+    return {
+      contentHash,
+      filename
+    };
+  }
+
+  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)})`;
+  }
+
+}
+
+exports.I18nFilesEmitPlugin = I18nFilesEmitPlugin;

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

@@ -7,67 +7,26 @@ exports.default = void 0;
 
 var _utils = require("./utils");
 
+var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
+
 /* eslint-disable max-classes-per-file */
-// import { I18nDependency } from './1I18nDependency';
-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.
+const pluginName = 'I18nKeysIdentifier';
+/**
+ * this plugin search the i18 keys and make it as I18nDependency.
+ * how it works?
+ *  this plugin get jsResourceI18nKeys in constructor.
+ *  we walk thought 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 {
   constructor({
     jsResourceI18nKeys
-  }, {
-    I18nDependency,
-    I18nModule
   }) {
     this.jsResourceI18nKeys = jsResourceI18nKeys;
-    this.I18nDependency = I18nDependency;
-    this.I18nModule = I18nModule;
-    this.modulesI18nKeysMap = {};
-  }
-
-  defineConfigarationForI18nDependency(compilation) {
-    const {
-      I18nModule,
-      I18nDependency
-    } = this;
-
-    class I18nModuleFactory {
-      // eslint-disable-next-line class-methods-use-this
-      create({
-        dependencies: [dependency]
-      }, callback) {
-        callback(undefined, new I18nModule(dependency));
-      }
-
-    }
-
-    compilation.dependencyFactories.set(I18nDependency, new I18nModuleFactory());
-
-    class I18nDependencyTemplate {
-      // eslint-disable-next-line class-methods-use-this
-      apply() {}
-
-    }
-
-    compilation.dependencyTemplates.set(I18nDependency, new I18nDependencyTemplate());
-  }
-
-  addI18nDependency(module, i18nKeys) {
-    const identifier = `i18n ${module.resource}`;
-    const dep = new this.I18nDependency({
-      identifier,
-      content: JSON.stringify(i18nKeys),
-      i18nKeys
-    }, module.context, 0);
-    module.addDependency(dep);
+    this.store = new _LocaleChunkAssetsStore.LocaleChunkAssetsStore();
   }
 
   apply(compiler) {
@@ -78,15 +37,13 @@ class I18nKeysIdentifer {
     //   }
     // }
     compiler.hooks.thisCompilation.tap(pluginName, compilation => {
-      // this below  hook was tapped for  we use I18nDependency
-      // so we must define module factory for I18nDependency
-      // and we must define how it import statement look like I18nDependencyTemplate
-      this.defineConfigarationForI18nDependency(compilation);
+      this.store.updateCompilation(compilation);
+      (0, _LocaleChunkAssetsStore.setLocaleChunkAssetsStore)(compilation, this.store);
     });
     compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
       // handler for parser
       const handler = parser => {
-        parser.hooks.program.tap(pluginName, (ast, commmets) => {
+        parser.hooks.program.tap(pluginName, (ast, comments) => {
           const {
             module
           } = parser.state; //
@@ -98,19 +55,14 @@ class I18nKeysIdentifer {
 
           let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
           i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
-          (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
+          (0, _utils.collectI18nKeysfromComments)(comments, this.jsResourceI18nKeys));
 
           if (i18nKeys.length) {
-            // console.log(
-            //   'i18nKeys.length',
-            //   module.resource,
-            //   i18nKeys.length < 5 ? i18nKeys : i18nKeys.length
-            // );
-            this.modulesI18nKeysMap[module.resource] = i18nKeys;
-            this.addI18nDependency(module, i18nKeys);
+            // console.log('i18nKeys.length', module.resource, i18nKeys);
+            this.store.updateModuleI18nKeys(module.resource, i18nKeys);
           }
         });
-      }; // this below  hook was tapped for collect I18n Key from files and add as Deppenensy
+      }; // this below  hook was tapped for collect I18n Key from files and add as Dependency
       // const factory = params.normalModuleFactory;
 
 
@@ -119,18 +71,6 @@ class I18nKeysIdentifer {
     });
   }
 
-} // I18nKeysIdentifer.isChunkHasI18n = function (chunk) {
-//   // eslint-disable-next-line no-restricted-syntax
-//   for (const module of chunk.modulesIterable) {
-//     // eslint-disable-next-line no-restricted-syntax
-//     for (const dep of module.dependencies) {
-//       if (dep instanceof I18nDependency) {
-//         return true;
-//       }
-//     }
-//   }
-//   return false;
-// };
-
+}
 
 exports.default = I18nKeysIdentifer;

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

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nRuntimeDealerPlugin = void 0;
+
+var _webpack = require("webpack");
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _constants = require("./constants");
+
+var _getI18nLoadingRuntimeModule = require("./getI18nLoadingRuntimeModule");
+
+var _templateFileName = require("./templateFileName");
+
+var _hashUtils = require("./utils/hashUtils");
+
+var _urlConcat = require("../../../../server/urlConcat");
+
+var _I18nFilesEmitPlugin = require("./I18nFilesEmitPlugin");
+
+var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  RawSource
+} = _webpack.sources;
+const pluginName = 'I18nRuntimeDealerPlugin'; // I18nExtractPlugin.loader = require.resolve('./loader');
+
+class I18nRuntimeDealerPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+
+      if (!this.options.runtime) {
+        return;
+      }
+
+      this.createI18nDownloadCodeInRuntimeFile(compilation);
+      this.addI18nIntoInitialHtml(compilation);
+    });
+  }
+
+  addI18nIntoInitialHtml(compilation) {
+    const i18nStore = this.store;
+
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, hookOptions => {
+      const {
+        assets
+      } = hookOptions;
+      const {
+        templateLabel,
+        filename,
+        publicPath = '',
+        mainChunkName
+      } = this.options; // const dummyContent = '// dummy comment';
+
+      const dummyContentHash = 'qwertyuiopasdfghjkl';
+      const entryPoint = compilation.entrypoints.get(mainChunkName);
+      const initialChunks = Array.from(entryPoint.chunks).filter(c => c.canBeInitial() && c.id !== c.runtime);
+      const initialI18nAssets = initialChunks.filter(c => i18nStore.isChunkHasI18n(c)).map(c => {
+        const data = _I18nFilesEmitPlugin.I18nFilesEmitPlugin.createFilenameWithHash({
+          compilation,
+          fileNameTemplate: filename,
+          chunk: c,
+          locale: templateLabel,
+          // NOTE: we used dummy  content hash.
+          //  Because we have no plan on use in content hash to initial I18n chunks
+          // So Dummy hash was being used it will not work  just skip warnings
+          contentHash: dummyContentHash
+        });
+
+        return (0, _urlConcat.urlConcat)(publicPath, data.filename);
+      });
+      const allJSAssets = [...initialI18nAssets, ...assets.js].map(url => url.replaceAll('[locale]', templateLabel).replaceAll('%5Blocale%5D', templateLabel));
+      return {
+        assets: { ...assets,
+          js: allJSAssets
+        }
+      };
+    });
+  }
+
+  createI18nDownloadCodeInRuntimeFile(compilation) {
+    const {
+      chunkFilename,
+      locales,
+      localeVarName
+    } = this.options;
+    const chunkFilenameHasContentHash = (0, _hashUtils.hasContentHash)(chunkFilename);
+
+    const getI18nChunks = mainChunk => this.filterI18nUsedChunks(mainChunk.getAllAsyncChunks());
+
+    const I18nLoadingRuntimeModule = (0, _getI18nLoadingRuntimeModule.getI18nLoadingRuntimeModule)({
+      getI18nChunks
+    });
+    const enabledChunks = new WeakSet();
+
+    const chunkFilenameUrlGenerator = (i18nChunks, locale) => (0, _templateFileName.templateFileName)({
+      compilation,
+      localeVarName,
+      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(_webpack.RuntimeGlobals.getFullHash);
+      }
+
+      set.add(_webpack.RuntimeGlobals.publicPath);
+      compilation.addRuntimeModule(entryRuntimeChunk, new I18nLoadingRuntimeModule(set, {
+        prefixFunc: chunkFilenameHasContentHash ? prefixFunc : chunkFilenameUrlGenerator,
+        runtimeOptions,
+        chunkFilename
+      }));
+    };
+
+    compilation.hooks.runtimeRequirementInTree.for(_webpack.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));
+        } // eslint-disable-next-line no-restricted-syntax
+
+
+        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);
+        }
+      });
+    }
+  }
+
+  filterI18nUsedChunks(chunks) {
+    const i18nStore = this.store;
+    return Array.from(chunks).filter(c => i18nStore.isChunkHasI18n(c.id));
+  }
+
+  getContentHashes(locale) {
+    const i18nStore = this.store;
+    const contentHashes = {};
+    i18nStore.forEachChunkId(chunkId => {
+      const contentHash = i18nStore.getContentHash(chunkId, locale);
+
+      if (contentHash) {
+        contentHashes[chunkId] = contentHash;
+      }
+    }); // console.log({ contentHashes });
+
+    return contentHashes;
+  }
+
+}
+
+exports.I18nRuntimeDealerPlugin = I18nRuntimeDealerPlugin;