@zohodesk/react-cli 0.0.1-exp.175.1 → 0.0.1-exp.176.2

package/lib/plugins/VariableConversionCollector.js

@@ -0,0 +1,322 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
+
+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_'];
+
+const {
+  errors,
+  errTable,
+  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 --
+
+/*
+input : 
+var(--zdt_uploadlist_default_width)
+output : 
+--zdt_uploadlist_default_width
+
+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) => {
+      let prevNode = rule.nodes[index - 1];
+      let 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;
+          let valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+
+          valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              let num = value.replace('px', '');
+              valArr[index] = pxReplacement.replace('$$', num);
+            }
+          });
+          currentNode.value = valArr.join(' ');
+        }
+      }
+    });
+  });
+  return rootOriginal;
+}
+
+class VariableConversionCollector {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+    this.filename = options.cssVariableReplacementConfig;
+  }
+
+  apply(compiler) {
+    const variables = {};
+    const unassigned = {};
+    const rawdata = fs.readFileSync(this.filename);
+    const data = JSON.parse(rawdata);
+    const {
+      settings: settingsObject,
+      errorLog: errorLogStatus,
+      errorInConsole: errorConsoleStatus,
+      errorsAllowed
+    } = data; // If theres is no setting for default prop in settingsObject, set one.
+
+    if (!settingsObject.default) {
+      settingsObject.default = {
+        allowed: ['px', 'em', 'fit-content', 'auto', '%', 'inherit', '-moz-fit-content', 'vh', '0', 'initial', 'vw'],
+        replacements: {
+          px: 'var(--zd_size$$)'
+        },
+        range: {
+          start: -99999,
+          end: 99999
+        }
+      };
+    }
+    /* 
+    purpose of tap : to create a variable object such as:
+    {
+      --zdt_uploadlist_default_width : width,
+      --zdt_uploadlist_default_height : height,
+    }
+    which will help in the conversion further
+    */
+
+
+    if (fs.existsSync('./variableMapping.json')) {
+      const data = JSON.parse(fs.readFileSync('./variableMapping.json', 'utf-8'));
+      Object.keys(data).forEach(key => {
+        variables[key] = data[key];
+      });
+    }
+
+    compiler.hooks.compilation.tap('VariableConversionCollector', compilation => {
+      compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
+        const mods = modules.filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const rootOriginal = _postcss.default.parse(module.content);
+
+          const filename = module.issuer.resource;
+
+          if (!filename.includes('node_modules')) {
+            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 (!variables[extractedValue]) {
+                      variables[extractedValue] = decl.prop;
+                    } else {
+                      if (new RegExp(supportedProps.join('|'), 'gi').test(decl.prop)) {
+                        // console.log(
+                        //   `${extractedValue} : ${variables[extractedValue]} already exists please check!`
+                        // );
+                        if (errorsAllowed.MULTIPLE_OCCURANCES) {
+                          let errObj = {
+                            decl,
+                            type: 'MULTIPLE_OCCURANCES',
+                            filename,
+                            message: `${extractedValue} : ${variables[extractedValue]} already exists please check!`
+                          };
+                          errHandler.errorTable.push(errObj);
+                          errHandler.errorFunction(errObj);
+                        }
+                      }
+                    }
+                  } else {
+                    // console.log(decl.prop);
+                    if (/^--/gi.test(decl.prop) && new RegExp(supportedProps.join('|'), 'gi').test(decl.prop) && val.trim() !== '' && !variables[decl.prop]) {
+                      // console.log(
+                      //   `${decl.prop} : ${variables[decl.prop]},`
+                      // );
+                      unassigned[decl.prop] = variables[decl.prop];
+                    }
+                  }
+                });
+              });
+            });
+            /*
+             current value example: 
+             {
+                --zdt_uploadlist_default_width : --zd_upload_width,
+                --zd_upload_width : width
+             }
+             expected value : 
+             {
+               --zdt_uploadlist_default_width : width,
+               --zd_upload_width : width
+             }
+            
+             conversion is done in the while loop below
+            */
+
+            Object.keys(variables).forEach(key => {
+              while (variables[variables[key]]) {
+                variables[key] = variables[variables[key]];
+              }
+            });
+          }
+        });
+      }); // -- conversion for the root using rootConvertor --
+
+      /* 
+      input : 
+      .a{
+        padding : 20px 
+      }
+      output :
+      // on settingObject file : 
+      { padding : { replacements : { px : 'zd_size$$' }}} 
+      .a{
+        padding : zd_size20;
+      }
+      */
+
+      compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
+        const mods = modules.filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const rootOriginal = _postcss.default.parse(module.content);
+
+          module.content = rootConvertor(rootOriginal, variables, settingsObject).toString();
+        });
+      });
+    });
+    /*
+      purpose of tap : to display the errors encountered so far 
+      input : 
+      all css files 
+      output : 
+      all errors that are present in the errTable arr
+    */
+
+    compiler.hooks.afterEmit.tap('error-display', () => {
+      if (Object.keys(unassigned).length > 0) {
+        console.log();
+        console.log(unassigned);
+        console.log();
+        throw new Error('^^^ Variables above have not been assigned! ^^^');
+      }
+
+      let avlTypes = new Set([]);
+      let srtArr = errTable.sort((a, b) => {
+        avlTypes.add(a.type);
+        avlTypes.add(b.type);
+
+        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();
+        avlTypes.forEach(type => {
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+          console.log(`Error Type : ${type}`);
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+          srtArr.forEach(err => {
+            if (err.decl.prop && err.decl.value && err.type === type) {
+              errorHandler.printError(err);
+            }
+          });
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+        });
+      }
+
+      if (errorLogStatus) {
+        fs.writeFileSync('./css_error.log', '');
+        console.log('writing to logFile...');
+
+        if (errors.length > 0) {
+          errors.forEach((err, index) => {
+            if (errTable[index].decl.prop && errTable[index].decl.value) {
+              fs.appendFileSync('./css_error.log', err);
+            }
+          });
+        }
+      }
+    });
+  }
+
+}
+
+var _default = VariableConversionCollector;
+exports.default = _default;

package/lib/plugins/composeCommonPlugin.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class ComposeCommonPlugin {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('OptimizeJSPlugin', compilation => {
+      compilation.hooks.optimizeModules.tap('OptimizeMods', modules => {
+        modules.forEach(module => {
+          console.log(module);
+        });
+      });
+    });
+  }
+
+}
+
+var _default = ComposeCommonPlugin;
+exports.default = _default;

package/lib/plugins/index.js

@@ -111,22 +111,41 @@ Object.defineProperty(exports, "UnusedFilesFindPlugin", {
     return _UnusedFilesFindPlugin.default;
   }
 });
+
 var _ModuleStatsPlugin = _interopRequireDefault(require("./ModuleStatsPlugin"));
+
 var _SourceMapHookPlugin = _interopRequireDefault(require("./SourceMapHookPlugin"));
+
 var _UnusedFilesFindPlugin = _interopRequireDefault(require("./UnusedFilesFindPlugin"));
+
 var _ScriptInstrumentPlugin = _interopRequireDefault(require("./ScriptInstrumentPlugin"));
+
 var _PublicPathChangePlugin = _interopRequireDefault(require("./PublicPathChangePlugin"));
+
 var _OptimizeJSPlugin = _interopRequireDefault(require("./OptimizeJSPlugin"));
+
 var _ResourceHintsPlugin = _interopRequireDefault(require("./ResourceHintsPlugin"));
+
 var _UglifyCSSPlugin = _interopRequireDefault(require("./UglifyCSSPlugin"));
+
 var _ManifestPlugin = _interopRequireDefault(require("./ManifestPlugin"));
+
 var _CleanupStatsPlugin = _interopRequireDefault(require("./CleanupStatsPlugin"));
+
 var _EFCPlugin = _interopRequireDefault(require("./EFCPlugin"));
+
 var _PublicPathCallbackPlugin = _interopRequireDefault(require("./PublicPathCallbackPlugin"));
+
 var _I18NInjectIntoIndexPlugin = _interopRequireDefault(require("./I18NInjectIntoIndexPlugin"));
+
 var _ReportGeneratePlugin = _interopRequireDefault(require("./ReportGeneratePlugin"));
+
 var _ShadowDOMSupportPlugin = _interopRequireDefault(require("./ShadowDOMSupportPlugin"));
+
 var _ServiceWorkerPlugin = _interopRequireDefault(require("./ServiceWorkerPlugin"));
+
 var _TPHashMappingPlugin = _interopRequireDefault(require("./TPHashMappingPlugin"));
+
 var _CdnChangePlugin = _interopRequireDefault(require("./CdnChangePlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/plugins/libraryImpactPlugin.js

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _path = _interopRequireDefault(require("path"));
+
 var _fs = _interopRequireDefault(require("fs"));
+
 var _webpackSources = require("webpack-sources");
+
 var _jsonHelper = require("../utils/jsonHelper");
+
 var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 let resultFileName = `${process.cwd()}/result.json`;
 let options = (0, _utils.getOptions)();
 let {
@@ -24,21 +31,27 @@ let {
 (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.compareBranch', referBranch);
 (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.TestBranch', currentBranch);
 (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.isExecuted', true);
+
 let isValidModule = name => {
   if (name.includes('node_modules') && (name.includes(`@zohodesk${_path.default.sep}components`) || name.includes(`@zohodesk${_path.default.sep}dot`) || name.includes(`@zohodesk${_path.default.sep}icons`) || name.includes(`@zohodesk${_path.default.sep}svg`)) && !name.endsWith('docs.js')) {
     return true;
   }
+
   return !name.includes('index.js') && !name.endsWith('.css') && !name.endsWith('.png') && !name.includes('node_modules') && name.includes('src');
 };
+
 let getModuleName = modulePath => {
   let [name] = _path.default.parse(modulePath).name.split('.');
+
   if (modulePath.includes(`@zohodesk${_path.default.sep}components`)) {
     name = `@zohodesk/components/${name}`;
   } else if (modulePath.includes(`@zohodesk${_path.default.sep}dot`)) {
     name = `@zohodesk/dot/${name}`;
   }
+
   return name;
 };
+
 class LibraryImpactPlugin {
   constructor(options = {}) {
     this.options = options;
@@ -47,10 +60,12 @@ class LibraryImpactPlugin {
     this.bottomHtml = '</div> <script type="text/javascript"> const details = document.querySelectorAll("details"); details.forEach((targetDetail) => { targetDetail.addEventListener("click", () => { // Close all the details that are not targetDetail. details.forEach((detail) => { if (detail !== targetDetail) { detail.removeAttribute("open"); } }); }); }); </script></body></html>';
     this.resultJson = {};
   }
+
   apply(compiler) {
     let loggedInfo = false;
     compiler.hooks.beforeCompile.tap('LibraryImpactPlugin', () => {
       (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.startTime', Date.now());
+
       if (!loggedInfo) {
         (0, _utils.log)('\x1b[33m%s\x1b[0m', '************************************************************ \n ');
         (0, _utils.log)('\x1b[5m\x1b[44m%s\x1b[0m', 'Finding Impacted Source Files Please Wait ...');
@@ -63,11 +78,13 @@ class LibraryImpactPlugin {
       let {
         modules
       } = stats;
+
       for (let module of modules) {
         let {
           name,
           reasons
         } = module;
+
         if (isValidModule(name)) {
           let references = new Set();
           let referencedby = new Set();
@@ -76,6 +93,7 @@ class LibraryImpactPlugin {
           compilation.modules.forEach(module => {
             module.reasons.forEach(reason => {
               let exportedValue = reason.dependency;
+
               if (exportedValue.type === 'harmony export imported specifier') {
                 if (exportedValue.module.userRequest.includes(name.replace('.', ''))) {
                   docsName = exportedValue.name;
@@ -84,29 +102,35 @@ class LibraryImpactPlugin {
             });
           });
           let currentModuleName = name;
+
           if (Array.isArray(reasons)) {
             for (let reason of reasons) {
               let {
                 moduleName
               } = reason;
+
               if (isValidModule(moduleName)) {
                 let reasonedModuleName = moduleName;
                 referencedby.add(reasonedModuleName);
               }
             }
           }
+
           for (let subModule of modules) {
             let {
               name: subModuleName,
               reasons
             } = subModule;
+
             if (isValidModule(subModuleName)) {
               let currentModuleName = subModuleName;
+
               if (Array.isArray(reasons)) {
                 for (let reason of reasons) {
                   let {
                     moduleName: reasonedModuleName
                   } = reason;
+
                   if (name === reasonedModuleName) {
                     references.add(currentModuleName);
                   }
@@ -114,6 +138,7 @@ class LibraryImpactPlugin {
               }
             }
           }
+
           results[currentModuleName] = {
             name: currentModuleName,
             references: Array.from(references),
@@ -123,9 +148,11 @@ class LibraryImpactPlugin {
           };
         }
       }
+
       (0, _utils.getDependenciesImpactList)(currentBranch, referBranch, tokenGit, serviceName).then(impactedList => {
         this.resultJson = (0, _utils.getLibraryConflict)(JSON.stringify(results), impactedList, changesOnly);
         (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.result', this.resultJson);
+
         if (this.resultJson.result.status) {
           (0, _utils.log)(this.resultJson.response);
           this.resultJson.response.forEach(fileObject => {
@@ -140,12 +167,15 @@ class LibraryImpactPlugin {
           (0, _utils.log)(this.resultJson.result.message);
           this.topHtml = this.topHtml + '<div style="font-size: xxx-large; text-align: center; padding-top: 50px;"> ' + this.resultJson.result.message + '</div>';
         }
+
         if (!_fs.default.existsSync('./coverageTest')) {
           _fs.default.mkdirSync('./coverageTest');
+
           _fs.default.writeFileSync('./coverageTest/impactLibrary.html', this.topHtml + this.bottomHtml, 'utf8');
         } else {
           _fs.default.writeFileSync('./coverageTest/impactLibrary.html', this.topHtml + this.bottomHtml, 'utf8');
         }
+
         (0, _jsonHelper.jsonHelper)(resultFileName, 'tests.libraryImpactOnSource.endTime', Date.now());
       });
     });
@@ -154,5 +184,7 @@ class LibraryImpactPlugin {
       (0, _utils.log)('Compilation finished!!!');
     });
   }
+
 }
+
 exports.default = LibraryImpactPlugin;

package/lib/plugins/webpackwatchrunplugin.js

@@ -4,12 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _utils = require("../utils");
+
 class WebpackWatchRunPlugin {
   apply(compiler) {
     compiler.hooks.watchRun.tap('WatchRun', comp => {
       const changedTimes = comp.watchFileSystem.watcher.mtimes;
       const changedFiles = Object.keys(changedTimes).map(file => `\n  ${file}`).join('');
+
       if (changedFiles.length) {
         (0, _utils.log)('====================================');
         (0, _utils.log)('NEW BUILD FILES CHANGED:', changedFiles);
@@ -17,5 +20,7 @@ class WebpackWatchRunPlugin {
       }
     });
   }
+
 }
+
 exports.default = WebpackWatchRunPlugin;

package/lib/postcss-plugins/ExcludePlugin.js

@@ -1,7 +1,9 @@
 "use strict";
 
 var _postcss = _interopRequireDefault(require("postcss"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   const {
     plugins
@@ -9,8 +11,10 @@ module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   return (root, result) => {
     const inputFile = root.source.input.file;
     let isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
+
     if (!isIgnoredFile) {
       const handler = response => response.messages.forEach(msg => result.messages.push(msg));
+
       return (0, _postcss.default)(plugins).process(root, {
         from: undefined
       }).then(handler);