@zohodesk/client_build_tool 0.0.11-exp.25.0 → 0.0.11-exp.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/client_build_tool",
3
- "version": "0.0.11-exp.25.0",
3
+ "version": "0.0.11-exp.27.0",
4
4
  "description": "A CLI tool to build web applications and client libraries",
5
5
  "main": "lib/index.js",
6
6
  "bin": {
@@ -1,129 +0,0 @@
1
- # Dynamic singleFileTemplate Configuration
2
-
3
- ## Overview
4
- The `singleFileTemplate` option now supports both static strings and dynamic functions, allowing different filename patterns based on build mode.
5
-
6
- ## Configuration Options
7
-
8
- ### 1. Static Template (Simple)
9
- ```javascript
10
- i18nIndexing: {
11
- singleFileTemplate: '[locale].js' // Always uses this format
12
- }
13
- ```
14
-
15
- ### 2. Dynamic Template with Function
16
- ```javascript
17
- i18nIndexing: {
18
- isDevelopment: isDevelopment, // Pass from your app
19
- singleFileTemplate: (isDev) =>
20
- isDev ? '[locale].js' : '[locale].[contenthash].js'
21
- }
22
- ```
23
-
24
- ### 3. Inline Conditional (Pre-resolved)
25
- ```javascript
26
- i18nIndexing: {
27
- isDevelopment: isDevelopment, // Pass from your app
28
- singleFileTemplate: isDevelopment
29
- ? '[locale].js'
30
- : '[locale].[contenthash].js'
31
- }
32
- ```
33
-
34
- ## Template Placeholders
35
-
36
- - `[locale]` - Replaced with actual locale code (e.g., en_US, fr_FR)
37
- - `[contenthash]` - Replaced with content-based hash for cache busting
38
-
39
- ## Output Examples
40
-
41
- ### Development Mode (isDevelopment = true)
42
- ```
43
- Template: '[locale].js'
44
- Output:
45
- i18n/en_US.js
46
- i18n/fr_FR.js
47
- i18n/de_DE.js
48
- ```
49
-
50
- ### Production Mode (isDevelopment = false)
51
- ```
52
- Template: '[locale].[contenthash].js'
53
- Output:
54
- i18n/en_US.b9ef890a.js
55
- i18n/fr_FR.3452451e.js
56
- i18n/de_DE.e8b84364.js
57
- ```
58
-
59
- ## Complete Example Configuration
60
-
61
- ```javascript
62
- exports.config = {
63
- context: 'src',
64
- output: 'build',
65
- mode: process.env.NODE_ENV || 'production',
66
-
67
- // Pass isDevelopment from your app
68
- isDevelopment: process.env.NODE_ENV === 'development',
69
-
70
- i18nIndexing: {
71
- enable: true,
72
- outputFolder: 'i18n',
73
- jsResourcePath: './resources/ApplicationResources.properties',
74
- propertiesFolderPath: './resources',
75
- numericMapPath: './numericMap.json',
76
-
77
- // Dynamic template based on build mode
78
- singleFileTemplate: function(isDevelopment) {
79
- return isDevelopment ? '[locale].js' : '[locale].[contenthash].js';
80
- },
81
-
82
- // Or using arrow function
83
- // singleFileTemplate: (isDev) => isDev ? '[locale].js' : '[locale].[contenthash].js',
84
-
85
- // Or pre-resolved
86
- // singleFileTemplate: isDevelopment ? '[locale].js' : '[locale].[contenthash].js',
87
-
88
- singleFile: true,
89
- jsonpFunc: 'var imAppI18n=',
90
- htmlTemplateLabel: '{{--user-locale}}',
91
- localeVarName: 'window.userLangCode',
92
- generateManifest: true,
93
- manifestPath: 'i18n/manifest.json'
94
-
95
- // Note: includeContentHash is now optional when using [contenthash] in template
96
- // includeContentHash: true // Not needed with [contenthash] placeholder
97
- }
98
- };
99
- ```
100
-
101
- ## Benefits
102
-
103
- 1. **Development**: Clean, readable filenames without hashes for easier debugging
104
- 2. **Production**: Content-hashed filenames for optimal caching
105
- 3. **Flexibility**: Single configuration handles both environments
106
- 4. **No Redundancy**: Using `[contenthash]` in template eliminates need for `includeContentHash` option
107
-
108
- ## Migration from includeContentHash
109
-
110
- ### Old Way
111
- ```javascript
112
- singleFileTemplate: '[locale].js',
113
- includeContentHash: true // Adds hash before .js
114
- // Output: en_US.abc123.js
115
- ```
116
-
117
- ### New Way (Recommended)
118
- ```javascript
119
- singleFileTemplate: isDevelopment ? '[locale].js' : '[locale].[contenthash].js'
120
- // Output: en_US.abc123.js (production) or en_US.js (development)
121
- ```
122
-
123
- ## Notes
124
-
125
- - The function receives `isDevelopment` as a boolean parameter
126
- - You must pass `isDevelopment` in your main options object
127
- - The `[contenthash]` placeholder is automatically replaced with the actual hash
128
- - For HTML injection, the hash placeholder is removed since the exact hash isn't known at HTML generation time
129
- - The manifest will map clean names to hashed versions for deployment scripts
@@ -1,225 +0,0 @@
1
- # I18n Numeric Indexing Plugin Documentation
2
-
3
- ## Overview
4
- 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.
5
-
6
- ## Features
7
-
8
- ### 1. **Numeric Indexing**
9
- - Replaces string keys with numeric IDs (e.g., "support.label.home" → "1")
10
- - Reduces bundle size by ~40%
11
- - Maintains backward compatibility
12
-
13
- ### 2. **Custom Group Support**
14
- - Define translation groups using banner markers in JSResources.properties
15
- - Each group generates a separate chunk
16
- - Groups load automatically when their associated code chunks load
17
-
18
- ### 3. **Lazy Loading**
19
- - Initial load: Only numeric.i18n.js and dynamic.i18n.js
20
- - Setup translations: Load only when SetupHome chunk loads
21
- - Other groups: Load on-demand based on configuration
22
-
23
- ## Configuration
24
-
25
- ### In `cbt.config.js`:
26
-
27
- ```javascript
28
- exports.config = {
29
- i18nIndexing: {
30
- enable: true,
31
- jsResourcePath: './deskapp/properties/JSResources.properties',
32
- propertiesFolderPath: './deskapp/properties',
33
- numericMapPath: './deskapp/properties/i18n-numeric-map.json',
34
- numericFilenameTemplate: 'i18n-chunk/[locale]/numeric.i18n.js',
35
- dynamicFilenameTemplate: 'i18n-chunk/[locale]/dynamic.i18n.js',
36
- jsonpFunc: 'window.loadI18nChunk',
37
- htmlTemplateLabel: '{{--user-locale}}',
38
- localeVarName: 'window.userLangCode',
39
- customGroups: {
40
- setup: {
41
- bannerStart: '#SETUP_LAZY_KEYS STARTS',
42
- bannerEnd: '#SETUP_LAZY_KEYS ENDS',
43
- chunks: ['SetupHome'], // Webpack chunks that trigger this group
44
- filenameTemplate: 'i18n-chunk/[locale]/setup.i18n.js',
45
- preload: false,
46
- prefetch: true
47
- }
48
- }
49
- }
50
- }
51
- ```
52
-
53
- ### In `JSResources.properties`:
54
-
55
- ```properties
56
- # Regular translations
57
- support.label.home=Home
58
- support.label.tickets=Tickets
59
-
60
- #SETUP_LAZY_KEYS STARTS
61
- # These will be lazy loaded
62
- support.setup.label.phone=Phone
63
- support.setup.label.layouts_fields=Layouts and Fields
64
- #SETUP_LAZY_KEYS ENDS
65
-
66
- # More regular translations
67
- support.label.chat=Chat
68
- ```
69
-
70
- ### In `index.html`:
71
-
72
- ```javascript
73
- window.loadI18nChunk = function(translations, groupName) {
74
- // Merge translations
75
- window.i18n = Object.assign(window.i18n, translations);
76
-
77
- // Track loaded groups
78
- if (groupName) {
79
- console.log('[I18n] Loaded group:', groupName);
80
- }
81
-
82
- // Notify framework
83
- window.dispatchEvent(new CustomEvent('i18nLoaded', {
84
- detail: { group: groupName }
85
- }));
86
- };
87
- ```
88
-
89
- ## How It Works
90
-
91
- ### Build Time:
92
- 1. Plugin reads JSResources.properties
93
- 2. Parses banner markers to identify custom groups
94
- 3. Generates numeric mapping for all keys
95
- 4. Creates separate chunks:
96
- - `numeric.i18n.js` - Main translations with numeric keys
97
- - `dynamic.i18n.js` - Keys with placeholders (keep string keys)
98
- - `setup.i18n.js` - Setup-specific translations (lazy loaded)
99
-
100
- ### Runtime:
101
- 1. Initial page load → Loads numeric.i18n.js + dynamic.i18n.js
102
- 2. User clicks Setup → Webpack loads SetupHome.js
103
- 3. Plugin runtime detects SetupHome needs 'setup' group
104
- 4. Automatically loads setup.i18n.js
105
- 5. Calls window.loadI18nChunk() with translations
106
-
107
- ## Output Structure
108
-
109
- ```
110
- agent/
111
- └── i18n-chunk/
112
- ├── en_US/
113
- │ ├── numeric.i18n.js (396KB - main translations)
114
- │ ├── dynamic.i18n.js (201KB - dynamic keys)
115
- │ └── setup.i18n.js (217B - setup keys only!)
116
- └── [other locales]/
117
- ```
118
-
119
- ## Generated Files
120
-
121
- ### numeric.i18n.js:
122
- ```javascript
123
- window.loadI18nChunk({
124
- "1": "Home",
125
- "2": "Tickets",
126
- "3": "Chat"
127
- // ... thousands more
128
- });
129
- ```
130
-
131
- ### setup.i18n.js:
132
- ```javascript
133
- window.loadI18nChunk({
134
- "4547": "Phone",
135
- "4548": "Zia",
136
- "4549": "Layouts and Fields"
137
- // ... setup-specific keys
138
- }, "setup");
139
- ```
140
-
141
- ### i18n-numeric-map.json:
142
- ```json
143
- {
144
- "support.label.home": 1,
145
- "support.label.tickets": 2,
146
- "support.setup.label.phone": 4547
147
- }
148
- ```
149
-
150
- ## Using webpackI18nGroup Comments
151
-
152
- You can also mark chunks for i18n groups using comments:
153
-
154
- ```javascript
155
- const SetupHome = lazy(() =>
156
- import(
157
- /* webpackChunkName: "SetupHome" */
158
- /* webpackI18nGroup: "setup" */
159
- './pages/SetupHome'
160
- )
161
- );
162
- ```
163
-
164
- ## Performance Benefits
165
-
166
- 1. **Initial Bundle**: ~40% smaller due to numeric indexing
167
- 2. **Setup Keys**: Only 217 bytes, loaded on-demand
168
- 3. **Network**: Fewer bytes transferred
169
- 4. **Memory**: Reduced memory footprint
170
-
171
- ## Adding New Groups
172
-
173
- To add a new lazy-loaded group (e.g., "reports"):
174
-
175
- 1. Add banner markers in JSResources.properties:
176
- ```properties
177
- #REPORTS_LAZY_KEYS STARTS
178
- support.reports.label.dashboard=Dashboard
179
- #REPORTS_LAZY_KEYS ENDS
180
- ```
181
-
182
- 2. Update cbt.config.js:
183
- ```javascript
184
- customGroups: {
185
- setup: { /* ... */ },
186
- reports: {
187
- bannerStart: '#REPORTS_LAZY_KEYS STARTS',
188
- bannerEnd: '#REPORTS_LAZY_KEYS ENDS',
189
- chunks: ['ReportsHome'],
190
- filenameTemplate: 'i18n-chunk/[locale]/reports.i18n.js'
191
- }
192
- }
193
- ```
194
-
195
- ## Troubleshooting
196
-
197
- ### Keys not in setup chunk:
198
- - Check banner markers are correct in JSResources.properties
199
- - Verify key is between STARTS and ENDS markers
200
-
201
- ### Setup chunk not loading:
202
- - Ensure SetupHome is in the chunks array
203
- - Check browser DevTools Network tab
204
- - Verify window.loadI18nChunk is defined
205
-
206
- ### Numeric mapping issues:
207
- - Check i18n-numeric-map.json is generated
208
- - Verify no duplicate keys
209
- - Ensure jsResourcePath is correct
210
-
211
- ## Migration Guide
212
-
213
- 1. Enable i18nIndexing in cbt.config.js
214
- 2. Add banner markers to JSResources.properties
215
- 3. Update index.html with loadI18nChunk function
216
- 4. Build and test
217
- 5. Monitor Network tab to verify lazy loading
218
-
219
- ## Best Practices
220
-
221
- 1. **Group Related Keys**: Keep setup keys together
222
- 2. **Use Root Chunks**: Configure the main entry chunk for each section
223
- 3. **Monitor Bundle Size**: Check generated file sizes
224
- 4. **Test Loading**: Verify chunks load when expected
225
- 5. **Keep Groups Small**: Aim for <1KB per lazy group
@@ -1,126 +0,0 @@
1
- # I18n Single-File Mode Configuration
2
-
3
- ## Overview
4
- Single-file mode combines numeric and dynamic i18n keys into a single JavaScript file per locale, creating a flat output structure ideal for CDN deployment.
5
-
6
- ## Configuration
7
-
8
- ```javascript
9
- i18nIndexing: {
10
- enable: true,
11
- outputFolder: 'i18n',
12
- singleFile: true,
13
- singleFileTemplate: '[locale].js', // Key setting for single-file mode
14
- includeContentHash: true,
15
- generateManifest: true,
16
- manifestPath: 'i18n/manifest.json',
17
- // ... other options
18
- }
19
- ```
20
-
21
- ## Key Options
22
-
23
- ### `singleFile: true`
24
- Enables single-file mode, combining all i18n keys into one file per locale.
25
-
26
- ### `singleFileTemplate: '[locale].js'`
27
- Template for single-file naming. Default: `[locale].js`
28
- - `[locale]` is replaced with the actual locale code
29
- - Results in files like: `en_US.js`, `fr_FR.js`
30
-
31
- ### `outputFolder: 'i18n'`
32
- Base directory for all i18n files. Files are placed directly here in single-file mode.
33
-
34
- ### `includeContentHash: true`
35
- Adds content hash for cache busting:
36
- - Without hash: `i18n/en_US.js`
37
- - With hash: `i18n/en_US.abc123.js`
38
-
39
- ### `manifestPath: 'i18n/manifest.json'`
40
- Custom location for the manifest file that maps original names to hashed versions.
41
-
42
- ## Output Structure
43
-
44
- ```
45
- build/
46
- ├── i18n/
47
- │ ├── en_US.b9ef890a.js # Combined file with content hash
48
- │ ├── fr_FR.3452451e.js
49
- │ ├── de_DE.e8b84364.js
50
- │ └── manifest.json # Mapping file
51
- ```
52
-
53
- ## Manifest Format
54
-
55
- The manifest provides a clean mapping without paths or type suffixes:
56
-
57
- ```json
58
- {
59
- "en_US.js": "en_US.b9ef890a.js",
60
- "fr_FR.js": "fr_FR.3452451e.js",
61
- "de_DE.js": "de_DE.e8b84364.js"
62
- }
63
- ```
64
-
65
- ## HTML Integration
66
-
67
- The HTML injector automatically adds the appropriate script tag based on the `htmlTemplateLabel`:
68
-
69
- ```html
70
- <!-- With htmlTemplateLabel: '{{--user-locale}}' -->
71
- <script src="i18n/{{--user-locale}}.js"></script>
72
- ```
73
-
74
- ## Runtime Loading
75
-
76
- Files are loaded using the configured `jsonpFunc`:
77
-
78
- ```javascript
79
- // File content example with jsonpFunc: 'var imAppI18n='
80
- var imAppI18n={"0":"Welcome","1":"Hello","dynamic.key":"Dynamic value"};
81
- ```
82
-
83
- ## Comparison: Single-File vs Multi-File Mode
84
-
85
- ### Single-File Mode
86
- ```javascript
87
- singleFile: true
88
- // Output: i18n/en_US.js (contains all keys)
89
- ```
90
-
91
- ### Multi-File Mode (Default)
92
- ```javascript
93
- singleFile: false
94
- // Output:
95
- // i18n/en_US/numeric.i18n.js (numeric keys only)
96
- // i18n/en_US/dynamic.i18n.js (dynamic keys only)
97
- ```
98
-
99
- ## Benefits of Single-File Mode
100
-
101
- 1. **Fewer HTTP Requests**: One file per locale instead of multiple
102
- 2. **Simpler Deployment**: Flat structure is easier to manage
103
- 3. **CDN Friendly**: Clean paths work better with CDN caching
104
- 4. **Clear Manifest**: Simple key-value mapping without complex paths
105
-
106
- ## Example Configuration
107
-
108
- ```javascript
109
- exports.config = {
110
- i18nIndexing: {
111
- enable: true,
112
- outputFolder: 'i18n',
113
- jsResourcePath: './resources/ApplicationResources.properties',
114
- propertiesFolderPath: './resources',
115
- numericMapPath: './numericMap.json',
116
- singleFile: true,
117
- singleFileTemplate: '[locale].js',
118
- jsonpFunc: 'var imAppI18n=',
119
- htmlTemplateLabel: '{{--user-locale}}',
120
- localeVarName: 'window.userLangCode',
121
- includeContentHash: true,
122
- generateManifest: true,
123
- manifestPath: 'i18n/imI18nManifest.json'
124
- }
125
- };
126
- ```