@zohodesk/client_build_tool 0.0.11-exp.15 → 0.0.11-exp.15.2

package/CHANGELOG.md

@@ -1,6 +1,34 @@
 # 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.

package/README.md

@@ -100,7 +100,35 @@ fixes :-
 
 # 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.

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