@zohodesk/react-cli 1.1.29-exp.2 → 1.1.29-exp.3

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -4,22 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
 var _utils = require("../utils");
+
 var _urlConcat = require("../utils/urlConcat");
+
 var _path = _interopRequireDefault(require("path"));
+
 var _webpackSources = require("webpack-sources");
+
 var _hashUtils = require("./I18nSplitPlugin/utils/hashUtils");
+
 var _getI18nFileUrlPathTemplate = require("./I18nSplitPlugin/utils/getI18nFileUrlPathTemplate");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 let i18nObj = null;
 const options = (0, _utils.getOptions)();
+
 function newAssign(target, data) {
   return Object.assign({}, target, data);
 }
+
 const {
   i18n
 } = options;
+
 class I18NInjectIntoIndexPlugin {
   constructor(options) {
     this.isDevelopment = options.isDevelopment;
@@ -29,33 +41,35 @@ class I18NInjectIntoIndexPlugin {
     this.i18nManifestFileName = options.i18nManifestFileName;
     this.entryPointName = options.mainChunkName;
   }
+
   getI18nFileUrlPath(chunk, compilation) {
     const 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 = [];
-      i18nScriptURLs.push("i18n-chunk/desk-i18n-manifest.js");
-      i18nScriptURLs.push(`i18n-chunk/${this.templateLabel}/master.i18n.js`);
-
-      // .map(url => getI18nScriptTagObj(url));
+      } = 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)
@@ -63,6 +77,7 @@ class I18NInjectIntoIndexPlugin {
       }));
     });
   }
+
   withI18nSpitHandling(compiler) {
     compiler.hooks.make.tap('I18NInjectIntoIndexPlugin', compilation => {
       // let cdns = Object.keys(this.publicPaths);
@@ -70,17 +85,19 @@ class I18NInjectIntoIndexPlugin {
         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);
         const 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
+        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);
@@ -88,12 +105,13 @@ class I18NInjectIntoIndexPlugin {
       this.withoutI18nSpitHandling(compiler);
     }
   }
+
   withoutI18nSpitHandling(compiler) {
     compiler.hooks.emit.tap('I18NInjectIntoIndexPlugin', compilation => {
       // let cdns = Object.keys(this.publicPaths);
       if (i18nObj === null) {
-        const i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1);
-        //hook for i18n url contains i18n/ may cause problem
+        const 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) => {
           const fileName = next.replace(`i18n${_path.default.sep}`, '');
           const splittedFileName = fileName.split('.');
@@ -102,16 +120,21 @@ class I18NInjectIntoIndexPlugin {
           } else {
             res[splittedFileName[0]] = fileName;
           } */
+
           res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
           return res;
         }, {});
       }
+
       const [indexFile] = Object.keys(compilation.assets).filter(filename => /\.html$/g.test(filename));
+
       if (indexFile) {
         const 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))));
       }
     });
   }
+
 }
+
 exports.default = I18NInjectIntoIndexPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js

@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _utils = require("./utils");
-const pluginName = 'I18nDebugPlugin';
-// this plugin  only for debug  related purpose
+
+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
@@ -23,19 +25,20 @@ class I18nDebugPlugin {
       if (!this.compilationParams || this.compilationParams.normalModuleFactory === factory) {
         return;
       }
+
       const handler = parser => {
         parser.hooks.program.tap(pluginName, (ast, commmets) => {
           const {
             module
-          } = parser.state;
-          //
+          } = parser.state; //
+
           if (!(module && /\.jsx?$/.test(module.resource))) {
             return;
-          }
-          // i18n grep proper contract regex
+          } // i18n grep proper contract regex
+
+
           let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
-          i18nKeys = i18nKeys.concat(
-          // i18n grep proper contract regex
+          i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
           (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
           i18nKeys.length && this.warnings.push({
             message: 'skiped i18n keys',
@@ -45,10 +48,12 @@ class I18nDebugPlugin {
           });
         });
       };
+
       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);
+      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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.I18nDependencyTemplate = exports.I18nDependency = void 0;
+
 var _webpack = require("webpack");
-// const webpack = require('webpack');
 
+// const webpack = require('webpack');
 class I18nDependency extends _webpack.Dependency {
   constructor({
     identifier,
@@ -18,21 +19,26 @@ class I18nDependency extends _webpack.Dependency {
     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) {
+  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

@@ -4,9 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _webpack = require("webpack");
+
 var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+
+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
@@ -25,9 +31,43 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * some thing  missing  in this definetion
  *
  */
+// import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
+const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
 
-const pluginName = 'DownloadLogicOfI18n';
 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,
@@ -41,153 +81,190 @@ class I18nDownlodLogic {
       filenameTemplate,
       localeVarName
     };
-    this.finalChunkIds = new Map();
   }
-  captureChunkIds(compilation) {
-    this.finalChunkIds.clear();
-    compilation.chunks.forEach(chunk => {
-      this.finalChunkIds.set(chunk.id, {
-        original: chunk.id,
-        name: chunk.name || null
-      });
+
+  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()) {
-      const finalChunkId = chunk.id;
       if (_I18nKeysIdentifer.default.isChunkHasI18n(chunk)) {
-        // Store using the final chunk ID
-        obj[finalChunkId] = 1;
-
-        // Also keep track of which chunks have i18n content
-        this.finalChunkIds.set(finalChunkId, {
-          original: chunk.id,
-          name: chunk.name || null
-        });
+        obj[chunk.id] = 1;
       }
     }
+
     return obj;
   }
+
   addDownloadLogicOfI18nInMainTemplate(mainTemplate) {
-    // Extend localVars to create a container for tracking loaded i18n chunks.
     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', '// Using final chunk IDs from webpack', 'var installedI18nChunks = {', _webpack.Template.indent(mainChunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
-    });
 
-    // Extend requireEnsure so that whenever a JS chunk is requested,
-    // we also download its associated i18n file (if available).
+      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);
 
-      // Use the provided publicPath or fallback to the one provided by Webpack.
       const publicPath = this.publicPath ? JSON.stringify(this.publicPath) : `${mainTemplate.requireFn}.p`;
       return _webpack.Template.asString([source, `
 (function() {
-  // ${pluginName} I18N loading with final chunk IDs
+  // ${pluginName} I18N loading
   var i18nChunks = ${JSON.stringify(chunkMap)};
   var locale = ${localeVarName};
-  
-  // Check if the current chunkId has an associated i18n resource
-  if (installedI18nChunks[chunkId]) {
+  // ${pluginName} I18N hasehes
+  ${hashUtils}
+  if(installedI18nChunks[chunkId]) {
     promises.push(installedI18nChunks[chunkId]);
-  } else if (installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
+  } else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
     promises.push(installedI18nChunks[chunkId] = new Promise(function(resolve, reject) {
-      // Retrieve the i18n manifest from the global window.desk_i18n_manifest
-      var deskManifest = window.desk_i18n_manifest;
-      
-      if (!deskManifest || !deskManifest.chunks || !deskManifest.chunks[chunkId]) {
-        console.warn("No i18n file available for chunk " + chunkId);
-        return resolve();
+      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
       }
-      
-      // Replace [locale] in the basePath with the actual locale
-      var basePath = deskManifest.basePath.replace("[locale]", locale);
-      
-      // Construct the final URL for the i18n file
-      var srcPath = basePath + deskManifest.chunks[chunkId];
       var fullsrcPath = ${publicPath} + srcPath;
-      
-      // Avoid duplicate loading by checking existing script tags
-      var existingScriptTags = document.getElementsByTagName("script");
-      for (var i = 0; i < existingScriptTags.length; i++) {
-        var tag = existingScriptTags[i];
+      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();
-        }
+        if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
       }
-      
-      // Create a script tag to load the i18n file
       var scriptTag = document.createElement("script");
-      scriptTag.onload = function() {
+      scriptTag.onload = () =>  { 
         scriptTag.onerror = scriptTag.onload = null;
         resolve();
       };
-      
       scriptTag.onerror = function(event) {
         scriptTag.onerror = scriptTag.onload = null;
-        var request = (event && event.target && event.target.src) || fullsrcPath;
+        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];
-        if (scriptTag.parentNode) {
-          scriptTag.parentNode.removeChild(scriptTag);
-        }
+        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)};
-           }` : ''}
-           
+          scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};
+        }` : ''}
       document.body.appendChild(scriptTag);
     }).then(function() {
       installedI18nChunks[chunkId] = 0;
     }));
   }
-})()
-`]);
+})()`]);
     });
   }
 
-  /**
-   * Applies the plugin by tapping into the appropriate Webpack hooks.
-   * Now captures final chunk IDs after compilation is complete.
-   *
-   * @param {Compiler} compiler - The Webpack compiler instance.
-   */
   apply(compiler) {
-    // First capture final chunk IDs after compilation
-    compiler.hooks.afterCompile.tap(pluginName, compilation => {
-      this.captureChunkIds(compilation);
-    });
-
-    // Then inject download logic in thisCompilation
     compiler.hooks.thisCompilation.tap(pluginName, compilation => {
-      // console.log(`${pluginName}: Adding download logic with final chunk IDs`);
       const {
         mainTemplate
       } = compilation;
       this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
     });
   }
+
 }
+
 exports.default = I18nDownlodLogic;