@zohodesk/client_build_tool 0.0.9-exp.3 → 0.0.9-exp.8

package/README.md

@@ -102,6 +102,80 @@ fixes :-
 
 
 
+**Feature:-**
+- externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
+- to use externals, we use the following pattern in `app > externals` :
+
+For example
+```
+   externals: {
+    <key> : <value>
+   }
+```
+
+## v0.0.6 (4-09-2023)
+
+**Feature:-**
+- Generating bundle integrity report json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
+- Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag.
+- added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook.
+  only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true`
+- added support for glob pattern for custom chunks split logic.
+- added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object
+
+**Change:-**
+- i18n name not generated issue fix.
+- public path not correctly set issue fix.
+- changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin
+## v0.0.5 (6-08-2023)
+
+**Changes:--**
+- Typo fix in i18nRuntimeDealerPlugin.js
+- fixing some bugs in resolvers.js file
+
+## v0.0.3 (1-08-2023)
+
+**Changes:--**
+- `devtool` default value changed from `hidden-cheap-source-map` to `source-map`
+- unwanted files deleted from build
+
+**Issue Fix:--**
+- The issue with the source map not being created in the build has been fixed."
+
+
+## v0.0.2 (28-04-2023)
+
+**Features:-**
+
+- `devModeContentHashAllowedTypes` support added for some project there will be a need for hash even though they run dev mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devModeContentHashAllowedTypes)
+- `devLikeHash` support for disable content hash for file names in production mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devLikeHash)
+- `disableReactDevWarning` disable react dev warning such as prop-type warnings will be removed in dev mode build or server. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#disableReactDevWarning) can be enabled via `--disable_react_dev_warning` too.
+- `statsLogConfig` support to customize default webpack log after build finished. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#statsLogConfig) can be enabled via `--disable_react_dev_warning` too.
+- `enableChunkHash` renamed as `enableFileNameHashing`
+
+- `pre_processor` command to run the preprocessor.js file.preProcessor runs in build, start, buildEs, buildLib commands bu default. and we have watch mode support as well with the option (`-w`)
+- `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap`
+- `removeAttribute` option changes as `babelCustomizations.removeAttribute`
+- `removePropTypes` support for remove the prop types package in the output build.
+- `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build.
+- `manifestJson` default value set as false.
+- `customAttributes` support for add attributes to html, link , script tag in the output build.
+
+
+## v0.0.1 (18-04-2023)
+
+First Release
+**Features:-**
+
+- 'start' command to run react app
+- 'build' command to create build for react app
+- 'build:lib' command to create lib for react library
+- 'build:es' command to create es for react library
+- 'templates' command to create es for react library
+# Changelog and Release Notes
+
+
+
 **Feature:-**
 - externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
 - to use externals, we use the following pattern in `app > externals` :

package/README_backup.md

@@ -98,3 +98,77 @@ fixes :-
 
 - preload plc undefined url fixed 
 
+# Changelog and Release Notes
+
+
+
+**Feature:-**
+- externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
+- to use externals, we use the following pattern in `app > externals` :
+
+For example
+```
+   externals: {
+    <key> : <value>
+   }
+```
+
+## v0.0.6 (4-09-2023)
+
+**Feature:-**
+- Generating bundle integrity report json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
+- Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag.
+- added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook.
+  only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true`
+- added support for glob pattern for custom chunks split logic.
+- added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object
+
+**Change:-**
+- i18n name not generated issue fix.
+- public path not correctly set issue fix.
+- changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin
+## v0.0.5 (6-08-2023)
+
+**Changes:--**
+- Typo fix in i18nRuntimeDealerPlugin.js
+- fixing some bugs in resolvers.js file
+
+## v0.0.3 (1-08-2023)
+
+**Changes:--**
+- `devtool` default value changed from `hidden-cheap-source-map` to `source-map`
+- unwanted files deleted from build
+
+**Issue Fix:--**
+- The issue with the source map not being created in the build has been fixed."
+
+
+## v0.0.2 (28-04-2023)
+
+**Features:-**
+
+- `devModeContentHashAllowedTypes` support added for some project there will be a need for hash even though they run dev mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devModeContentHashAllowedTypes)
+- `devLikeHash` support for disable content hash for file names in production mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devLikeHash)
+- `disableReactDevWarning` disable react dev warning such as prop-type warnings will be removed in dev mode build or server. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#disableReactDevWarning) can be enabled via `--disable_react_dev_warning` too.
+- `statsLogConfig` support to customize default webpack log after build finished. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#statsLogConfig) can be enabled via `--disable_react_dev_warning` too.
+- `enableChunkHash` renamed as `enableFileNameHashing`
+
+- `pre_processor` command to run the preprocessor.js file.preProcessor runs in build, start, buildEs, buildLib commands bu default. and we have watch mode support as well with the option (`-w`)
+- `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap`
+- `removeAttribute` option changes as `babelCustomizations.removeAttribute`
+- `removePropTypes` support for remove the prop types package in the output build.
+- `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build.
+- `manifestJson` default value set as false.
+- `customAttributes` support for add attributes to html, link , script tag in the output build.
+
+
+## v0.0.1 (18-04-2023)
+
+First Release
+**Features:-**
+
+- 'start' command to run react app
+- 'build' command to create build for react app
+- 'build:lib' command to create lib for react library
+- 'build:es' command to create es for react library
+- 'templates' command to create es for react library

package/lib/schemas/defaultConfigValues.js

@@ -173,6 +173,47 @@ var _default = {
     jsResource: null,
     propertiesFolder: null
   },
+  i18nIndexing: {
+    enable: {
+      value: false,
+      cli: 'i18n_idx_enable'
+    },
+    disableDefaultMerge: {
+      value: false,
+      cli: 'i18n_idx_disable_default_merge'
+    },
+    htmlTemplateLabel: {
+      value: '{{--user-locale}}',
+      cli: 'i18n_idx_html_template_label'
+    },
+    localeVarName: {
+      value: 'window.userLangCode',
+      cli: 'i18n_idx_locale_var_name'
+    },
+    jsResourcePath: {
+      value: './deskapp/properties/JSResources.properties',
+      cli: 'i18n_idx_js_resource_path'
+    },
+    propertiesFolderPath: {
+      value: './deskapp/properties',
+      cli: 'i18n_idx_properties_folder_path'
+    },
+    propertiesPattern: {
+      value: ''
+    },
+    numericMapPath: {
+      value: './deskapp/properties/i18n-numeric-map.json',
+      cli: 'i18n_idx_numeric_map_path'
+    },
+    jsonpFunc: {
+      value: 'window.loadI18nData',
+      cli: 'i18n_idx_jsonp_func'
+    },
+    fallbackToHash: {
+      value: true,
+      cli: 'i18n_idx_fallback_to_hash'
+    }
+  },
   publicFolders: ['...'],
   app: {
     entryFile: {

package/lib/schemas/defaultConfigValuesOnly.js

@@ -96,6 +96,19 @@ var _default = {
     jsResource: null,
     propertiesFolder: null
   },
+  i18nIndexing: {
+    enable: false,
+    disableDefaultMerge: false,
+    htmlTemplateLabel: '{{--user-locale}}',
+    localeVarName: 'window.userLangCode',
+    jsResourcePath: './deskapp/properties/JSResources.properties',
+    propertiesFolderPath: './deskapp/properties',
+    propertiesPattern: '',
+    numericMapPath: './deskapp/properties/i18n-numeric-map.json',
+    numericJsonpFunc: 'window.loadI18nChunk',
+    dynamicJsonpFunc: 'window.loadI18nChunk',
+    fallbackToHash: true
+  },
   publicFolders: ['...', {
     source: './deskapp/tp/',
     target: './tp/'

package/lib/shared/bundler/webpack/common/hashUtils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateShortHash = generateShortHash;
+
+var _crypto = require("crypto");
+
+function generateShortHash(str, length = 8) {
+  if (typeof str !== 'string' || str.length === 0) {
+    return '';
+  }
+
+  try {
+    return (0, _crypto.createHash)('md5').update(str).digest('hex').slice(0, length);
+  } catch (error) {
+    return '';
+  }
+}

package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexHtmlInjectorPlugin.js

@@ -0,0 +1,47 @@
+"use strict";
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+var {
+  urlConcat
+} = require("../../../../server/urlConcat");
+
+const pluginName = 'I18nNumericIndexHtmlInjectorPlugin';
+
+class I18nNumericIndexHtmlInjectorPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(pluginName, (hookData, cb) => {
+        const {
+          assets
+        } = hookData;
+        const {
+          i18nAssetsPublicPathPrefix = ''
+        } = this.options;
+        const DEFAULT_LOCALE = '{{--user-locale}}';
+        const NUMERIC_FILENAME = `i18n-chunks/${DEFAULT_LOCALE}/numeric.i18n.js`;
+        const DYNAMIC_FILENAME = `i18n-chunks/${DEFAULT_LOCALE}/dynamic.i18n.js`;
+        const newI18nAssetUrlsToAdd = [];
+        const numericAssetUrl = urlConcat('', NUMERIC_FILENAME);
+        newI18nAssetUrlsToAdd.push(numericAssetUrl);
+        const dynamicAssetUrl = urlConcat('', DYNAMIC_FILENAME);
+        newI18nAssetUrlsToAdd.push(dynamicAssetUrl);
+
+        if (newI18nAssetUrlsToAdd.length > 0) {
+          assets.js = [...newI18nAssetUrlsToAdd, ...assets.js];
+        }
+
+        cb(null, hookData);
+      });
+    });
+  }
+
+}
+
+module.exports = {
+  I18nNumericIndexHtmlInjectorPlugin
+};

package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexPlugin.js

@@ -0,0 +1,190 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const {
+  sources,
+  Compilation
+} = require('webpack');
+
+const {
+  createHash
+} = require("../I18nSplitPlugin/createHash");
+
+const {
+  RawSource
+} = sources;
+const pluginName = 'I18nNumericIndexPlugin';
+
+class I18nNumericIndexPlugin {
+  constructor(options) {
+    this.options = options;
+    this.numericMap = null;
+    this.numericMapPath = options.numericMapPath;
+  }
+
+  loadNumericMapOnce(compilation) {
+    if (this.numericMap) {
+      return this.numericMap;
+    }
+
+    try {
+      if (this.numericMapPath && fs.existsSync(this.numericMapPath)) {
+        const fileContent = fs.readFileSync(this.numericMapPath, 'utf-8');
+        const parsedData = JSON.parse(fileContent);
+
+        if (parsedData && parsedData.sortedOriginalKeys && parsedData.totalKeys !== undefined) {
+          this.numericMap = {
+            sortedOriginalKeys: parsedData.sortedOriginalKeys,
+            totalKeys: parsedData.totalKeys
+          };
+          compilation.logger.info(`${pluginName}: Loaded numeric map from ${this.numericMapPath}.`);
+          return this.numericMap;
+        } else {
+          compilation.logger.error(`${pluginName}: Invalid format in numeric map file at ${this.numericMapPath}.`);
+          this.numericMap = {
+            sortedOriginalKeys: [],
+            totalKeys: 0
+          };
+        }
+      } else {
+        compilation.logger.warn(`${pluginName}: Numeric map path not provided or file not found at ${this.numericMapPath}.`);
+        this.numericMap = {
+          sortedOriginalKeys: [],
+          totalKeys: 0
+        };
+      }
+    } catch (err) {
+      compilation.logger.error(`${pluginName}: Error loading numeric map from ${this.numericMapPath}: ${err.message}`);
+      this.numericMap = {
+        sortedOriginalKeys: [],
+        totalKeys: 0
+      };
+    }
+
+    return this.numericMap;
+  }
+
+  emitFile(compilation, baseFilenameTemplate, locale, fileContentData, jsonpFunc, typeSuffix = '') {
+    const fileContent = `${jsonpFunc}(${JSON.stringify(fileContentData)});`;
+    const source = new RawSource(fileContent);
+    const actualContentHash = createHash({
+      //
+      outputOptions: compilation.outputOptions,
+      content: fileContent
+    });
+    let processedFilenameTemplate = baseFilenameTemplate.replace(/\[locale\]/g, locale).replace(/\[name\]/g, locale).replace(/\[id\]/g, locale);
+    const finalFileName = compilation.getAssetPath(processedFilenameTemplate, {
+      locale: locale,
+      contentHash: actualContentHash,
+      hash: compilation.hash,
+      chunk: {
+        id: `i18n-${typeSuffix || 'data'}-${locale}`,
+        name: `${typeSuffix || 'data'}-${locale}`,
+        hash: actualContentHash,
+        contentHash: {
+          [this.options.moduleType || 'i18n/mini-extract']: actualContentHash
+        }
+      },
+      contentHashType: this.options.moduleType || 'i18n/mini-extract'
+    });
+    compilation.emitAsset(finalFileName, source);
+    compilation.logger.info(`${pluginName}: Emitted ${typeSuffix} i18n file for locale ${locale} to ${finalFileName}`);
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tapAsync({
+        name: pluginName,
+        stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+      }, (assets, callback) => {
+        const {
+          sortedOriginalKeys,
+          totalKeys
+        } = this.loadNumericMapOnce(compilation);
+
+        if (totalKeys === 0 && (!sortedOriginalKeys || sortedOriginalKeys.length === 0)) {
+          compilation.logger.info(`${pluginName}: No numeric keys to process. Skipping numeric file emission.`);
+        }
+
+        const globallyUsedLiteralKeys = new Set();
+        const globallyUsedCommentKeys = new Set();
+
+        for (const module of compilation.modules) {
+          if (module.buildInfo) {
+            if (Array.isArray(module.buildInfo.loaderIdentifiedLiteralI18nKeys)) {
+              module.buildInfo.loaderIdentifiedLiteralI18nKeys.forEach(key => globallyUsedLiteralKeys.add(key));
+            }
+
+            if (Array.isArray(module.buildInfo.loaderIdentifiedCommentI18nKeys)) {
+              module.buildInfo.loaderIdentifiedCommentI18nKeys.forEach(key => globallyUsedCommentKeys.add(key));
+            }
+          }
+        }
+
+        compilation.logger.info(`${pluginName}: Globally identified Literal Keys: ${globallyUsedLiteralKeys.size}, Comment Keys: ${globallyUsedCommentKeys.size}`);
+        const {
+          locales,
+          allI18nObject,
+          numericFilenameTemplate,
+          dynamicFilenameTemplate,
+          numericJsonpFunc,
+          dynamicJsonpFunc
+        } = this.options;
+
+        if (!locales || !allI18nObject || !numericFilenameTemplate || !dynamicFilenameTemplate || !numericJsonpFunc || !dynamicJsonpFunc) {
+          compilation.errors.push(new Error(`${pluginName}: Missing some required options (locales, allI18nObject, filename templates, jsonp funcs).`));
+          return callback();
+        }
+
+        if (totalKeys > 0 && sortedOriginalKeys && sortedOriginalKeys.length > 0) {
+          for (const locale of locales) {
+            const localeTranslations = allI18nObject[locale] || {};
+            const orderedNumericTranslations = new Array(totalKeys);
+
+            for (let i = 0; i < totalKeys; i++) {
+              const originalKey = sortedOriginalKeys[i];
+
+              if (globallyUsedLiteralKeys.has(originalKey)) {
+                orderedNumericTranslations[i] = localeTranslations[originalKey] !== undefined ? localeTranslations[originalKey] : 0; // Use 0 or null as placeholder for missing keys
+              } else {
+                orderedNumericTranslations[i] = 0; // Placeholder for keys not identified as literals or not used
+              }
+            }
+
+            this.emitFile(compilation, numericFilenameTemplate, locale, orderedNumericTranslations, numericJsonpFunc, 'numeric');
+          }
+        }
+
+        if (globallyUsedCommentKeys.size > 0) {
+          for (const locale of locales) {
+            const localeTranslations = allI18nObject[locale] || {};
+            const dynamicKeyTranslations = {};
+            globallyUsedCommentKeys.forEach(originalKey => {
+              if (localeTranslations[originalKey] !== undefined) {
+                dynamicKeyTranslations[originalKey] = localeTranslations[originalKey];
+              } else {
+                dynamicKeyTranslations[originalKey] = null;
+              }
+            });
+
+            if (Object.keys(dynamicKeyTranslations).length > 0) {
+              this.emitFile(compilation, dynamicFilenameTemplate, locale, dynamicKeyTranslations, dynamicJsonpFunc, 'dynamic');
+            }
+          }
+        } else {
+          compilation.logger.info(`${pluginName}: No globally used comment keys found. Skipping dynamic file emission.`);
+        }
+
+        callback();
+      });
+    });
+  }
+
+}
+
+module.exports = {
+  I18nNumericIndexPlugin
+};

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/collectAstKeys.js

@@ -0,0 +1,98 @@
+"use strict";
+
+const {
+  walk
+} = require('estree-walker');
+
+const PREFIX_I18N_COMMENT = 'I18N';
+const PREFIX_I18N_COMMENT_DYNAMIC = 'dynamic-i18n-key';
+
+function getI18nKeysFromSingleComment(commentNode, validKeysSet, isDebug = false) {
+  const functionName = '[getI18nKeysFromSingleComment]';
+  const foundKeysInComment = [];
+
+  if (!commentNode || typeof commentNode.value !== 'string') {
+    return foundKeysInComment;
+  }
+
+  const commentString = commentNode.value.trim();
+  let i18nKeyStr;
+
+  if (commentString.startsWith(PREFIX_I18N_COMMENT)) {
+    i18nKeyStr = commentString.slice(PREFIX_I18N_COMMENT.length).trim();
+  } else if (commentString.startsWith(PREFIX_I18N_COMMENT_DYNAMIC)) {
+    i18nKeyStr = commentString.slice(PREFIX_I18N_COMMENT_DYNAMIC.length).trim();
+  }
+
+  if (!i18nKeyStr) {
+    return foundKeysInComment;
+  }
+
+  const potentialKeys = i18nKeyStr.split(',').map(key => key.trim()).filter(key => key);
+  potentialKeys.forEach(key => {
+    if (validKeysSet.has(key)) {
+      foundKeysInComment.push(key);
+    }
+  });
+  return foundKeysInComment;
+}
+/**
+ * Traverses an AST and its comments to collect and categorize i18n keys.
+ *
+ * @param {object} astProgramNode - The Program node of the AST.
+ * @param {object[]} commentsArray - An array of comment nodes from the AST.
+ * @param {object} allI18nKeysMasterMap - Object map of all valid i18n keys (from JSResources).
+ * @param {boolean} [isDebug=false] - Flag for verbose logging.
+ * @returns {{literalKeys: Set<string>, commentKeys: Set<string>}}
+ * literalKeys: Set of valid i18n keys found as string literals.
+ * commentKeys: Set of valid i18n keys found in comments.
+ */
+
+
+function collectAndCategorizeUsedI18nKeys(astProgramNode, commentsArray, allI18nKeysMasterMap, isDebug = false) {
+  const functionName = '[collectAndCategorizeUsedI18nKeys]';
+  const foundLiteralKeys = new Set();
+  const foundCommentKeys = new Set();
+  const validKeysSet = new Set(Object.keys(allI18nKeysMasterMap || {}));
+
+  if (validKeysSet.size === 0 && isDebug) {
+    console.warn(`${functionName} allI18nKeysMasterMap is empty. No keys can be collected.`);
+  } // 1. Collect keys from AST string literals
+
+
+  if (astProgramNode) {
+    try {
+      walk(astProgramNode, {
+        enter(node) {
+          if ((node.type === 'Literal' || node.type === 'StringLiteral') && typeof node.value === 'string') {
+            if (validKeysSet.has(node.value)) {
+              foundLiteralKeys.add(node.value);
+            }
+          }
+        }
+
+      });
+    } catch (error) {
+      console.error(`${functionName} Error during AST walk:`, error);
+    }
+  } // 2. Collect keys from comments
+
+
+  if (commentsArray && Array.isArray(commentsArray)) {
+    commentsArray.forEach(commentNode => {
+      const keysFromComment = getI18nKeysFromSingleComment(commentNode, validKeysSet, isDebug);
+      keysFromComment.forEach(key => {
+        foundCommentKeys.add(key);
+      });
+    });
+  }
+
+  return {
+    literalKeys: foundLiteralKeys,
+    commentKeys: foundCommentKeys
+  };
+}
+
+module.exports = {
+  collectAndCategorizeUsedI18nKeys: collectAndCategorizeUsedI18nKeys
+};

package/lib/shared/bundler/webpack/jsLoaders.js

@@ -7,11 +7,24 @@ exports.jsLoaders = jsLoaders;
 
 var _babelLoaderConfig = require("./loaderConfigs/babelLoaderConfig");
 
+var {
+  i18nIdReplaceLoaderConfig
+} = require("./loaderConfigs/i18nIdReplaceLoaderConfig");
+
 function jsLoaders(options) {
+  const useLoaders = [(0, _babelLoaderConfig.babelLoaderConfig)(options)];
+
+  if (options.i18nIndexing && options.i18nIndexing.enable) {
+    const i18nLoader = i18nIdReplaceLoaderConfig(options);
+
+    if (i18nLoader) {
+      useLoaders.push(i18nLoader);
+    }
+  }
+
   return [{
     test: /\.js$/,
     exclude: /node_modules/,
-    use: [(0, _babelLoaderConfig.babelLoaderConfig)(options)] // include: path.join(appPath, folder)
-
+    use: useLoaders
   }];
 }

package/lib/shared/bundler/webpack/loaderConfigs/i18nIdReplaceLoaderConfig.js

@@ -0,0 +1,94 @@
+"use strict";
+
+const path = require('path');
+
+const fs = require('fs');
+
+let allI18nDataFromPropertiesCache = null;
+
+function loadJSResourcesOnce(options) {
+  if (allI18nDataFromPropertiesCache) {
+    return allI18nDataFromPropertiesCache;
+  }
+
+  let resourcePathToLoad = '';
+
+  if (options.i18nIndexing && options.i18nIndexing.enable && options.i18nIndexing.jsResourcePath) {
+    resourcePathToLoad = options.i18nIndexing.jsResourcePath;
+  } else if (options.i18nChunkSplit && options.i18nChunkSplit.jsResource) {
+    resourcePathToLoad = options.i18nChunkSplit.jsResource;
+  } else {
+    allI18nDataFromPropertiesCache = {};
+    return allI18nDataFromPropertiesCache;
+  }
+
+  const propertiesFilePath = path.resolve(process.cwd(), resourcePathToLoad);
+  const i18nData = {};
+
+  try {
+    const data = fs.readFileSync(propertiesFilePath, {
+      encoding: 'utf-8'
+    });
+    const lines = data.split(/\r?\n/);
+    lines.forEach(line => {
+      const trimmedLine = line.trim();
+
+      if (trimmedLine.startsWith('#') || trimmedLine.startsWith('!') || trimmedLine === '') {
+        return;
+      }
+
+      let separatorIndex = -1;
+
+      for (let i = 0; i < trimmedLine.length; i++) {
+        if ((trimmedLine[i] === '=' || trimmedLine[i] === ':') && (i === 0 || trimmedLine[i - 1] !== '\\')) {
+          separatorIndex = i;
+          break;
+        }
+      }
+
+      if (separatorIndex > 0) {
+        let key = trimmedLine.substring(0, separatorIndex).trim();
+        const value = trimmedLine.substring(separatorIndex + 1).trim();
+        key = key.replace(/\\ /g, ' ');
+
+        if (key) {
+          i18nData[key] = value;
+        }
+      }
+    });
+  } catch (err) {// Silent error handling
+  }
+
+  allI18nDataFromPropertiesCache = i18nData;
+  return allI18nDataFromPropertiesCache;
+}
+
+function i18nIdReplaceLoaderConfig(options) {
+  const allI18nData = loadJSResourcesOnce(options);
+
+  const i18nKeyReplaceLoaderPath = require.resolve('../loaders/i18nIdReplaceLoader.js');
+
+  const loaderOptions = {
+    allI18nData: allI18nData,
+    sourceMaps: !!options.devtool && options.devtool.includes('source-map'),
+    isDebug: options.mode === 'development'
+  };
+
+  if (options.i18nIndexing && options.i18nIndexing.enable) {
+    loaderOptions.useNumericIndexing = true;
+    loaderOptions.numericMapPath = options.i18nIndexing.numericMapPath;
+    loaderOptions.fallbackToHash = options.i18nIndexing.fallbackToHash !== undefined ? options.i18nIndexing.fallbackToHash : true;
+  } else {
+    loaderOptions.useNumericIndexing = false;
+    loaderOptions.fallbackToHash = true;
+  }
+
+  return {
+    loader: i18nKeyReplaceLoaderPath,
+    options: loaderOptions
+  };
+}
+
+module.exports = {
+  i18nIdReplaceLoaderConfig
+};

package/lib/shared/bundler/webpack/loaders/i18nIdReplaceLoader.js

@@ -0,0 +1,201 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const parser = require('@babel/parser');
+
+const generator = require('@babel/generator').default;
+
+const {
+  walk
+} = require('estree-walker');
+
+const {
+  getOptions
+} = require('loader-utils');
+
+let collectAndCategorizeUsedI18nKeys, generateShortHash;
+
+try {
+  collectAndCategorizeUsedI18nKeys = require('../custom_plugins/I18nSplitPlugin/utils/collectAstKeys').collectAndCategorizeUsedI18nKeys;
+  generateShortHash = require('../common/hashUtils').generateShortHash;
+} catch (e) {
+  collectAndCategorizeUsedI18nKeys = () => ({
+    literalKeys: new Set(),
+    commentKeys: new Set()
+  });
+
+  generateShortHash = key => key;
+}
+
+const LOADER_PREFIX = '[i18nIdReplaceLoader]';
+let numericIdMapDataCache = null;
+let mapLoadAttemptedForPath = {};
+
+function loadNumericIdMap(loaderContext, mapPath) {
+  if (!mapPath) {
+    loaderContext.emitWarning(new Error(`${LOADER_PREFIX} Numeric map path not provided in loader options.`));
+    return null;
+  }
+
+  if (numericIdMapDataCache && mapLoadAttemptedForPath[mapPath]) {
+    return numericIdMapDataCache;
+  }
+
+  mapLoadAttemptedForPath[mapPath] = true;
+
+  try {
+    if (fs.existsSync(mapPath)) {
+      const fileContent = fs.readFileSync(mapPath, 'utf-8');
+      const parsedData = JSON.parse(fileContent);
+
+      if (parsedData && parsedData.originalKeyToNumericId && typeof parsedData.originalKeyToNumericId === 'object') {
+        numericIdMapDataCache = parsedData.originalKeyToNumericId;
+      } else {
+        loaderContext.emitError(new Error(`${LOADER_PREFIX} Pre-generated map file (${mapPath}) is invalid or does not contain 'originalKeyToNumericId'.`));
+        numericIdMapDataCache = null;
+      }
+    } else {
+      loaderContext.emitError(new Error(`${LOADER_PREFIX} Pre-generated i18n numeric map file NOT FOUND at: ${mapPath}.`));
+      numericIdMapDataCache = null;
+    }
+  } catch (err) {
+    loaderContext.emitError(new Error(`${LOADER_PREFIX} Error loading or parsing pre-generated i18n map from ${mapPath}: ${err.message}`));
+    numericIdMapDataCache = null;
+  }
+
+  return numericIdMapDataCache;
+}
+
+module.exports = function i18nIdReplaceLoader(source, map, meta) {
+  const resourcePath = this.resourcePath;
+  this.cacheable && this.cacheable();
+  const options = getOptions(this) || {};
+  const callback = this.async();
+  const loaderContext = this;
+
+  if (!options.allI18nData || typeof options.allI18nData !== 'object' || Object.keys(options.allI18nData).length === 0) {
+    this.emitWarning(new Error(`${LOADER_PREFIX} [${resourcePath}] 'allI18nData' option is missing or empty. No replacements will be made.`));
+    return callback(null, source, map);
+  }
+
+  let useNumericIndexing = options.useNumericIndexing !== undefined ? options.useNumericIndexing : true;
+  let localOriginalKeyToNumericIdMap = null;
+
+  if (useNumericIndexing) {
+    localOriginalKeyToNumericIdMap = loadNumericIdMap(this, options.numericMapPath);
+  }
+
+  const fallbackToHash = options.fallbackToHash !== undefined ? options.fallbackToHash : true;
+
+  try {
+    const parserOptions = {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript', 'classProperties', 'optionalChaining', 'nullishCoalescingOperator'],
+      attachComment: true,
+      sourceFilename: resourcePath
+    };
+    const astFile = parser.parse(source, parserOptions);
+    const astProgram = astFile.program;
+    const comments = astFile.comments || [];
+    const {
+      literalKeys,
+      commentKeys
+    } = collectAndCategorizeUsedI18nKeys(astProgram, comments, options.allI18nData, options.isDebug);
+
+    if (this._module) {
+      if (!this._module.buildInfo) {
+        this._module.buildInfo = {};
+      }
+
+      if (literalKeys.size > 0) {
+        this._module.buildInfo.loaderIdentifiedLiteralI18nKeys = Array.from(literalKeys);
+      }
+
+      if (commentKeys.size > 0) {
+        this._module.buildInfo.loaderIdentifiedCommentI18nKeys = Array.from(commentKeys);
+      }
+    }
+
+    const keysToReplaceInLiterals = literalKeys;
+
+    if (keysToReplaceInLiterals.size === 0) {
+      return callback(null, source, map);
+    }
+
+    let replacementMade = false;
+    walk(astProgram, {
+      enter: function (node, parent, prop, index) {
+        const walkerControl = this;
+
+        if ((node.type === 'Literal' || node.type === 'StringLiteral') && typeof node.value === 'string') {
+          const originalValue = node.value;
+
+          if (keysToReplaceInLiterals.has(originalValue)) {
+            let replaced = false;
+
+            if (useNumericIndexing && localOriginalKeyToNumericIdMap) {
+              const numericId = localOriginalKeyToNumericIdMap[originalValue];
+
+              if (numericId !== undefined) {
+                const numericLiteralNode = {
+                  type: 'NumericLiteral',
+                  value: numericId
+                };
+                let replacementNode = numericLiteralNode;
+
+                if (parent && parent.type === 'JSXAttribute' && parent.value === node) {
+                  replacementNode = {
+                    type: 'JSXExpressionContainer',
+                    expression: numericLiteralNode
+                  };
+                }
+
+                walkerControl.replace(replacementNode);
+                replacementMade = true;
+                replaced = true;
+              }
+            }
+
+            if (!replaced && fallbackToHash) {
+              try {
+                const hashValue = generateShortHash(originalValue);
+                const hashedStringLiteralNode = {
+                  type: 'StringLiteral',
+                  value: hashValue
+                };
+                walkerControl.replace(hashedStringLiteralNode);
+                replacementMade = true;
+              } catch (hashError) {
+                loaderContext.emitError(new Error(`${LOADER_PREFIX} [${resourcePath}] Error hashing key "${originalValue}": ${hashError.message}`));
+              }
+            }
+          }
+        }
+      }
+    });
+
+    if (replacementMade) {
+      const generateOptions = {
+        sourceMaps: options.sourceMaps,
+        sourceFileName: resourcePath,
+        retainLines: false,
+        comments: true
+      };
+      const output = generator(astFile, generateOptions, source);
+      callback(null, output.code, options.sourceMaps && output.map ? output.map : map);
+    } else {
+      callback(null, source, map);
+    }
+  } catch (err) {
+    const detailedError = new Error(`${LOADER_PREFIX} [${resourcePath}] AST Processing Error: ${err.message} (Stack: ${err.stack})`);
+
+    if (err.loc) {
+      detailedError.message += ` at line ${err.loc.line}, column ${err.loc.column}`;
+    }
+
+    callback(detailedError);
+  }
+};

package/lib/shared/bundler/webpack/pluginConfigs/configI18nNumericIndexPlugin.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configI18nNumericIndexPlugin = configI18nNumericIndexPlugin;
+
+var {
+  I18nNumericIndexPlugin
+} = require("@zohodesk/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexPlugin");
+
+var {
+  I18nNumericIndexHtmlInjectorPlugin
+} = require("../custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexHtmlInjectorPlugin");
+
+var {
+  readI18nValues
+} = require('../custom_plugins/I18nSplitPlugin/readI18nValues');
+
+const path = require('path');
+
+function urlConcat(strPath) {
+  if (strPath && typeof strPath === 'string' && !strPath.endsWith('/')) {
+    return strPath + '/';
+  }
+
+  return strPath;
+}
+
+function urlJoin(...args) {
+  return args.map(part => typeof part === 'string' ? part.replace(/(^\/+|\/+$)/g, '') : '').filter(part => part !== '').join('/');
+}
+
+function configI18nNumericIndexPlugin(options) {
+  if (!(options.i18nIndexing && options.i18nIndexing.enable)) {
+    return null;
+  }
+
+  const i18nOpts = options.i18nIndexing;
+  const cdnConfig = options.cdnMapping || {};
+  const {
+    locales,
+    allI18nObject
+  } = readI18nValues({
+    jsResource: i18nOpts.jsResourcePath,
+    propertiesFolder: i18nOpts.propertiesFolderPath,
+    disableDefault: i18nOpts.disableDefaultMerge !== undefined ? i18nOpts.disableDefaultMerge : false
+  });
+  const hardcodedDefaultNumericTemplate = 'i18n-chunks/[locale]/numeric.i18n.js';
+  const hardcodedDefaultDynamicTemplate = 'i18n-chunks/[locale]/dynamic.i18n.js';
+  let numericFilenameTemplate = i18nOpts.numericFilenameTemplate || hardcodedDefaultNumericTemplate;
+  let dynamicFilenameTemplate = i18nOpts.dynamicFilenameTemplate || hardcodedDefaultDynamicTemplate;
+
+  if (i18nOpts.numericFilenameTemplate === undefined) {
+    // Check if explicitly undefined or missing
+    const i18nSplitFilename = options.i18nChunkSplit && options.i18nChunkSplit.filename;
+
+    if (i18nSplitFilename && typeof i18nSplitFilename === 'string') {
+      // This adaptation logic might need to be more robust
+      numericFilenameTemplate = `i18n-chunks/[locale]/${path.basename(i18nSplitFilename).replace(/(\.i18n)?\.js$/, '.numeric.i18n.js')}`;
+    } else {
+      numericFilenameTemplate = hardcodedDefaultNumericTemplate;
+    }
+  }
+
+  if (i18nOpts.dynamicFilenameTemplate === undefined) {
+    const i18nSplitFilename = options.i18nChunkSplit && options.i18nChunkSplit.filename;
+
+    if (i18nSplitFilename && typeof i18nSplitFilename === 'string') {
+      dynamicFilenameTemplate = `i18n-chunks/[locale]/${path.basename(i18nSplitFilename).replace(/(\.i18n)?\.js$/, '.dynamic.i18n.js')}`;
+    } else {
+      dynamicFilenameTemplate = hardcodedDefaultDynamicTemplate;
+    }
+  }
+
+  const htmlTemplateLabel = i18nOpts.htmlTemplateLabel || '{{--user-locale}}';
+  const defaultJsonpFunc = options.i18nChunkSplit && options.i18nChunkSplit.jsonpFunc || 'window.loadI18nChunk';
+  let i18nAssetsPublicPathPrefix = '';
+
+  if (cdnConfig.isCdnEnabled) {
+    if (cdnConfig.i18nTemplate) {
+      i18nAssetsPublicPathPrefix = urlConcat(cdnConfig.i18nTemplate);
+    } else if (cdnConfig.jsTemplate) {
+      i18nAssetsPublicPathPrefix = urlConcat(cdnConfig.jsTemplate);
+    } else {
+      const defaultCdnDomainPlaceholder = '//{{--js-static-domain}}';
+      i18nAssetsPublicPathPrefix = urlConcat(urlJoin(defaultCdnDomainPlaceholder, options.publicPath === undefined ? '' : options.publicPath));
+    }
+  } else {
+    i18nAssetsPublicPathPrefix = urlConcat(options.publicPath === undefined ? '' : options.publicPath);
+  }
+
+  const pluginBaseOptions = {
+    locales,
+    allI18nObject,
+    numericMapPath: i18nOpts.numericMapPath,
+    numericJsonpFunc: i18nOpts.numericJsonpFunc || defaultJsonpFunc,
+    dynamicJsonpFunc: i18nOpts.dynamicJsonpFunc || defaultJsonpFunc,
+    numericFilenameTemplate,
+    // This will now include "i18n-chunks/[locale]/"
+    dynamicFilenameTemplate,
+    // This will now include "i18n-chunks/[locale]/"
+    moduleType: 'i18n/mini-extract',
+    mainChunkName: options.i18nChunkSplit && options.i18nChunkSplit.mainChunkName || 'main',
+    htmlTemplateLabel,
+    localeVarName: i18nOpts.localeVarName
+  };
+  const htmlInjectorOptions = { ...pluginBaseOptions,
+    i18nAssetsPublicPathPrefix: i18nAssetsPublicPathPrefix,
+    cspNoncePlaceholder: i18nOpts.cspNoncePlaceholder || '{{--CSP-nonce}}'
+  };
+  return [new I18nNumericIndexPlugin(pluginBaseOptions), new I18nNumericIndexHtmlInjectorPlugin(htmlInjectorOptions)];
+}

package/lib/shared/bundler/webpack/plugins.js

@@ -49,10 +49,29 @@ var _configRuntimeResourceCleanup = require("./pluginConfigs/configRuntimeResour
 
 var _configCustomScriptLoadingStrategyPlugin = require("./pluginConfigs/configCustomScriptLoadingStrategyPlugin");
 
-// import { IgnorePlugin } from 'webpack';
+var {
+  configI18nNumericIndexPlugin
+} = require("./pluginConfigs/configI18nNumericIndexPlugin");
+
 function plugins(options) {
   const {
     webpackPlugins
   } = options;
-  return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), ...webpackPlugins].filter(Boolean);
+  const pluginConfigurations = [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options)];
+
+  if (options.i18nIndexing && options.i18nIndexing.enable) {
+    const newI18nPlugins = configI18nNumericIndexPlugin(options);
+
+    if (newI18nPlugins) {
+      pluginConfigurations.push(...newI18nPlugins);
+    }
+  } else {
+    const configI18nSplitPlugin = (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options);
+
+    if (configI18nSplitPlugin) {
+      pluginConfigurations.push(configI18nSplitPlugin);
+    }
+  }
+
+  return [...pluginConfigurations, ...webpackPlugins].filter(Boolean);
 }

package/npm-shrinkwrap.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/client_build_tool",
-  "version": "0.0.6-exp.43",
+  "version": "0.0.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/client_build_tool",
-  "version": "0.0.9-exp.3",
+  "version": "0.0.9-exp.8",
   "description": "A CLI tool to  build  web applications and client libraries",
   "main": "lib/index.js",
   "bin": {