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

package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js

@@ -4,17 +4,15 @@ 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
@@ -25,20 +23,19 @@ 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',
@@ -48,12 +45,10 @@ 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,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.I18nDependencyTemplate = exports.I18nDependency = void 0;
-
 var _webpack = require("webpack");
-
 // const webpack = require('webpack');
+
 class I18nDependency extends _webpack.Dependency {
   constructor({
     identifier,
@@ -19,26 +18,21 @@ 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,15 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _webpack = require("webpack");
-
 var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
-
-var _hashUtils = require("./utils/hashUtils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * this plugin for the download i18n files
  * So, if need to downoad i18n in browser this plugin handle that
@@ -31,43 +25,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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,
@@ -81,190 +41,153 @@ class I18nDownlodLogic {
       filenameTemplate,
       localeVarName
     };
+    this.finalChunkIds = new Map();
   }
-
-  getShortContentHashes(chunk, hashLength) {
-    let allContenHashes = {};
-    const chunkMaps = chunk.getChunkMaps();
-    this.locales.forEach(locale => {
-      allContenHashes[locale] = chunkMaps.contentHash[ltype(locale)];
+  captureChunkIds(compilation) {
+    this.finalChunkIds.clear();
+    compilation.chunks.forEach(chunk => {
+      this.finalChunkIds.set(chunk.id, {
+        original: chunk.id,
+        name: chunk.name || null
+      });
     });
-
-    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)) {
-        obj[chunk.id] = 1;
+        // 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
+        });
       }
     }
-
     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', 'var installedI18nChunks = {', _webpack.Template.indent(mainChunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
+      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).
     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
+  // ${pluginName} I18N loading with final chunk IDs
   var i18nChunks = ${JSON.stringify(chunkMap)};
   var locale = ${localeVarName};
-  // ${pluginName} I18N hasehes
-  ${hashUtils}
-  if(installedI18nChunks[chunkId]) {
+  
+  // Check if the current chunkId has an associated i18n resource
+  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) {
-      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
+      // 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();
       }
+      
+      // 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;
-      var existingLinkTags = document.getElementsByTagName("script");
-      for(var i = 0; i < existingLinkTags.length; i++) {
-        var tag = existingLinkTags[i];
+      
+      // 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 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 = () =>  { 
+      scriptTag.onload = function() {
         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];
-        scriptTag.parentNode.removeChild(scriptTag);
+        if (scriptTag.parentNode) {
+          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;