@zohodesk/client_build_tool 0.0.11-exp.15.1 → 0.0.11-exp.15.4

package/README.md

@@ -98,207 +98,3 @@ fixes :-
 
 - preload plc undefined url fixed 
 
-# Changelog and Release Notes
-
-- remove babel-plugin-module-resolver dependencies
-
-**Adjustments:-**
- - Public Folder configuration is separated for development and production
-
-**Bug Fix:-**
-- Fixed the issue where the build log was not visible when `stats (bundle integrity)` was enabled. The problem was resolved by adding an error check in the `bundleIntegrity plugin`.
-- Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application.
-- Fixed the issue where a space in the variable name causes it to return an undefined value.
-- Fixed the URL path generation issue that occurred while using context in the development setup.
-
-
-
-# v0.0.11
-
-# v0.0.10 (12-05-2025)
-**Feature:-**
-- `alias` support for `build:es` and `build:lib`
-    - Add babel-plugin-module-resolver dependencies
-    - Modify getBabelPlugin to include module resolver with aliases
-
-**Bug Fix:-**
-- Enhance runBabelForTSFile to handle both .tsx and .ts file extensions
-- Update mockApiHandler to ensure mock function is called correctly
-
-**Change:-**
-- Refactor defaultConfigValues.js to include cli options for enableRTLSplit
-
-## v0.0.9 
-
-**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
-
-- remove babel-plugin-module-resolver dependencies
-
-**Adjustments:-**
- - Public Folder configuration is separated for development and production
-
-**Bug Fix:-**
-- Fixed the issue where the build log was not visible when `stats (bundle integrity)` was enabled. The problem was resolved by adding an error check in the `bundleIntegrity plugin`.
-- Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application.
-- Fixed the issue where a space in the variable name causes it to return an undefined value.
-- Fixed the URL path generation issue that occurred while using context in the development setup.
-
-
-
-# v0.0.11
-
-# v0.0.10 (12-05-2025)
-**Feature:-**
-- `alias` support for `build:es` and `build:lib`
-    - Add babel-plugin-module-resolver dependencies
-    - Modify getBabelPlugin to include module resolver with aliases
-
-**Bug Fix:-**
-- Enhance runBabelForTSFile to handle both .tsx and .ts file extensions
-- Update mockApiHandler to ensure mock function is called correctly
-
-**Change:-**
-- Refactor defaultConfigValues.js to include cli options for enableRTLSplit
-
-## v0.0.9 
-
-**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/docs/I18N_NUMERIC_INDEXING_PLUGIN.md

@@ -0,0 +1,225 @@
+# I18n Numeric Indexing Plugin Documentation
+
+## Overview
+The I18nNumericIndexPlugin is a webpack plugin that implements lazy loading for i18n translations with numeric indexing to reduce bundle size. It separates translations into multiple chunks that load on-demand.
+
+## Features
+
+### 1. **Numeric Indexing**
+- Replaces string keys with numeric IDs (e.g., "support.label.home" → "1")
+- Reduces bundle size by ~40%
+- Maintains backward compatibility
+
+### 2. **Custom Group Support**
+- Define translation groups using banner markers in JSResources.properties
+- Each group generates a separate chunk
+- Groups load automatically when their associated code chunks load
+
+### 3. **Lazy Loading**
+- Initial load: Only numeric.i18n.js and dynamic.i18n.js
+- Setup translations: Load only when SetupHome chunk loads
+- Other groups: Load on-demand based on configuration
+
+## Configuration
+
+### In `cbt.config.js`:
+
+```javascript
+exports.config = {
+  i18nIndexing: {
+    enable: true,
+    jsResourcePath: './deskapp/properties/JSResources.properties',
+    propertiesFolderPath: './deskapp/properties',
+    numericMapPath: './deskapp/properties/i18n-numeric-map.json',
+    numericFilenameTemplate: 'i18n-chunk/[locale]/numeric.i18n.js',
+    dynamicFilenameTemplate: 'i18n-chunk/[locale]/dynamic.i18n.js',
+    jsonpFunc: 'window.loadI18nChunk',
+    htmlTemplateLabel: '{{--user-locale}}',
+    localeVarName: 'window.userLangCode',
+    customGroups: {
+      setup: {
+        bannerStart: '#SETUP_LAZY_KEYS STARTS',
+        bannerEnd: '#SETUP_LAZY_KEYS ENDS',
+        chunks: ['SetupHome'],  // Webpack chunks that trigger this group
+        filenameTemplate: 'i18n-chunk/[locale]/setup.i18n.js',
+        preload: false,
+        prefetch: true
+      }
+    }
+  }
+}
+```
+
+### In `JSResources.properties`:
+
+```properties
+# Regular translations
+support.label.home=Home
+support.label.tickets=Tickets
+
+#SETUP_LAZY_KEYS STARTS
+# These will be lazy loaded
+support.setup.label.phone=Phone
+support.setup.label.layouts_fields=Layouts and Fields
+#SETUP_LAZY_KEYS ENDS
+
+# More regular translations
+support.label.chat=Chat
+```
+
+### In `index.html`:
+
+```javascript
+window.loadI18nChunk = function(translations, groupName) {
+  // Merge translations
+  window.i18n = Object.assign(window.i18n, translations);
+  
+  // Track loaded groups
+  if (groupName) {
+    console.log('[I18n] Loaded group:', groupName);
+  }
+  
+  // Notify framework
+  window.dispatchEvent(new CustomEvent('i18nLoaded', { 
+    detail: { group: groupName } 
+  }));
+};
+```
+
+## How It Works
+
+### Build Time:
+1. Plugin reads JSResources.properties
+2. Parses banner markers to identify custom groups
+3. Generates numeric mapping for all keys
+4. Creates separate chunks:
+   - `numeric.i18n.js` - Main translations with numeric keys
+   - `dynamic.i18n.js` - Keys with placeholders (keep string keys)
+   - `setup.i18n.js` - Setup-specific translations (lazy loaded)
+
+### Runtime:
+1. Initial page load → Loads numeric.i18n.js + dynamic.i18n.js
+2. User clicks Setup → Webpack loads SetupHome.js
+3. Plugin runtime detects SetupHome needs 'setup' group
+4. Automatically loads setup.i18n.js
+5. Calls window.loadI18nChunk() with translations
+
+## Output Structure
+
+```
+agent/
+└── i18n-chunk/
+    ├── en_US/
+    │   ├── numeric.i18n.js    (396KB - main translations)
+    │   ├── dynamic.i18n.js    (201KB - dynamic keys)
+    │   └── setup.i18n.js      (217B - setup keys only!)
+    └── [other locales]/
+```
+
+## Generated Files
+
+### numeric.i18n.js:
+```javascript
+window.loadI18nChunk({
+  "1": "Home",
+  "2": "Tickets",
+  "3": "Chat"
+  // ... thousands more
+});
+```
+
+### setup.i18n.js:
+```javascript
+window.loadI18nChunk({
+  "4547": "Phone",
+  "4548": "Zia",
+  "4549": "Layouts and Fields"
+  // ... setup-specific keys
+}, "setup");
+```
+
+### i18n-numeric-map.json:
+```json
+{
+  "support.label.home": 1,
+  "support.label.tickets": 2,
+  "support.setup.label.phone": 4547
+}
+```
+
+## Using webpackI18nGroup Comments
+
+You can also mark chunks for i18n groups using comments:
+
+```javascript
+const SetupHome = lazy(() => 
+  import(
+    /* webpackChunkName: "SetupHome" */
+    /* webpackI18nGroup: "setup" */
+    './pages/SetupHome'
+  )
+);
+```
+
+## Performance Benefits
+
+1. **Initial Bundle**: ~40% smaller due to numeric indexing
+2. **Setup Keys**: Only 217 bytes, loaded on-demand
+3. **Network**: Fewer bytes transferred
+4. **Memory**: Reduced memory footprint
+
+## Adding New Groups
+
+To add a new lazy-loaded group (e.g., "reports"):
+
+1. Add banner markers in JSResources.properties:
+```properties
+#REPORTS_LAZY_KEYS STARTS
+support.reports.label.dashboard=Dashboard
+#REPORTS_LAZY_KEYS ENDS
+```
+
+2. Update cbt.config.js:
+```javascript
+customGroups: {
+  setup: { /* ... */ },
+  reports: {
+    bannerStart: '#REPORTS_LAZY_KEYS STARTS',
+    bannerEnd: '#REPORTS_LAZY_KEYS ENDS',
+    chunks: ['ReportsHome'],
+    filenameTemplate: 'i18n-chunk/[locale]/reports.i18n.js'
+  }
+}
+```
+
+## Troubleshooting
+
+### Keys not in setup chunk:
+- Check banner markers are correct in JSResources.properties
+- Verify key is between STARTS and ENDS markers
+
+### Setup chunk not loading:
+- Ensure SetupHome is in the chunks array
+- Check browser DevTools Network tab
+- Verify window.loadI18nChunk is defined
+
+### Numeric mapping issues:
+- Check i18n-numeric-map.json is generated
+- Verify no duplicate keys
+- Ensure jsResourcePath is correct
+
+## Migration Guide
+
+1. Enable i18nIndexing in cbt.config.js
+2. Add banner markers to JSResources.properties
+3. Update index.html with loadI18nChunk function
+4. Build and test
+5. Monitor Network tab to verify lazy loading
+
+## Best Practices
+
+1. **Group Related Keys**: Keep setup keys together
+2. **Use Root Chunks**: Configure the main entry chunk for each section
+3. **Monitor Bundle Size**: Check generated file sizes
+4. **Test Loading**: Verify chunks load when expected
+5. **Keep Groups Small**: Aim for <1KB per lazy group

package/lib/schemas/defaultConfigValues.js

@@ -174,25 +174,22 @@ var _default = {
     localeVarName: 'document.documentElement.lang',
     jsonpFunc: 'console.log',
     jsResource: null,
-    propertiesFolder: null,
-    useNumericIndexing: false
+    propertiesFolder: null
   },
   i18nIndexing: {
-    enable: false,
-    devMode: false,
-    jsResourcePath: './deskapp/properties/JSResources.properties',
-    propertiesFolderPath: './deskapp/properties',
-    numericMapPath: './deskapp/properties/i18n-numeric-map.json',
+    enable: {
+      value: false,
+      cli: 'i18n_indexing'
+    },
+    jsResourcePath: null,
+    propertiesFolderPath: null,
+    numericMapPath: null,
     numericFilenameTemplate: 'i18n-chunk/[locale]/numeric.i18n.js',
     dynamicFilenameTemplate: 'i18n-chunk/[locale]/dynamic.i18n.js',
-    singleFileTemplate: 'i18n/[locale].js',
     jsonpFunc: 'window.loadI18nChunk',
     htmlTemplateLabel: '{{--user-locale}}',
     localeVarName: 'window.userLangCode',
-    singleFile: false,
-    includeContentHash: false,
-    generateManifest: false,
-    manifestPath: null
+    customGroups: null
   },
   publicFolders: {
     dev: ['...'],

package/lib/schemas/defaultConfigValuesOnly.js

@@ -94,24 +94,7 @@ var _default = {
     localeVarName: 'document.documentElement.lang',
     jsonpFunc: 'console.log',
     jsResource: null,
-    propertiesFolder: null,
-    useNumericIndexing: false
-  },
-  i18nIndexing: {
-    enable: false,
-    devMode: false,
-    jsResourcePath: './deskapp/properties/JSResources.properties',
-    propertiesFolderPath: './deskapp/properties',
-    numericMapPath: './deskapp/properties/i18n-numeric-map.json',
-    numericFilenameTemplate: 'i18n-chunk/[locale]/numeric.i18n.js',
-    dynamicFilenameTemplate: 'i18n-chunk/[locale]/dynamic.i18n.js',
-    jsonpFunc: 'window.loadI18nChunk',
-    htmlTemplateLabel: '{{--user-locale}}',
-    localeVarName: 'window.userLangCode',
-    singleFile: false,
-    includeContentHash: false,
-    generateManifest: false,
-    manifestPath: null
+    propertiesFolder: null
   },
   publicFolders: {
     dev: ['...'],

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

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nGroupRuntimeModule = void 0;
+
+var _webpack = require("webpack");
+
+class I18nGroupRuntimeModule extends _webpack.RuntimeModule {
+  constructor(options) {
+    super('i18n-group-loader');
+    this.options = options;
+  }
+
+  generate() {
+    const {
+      customGroups,
+      localeVarName,
+      jsonpFunc
+    } = this.options; // Build chunk-to-group mapping from config
+
+    const chunkToGroup = {};
+    Object.entries(customGroups || {}).forEach(([groupName, config]) => {
+      (config.chunks || []).forEach(chunkName => {
+        chunkToGroup[chunkName] = groupName;
+      });
+    });
+    return `
+    // I18n Group Loading Runtime
+    (function() {
+      var loadedGroups = {};
+      var chunkToGroup = ${JSON.stringify(chunkToGroup)};
+      
+      // Store original webpack chunk loading function
+      var originalEnsureChunk = __webpack_require__.e;
+      
+      // Override webpack's chunk loading
+      __webpack_require__.e = function(chunkId) {
+        var promise = originalEnsureChunk.apply(this, arguments);
+        
+        // Check if this chunk needs an i18n group
+        var groupName = chunkToGroup[chunkId];
+        if (groupName && !loadedGroups[groupName]) {
+          // Load the i18n group
+          var locale = ${localeVarName} || 'en_US';
+          var groupConfig = ${JSON.stringify(customGroups)};
+          var config = groupConfig[groupName];
+          
+          if (config) {
+            var i18nUrl = config.filenameTemplate
+              .replace('[locale]', locale)
+              .replace('i18n-chunk/', __webpack_require__.p + 'i18n-chunk/');
+            
+            // Create script tag to load i18n chunk
+            var script = document.createElement('script');
+            script.src = i18nUrl;
+            script.async = true;
+            
+            // Mark as loaded when script loads
+            script.onload = function() {
+              loadedGroups[groupName] = true;
+            };
+            
+            document.head.appendChild(script);
+            
+            // If prefetch is enabled, prefetch other locales
+            if (config.prefetch && !config.preload) {
+              var link = document.createElement('link');
+              link.rel = 'prefetch';
+              link.href = i18nUrl;
+              document.head.appendChild(link);
+            }
+          }
+        }
+        
+        return promise;
+      };
+      
+      // Also check for webpackI18nGroup comments in dynamic imports
+      if (typeof __webpack_require__.l !== 'undefined') {
+        var originalLoadScript = __webpack_require__.l;
+        __webpack_require__.l = function(url, done, key, chunkId) {
+          // Check if chunk has i18n group
+          var groupName = chunkToGroup[chunkId];
+          if (groupName && !loadedGroups[groupName]) {
+            // Load i18n before main chunk
+            var locale = ${localeVarName} || 'en_US';
+            var groupConfig = ${JSON.stringify(customGroups)};
+            var config = groupConfig[groupName];
+            
+            if (config) {
+              var i18nUrl = config.filenameTemplate
+                .replace('[locale]', locale)
+                .replace('i18n-chunk/', __webpack_require__.p + 'i18n-chunk/');
+              
+              // Load i18n first, then the chunk
+              var i18nScript = document.createElement('script');
+              i18nScript.src = i18nUrl;
+              i18nScript.onload = function() {
+                loadedGroups[groupName] = true;
+                // Now load the original chunk
+                originalLoadScript.call(__webpack_require__, url, done, key, chunkId);
+              };
+              i18nScript.onerror = function() {
+                // Continue even if i18n fails
+                originalLoadScript.call(__webpack_require__, url, done, key, chunkId);
+              };
+              document.head.appendChild(i18nScript);
+              return;
+            }
+          }
+          
+          // Default behavior
+          return originalLoadScript.call(__webpack_require__, url, done, key, chunkId);
+        };
+      }
+    })();
+    `;
+  }
+
+}
+
+exports.I18nGroupRuntimeModule = I18nGroupRuntimeModule;