@zohodesk/react-cli 1.0.3 → 1.1.0

package/lib/loaders/reactLiveConvertor.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reactLiveConvertor = reactLiveConvertor;
+
+const parser = require('@babel/parser');
+
+const traverse = require('@babel/traverse').default;
+
+const path = require('path');
+
+function reactLiveConvertor(source, originalFilePath) {
+  let stringifyPath = JSON.stringify(originalFilePath);
+  var fileName = stringifyPath.substring(stringifyPath.lastIndexOf("/") + 1, stringifyPath.length).split('.')[0];
+
+  if (source) {
+    let importBlock = '';
+    let docCode = '';
+    let packages = new Set();
+    const fileContent = source.replace(/[\s\r\n]*$/, '');
+    const ast = parser.parse(fileContent, {
+      sourceType: 'module',
+      plugins: ['jsx', 'classProperties']
+    }); // Traverse the AST and find the import and export blocks
+
+    let remainingCode = ast.program.body.filter(node => {
+      return node.type !== "ImportDeclaration";
+    }).map(node => {
+      return fileContent.substring(node.start, node.end);
+    }).join("").replace(/export default/, '').replace(/export /, '').trim();
+    traverse(ast, {
+      ImportDeclaration(path) {
+        importBlock += fileContent.slice(path.node.start, path.node.end) + '\n';
+        path.node.specifiers.forEach(specifier => {
+          if (specifier.type === 'ImportSpecifier') {
+            packages.add(specifier.imported.name);
+          }
+
+          if (specifier.local.type == 'Identifier') {
+            packages.add(specifier.local.name);
+          }
+        });
+      },
+
+      ExpressionStatement(path) {
+        if (path.node.type == 'ExpressionStatement') {
+          if (path.node.expression.type == 'AssignmentExpression') {
+            if (path.node.expression.left.type == 'MemberExpression') {
+              let docCheck = fileContent.slice(path.node.expression.left.start, path.node.expression.left.end);
+
+              if (docCheck == `${fileName}.docs`) {
+                docCode = fileContent.slice(path.node.expression.start, path.node.expression.end);
+              }
+            }
+          }
+        }
+      } // IfStatement(path){
+      //   if(path.node.type == 'IfStatement'){
+      //     if(path.node.test.name == '__DOCS__'){
+      //       let final = fileContent.slice(path.node.start,path.node.end)
+      //       fileContent = fileContent.replace(final,'')
+      //       console.log(fileContent);
+      //     }
+      //   }
+      // }
+
+
+    });
+    remainingCode = remainingCode.replace(/__DOCS__/, true);
+    remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+    let brcklets = `(function () { 
+
+      ${remainingCode}  
+
+      return <${fileName} />
+
+    }) ()`;
+    let addBractick = '`' + brcklets + '`';
+    let template = `
+  
+    ${importBlock}
+  
+    import { LiveProvider, LiveEditor, LiveError, LivePreview } from '@zohodesk-private/react-live/es/index'
+  
+    export default class ${fileName} extends React.Component{
+      render(){
+        return(
+          <LiveProvider scope={{${Array.from(packages).join(', ')}}} code={${addBractick}}>
+         <LiveEditor   />
+         <LiveError />
+         <LivePreview    />
+     
+          </LiveProvider>
+        )
+      }
+    }
+  
+    ${docCode}
+    `; // fileName == 'CustomLookup__default' &&  console.log(docCode);
+
+    return template;
+  }
+
+  ;
+}

package/lib/pluginUtils/getDevPlugins.js

@@ -51,6 +51,7 @@ const getDevPlugins = (options, publicPath) => {
       hasShadowDOM,
       cssVariableReplacementConfig,
       plugins: pluginObject,
+      patterns,
       exclude,
       selectorWeightConfig,
       server: {
@@ -199,16 +200,22 @@ const getDevPlugins = (options, publicPath) => {
 
   if (pluginObject.cssVariableReplacement) {
     pluginsArr.push(new _VariableConversionCollector.default({
-      cssVariableReplacementConfig
+      cssVariableReplacementConfig,
+      patterns
     }));
   }
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
       selectorWeightConfig,
-      exclude: exclude.selectorWeight
+      exclude: exclude.selectorWeight,
+      patterns
     }));
-  }
+  } // if (pluginObject.minifier) {
+  //   // console.log('minifier active');
+  //   pluginsArr.push(new MinifierPlugin());
+  // }
+
 
   return pluginsArr.filter(Boolean);
 };

package/lib/pluginUtils/getProdPlugins.js

@@ -47,12 +47,14 @@ const getProdPlugins = (options, publicPath = '') => {
     bundleAnalyze,
     optimize,
     publicPaths,
+    patterns,
     hasEFC: prevOptionForEnableEFC,
     enableSMapHook,
     tpFolder,
     folder,
     outputFolder,
     context,
+    exclude,
     enableSMap,
     server: {
       mode
@@ -105,7 +107,7 @@ const getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -271,13 +273,16 @@ const getProdPlugins = (options, publicPath = '') => {
 
   if (pluginObject.cssVariableReplacement) {
     pluginsArr.push(new _VariableConversionCollector.default({
-      cssVariableReplacementConfig
+      cssVariableReplacementConfig,
+      patterns
     }));
   }
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
-      selectorWeightConfig
+      selectorWeightConfig,
+      exclude: exclude.selectorWeight,
+      patterns
     }));
   } // plugins.push(new VariableConversionCollector({}));
 

package/lib/pluginUtils/getUMDCSSPlugins.js

@@ -27,7 +27,7 @@ let getUMDCSSPlugins = () => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[id].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/pluginUtils/getUMDComponentPlugins.js

@@ -27,7 +27,7 @@ let getUMDComponentPlugins = isDocs => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[name].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js}

@@ -11,9 +11,9 @@ var _uglifycss = _interopRequireDefault(require("uglifycss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class UglifyCSSPlugin {
+class MinifierPlugin {
   apply(compiler) {
-    compiler.hooks.emit.tap('UglifyCSSPlugin', compilation => {
+    compiler.hooks.emit.tap('MinifierPlugin', compilation => {
       Object.keys(compilation.assets).forEach(filename => {
         if (/\.css$/.test(filename)) {
           try {
@@ -36,4 +36,4 @@ class UglifyCSSPlugin {
 
 }
 
-exports.default = UglifyCSSPlugin;
+exports.default = MinifierPlugin;

package/lib/plugins/SelectorPlugin.js

@@ -9,72 +9,63 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _classHandling = require("./utils/classHandling");
+
+var _fileHandling = require("./utils/fileHandling");
+
 var _windowsModification = require("../loaderUtils/windowsModification");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function checkFilename(filename, data) {
-  let keyMatch = undefined;
-  Object.keys(data).forEach(key => {
-    if (filename.includes(key)) {
-      keyMatch = key;
-    }
-  });
-  return keyMatch;
-}
-
-function rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings) {
+function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
   rootOriginal.walkRules((rule, index) => {
-    const prevNode = rootOriginal.nodes[index - 1];
+    const prevNode = rootOriginal.nodes[index - 1] || null;
 
-    if (index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'updateselector:ignore') {
+    if ((0, _classHandling.hasPrevNodeIgnore)(index, prevNode, 'updateselector:ignore')) {
       return;
-    }
+    } // console.log(rule.selector.split(','));
 
-    if (rule.parent && rule.parent.type === 'atrule') {
-      if (rule.parent.name !== 'media') {
-        return;
-      }
-    }
 
     const selectorArr = rule.selector.split(',');
     selectorArr.forEach((singleSelectorStr, index) => {
       if (excludeStrings.includes(singleSelectorStr.trim())) {
         return;
-      }
+      } // NOTE: below logic for attrbute related
+
 
       if (singleSelectorStr.includes(']')) {
-        if (singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim() === '') {
+        // console.log(singleSelectorStr);
+        const prefixPart = singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim();
+        const selectorPart = singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 1).trim();
+
+        if (excludeStrings.includes(selectorPart.trim())) {
           return;
         }
 
-        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${defaultSelector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
+        if (/^:/gi.test(selectorPart)) {
+          return;
+        }
+
+        if (selectorPart !== '') {
+          selectorArr[index] = `${prefixPart} ${selector}${selectorPart}`;
+        }
+
         return;
       }
 
-      const keyMatch = checkFilename(filename, data);
-      selectorArr[index] = data[keyMatch] ? `${data[keyMatch].defaultSelector}${singleSelectorStr}` : `${defaultSelector}${singleSelectorStr}`;
+      selectorArr[index] = `${selector}${singleSelectorStr}`;
     });
     rule.selector = selectorArr.join(',\n');
   });
   return rootOriginal;
 }
 
-function ignoreFile(excludeArr, filename) {
-  let ignore = false;
-  excludeArr.forEach(exclStr => {
-    if (filename.includes(exclStr)) {
-      ignore = true;
-    }
-  });
-  return ignore;
-}
-
 class SelectorPlugin {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.selectorWeightConfig = options.selectorWeightConfig;
     this.exclude = options.exclude;
+    this.patterns = options.patterns;
   }
 
   apply(compiler) {
@@ -94,15 +85,47 @@ class SelectorPlugin {
         mods.forEach(module => {
           const rootOriginal = _postcss.default.parse(module.content);
 
-          const filename = module.issuer.resource; // if (!filename.includes('node_modules')) {
-
-          if (ignoreFile(this.exclude, filename)) {
+          const filename = module.issuer.resource;
+          /*
+              input : 
+              filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+            
+               patterns.cssVariableReplacement: 
+              // include src folder, include deskapp folder, exclude node modules
+              "selectorWeight": [
+                "src",
+                "deskapp",
+                "!node_modules"
+              ]
+               
+              output : 
+              true or false
+            */
+
+          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+            filename,
+            filterArr: this.patterns.selectorWeight
+          })) {
             return;
           }
+          /*
+           
+          filename : Deskapp.module.css ?
+           data : 
+          {
+              "DeskApp.module.css": {"defaultSelector" : ".desk_app_ui "}
+          }
+             selectorWeightConfig : 
+           defaultSelector : .zoho_desk_ui
+          
+          case filename = 'DeskApp.module.css' ? 
+          data[filename].defaultSelector = '.desk_app_ui' 
+           case filename is different ?
+          defaultSelector = '.zoho_desk_ui'
+           */
+
 
-          module.content = //new RawSource(
-          rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings).toString(); // );
-          // }
+          module.content = selectorWeightPrefixAdder(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
         });
       });
     });

package/lib/plugins/VariableConversionCollector.js

@@ -9,12 +9,15 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
+var _fileHandling = require("./utils/fileHandling");
+
+var _variableConvertorUtils = require("./variableConvertorUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
 const fs = require('fs');
 
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
 let variablesRead = {};
 
 const {
@@ -23,29 +26,7 @@ const {
   errHandler
 } = require('../postcss-plugins/variableModificationPlugin/index');
 
-const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex']; // const avoidProps = [];
-// -- is issue IO --
-
-/*
-issues eg : 
-issues = ['--zd_size', '--zd_font_size', '--size', '--size_'];
-input : 
---zd_size
-output : 
-true
-comment : 
-do not execute when --zd_size comes as prop 
-*/
-
-function isIgnoreValuePresent(ignoreVals, prop) {
-  let present = false;
-  ignoreVals.forEach(issue => {
-    if (prop && prop.includes(issue)) {
-      present = true;
-    }
-  });
-  return present;
-} // -- to convert the hyphen values to values --
+const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex']; // -- to convert the hyphen values to values --
 
 /*
 input : 
@@ -57,49 +38,6 @@ comment :
 to make the variable object using the output as key and decl.prop such as font-size as value 
 */
 
-
-function extractVariableName(val) {
-  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
-}
-
-function rootConvertor(rootOriginal, variables, settingsObject) {
-  rootOriginal.walkRules(rule => {
-    rule.nodes.forEach((decl, index) => {
-      const prevNode = rule.nodes[index - 1];
-      const currentNode = rule.nodes[index];
-
-      if (decl.prop && decl.prop.includes('--')) {
-        if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'variable:ignore') {
-          return;
-        }
-
-        if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
-          return;
-        }
-
-        if (settingsObject[variables[decl.prop]]) {
-          /* if there is no value for property, set it to default so that undefined doesn't get called as key */
-          if (!variables[decl.prop]) {
-            variables[decl.prop] = 'default';
-          }
-
-          const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
-
-          valArr.forEach((value, index) => {
-            if (value.includes('px')) {
-              const num = value.replace('px', '');
-              valArr[index] = pxReplacement.replace('$$', num);
-            }
-          });
-          currentNode.value = valArr.join(' ');
-        }
-      }
-    });
-  });
-  return rootOriginal;
-}
-
 function createFolderIfNonExistant(path) {
   if (!fs.existsSync(path)) {
     fs.mkdirSync(path, {
@@ -118,10 +56,12 @@ class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
-    this.fileHandler();
+    this.patterns = options.patterns; // console.log(options.patterns, this.patterns);
+
+    this.initializeFiles();
   }
 
-  fileHandler() {
+  initializeFiles() {
     createFolderIfNonExistant('./.cli/logs/');
     createFolderIfNonExistant('./.cli/config/variables/');
     createFolderIfNonExistant('./.cli/config/selectorWeight/');
@@ -131,7 +71,8 @@ class VariableConversionCollector {
 
   apply(compiler) {
     const variables = {};
-    const unassigned = {};
+    const unassigned = {}; // console.log(windowsModification([this.filename])[0]);
+
     const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
@@ -183,8 +124,8 @@ class VariableConversionCollector {
             rootOriginal.walkRules(rule => {
               rule.walkDecls(decl => {
                 decl.value.split(' ').forEach(val => {
-                  if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
-                    const extractedValue = extractVariableName(val);
+                  if (val && val.includes('--') && !new RegExp(_variableConvertorUtils.ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
+                    const extractedValue = (0, _variableConvertorUtils.extractVariableName)(val);
 
                     if (!variables[extractedValue]) {
                       variables[extractedValue] = decl.prop;
@@ -234,7 +175,7 @@ class VariableConversionCollector {
             });
           }
         });
-      }); // -- conversion for the root using rootConvertor --
+      }); // -- conversion for the root using variableConvertor --
 
       /* 
       input : 
@@ -252,9 +193,33 @@ class VariableConversionCollector {
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
         mods.forEach(module => {
+          const filename = module.issuer.resource;
+          /*
+            input : 
+            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+          
+             patterns.cssVariableReplacement: 
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ]
+             
+            output : 
+            true or false
+          */
+
+          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+            filename,
+            filterArr: this.patterns.cssVariableReplacement
+          })) {
+            return;
+          }
+
           const rootOriginal = _postcss.default.parse(module.content);
 
-          module.content = rootConvertor(rootOriginal, variables, settingsObject).toString();
+          module.content = (0, _variableConvertorUtils.variableConverter)(rootOriginal, variables, settingsObject).toString();
         });
       });
     });
@@ -288,29 +253,7 @@ class VariableConversionCollector {
         if (a.type < b.type) {
           return -1;
         }
-      }); // variable constructed now to be written in a json file
-      // const newVars = Object.keys(variables)
-      //   //Filter Object with key contanis "NAME"
-      //   .filter(key => variables[key].includes('--'))
-      //   .reduce(
-      //     (obj, key) =>
-      //       Object.assign(obj, {
-      //         [key]: variables[key]
-      //       }),
-      //     {}
-      //   );
-      // console.log('new variables: ', newVars);
-      // try {
-      //   fs.writeFileSync('./variableMapping.json', JSON.stringify(variables));
-      // } catch (err) {
-      //   console.log(err);
-      // }
-      // fs.writeFile('./variableMapping.json', JSON.stringify(variables), err => {
-      //   if (err) {
-      //     throw err;
-      //   }
-      //   console.log('variable mapping file generated.');
-      // });
+      });
 
       if (errorConsoleStatus) {
         const errorHandler = new _ErrorHandler.ErrorHandler();

package/lib/plugins/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ManifestPlugin", {
     return _ManifestPlugin.default;
   }
 });
+Object.defineProperty(exports, "MinifyPlugin", {
+  enumerable: true,
+  get: function () {
+    return _MinifyPlugin.default;
+  }
+});
 Object.defineProperty(exports, "ModuleStatsPlugin", {
   enumerable: true,
   get: function () {
@@ -99,12 +105,6 @@ Object.defineProperty(exports, "TPHashMappingPlugin", {
     return _TPHashMappingPlugin.default;
   }
 });
-Object.defineProperty(exports, "UglifyCSSPlugin", {
-  enumerable: true,
-  get: function () {
-    return _UglifyCSSPlugin.default;
-  }
-});
 Object.defineProperty(exports, "UnusedFilesFindPlugin", {
   enumerable: true,
   get: function () {
@@ -126,7 +126,7 @@ var _OptimizeJSPlugin = _interopRequireDefault(require("./OptimizeJSPlugin"));
 
 var _ResourceHintsPlugin = _interopRequireDefault(require("./ResourceHintsPlugin"));
 
-var _UglifyCSSPlugin = _interopRequireDefault(require("./UglifyCSSPlugin"));
+var _MinifyPlugin = _interopRequireDefault(require("./MinifyPlugin"));
 
 var _ManifestPlugin = _interopRequireDefault(require("./ManifestPlugin"));
 

package/lib/plugins/utils/classHandling.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPrevNodeIgnore = hasPrevNodeIgnore;
+exports.isAtRule = isAtRule;
+exports.isComment = isComment;
+exports.isCommentContentSame = isCommentContentSame;
+exports.isInsideMediaQuery = isInsideMediaQuery;
+exports.isThisComment = isThisComment;
+
+function isComment(node) {
+  return node && node.type && node.type === 'comment';
+}
+
+function isCommentContentSame(node, content) {
+  return node.text.toLowerCase() === content;
+}
+
+function isThisComment(node, ignoreComment) {
+  return isComment(node) && isCommentContentSame(node, ignoreComment);
+}
+
+function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
+  return index !== 0 && isThisComment(prevNode, ignoreComment);
+}
+
+function isAtRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule';
+}
+
+function isInsideMediaQuery(rule) {
+  return isAtRule(rule) && rule.parent && rule.parent.name === 'media' ? true : false;
+}