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

package/README.md

@@ -44,24 +44,6 @@ Now to run app
 
 # Change Logs
 
-# 1.1.28 (29-01-2025)
-
-**Fixes**
-
-   - We've changed the i18n Unicode conversion process. Instead of converting the Unicode at runtime, we now convert it to the corresponding language during the build process and emit the final build
-   - Added @zohodesk-private in transformIgnorePatterns in jest.config.js file , fix in jest
-   
-**changes**
-
-   - separate the disableES5Transpile flag as two flags disableES5Transpile and disableES5Import 
-   - disableES5Import flag handles the alias part 
-   - disableES5Transpile flag handles the esmodules or common modules conversion part 
-
-
-# 1.1.27 (16-12-2024)
-
-   -  While rendering i18n keys at runtime, we convert any keys containing Unicode to their corresponding language characters before rendering. This enhances performance and reduces file size.
-
 # 1.1.26 (06-09-2024)
 
 **Features**

package/lib/configs/jest.config.js

@@ -26,7 +26,7 @@ const commonConfig = {
   //   ...moduleNameMapper,
   //   '\\.(css|less)$': 'identity-obj-proxy'
   // },
-  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk|@zohodesk-private)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
   moduleFileExtensions: ['js', 'ts', 'tsx'],
   setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),

package/lib/configs/libAlias.js

@@ -23,7 +23,7 @@ const {
   app
 } = (0, _utils.getOptions)();
 const {
-  disableES5Import
+  disableES5Transpile
 } = app;
 
 function aliasPathCreation(customAlias) {
@@ -64,7 +64,7 @@ const libAlias = {
 // '^@components(.*)$': '<rootDir>/src/components$1',
 
 exports.libAlias = libAlias;
-const totalAlias = disableES5Import ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
+const totalAlias = disableES5Transpile ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
 const jestModuleNameMapper = Object.keys(totalAlias).reduce((previousValue, key) => {
   previousValue[`^${key}(.*)$`] = `${totalAlias[key]}$1`;
   return previousValue;

package/lib/configs/resolvers.js

@@ -19,7 +19,7 @@ var _client_packages_group = require("@zohodesk/client_packages_group");
 function moduleResolver(options) {
   const {
     moduleResolvePath,
-    disableES5Import
+    disableES5Transpile
   } = options.app;
   const customAlias = options.alias;
   let required = moduleResolvePath && (0, _requireLocalOrGlobal.requireLocal)(moduleResolvePath);
@@ -33,7 +33,7 @@ function moduleResolver(options) {
   }
 
   const nodeModulesPath = required ? required.nodeModulesPath : _client_packages_group.nodeModulesPath;
-  const totalAlias = disableES5Import ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
+  const totalAlias = disableES5Transpile ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
   return {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -63,10 +63,13 @@ class I18NInjectIntoIndexPlugin {
       const {
         assets
       } = data; // Manipulate the content
+      // const i18nManifest = this.getI18nManifest(compilation);
+      //  const entryPoint = compilation.entrypoints.get(this.entryPointName);
 
-      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));
+      const i18nScriptURLs = [];
+      i18nScriptURLs.push("desk-i18n-manifest.js");
+      i18nScriptURLs.push("master.i18n.js");
+      i18nScriptURLs.push("masterchunk.i18n.js"); // .map(url => getI18nScriptTagObj(url));
       // .join('');
       // Tell webpack to move on
 

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -9,8 +9,6 @@ var _webpack = require("webpack");
 
 var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
 
-var _hashUtils = require("./utils/hashUtils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -31,43 +29,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,34 +45,33 @@ 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
+        });
       }
     }
 
@@ -116,6 +79,7 @@ class I18nDownlodLogic {
   }
 
   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);
 
@@ -123,141 +87,113 @@ class I18nDownlodLogic {
         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);
+      } = this.options; // 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;