@zohodesk/react-cli 1.1.10 → 1.1.11

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,50 @@ Now to run app
44
44
 
45
45
  # Change Logs
46
46
 
47
+ # 1.1.11 (4-8-2023)
48
+
49
+ **Changes**
50
+
51
+ - we have renamed our default config file as `react-cli.config.js` instead of `build.config.js`. But we still support `build.config.js` we will remove it in later major version.
52
+
53
+ - Prop-type, Prop description, Default Props support for docs given.
54
+ - Docs and Docs_Code UI updated.
55
+
56
+ **Features:-**
57
+
58
+ - custom classname prefix for separate packages now supported.
59
+ - to use custom classnames for specific patterns, we use the following pattern in `app > customClassNamePrefix` or `docs > customClassNamePrefix` :
60
+
61
+ ```
62
+ "customClassNamePrefix" : [
63
+ {
64
+ "enable": true,
65
+ "prefix": "[required-prefix]",
66
+ "patterns":[
67
+ "**/[path-name]/**/*.css"
68
+ ]
69
+ }
70
+ ]
71
+ ```
72
+
73
+ For example,
74
+
75
+ ```
76
+ "customClassNamePrefix": [
77
+ {
78
+ "enable": true,
79
+ "prefix": "zdSvg",
80
+ "patterns": [
81
+ "**/@zohodesk/svg/**/*.css"
82
+ ]
83
+ },
84
+ ],
85
+ ```
86
+
87
+ **Issue Fix:**
88
+
89
+ - typo fix, (../src/common/runPreProcess.js) to (../lib/common/runPreProcess.js) in cli.js our code.
90
+
47
91
  # 1.1.10 (2-8-2023)
48
92
 
49
93
  **Issue Fix:**
@@ -213,8 +257,8 @@ Now to run app
213
257
 
214
258
  **Breaking Changes:**
215
259
 
216
- - We have remove ssl certificate for security reasons.
217
- So default https server won't run.
260
+ - We have remove ssl certificate for security reasons.
261
+ So default https server won't run.
218
262
  In order to make it work as before you need to specify two things
219
263
  1. install `@zohodesk-private/client_dev_cert`
220
264
  2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -230,8 +274,8 @@ Now to run app
230
274
 
231
275
  **Breaking Changes:**
232
276
 
233
- - We have remove ssl certificate for security reasons.
234
- So default https server won't run.
277
+ - We have remove ssl certificate for security reasons.
278
+ So default https server won't run.
235
279
  In order to make it work as before you need to specify two things
236
280
  1. install `@zohodesk-private/client_dev_cert`
237
281
  2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -248,8 +292,8 @@ Now to run app
248
292
 
249
293
  **Breaking Changes:**
250
294
 
251
- - We have remove ssl certificate for security reasons.
252
- So default https server won't run.
295
+ - We have remove ssl certificate for security reasons.
296
+ So default https server won't run.
253
297
  In order to make it work as before you need to specify two things
254
298
  1. install `@zohodesk-private/client_dev_cert`
255
299
  2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -315,8 +359,8 @@ cli has been updated to fix compose issue faced when classname:hover exists and
315
359
 
316
360
  **Feature:-**
317
361
 
318
- - `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.
319
- `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
362
+ - `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.
363
+ `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
320
364
 
321
365
  **Changes:-**
322
366
 
@@ -335,7 +379,7 @@ For an more information and reference, refer to `[details](https://zgit.csez.zoh
335
379
 
336
380
  # 0.0.1-beta.172
337
381
 
338
- We have renamed some options, For Our future features convenience.
382
+ We have renamed some options, For Our future features convenience.
339
383
  We have given fallback support.
340
384
  Deprecation Warnings:-
341
385
 
@@ -413,7 +457,7 @@ Features:-
413
457
 
414
458
  # 0.0.1-beta.167.1
415
459
 
416
- In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).
460
+ In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).
417
461
  and with [0.0.1-beta.167](#0.0.1-beta.167) version changes.
418
462
 
419
463
  # 0.0.1-beta.167
@@ -1321,3 +1365,7 @@ impact servise related changes:-
1321
1365
  - prod string error fix
1322
1366
  - efc build support
1323
1367
  - single style tag support
1368
+
1369
+ ```
1370
+
1371
+ ```
package/bin/cli.js CHANGED
@@ -6,7 +6,7 @@ const getOptions = require('../lib/utils/getOptions.js').default;
6
6
 
7
7
  const { log } = require('../lib/utils/log.js');
8
8
  const { getCliPath } = require('../lib/servers/getCliPath.js');
9
- const { runPreProcess } = require('../src/common/runPreProcess.js');
9
+ const { runPreProcess } = require('../lib/common/runPreProcess.js');
10
10
  //initPreCommitHook();
11
11
 
12
12
  const [, , option] = process.argv;
@@ -1,16 +1,21 @@
1
1
  "use strict";
2
2
 
3
- const path = require('path');
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.runPreProcess = runPreProcess;
4
7
 
5
- const {
6
- existsSync
7
- } = require('fs');
8
+ var _path = _interopRequireWildcard(require("path"));
8
9
 
9
- const {
10
- spawn
11
- } = require('child_process');
10
+ var _fs = require("fs");
12
11
 
13
- exports.runPreProcess = function runPreProcess({
12
+ var _child_process = require("child_process");
13
+
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+
16
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
+
18
+ function runPreProcess({
14
19
  options,
15
20
  option,
16
21
  nodemon,
@@ -19,17 +24,17 @@ exports.runPreProcess = function runPreProcess({
19
24
  const {
20
25
  preprocess
21
26
  } = options;
22
- const preprocessorPath = preprocess.runner ? path.join(process.cwd(), preprocess.runner) : '';
27
+ const preprocessorPath = preprocess.runner ? _path.default.join(process.cwd(), preprocess.runner) : '';
23
28
  const preprocessCli = preprocess.stopNodemon ? 'node' : nodemon;
24
29
 
25
- if (preprocessorPath && existsSync(preprocessorPath)) {
26
- const preprocessorDirPath = path.dirname(preprocessorPath);
30
+ if (preprocessorPath && (0, _fs.existsSync)(preprocessorPath)) {
31
+ const preprocessorDirPath = (0, _path.dirname)(preprocessorPath);
27
32
  const watchOptions = preprocessCli === nodemon ? ['--watch', preprocessorDirPath] : []; // eslint-disable-next-line default-case
28
33
 
29
34
  switch (option) {
30
35
  case 'start':
31
36
  case 'docs':
32
- spawn(preprocessCli, [preprocessorPath, ...watchOptions], {
37
+ (0, _child_process.spawn)(preprocessCli, [preprocessorPath, ...watchOptions], {
33
38
  stdio: 'inherit',
34
39
  cwd: preprocessorDirPath
35
40
  }); // NOTE: it's ok if we not close this here
@@ -53,7 +58,7 @@ exports.runPreProcess = function runPreProcess({
53
58
  {
54
59
  const result = spawnSync(preprocessCli, [preprocessorPath, ...watchOptions], {
55
60
  stdio: 'inherit',
56
- cwd: path.dirname(preprocessorPath)
61
+ cwd: preprocessorDirPath
57
62
  });
58
63
  process.exit(result.status);
59
64
  break;
@@ -63,4 +68,4 @@ exports.runPreProcess = function runPreProcess({
63
68
  console.error(`preProcessor not exists ${preprocessorPath}`);
64
69
  process.exit(0);
65
70
  }
66
- };
71
+ }
@@ -23,7 +23,8 @@ let {
23
23
  folder,
24
24
  publicPath,
25
25
  cssHashSelectors,
26
- classNamePrefix
26
+ classNamePrefix,
27
+ customClassNamePrefix
27
28
  }
28
29
  },
29
30
  packageVersion
@@ -83,7 +84,7 @@ module.exports = {
83
84
  loader: 'css-loader',
84
85
  options: {
85
86
  modules: {
86
- getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix)
87
+ getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix)
87
88
  }
88
89
  }
89
90
  }]
@@ -30,6 +30,7 @@ const {
30
30
  cssVariableReplacementConfig,
31
31
  selectorWeightConfig,
32
32
  cssUniqueness,
33
+ customClassNamePrefix,
33
34
  seperateCssModules,
34
35
  changeRuntimeChunkChar,
35
36
  // we are going to use this for fonts file name collide in issue in devmode
@@ -108,6 +109,7 @@ module.exports = {
108
109
  mediaQueryHoverActiveString,
109
110
  cssVariableReplacementConfig,
110
111
  selectorWeightConfig,
112
+ customClassNamePrefix,
111
113
  classNameBlob: '[local]',
112
114
  cssUniqueness: false,
113
115
  selectorReplace: null,
@@ -124,6 +126,7 @@ module.exports = {
124
126
  selectorWeightConfig,
125
127
  classNameBlob: null,
126
128
  cssUniqueness,
129
+ customClassNamePrefix,
127
130
  selectorReplace,
128
131
  cssHashSelectors,
129
132
  classNamePrefix,
@@ -20,6 +20,7 @@ const {
20
20
  componentFolder,
21
21
  enableChunkHash,
22
22
  cssUniqueness,
23
+ customClassNamePrefix,
23
24
  plugins,
24
25
  exclude,
25
26
  patterns,
@@ -86,6 +87,7 @@ module.exports = isSSTest => ({
86
87
  selectorWeightConfig,
87
88
  classNameBlob: false,
88
89
  cssUniqueness,
90
+ customClassNamePrefix,
89
91
  selectorReplace,
90
92
  cssHashSelectors,
91
93
  classNamePrefix,
@@ -19,6 +19,7 @@ const {
19
19
  docs: {
20
20
  componentFolder,
21
21
  cssUniqueness,
22
+ customClassNamePrefix,
22
23
  plugins,
23
24
  exclude,
24
25
  patterns,
@@ -85,6 +86,7 @@ module.exports = {
85
86
  selectorWeightConfig,
86
87
  classNameBlob: false,
87
88
  cssUniqueness,
89
+ customClassNamePrefix,
88
90
  selectorReplace: null,
89
91
  cssHashSelectors,
90
92
  classNamePrefix,
@@ -34,6 +34,7 @@ const {
34
34
  cssVariableReplacementConfig,
35
35
  selectorWeightConfig,
36
36
  cssUniqueness,
37
+ customClassNamePrefix,
37
38
  server: {
38
39
  mode
39
40
  },
@@ -161,6 +162,7 @@ module.exports = {
161
162
  mediaQueryHoverActiveString,
162
163
  classNameBlob: '[local]',
163
164
  cssUniqueness: false,
165
+ customClassNamePrefix,
164
166
  selectorReplace: null,
165
167
  postCssPluginOrder
166
168
  })
@@ -175,6 +177,7 @@ module.exports = {
175
177
  selectorWeightConfig,
176
178
  classNameBlob: false,
177
179
  cssUniqueness,
180
+ customClassNamePrefix,
178
181
  selectorReplace,
179
182
  cssHashSelectors,
180
183
  classNamePrefix,
@@ -44,7 +44,8 @@ const getCSSLoaders = optionsObj => {
44
44
  selectorReplace,
45
45
  cssHashSelectors,
46
46
  classNamePrefix,
47
- postCssPluginOrder
47
+ postCssPluginOrder,
48
+ customClassNamePrefix
48
49
  } = optionsObj;
49
50
  const {
50
51
  devCssFileBountry
@@ -65,7 +66,7 @@ const getCSSLoaders = optionsObj => {
65
66
  if (classNameBlob) {
66
67
  cssLoaderOptions.modules.localIdentName = classNameBlob;
67
68
  } else {
68
- cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
69
+ cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns);
69
70
  }
70
71
 
71
72
  const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);
package/lib/logger.js CHANGED
@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.errorLogger = errorLogger;
7
7
  exports.messageLogger = messageLogger;
8
+ exports.verboseLogger = verboseLogger;
8
9
  exports.warnLogger = warnLogger;
9
10
 
11
+ /* eslint-disable no-console */
10
12
  function messageLogger(...args) {
11
13
  console.log(...args);
12
14
  }
@@ -17,4 +19,9 @@ function errorLogger(...args) {
17
19
 
18
20
  function warnLogger(...args) {
19
21
  console.warn(...args);
22
+ }
23
+
24
+ function verboseLogger(...args) {
25
+ // TODO: need to be remove when publish happens
26
+ process.env.VERBOSE === 'true' && console.log('\x1b[33m [verbose] \x1b[0m', ...args);
20
27
  }
@@ -15,7 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  // TODO move deprecated options to separate file and manage seperately
17
17
  var _default = {
18
- cliRootPath: null,
19
18
  unstableDepsInverse: {
20
19
  value: false,
21
20
  cli: 'unstable_deps_inverse'
@@ -130,6 +129,7 @@ var _default = {
130
129
  value: '@zohodesk/client_packages_group',
131
130
  cli: 'module_resolve_path'
132
131
  },
132
+ customClassNamePrefix: [],
133
133
  // this option only for impact testing
134
134
  devCssFileBountry: {
135
135
  value: '',
@@ -357,6 +357,7 @@ var _default = {
357
357
  hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
358
358
  none: '(hover: none)'
359
359
  },
360
+ customClassNamePrefix: [],
360
361
  componentFolder: 'src',
361
362
  cssUniqueness: {
362
363
  value: true,
@@ -38,14 +38,35 @@ const isSelectorPackage = (resourcePath, packages) => {
38
38
  return isValid;
39
39
  };
40
40
 
41
+ function patternBasedClass({
42
+ customClassNamePrefix,
43
+ context,
44
+ relativePath,
45
+ localName
46
+ }) {
47
+ let newName = null;
48
+ customClassNamePrefix.forEach(obj => {
49
+ if (obj.enable) {
50
+ if (obj.patterns && obj.prefix && (0, _fileHandling.isFileNameMatchingPluginPattern)({
51
+ filename: context.resourcePath,
52
+ filterArr: obj.patterns
53
+ })) {
54
+ const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
55
+ newName = `${obj.prefix}${h}`;
56
+ }
57
+ }
58
+ });
59
+ return newName;
60
+ }
61
+
41
62
  var _default = (unique = true, {
42
63
  filenames,
43
64
  packages
44
- }, classNamePrefix, patterns) => (context, localIdentName, localName) => {
65
+ }, classNamePrefix, customClassNamePrefix, patterns) => (context, localIdentName, localName) => {
45
66
  // console.log(patterns, context.resourcePath);
46
- // NOTE: in build macine we use date as folder path.
67
+ // NOTE: in build machine we use date as folder path.
47
68
  // So every time we create new build there is path will alway different
48
- // in order to minmaze that problem we try in relative path;
69
+ // in order to minimize that problem we try in relative path;
49
70
  // console.log('context.resourcePath', context.resourcePath, context);
50
71
  // let contextResourcePath = context.resourcePath;
51
72
  const filePaths = context.resourcePath.split(_path.default.sep);
@@ -53,7 +74,8 @@ var _default = (unique = true, {
53
74
  const [fileNameWithoutExt] = fileName.split('.');
54
75
  const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
55
76
 
56
- const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
77
+ const relativePath = _path.default.relative(context.rootContext, context.resourcePath); // console.log('customClassNamePrefix', customClassNamePrefix);
78
+
57
79
  /*
58
80
  input :
59
81
  context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
@@ -86,7 +108,18 @@ var _default = (unique = true, {
86
108
  if (unique) {
87
109
  const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
88
110
  return `${classNamePrefix}${h}`;
89
- } //css file has casesensitive selector issue so can't toLowerCase
111
+ }
112
+
113
+ const patternClass = patternBasedClass({
114
+ customClassNamePrefix,
115
+ context,
116
+ relativePath,
117
+ localName
118
+ });
119
+
120
+ if (patternClass) {
121
+ return patternClass;
122
+ } //css file has case sensitive selector issue so can't toLowerCase
90
123
  //let local = localName.toLowerCase()
91
124
 
92
125
 
@@ -15,6 +15,10 @@ var _schemas = _interopRequireDefault(require("../schemas"));
15
15
 
16
16
  var _deprecationSupport = require("./deprecationSupport");
17
17
 
18
+ var _deprecationLogger = require("../deprecationLogger");
19
+
20
+ var _logger = require("../logger");
21
+
18
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
23
 
20
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -131,7 +135,11 @@ const defaulter = (target, source) => {
131
135
  global.reactCLIOptions = null;
132
136
 
133
137
  const getOptionsFromConfigFile = (appPath, configFileName) => {
134
- const fileName = configFileName || 'build.config.js';
138
+ const fileName = configFileName || 'react-cli.config.js';
139
+
140
+ if (!configFileName) {
141
+ (0, _logger.verboseLogger)('we have used default react-cli.config.js');
142
+ }
135
143
 
136
144
  const packagePath = _path.default.join(appPath, fileName);
137
145
 
@@ -139,6 +147,13 @@ const getOptionsFromConfigFile = (appPath, configFileName) => {
139
147
  return require(packagePath).config;
140
148
  }
141
149
 
150
+ const oldDeprecatedConfigFilePath = _path.default.join(appPath, 'build.config.js');
151
+
152
+ if ((0, _fs.existsSync)(oldDeprecatedConfigFilePath)) {
153
+ (0, _deprecationLogger.deprecateMessage)('"build.config.js" file was deprecated. So Kindly rename it as "react-cli.config.js"');
154
+ return require(oldDeprecatedConfigFilePath).config;
155
+ }
156
+
142
157
  return null;
143
158
  };
144
159
 
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "lockfileVersion": 2,
5
5
  "requires": true,
6
6
  "packages": {
7
7
  "": {
8
8
  "name": "@zohodesk/react-cli",
9
- "version": "1.1.10",
9
+ "version": "1.1.11",
10
10
  "license": "ISC",
11
11
  "dependencies": {
12
12
  "@babel/cli": "7.10.5",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "description": "A CLI tool for build modern web application and libraries",
5
5
  "scripts": {
6
6
  "init": "node ./lib/utils/init.js",