@zohodesk/react-cli 1.1.10 → 1.1.11-exp.1

package/README.md

@@ -44,6 +44,60 @@ Now to run app
 
 # Change Logs
 
+# 1.1.11-exp.1 (8-8-2023)
+
+**Changes** 
+
+- Added a new config `stats` to  control stats file generation.
+
+**Features:-**
+
+- Generating stats.json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
+
+# 1.1.11 (4-8-2023)
+
+**Changes**
+
+- 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.
+
+- Prop-type, Prop description, Default Props support for docs given.
+- Docs and Docs_Code UI updated.
+
+**Features:-**
+
+- custom classname prefix for separate packages now supported.
+- to use custom classnames for specific patterns, we use the following pattern in `app > customClassNamePrefix` or `docs > customClassNamePrefix` :
+
+```
+"customClassNamePrefix" : [
+  {
+    "enable": true,
+    "prefix": "[required-prefix]",
+    "patterns":[
+      "**/[path-name]/**/*.css"
+    ]
+  }
+]
+```
+
+For example,
+
+```
+"customClassNamePrefix": [
+  {
+    "enable": true,
+    "prefix": "zdSvg",
+    "patterns": [
+      "**/@zohodesk/svg/**/*.css"
+    ]
+  },
+],
+```
+
+**Issue Fix:**
+
+- typo fix, (../src/common/runPreProcess.js) to (../lib/common/runPreProcess.js) in cli.js our code.
+
 # 1.1.10 (2-8-2023)
 
 **Issue Fix:**
@@ -213,8 +267,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -230,8 +284,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -248,8 +302,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -315,8 +369,8 @@ cli has been updated to fix compose issue faced when classname:hover exists and
 
 **Feature:-**
 
-- `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
-   `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
+- `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.
+  `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
 
 **Changes:-**
 
@@ -335,7 +389,7 @@ For an more information and reference, refer to `[details](https://zgit.csez.zoh
 
 # 0.0.1-beta.172
 
-We have renamed some options, For Our future features convenience.  
+We have renamed some options, For Our future features convenience.
 We have given fallback support.
 Deprecation Warnings:-
 
@@ -413,7 +467,7 @@ Features:-
 
 # 0.0.1-beta.167.1
 
-In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).  
+In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).
 and with [0.0.1-beta.167](#0.0.1-beta.167) version changes.
 
 # 0.0.1-beta.167
@@ -1321,3 +1375,7 @@ impact servise related changes:-
 - prod string error fix
 - efc build support
 - single style tag support
+
+```
+
+```

package/bin/cli.js

@@ -6,7 +6,7 @@ const getOptions = require('../lib/utils/getOptions.js').default;
 
 const { log } = require('../lib/utils/log.js');
 const { getCliPath } = require('../lib/servers/getCliPath.js');
-const { runPreProcess } = require('../src/common/runPreProcess.js');
+const { runPreProcess } = require('../lib/common/runPreProcess.js');
 //initPreCommitHook();
 
 const [, , option] = process.argv;

package/lib/common/runPreProcess.js

@@ -1,16 +1,21 @@
 "use strict";
 
-const path = require('path');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runPreProcess = runPreProcess;
 
-const {
-  existsSync
-} = require('fs');
+var _path = _interopRequireWildcard(require("path"));
 
-const {
-  spawn
-} = require('child_process');
+var _fs = require("fs");
 
-exports.runPreProcess = function runPreProcess({
+var _child_process = require("child_process");
+
+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); }
+
+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; }
+
+function runPreProcess({
   options,
   option,
   nodemon,
@@ -19,17 +24,17 @@ exports.runPreProcess = function runPreProcess({
   const {
     preprocess
   } = options;
-  const preprocessorPath = preprocess.runner ? path.join(process.cwd(), preprocess.runner) : '';
+  const preprocessorPath = preprocess.runner ? _path.default.join(process.cwd(), preprocess.runner) : '';
   const preprocessCli = preprocess.stopNodemon ? 'node' : nodemon;
 
-  if (preprocessorPath && existsSync(preprocessorPath)) {
-    const preprocessorDirPath = path.dirname(preprocessorPath);
+  if (preprocessorPath && (0, _fs.existsSync)(preprocessorPath)) {
+    const preprocessorDirPath = (0, _path.dirname)(preprocessorPath);
     const watchOptions = preprocessCli === nodemon ? ['--watch', preprocessorDirPath] : []; // eslint-disable-next-line default-case
 
     switch (option) {
       case 'start':
       case 'docs':
-        spawn(preprocessCli, [preprocessorPath, ...watchOptions], {
+        (0, _child_process.spawn)(preprocessCli, [preprocessorPath, ...watchOptions], {
           stdio: 'inherit',
           cwd: preprocessorDirPath
         }); // NOTE:  it's ok if we not close this here
@@ -53,7 +58,7 @@ exports.runPreProcess = function runPreProcess({
         {
           const result = spawnSync(preprocessCli, [preprocessorPath, ...watchOptions], {
             stdio: 'inherit',
-            cwd: path.dirname(preprocessorPath)
+            cwd: preprocessorDirPath
           });
           process.exit(result.status);
           break;
@@ -63,4 +68,4 @@ exports.runPreProcess = function runPreProcess({
     console.error(`preProcessor not exists ${preprocessorPath}`);
     process.exit(0);
   }
-};
+}

package/lib/configs/webpack.css.umd.config.js

@@ -23,7 +23,8 @@ let {
       folder,
       publicPath,
       cssHashSelectors,
-      classNamePrefix
+      classNamePrefix,
+      customClassNamePrefix
     }
   },
   packageVersion
@@ -83,7 +84,7 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: {
-            getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix)
+            getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix)
           }
         }
       }]

package/lib/configs/webpack.dev.config.js

@@ -30,6 +30,7 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssUniqueness,
+    customClassNamePrefix,
     seperateCssModules,
     changeRuntimeChunkChar,
     // we are going to use this for fonts file name collide in issue in devmode
@@ -108,6 +109,7 @@ module.exports = {
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        customClassNamePrefix,
         classNameBlob: '[local]',
         cssUniqueness: false,
         selectorReplace: null,
@@ -124,6 +126,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: null,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

package/lib/configs/webpack.docs.config.js

@@ -20,6 +20,7 @@ const {
     componentFolder,
     enableChunkHash,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -86,6 +87,7 @@ module.exports = isSSTest => ({
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

package/lib/configs/webpack.impact.config.js

@@ -19,6 +19,7 @@ const {
   docs: {
     componentFolder,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -85,6 +86,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace: null,
         cssHashSelectors,
         classNamePrefix,

package/lib/configs/webpack.prod.config.js

@@ -34,6 +34,7 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssUniqueness,
+    customClassNamePrefix,
     server: {
       mode
     },
@@ -161,6 +162,7 @@ module.exports = {
         mediaQueryHoverActiveString,
         classNameBlob: '[local]',
         cssUniqueness: false,
+        customClassNamePrefix,
         selectorReplace: null,
         postCssPluginOrder
       })
@@ -175,6 +177,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

package/lib/loaderUtils/getCSSLoaders.js

@@ -44,7 +44,8 @@ const getCSSLoaders = optionsObj => {
     selectorReplace,
     cssHashSelectors,
     classNamePrefix,
-    postCssPluginOrder
+    postCssPluginOrder,
+    customClassNamePrefix
   } = optionsObj;
   const {
     devCssFileBountry
@@ -65,7 +66,7 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
+    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns);
   }
 
   const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);

package/lib/logger.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.errorLogger = errorLogger;
 exports.messageLogger = messageLogger;
+exports.verboseLogger = verboseLogger;
 exports.warnLogger = warnLogger;
 
+/* eslint-disable no-console */
 function messageLogger(...args) {
   console.log(...args);
 }
@@ -17,4 +19,9 @@ function errorLogger(...args) {
 
 function warnLogger(...args) {
   console.warn(...args);
+}
+
+function verboseLogger(...args) {
+  // TODO: need to be remove when publish happens
+  process.env.VERBOSE === 'true' && console.log('\x1b[33m [verbose] \x1b[0m', ...args);
 }

package/lib/pluginUtils/getProdPlugins.js

@@ -35,6 +35,8 @@ var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
 var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
+var _StatsPlugin = _interopRequireDefault(require("../plugins/StatsPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-unused-vars
@@ -88,6 +90,9 @@ const getProdPlugins = (options, publicPath = '') => {
     templateFilePath,
     localeAttr: efcLocaleAttr
   } = options.efc;
+  const {
+    enable: enableStats
+  } = options.stats;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
   const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
@@ -288,6 +293,7 @@ const getProdPlugins = (options, publicPath = '') => {
 
 
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
+  enableStats && new _StatsPlugin.default();
   return pluginsArr;
 };
 

package/lib/plugins/StatsPlugin.js

@@ -0,0 +1,44 @@
+"use strict";
+
+const {
+  defaulter
+} = require('../utils/getOptions');
+
+const fs = require('fs');
+
+const path = require('path');
+
+const pluginName = 'stats-plugin';
+const statsSchema = {
+  preset: 'normal',
+  moduleTrace: true // source: true
+  //   errorDetails: true,
+  //   chunkRelations: true
+
+};
+module.exports = class StatsPlugin {
+  constructor(options = {}) {
+    this.statsOptions = defaulter(statsSchema, options);
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap(pluginName, stats => {
+      const statsJson = stats.toJson(this.statsOptions);
+      this.emitStats(statsJson);
+    });
+  }
+
+  emitStats(statsJson) {
+    const {
+      outputPath
+    } = statsJson;
+    const stringifiedJson = typeof statsJson === 'object' ? JSON.stringify(statsJson) : statsJson;
+    const bufferJson = Buffer.from(stringifiedJson);
+    fs.writeFile(path.join(outputPath, 'stats.json'), bufferJson, err => {
+      if (err) {
+        throw err;
+      }
+    });
+  }
+
+};

package/lib/schemas/index.js

@@ -15,7 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
-  cliRootPath: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -130,6 +129,7 @@ var _default = {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -357,6 +357,7 @@ var _default = {
       hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
       none: '(hover: none)'
     },
+    customClassNamePrefix: [],
     componentFolder: 'src',
     cssUniqueness: {
       value: true,
@@ -722,6 +723,12 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    }
   }
 };
 exports.default = _default;

package/lib/utils/cssClassNameGenerate.js

@@ -38,14 +38,35 @@ const isSelectorPackage = (resourcePath, packages) => {
   return isValid;
 };
 
+function patternBasedClass({
+  customClassNamePrefix,
+  context,
+  relativePath,
+  localName
+}) {
+  let newName = null;
+  customClassNamePrefix.forEach(obj => {
+    if (obj.enable) {
+      if (obj.patterns && obj.prefix && (0, _fileHandling.isFileNameMatchingPluginPattern)({
+        filename: context.resourcePath,
+        filterArr: obj.patterns
+      })) {
+        const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
+        newName = `${obj.prefix}${h}`;
+      }
+    }
+  });
+  return newName;
+}
+
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
+}, classNamePrefix, customClassNamePrefix, patterns) => (context, localIdentName, localName) => {
   // console.log(patterns, context.resourcePath);
-  // NOTE:  in build macine we use date as folder path.
+  // NOTE:  in build machine we use date as folder path.
   // So every time we create new build there is path will alway different
-  // in order to minmaze that problem we try in relative path;
+  // in order to minimize that problem we try in relative path;
   // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
   const filePaths = context.resourcePath.split(_path.default.sep);
@@ -53,7 +74,8 @@ var _default = (unique = true, {
   const [fileNameWithoutExt] = fileName.split('.');
   const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
 
-  const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  const relativePath = _path.default.relative(context.rootContext, context.resourcePath); // console.log('customClassNamePrefix', customClassNamePrefix);
+
   /*
     input : 
     context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
@@ -86,7 +108,18 @@ var _default = (unique = true, {
   if (unique) {
     const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
-  } //css file has casesensitive selector issue so can't toLowerCase
+  }
+
+  const patternClass = patternBasedClass({
+    customClassNamePrefix,
+    context,
+    relativePath,
+    localName
+  });
+
+  if (patternClass) {
+    return patternClass;
+  } //css file has case sensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
 
 

package/lib/utils/getOptions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaulter = exports.default = void 0;
 
 var _child_process = require("child_process");
 
@@ -15,6 +15,10 @@ var _schemas = _interopRequireDefault(require("../schemas"));
 
 var _deprecationSupport = require("./deprecationSupport");
 
+var _deprecationLogger = require("../deprecationLogger");
+
+var _logger = require("../logger");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -128,10 +132,15 @@ const defaulter = (target, source) => {
   return defaultObject;
 };
 
+exports.defaulter = defaulter;
 global.reactCLIOptions = null;
 
 const getOptionsFromConfigFile = (appPath, configFileName) => {
-  const fileName = configFileName || 'build.config.js';
+  const fileName = configFileName || 'react-cli.config.js';
+
+  if (!configFileName) {
+    (0, _logger.verboseLogger)('we have used default react-cli.config.js');
+  }
 
   const packagePath = _path.default.join(appPath, fileName);
 
@@ -139,6 +148,13 @@ const getOptionsFromConfigFile = (appPath, configFileName) => {
     return require(packagePath).config;
   }
 
+  const oldDeprecatedConfigFilePath = _path.default.join(appPath, 'build.config.js');
+
+  if ((0, _fs.existsSync)(oldDeprecatedConfigFilePath)) {
+    (0, _deprecationLogger.deprecateMessage)('"build.config.js" file was deprecated. So Kindly rename it as "react-cli.config.js"');
+    return require(oldDeprecatedConfigFilePath).config;
+  }
+
   return null;
 };
 

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.10",
+  "version": "1.1.11-exp.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.10",
+      "version": "1.1.11-exp.1",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.10",
+  "version": "1.1.11-exp.1",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",