@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 +12 -0
- package/docs/ValueReplacer.md +27 -0
- package/lib/configs/webpack.dev.config.js +4 -3
- package/lib/configs/webpack.prod.config.js +4 -3
- package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +29 -13
- package/lib/plugins/variableConvertorUtils.js +4 -2
- package/lib/postcss-plugins/ValueReplacer.js +7 -17
- package/lib/postcss-plugins/__test__/valueReplacer.spec.js +43 -0
- package/lib/postcss-plugins/variableModificationPlugin/index.js +65 -17
- package/lib/schemas/index.js +2 -1
- package/package.json +1 -1
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**
|
package/docs/ValueReplacer.md
CHANGED
@@ -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
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
12
|
+
const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
|
28
13
|
ks.forEach(k => {
|
29
|
-
|
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 = (
|
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
|
-
}); //
|
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
|
-
|
230
|
-
|
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(' ')
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
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(
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
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
|
|
package/lib/schemas/index.js
CHANGED