@zohodesk/react-cli 1.1.13 → 1.1.14-exp.2

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/README.md CHANGED
@@ -44,6 +44,18 @@ Now to run app
44
44
 
45
45
  # Change Logs
46
46
 
47
+ # 1.1.14 (11-9-2023)
48
+
49
+ **Feature:-**
50
+
51
+ - Value Replacer supports `^` before and `$` after the word to consider the whole word for replacement. Only if the exact word comes as value, there will be a replacement made.
52
+
53
+ **Issue Fix**
54
+
55
+ - 'space' character on variable conversion changes to undefined fixed.
56
+ - calc(100%) variable conversion to undefined fixed.
57
+ - height value if text converts to undefined, issue fixed.
58
+
47
59
  # 1.1.13 (4-9-2023)
48
60
 
49
61
  **Changes**
@@ -58,3 +58,30 @@ new option `valueReplacer` added for replace css property value while build runn
58
58
  font: zdf-rCallBar_1 !important;
59
59
  }
60
60
  ```
61
+
62
+
63
+ If we need the exact word to be considered for replacement ( that is, if value is `text` and only if the value is `text` and not `text_cursor` or `cursortext` for example, the conversion happens ) we have to use `^` before the word and `$` after the word in the key.
64
+
65
+ # For Example :
66
+ {
67
+ valueReplacer: [
68
+ {
69
+ "props": [
70
+ "cursor",
71
+ "--label_cursor",
72
+ "--checkbox_cursor",
73
+ "--tag_cursor",
74
+ "--button_cursor",
75
+ "--textboxicon_icon_cursor",
76
+ ],
77
+ "values": {
78
+ "^default$": "var(--zdr-cursor-default)",
79
+ "^pointer$": "var(--zdr-cursor-pointer)",
80
+ "^text$": "var(--zdr-cursor-text)",
81
+ "^move$": "var(--zdr-cursor-move)",
82
+ }
83
+ }
84
+ ]
85
+ }
86
+
87
+ - Here we have added `^` before and `$` after default, pointer, text and move. Only if the exact words default, pointer, text and move are used, the values will be converted.
@@ -41,7 +41,8 @@ const {
41
41
  devConsoleExculde,
42
42
  sourcemap,
43
43
  crossorigin,
44
- postCssPluginOrder
44
+ postCssPluginOrder,
45
+ externals
45
46
  }
46
47
  } = options;
47
48
  const {
@@ -151,9 +152,9 @@ module.exports = {
151
152
  }
152
153
  }].filter(Boolean)
153
154
  },
154
- externals: {
155
+ externals: Object.assign({
155
156
  ZC: '$ZC'
156
- },
157
+ }, externals),
157
158
  resolve: (0, _resolvers.moduleResolver)(options),
158
159
  resolveLoader: (0, _resolvers.loaderResolver)(options)
159
160
  };
@@ -46,7 +46,8 @@ const {
46
46
  removePropTypes,
47
47
  devConsoleExculde,
48
48
  crossorigin,
49
- postCssPluginOrder
49
+ postCssPluginOrder,
50
+ externals
50
51
  }
51
52
  } = options;
52
53
  let {
@@ -240,9 +241,9 @@ module.exports = {
240
241
  }
241
242
  }].filter(Boolean)
242
243
  },
243
- externals: {
244
+ externals: Object.assign(externals, {
244
245
  ZC: '$ZC'
245
- },
246
+ }),
246
247
  resolve: (0, _resolvers.moduleResolver)(options),
247
248
  resolveLoader: (0, _resolvers.loaderResolver)(options)
248
249
  };
@@ -184,15 +184,15 @@ class I18nDownlodLogic {
184
184
 
185
185
  const buf = [];
186
186
  /*
187
- if (REGEXP_HASH.test(filenameTemplate)) {
188
- buf.push(
189
- `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
190
- );
191
- }
192
- if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
193
- buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
194
- }
195
- */
187
+ if (REGEXP_HASH.test(filenameTemplate)) {
188
+ buf.push(
189
+ `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
190
+ );
191
+ }
192
+ if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
193
+ buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
194
+ }
195
+ */
196
196
 
197
197
  if ((0, _hashUtils.hasContentHash)(filenameTemplate)) {
198
198
  const hashLength = getContentHashMaxLength(filenameTemplate);
@@ -205,12 +205,18 @@ class I18nDownlodLogic {
205
205
 
206
206
  const publicPath = this.publicPath ? JSON.stringify(this.publicPath) : `${mainTemplate.requireFn}.p`;
207
207
  return _webpack.Template.asString([source, `
208
- (function() {
208
+ function downloadScriptTagForI18nDynamicChunks(chunkName = '', language = '') {
209
209
  // ${pluginName} I18N loading
210
210
  var i18nChunks = ${JSON.stringify(chunkMap)};
211
211
  var locale = ${localeVarName};
212
212
  // ${pluginName} I18N hasehes
213
213
  ${hashUtils}
214
+ if(chunkName) {
215
+ chunkId = chunkName;
216
+ }
217
+ if (language) {
218
+ locale = language;
219
+ }
214
220
  if(installedI18nChunks[chunkId]) {
215
221
  promises.push(installedI18nChunks[chunkId]);
216
222
  } else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
@@ -245,10 +251,19 @@ class I18nDownlodLogic {
245
251
  }` : ''}
246
252
  document.body.appendChild(scriptTag);
247
253
  }).then(function() {
248
- installedI18nChunks[chunkId] = 0;
254
+ installedI18nChunks[chunkId] = 0;
249
255
  }));
250
256
  }
251
- })()`]);
257
+ };
258
+ downloadScriptTagForI18nDynamicChunks();
259
+ ${mainTemplate.requireFn}.changeLanguage = function changeLanguage(language) {
260
+ window.userLangCode=language;
261
+ Object.keys(installedI18nChunks).map(chunks => {
262
+ if (chunks !== './runtime~main' && installedI18nChunks[chunks] == 0) {
263
+ installedI18nChunks[chunks] = null;
264
+ downloadScriptTagForI18nDynamicChunks(chunks, language);
265
+ }
266
+ });}`]);
252
267
  });
253
268
  }
254
269
 
@@ -256,7 +271,8 @@ class I18nDownlodLogic {
256
271
  compiler.hooks.thisCompilation.tap(pluginName, compilation => {
257
272
  const {
258
273
  mainTemplate
259
- } = compilation;
274
+ } = compilation; // this.createChangeLanguageFunction(mainTemplate);
275
+
260
276
  this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
261
277
  });
262
278
  }
@@ -63,7 +63,7 @@ function convertToCalc(pxReplacement, value) {
63
63
 
64
64
  function convertCalcValue(pxReplacement, parsedValue) {
65
65
  Object.keys(parsedValue).forEach(key => {
66
- if (parsedValue[key].includes('px')) {
66
+ if (pxReplacement && parsedValue[key].includes('px')) {
67
67
  parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
68
68
  }
69
69
  });
@@ -95,7 +95,9 @@ function variableConverter(rootOriginal, variables, settingsObject) {
95
95
  }
96
96
 
97
97
  const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
98
- const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
98
+ let valArr = decl.value.split(' ');
99
+ valArr = valArr.filter(x => x.trim() !== '');
100
+ valArr = valArr.map(x => x.replace(/\r|\t|\n/gi, '')); // single values are considered in the above array and converted below
99
101
 
100
102
  valArr.forEach((value, index) => {
101
103
  if (value.includes('px')) {
@@ -4,29 +4,19 @@ var _postcss = _interopRequireDefault(require("postcss"));
4
4
 
5
5
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6
6
 
7
- // module.exports = postcss.plugin('postcss-value-replacer', opts => {
8
- // const { plugins } = opts;
9
- // return (root, result) => {
10
- // const inputFile = root.source.input.file;
11
- // let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
12
- // if (!isIgnoredFile) {
13
- // const handler = response =>
14
- // response.messages.forEach(msg => result.messages.push(msg));
15
- // return postcss(plugins)
16
- // .process(root, { from: undefined })
17
- // .then(handler);
18
- // }
19
- // };
20
- // });
21
- // export default
22
7
  module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
23
8
  root => {
24
9
  root.walkDecls(decl => {
25
10
  valueReplacer.forEach(obj => {
26
11
  if (obj.props.indexOf(decl.prop) !== -1) {
27
- let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
12
+ const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
28
13
  ks.forEach(k => {
29
- decl.value = decl.value.replace(k, obj.values[k]);
14
+ // if (/^\^.*\$$/gi.test(k)) {
15
+ if (k.startsWith('^') && k.endsWith('$')) {
16
+ decl.value = decl.value.replace(new RegExp(k), obj.values[k]);
17
+ } else {
18
+ decl.value = decl.value.replace(k, obj.values[k]);
19
+ }
30
20
  }); //decl.value = obj.values[decl.value];
31
21
  }
32
22
  }); //console.log({root, roots:root+""}, root+"")
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ var _postcss = _interopRequireDefault(require("postcss"));
4
+
5
+ var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
6
+
7
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
8
+
9
+ /* eslint-disable no-use-before-define */
10
+ describe('postcss value replacer tests', () => {
11
+ it('is creating value replaced code', () => {
12
+ const cssInputStr = `.abc{ cursor : text }`;
13
+ const cssOutputStr = `.abc{ cursor : --textCursor }`;
14
+ const cssOptions = [{
15
+ props: ['font', 'font-family', 'cursor'],
16
+ values: {
17
+ 'zdf-': 'zd-react-app-',
18
+ '^text$': '--textCursor'
19
+ }
20
+ }];
21
+ const result = runValueReplacerForCssString(cssInputStr, cssOptions);
22
+ expect(result.css).toEqual(cssOutputStr);
23
+ });
24
+ });
25
+ describe('postcss value replacer tests', () => {
26
+ it('is creating value replaced code', () => {
27
+ const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
28
+ const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
29
+ const cssOptions = [{
30
+ props: ['font', 'font-family', 'cursor'],
31
+ values: {
32
+ 'zdf-': 'zd-react-app-',
33
+ '^text$': '--textCursor'
34
+ }
35
+ }];
36
+ const result = runValueReplacerForCssString(cssInputStr, cssOptions);
37
+ expect(result.css).toEqual(cssOutputStr);
38
+ });
39
+ });
40
+
41
+ function runValueReplacerForCssString(cssInputStr, cssOptions) {
42
+ return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
43
+ }
@@ -92,7 +92,13 @@ function pxToCalc(value) {
92
92
  return arr.join(' ');
93
93
  }
94
94
 
95
- const singleConvertor = (value, changeVal, details, range) => {
95
+ const singleConvertor = ({
96
+ value,
97
+ changeVal,
98
+ details,
99
+ range,
100
+ allowed
101
+ }) => {
96
102
  const {
97
103
  path,
98
104
  filename,
@@ -106,6 +112,10 @@ const singleConvertor = (value, changeVal, details, range) => {
106
112
  }
107
113
  }
108
114
 
115
+ if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
116
+ return decl.value;
117
+ }
118
+
109
119
  if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
110
120
  if (value.trim() === '0px') {
111
121
  return '0';
@@ -204,6 +214,9 @@ module.exports = {
204
214
  .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
205
215
  // console.log('unit : ');
206
216
  // console.log(unit);
217
+ // if (decl.prop === 'height') {
218
+ // console.log(decl.prop, unit, 'case 1');
219
+ // }
207
220
 
208
221
  unit.forEach((val, index) => {
209
222
  allowed.forEach(alwdVal => {
@@ -223,21 +236,49 @@ module.exports = {
223
236
  unitErrorVal = val;
224
237
  }
225
238
  }
226
- }); // console.log(allowed, replacements, range)
239
+ }); // if (decl.prop === 'height') {
240
+ // console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
241
+ // }
242
+ // console.log(allowed, replacements, range)
227
243
 
228
244
  if (!unitError) {
229
- // use variable decl.value.split(' ')
230
- if (range) {
245
+ let calcValue = false;
246
+
247
+ if (decl.value.includes('calc')) {
248
+ decl.value = pxToCalc(decl.value);
249
+ calcValue = true;
250
+ } // use variable decl.value.split(' ')
251
+
252
+
253
+ if (range && !calcValue) {
231
254
  // console.log('multiple :', decl.value)
255
+ const tempVal = decl.value; // if (decl.prop === 'height') {
256
+ // console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
257
+ // }
258
+ // if (decl.prop === 'height') {
259
+ // console.log('allowed!', decl.prop, decl.value, allowed);
260
+ // }
261
+
232
262
  let newVal = '';
233
- decl.value.split(' ').forEach(singleVal => {
234
- newVal += `${singleConvertor(singleVal, settings.replacements.px, {
235
- decl,
236
- filename,
237
- path: fromPath
238
- }, range)} `;
263
+ let splitValues = decl.value.split(' ');
264
+ splitValues = splitValues.filter(val => val.trim() !== '');
265
+ splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
266
+ splitValues.forEach(singleVal => {
267
+ newVal += `${singleConvertor({
268
+ value: singleVal,
269
+ changeVal: settings.replacements.px,
270
+ details: {
271
+ decl,
272
+ filename,
273
+ path: fromPath
274
+ },
275
+ range,
276
+ allowed
277
+ })} `;
239
278
  });
240
- decl.value = newVal;
279
+ decl.value = newVal; // if (decl.prop === 'height') {
280
+ // console.log(decl.prop, tempVal, newVal, 'case 4');
281
+ // }
241
282
  }
242
283
  } else {
243
284
  if (!decl.value.includes('calc')) {
@@ -276,15 +317,22 @@ module.exports = {
276
317
  const valArr = decl.value.split(' ');
277
318
  const settings = settingsObject[decl.prop];
278
319
  const {
279
- range
320
+ range,
321
+ allowed
280
322
  } = settings;
281
323
  const convertedVals = valArr.map(val => {
282
324
  if (val.includes('px')) {
283
- const convertedVal = singleConvertor(val, settings.replacements.px, {
284
- decl,
285
- filename,
286
- path: fromPath
287
- }, range);
325
+ const convertedVal = singleConvertor({
326
+ value: val,
327
+ changeVal: settings.replacements.px,
328
+ details: {
329
+ decl,
330
+ filename,
331
+ path: fromPath
332
+ },
333
+ range,
334
+ allowed
335
+ });
288
336
  return convertedVal ? convertedVal : val;
289
337
  }
290
338
 
@@ -732,6 +732,7 @@ var _default = {
732
732
  fileName: null,
733
733
  options: null,
734
734
  excludeKeys: null
735
- }
735
+ },
736
+ externals: null
736
737
  };
737
738
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "1.1.13",
3
+ "version": "1.1.14-exp.2",
4
4
  "description": "A CLI tool for build modern web application and libraries",
5
5
  "scripts": {
6
6
  "init": "node ./lib/utils/init.js",