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

package/README.md

@@ -44,6 +44,24 @@ 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/babel/cmjs-plugins-presets.js

@@ -30,7 +30,11 @@ const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isPro
 }]];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
-  resolvedPlugins.push(require.resolve(plugin));
+  if (Array.isArray(plugin)) {
+    resolvedPlugins.push([require.resolve(plugin[0]), plugin[1]]);
+  } else {
+    resolvedPlugins.push(require.resolve(plugin));
+  }
 });
 const plugins = [...defaultPlugins, ...resolvedPlugins];
 const presets = [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({

package/lib/babel/es-plugins-presets.js

@@ -26,12 +26,16 @@ const isProd = mode.toLowerCase() === 'prod';
 const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
   __DOCS__: false
 } : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), [require.resolve('babel-plugin-module-resolver'), {
-  "root": ["./"],
+  'root': ['./'],
   alias
 }]];
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
-  resolvedPlugins.push(require.resolve(plugin));
+  if (Array.isArray(plugin)) {
+    resolvedPlugins.push([require.resolve(plugin[0]), plugin[1]]);
+  } else {
+    resolvedPlugins.push(require.resolve(plugin));
+  }
 });
 const plugins = [...defaultPlugins, ...resolvedPlugins];
 const presets = [[require.resolve('@babel/preset-env'), disableES5Transpile ? {

package/lib/configs/jest.config.js

@@ -26,7 +26,7 @@ const commonConfig = {
   //   ...moduleNameMapper,
   //   '\\.(css|less)$': 'identity-obj-proxy'
   // },
-  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk|@zohodesk-private)/)'],
   // 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 {
-  disableES5Transpile
+  disableES5Import
 } = app;
 
 function aliasPathCreation(customAlias) {
@@ -64,7 +64,7 @@ const libAlias = {
 // '^@components(.*)$': '<rootDir>/src/components$1',
 
 exports.libAlias = libAlias;
-const totalAlias = disableES5Transpile ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
+const totalAlias = disableES5Import ? 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,
-    disableES5Transpile
+    disableES5Import
   } = 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 = disableES5Transpile ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
+  const totalAlias = disableES5Import ? 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/jest/preProcessors/jsPreprocessor.js

@@ -15,7 +15,11 @@ const {
 } = babelCustomizationForLibrary;
 const resolvedPlugins = [];
 babelPlugins.forEach(plugin => {
-  resolvedPlugins.push(require.resolve(plugin));
+  if (Array.isArray(plugin)) {
+    resolvedPlugins.push([require.resolve(plugin[0]), plugin[1]]);
+  } else {
+    resolvedPlugins.push(require.resolve(plugin));
+  }
 });
 const presets = [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')];
 

package/lib/plugins/I18NInjectIntoIndexPlugin.js

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

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -9,6 +9,8 @@ var _webpack = require("webpack");
 
 var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
 
+var _hashUtils = require("./utils/hashUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -29,9 +31,43 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * some thing  missing  in this definetion
  *
  */
-const pluginName = 'DownloadLogicOfI18n';
+// import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
+const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
+
 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,
@@ -45,33 +81,34 @@ 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;
       }
     }
 
@@ -79,7 +116,6 @@ 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);
 
@@ -87,113 +123,141 @@ class I18nDownlodLogic {
         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; // Use the provided publicPath or fallback to the one provided by Webpack.
+      } = 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);
 
       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;