@zohodesk/react-cli 1.0.3 → 1.1.1

package/README.md

@@ -44,6 +44,30 @@ Now to run app
 
 # Change Logs
 
+# 1.1.1
+
+**Issue Fix**
+- docs component name incorrect in windows, when using --enableReactLive issue fixed.
+
+**Feature Update** 
+- Support for desk-library to use Selector Replace plugin using individual script. To use `react-cli selectorReplacer [source] [target]`
+
+# 1.1.0
+
+**Feature Update**
+- Support for desk-library to use variable convertion plugin using individual script. To use `react-cli variableConverter [source] [target]`
+- pattern filter changes, new filter system instead of exclude to include or exclude files for plugins.
+For more info please refer to : 
+[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/patternFiltering.md)
+- React Live feature implemented for Docs.
+[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/ReactLive.md)
+
+# 1.0.3-beta.1
+
+**Issue Fix**
+- nock api not working issue fixed. This error throwing in @zohodesk/react-cli@1.0.2 version. but working in older versions ( 0.0.1-beta.178 )
+
+
 # 1.0.3
 
 **Feature Update**
@@ -54,10 +78,11 @@ Now to run app
 - @zohodesk/client_packages_group@**1.0.1** ==>  @zohodesk/client_packages_group@**1.0.2**  
 
 
+
 # 1.0.2
 
 **Feature Update**
-- Selector replace plugin made custom postcss-plugin with update to code that was unpublished in package.
+- Selector replace plugin made as a custom postcss-plugin with update to code that was unpublished in package.
 
 # 1.0.1
 

package/bin/cli.js

@@ -50,7 +50,7 @@ if (preprocesserPath && existsSync(preprocesserPath)) {
     case 'docs':
       spawn(preprocessCli, [preprocesserPath], {
         stdio: 'inherit',
-        cwd: preprocesserPath.slice(0, preprocesserPath.lastIndexOf('/') + 1)
+        cwd: path.parse(preprocesserPath).dir
       });
       // NOTE:  it's ok if  we  not  close this  here
       // Because when  node server stops this program willbe closed So this  nodemon  will be killed  as well
@@ -116,6 +116,22 @@ switch (option) {
       { stdio: 'inherit' }
     );
 
+    process.exit(result.status);
+    break;
+  case 'variableConverter':
+    result = spawnSync(
+      'node',
+      [require.resolve('../lib/utils/variableConverter')].concat(args),
+      { stdio: 'inherit' }
+    );
+    process.exit(result.status);
+    break;
+  case 'selectorReplacer':
+    result = spawnSync(
+      'node',
+      [require.resolve('../lib/utils/selectorReplacer.js')].concat(args),
+      { stdio: 'inherit' }
+    );
     process.exit(result.status);
     break;
   case 'valuereplacer':
@@ -215,9 +231,7 @@ switch (option) {
   case 'devbuild':
     result = spawnSync(
       'node',
-      [
-        require.resolve('../lib/servers/devBuild')
-      ].concat(args),
+      [require.resolve('../lib/servers/devBuild')].concat(args),
       // [require.resolve('../lib/servers/staticServer'), '--expose-http2'].concat(args),
       { stdio: 'inherit' }
     );

package/docs/ComposeMinification.md

@@ -0,0 +1,13 @@
+# Compose Minification 
+
+We use this plugin to  extract all the common attributes ( margin, padding... ) supported and write them in respective common files( margin.css, padding.css... ) These are further reference to the classname instead of a line of code by composing and adding classnames for the same.
+
+
+# Feature : 
+
+* We can enable this plugin by representing the value of ` react-cli > app >  plugins > composeMinification ` to `true`.
+* The creation of `margin.css`, `padding.css`, `position.css` and so on will be done initially by a manual script for the application. 
+* Further the `composeMinification` plugin converts the `props` of common attributes under check into `compose` and `values` into `compose format` ( m10 from `../margin.css`) 
+* On runtime the conversion takes place and classnames for the properties (`margin`, `padding`, so on...) are added with references to respective files and styles are applied. 
+
+

package/docs/ReactLive.md

@@ -0,0 +1,10 @@
+
+----> ReactLive <----
+
+1. React Live is a live playground for reactjs (For now we have implemented in our docs)
+2. So, for this we are using reactLiveConverter.js (src/loaders) to convert the file format.
+3. We can enable/disable this feature by `npm run docs --enableReactLive=true/false` default value will be `true`.
+4. Also we can enable/disable this feature by adding `enableReactLive` key inside the package.json under the `docs`.
+
+# v1.1.0 update: 
+* ReactLive feature implemented. 

package/docs/patternFiltering.md

@@ -0,0 +1,57 @@
+# Pattern filtering 
+
+As replacement for exclude we now have patterns in place of exclude to include or exclude a file based on its name in package.json.
+
+
+# Example for patterns : 
+
+**Old System** : 
+To exclude `node_modules` folder from convertion for the `cssVariableReplacement` plugin, we used to have :
+
+`react-cli > app > exclude > cssVariableReplacement` as ['node_modules'] in `package.json`
+
+Example : 
+
+"exclude": {
+    "cssVariableReplacement": [
+        "node_modules"
+    ]
+},
+
+**New System** : 
+
+To include all files for convertion for the `valueReplacer` plugin, we now have : 
+
+`react-cli > app > patterns > valueReplacer` as ['*'] in `package.json`
+
+To include `src` files for convertion for the `cssVariableReplacement` plugin, we now have : 
+
+`react-cli > app > patterns > hoverActive` as ['src'] in `package.json`
+
+To exclude `node_modules` files for convertion for the `hoverActive` plugin, we now have : 
+
+`react-cli > app > patterns > cssVariableReplacement` as ['!node_modules'] in `package.json`
+Here the `!` denotes that the folder structure/file is not to be converted.
+
+Example : 
+
+"patterns": {
+    "valueReplacer": [
+        "*"
+    ],
+    "hoverActive": [
+        "src"
+    ],
+    "cssVariableReplacement": [
+        "!node_modules"
+    ],
+},
+
+Note : 
+`patterns` also added support for cssUniqueness to be applied to selective files.
+
+"patterns" : {
+    "cssUniqueness": [
+        "*"
+    ],
+}

package/lib/common/buildEs.js

@@ -0,0 +1,12 @@
+// result = spawnSync(
+//     babel,
+//     [
+//       'src',
+//       '--out-dir',
+//       'es',
+//       `--presets=${require.resolve('../lib/babel/es-plugins-presets.js')}`,
+//       '--copy-files'
+//     ].concat(args),
+//     { stdio: 'inherit' }
+//   );
+"use strict";

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

@@ -25,6 +25,7 @@ const {
     outputFolder,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -102,6 +103,7 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
@@ -114,6 +116,7 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

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

@@ -22,11 +22,13 @@ const {
     cssUniqueness,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    selectorReplace
   },
   app: {
     folder
@@ -77,6 +79,7 @@ module.exports = isSSTest => ({
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
@@ -95,6 +98,10 @@ module.exports = isSSTest => ({
           interpolate: 'require'
         }
       }
+    }, {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
     }, {
       test: /\.tmpl$/,
       use: [{

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

@@ -21,6 +21,7 @@ const {
     cssUniqueness,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -77,6 +78,7 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

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

@@ -29,6 +29,7 @@ const {
     server,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -153,6 +154,7 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         cssVariableReplacementConfig,
         selectorWeightConfig,
         mediaQueryHoverActiveString,
@@ -165,6 +167,7 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

package/lib/loaderUtils/getCSSLoaders.js

@@ -11,7 +11,7 @@ var _cssClassNameGenerate = _interopRequireDefault(require("../utils/cssClassNam
 
 var _utils = require("../utils");
 
-var _windowsModification = require("./windowsModification");
+var _fileHandling = require("../plugins/utils/fileHandling");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,21 +19,10 @@ const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
 
-function excludeEmptyCheckPlugin({
-  enable,
-  ignore,
-  plugins
-}) {
-  return enable ? ignore.length === 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
-    ignore,
-    plugins
-  })] : [];
-}
-
 const getCSSLoaders = optionsObj => {
   const {
     plugins,
-    exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     classNameBlob,
@@ -51,10 +40,6 @@ const getCSSLoaders = optionsObj => {
   const {
     cssSelectorZipPath
   } = options.impactService;
-  const rtlExcludeLocal = (0, _windowsModification.windowsModification)(exclude.rtl);
-  const hoverActiveExcludeLocal = (0, _windowsModification.windowsModification)(exclude.hoverActive);
-  const combinerMediaQueryExcludeLocal = (0, _windowsModification.windowsModification)(exclude.combinerMediaQuery);
-  const cssVariableReplacementExcludeLocal = (0, _windowsModification.windowsModification)(exclude.cssVariableReplacement);
   const cssLoaderOptions = {
     // importLoaders: hasRTL||hoverActive ? 1 : 0,
     importLoaders: 1,
@@ -65,34 +50,19 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
-  }
-
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), ...excludeEmptyCheckPlugin({
-    enable: plugins.hasRTL,
-    ignore: rtlExcludeLocal,
-    plugins: [require('@zohodesk/postcss-rtl')({
-      addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
-        if (prefix === '[dir]') {
-          return selector;
-        }
-
-        return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
+  } // console.log('selector weight config : ', selectorWeightConfig);
+
+
+  let postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
+    addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+      if (prefix === '[dir]') {
+        return selector;
       }
-    })]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.combinerMediaQuery,
-    ignore: combinerMediaQueryExcludeLocal,
-    plugins: [require('postcss-combine-media-query')]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.hoverActive,
-    ignore: hoverActiveExcludeLocal,
-    plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.cssVariableReplacement,
-    ignore: cssVariableReplacementExcludeLocal,
-    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)]
-  })].filter(Boolean);
+
+      return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+    }
+  }), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -112,10 +82,71 @@ const getCSSLoaders = optionsObj => {
     loader: 'postcss-loader',
     options: {
       ident: 'postcss',
-      plugins: function () {
-        return postcssPlugins;
+      plugins: function (params) {
+        // console.log('check here : ', params.resourcePath);
+        // getCSSLoaders for all postcss filtering
+
+        /*
+        input : 
+        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+        patterns : [
+            // include all files
+           "valueReplacer": [ 
+              "*"
+            ],
+            // include all files
+            "selectorReplace": [
+              "*"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hoverActive": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "combinerMediaQuery": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hasRTL": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "selectorWeight": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include all files
+            "cssUniqueness": [
+              "*"
+            ]
+        ],
+        
+        [ postcssPlugins that are implemented ]
+          */
+        postcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
+          filename: params.resourcePath,
+          filterObject: patterns,
+          plugins: postcssPlugins
+        }); // postcssPlugins that are allowed
+
+        return postcssPlugins.length > 0 ? postcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
       }
     }
+  } : null, plugins.composeMinification ? {
+    loader: require.resolve('../loaders/composeLoader')
   } : null].filter(Boolean);
 };
 

package/lib/loaderUtils/tests/windowsModification.test.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const {
+  windowsModificationFile
+} = require('../windowsModification');
+
+const tests = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
+tests.forEach(test => {
+  console.log(windowsModificationFile(test));
+});

package/lib/loaderUtils/windowsModification.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.windowsModification = windowsModification;
+exports.windowsModificationFile = windowsModificationFile;
 const isWin = process.platform === 'win32';
 
 function windowsModification(array) {
   return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
-}
+}
+
+function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };

package/lib/loaders/composeLoader.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', //   'margin',
+'padding-top', 'padding-bottom', 'padding-left', 'padding-right', //   'padding',
+'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width'];
+const renameProps = {
+  'margin-top': {
+    pos: 'mt',
+    neg: 'mt_'
+  },
+  'margin-bottom': {
+    pos: 'mb',
+    neg: 'mb_'
+  },
+  'margin-left': {
+    pos: 'ml',
+    neg: 'ml_'
+  },
+  'margin-right': {
+    pos: 'mr',
+    neg: 'mr_'
+  },
+  margin: {
+    pos: 'm',
+    neg: 'm_'
+  },
+  'padding-top': {
+    pos: 'pt',
+    neg: 'pt_'
+  },
+  'padding-bottom': {
+    pos: 'pb',
+    neg: 'pb_'
+  },
+  'padding-left': {
+    pos: 'pl',
+    neg: 'pl_'
+  },
+  'padding-right': {
+    pos: 'pr',
+    neg: 'pr_'
+  },
+  padding: {
+    pos: 'p',
+    neg: 'p_'
+  },
+  top: {
+    pos: 'post',
+    neg: 'post_'
+  },
+  bottom: {
+    pos: 'posb',
+    neg: 'posb_'
+  },
+  left: {
+    pos: 'posl',
+    neg: 'posl_'
+  },
+  right: {
+    pos: 'posr',
+    neg: 'posr_'
+  },
+  height: {
+    pos: 'h',
+    neg: 'h_'
+  },
+  width: {
+    pos: 'w',
+    neg: 'w_'
+  },
+  'min-height': {
+    pos: 'minh',
+    neg: 'minh_'
+  },
+  'min-width': {
+    pos: 'minw',
+    neg: 'minw_'
+  },
+  'max-height': {
+    pos: 'maxh',
+    neg: 'maxh_'
+  },
+  'max-width': {
+    pos: 'maxw',
+    neg: 'maxw_'
+  }
+};
+
+function objToClassName(prop, data) {
+  return renameProps[prop] ? data < 0 ? renameProps[prop].neg ? `${renameProps[prop].neg}${data * -1}` : `undef${data * -1}` : renameProps[prop].pos ? `${renameProps[prop].pos}${data}` : `undef${data}` : `undef${data}`;
+}
+
+const commonFilePath = {
+  'margin-left': 'src/common/css/margin.css',
+  'margin-right': 'src/common/css/margin.css',
+  'margin-top': 'src/common/css/margin.css',
+  'margin-bottom': 'src/common/css/margin.css',
+  'padding-left': 'src/common/css/padding.css',
+  'padding-right': 'src/common/css/padding.css',
+  'padding-top': 'src/common/css/padding.css',
+  'padding-bottom': 'src/common/css/padding.css',
+  top: 'src/common/css/position.css',
+  bottom: 'src/common/css/position.css',
+  left: 'src/common/css/position.css',
+  right: 'src/common/css/position.css',
+  height: 'src/common/css/height.css',
+  width: 'src/common/css/width.css',
+  'min-height': 'src/common/css/height.css',
+  'min-width': 'src/common/css/width.css',
+  'max-height': 'src/common/css/height.css',
+  'max-width': 'src/common/css/width.css'
+}; // const preNames = {
+//   height: 'zd-height-',
+//   'max-height': 'zd-height-',
+//   'min-height': 'zd-height-',
+//   width: 'zd-width-',
+//   'max-width': 'zd-width-',
+//   'min-width': 'zd-width-',
+//   top: 'zd-position-',
+//   bottom: 'zd-position-',
+//   left: 'zd-position-',
+//   right: 'zd-position-',
+//   'padding-top': 'zd-padding-',
+//   'padding-bottom': 'zd-padding-',
+//   'padding-left': 'zd-padding-',
+//   'padding-right': 'zd-padding-',
+//   'margin-top': 'zd-margin-',
+//   'margin-bottom': 'zd-margin-',
+//   'margin-left': 'zd-margin-',
+//   'margin-right': 'zd-margin-'
+// };
+
+function allowParent(rule) {
+  return rule.parent.type === 'root' || rule.parent.type === 'atrule' && rule.parent.name === 'media';
+}
+
+module.exports = function (source) {
+  const {
+    resourcePath
+  } = this;
+
+  let root = _postcss.default.parse(source);
+
+  root.walkRules(rule => {
+    rule.walkDecls(decl => {
+      if (!allowParent(rule)) {
+        return;
+      }
+
+      if (supportedProps.includes(decl.prop) && /px$/gi.test(decl.value) && !/^--/gi.test(decl.prop) && commonFilePath[decl.prop] && !decl.value.includes('calc') && !/[,\s+]+|(\w+)\.|:|(\d+)%/gi.test(rule.selector)) {
+        let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
+        commonFilePath[decl.prop]).replace(/\\/gi, '/')}"`; // n++ < 10 && console.log(composeString);
+
+        if (!composeString.includes('src')) {
+          const cls = objToClassName(decl.prop, parseInt(decl.value));
+          composeString = `${cls} ${composeString}`;
+          decl.value = composeString;
+          decl.prop = 'composes'; // n < 10 && console.log(rule.selector, decl.prop, decl.value);
+        }
+      }
+    });
+  });
+  const output = root.toString(); // console.log(output);
+
+  return output;
+};