@zohodesk/react-cli 0.0.1-exp.176.4 → 0.0.1-exp.178.2

package/lib/plugins/VariableConversionCollector.js

@@ -7,14 +7,24 @@ exports.default = void 0;
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
-var _fs = _interopRequireDefault(require("fs"));
-
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // -- is issue IO -- 
+const fs = require('fs');
+
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+let variablesRead = {};
+
+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 : 
@@ -35,7 +45,7 @@ function isIgnoreValuePresent(ignoreVals, prop) {
     }
   });
   return present;
-} // -- to convert the hyphen values to values -- 
+} // -- to convert the hyphen values to values --
 
 /*
 input : 
@@ -55,8 +65,8 @@ function extractVariableName(val) {
 function rootConvertor(rootOriginal, variables, settingsObject) {
   rootOriginal.walkRules(rule => {
     rule.nodes.forEach((decl, index) => {
-      let prevNode = rule.nodes[index - 1];
-      let currentNode = rule.nodes[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') {
@@ -69,16 +79,16 @@ function rootConvertor(rootOriginal, variables, settingsObject) {
 
         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] || !settingsObject[variables[decl.prop]]) {
+          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
+          const 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', '');
+              const num = value.replace('px', '');
               valArr[index] = pxReplacement.replace('$$', num);
             }
           });
@@ -90,22 +100,46 @@ function rootConvertor(rootOriginal, variables, settingsObject) {
   return rootOriginal;
 }
 
+function createFolderIfNonExistant(path) {
+  if (!fs.existsSync(path)) {
+    fs.mkdirSync(path, {
+      recursive: true
+    });
+  }
+}
+
+function createFileIfNonExistant(path, content) {
+  if (fs.existsSync(path)) {
+    fs.writeFileSync(path, content, 'utf-8');
+  }
+}
+
 class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
+    this.fileHandler();
   }
 
-  apply(compiler) {
-    let variables = {};
-
-    const rawdata = _fs.default.readFileSync(this.filename);
+  fileHandler() {
+    createFolderIfNonExistant('./.cli/logs/');
+    createFolderIfNonExistant('./.cli/config/variables/');
+    createFolderIfNonExistant('./.cli/config/selectorWeight/');
+    createFileIfNonExistant('./.cli/logs/unassignedVariables.log', '{}');
+    createFileIfNonExistant('./.cli/logs/css_error.log', '{}');
+  }
 
+  apply(compiler) {
+    const variables = {};
+    const unassigned = {};
+    const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
       settings: settingsObject,
       errorLog: errorLogStatus,
-      errorInConsole: errorConsoleStatus
+      errorInConsole: errorConsoleStatus,
+      errorsAllowed,
+      strictMode
     } = data; // If theres is no setting for default prop in settingsObject, set one.
 
     if (!settingsObject.default) {
@@ -130,6 +164,13 @@ class VariableConversionCollector {
     */
 
 
+    if (fs.existsSync('./.cli/config/variables/variableMapping.json')) {
+      variablesRead = JSON.parse(fs.readFileSync('./.cli/config/variables/variableMapping.json', 'utf-8'));
+      Object.keys(variablesRead.changes).forEach(key => {
+        variables[key] = variablesRead.changes[key];
+      });
+    }
+
     compiler.hooks.compilation.tap('VariableConversionCollector', compilation => {
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
@@ -137,37 +178,67 @@ class VariableConversionCollector {
           const rootOriginal = _postcss.default.parse(module.content);
 
           const filename = module.issuer.resource;
-          rootOriginal.walkRules(rule => {
-            rule.walkDecls(decl => {
-              decl.value.split(' ').forEach(val => {
-                if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val)) {
-                  variables[extractVariableName(val)] = decl.prop;
-                }
+
+          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) {
+                          const 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) && val.trim() !== '' && !variables[decl.prop]) {
+                      if (!Object.keys(variablesRead.ignore).includes(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]];
-            }
-          });
+            /*
+             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 -- 
+      }); // -- conversion for the root using rootConvertor --
 
       /* 
       input : 
@@ -200,30 +271,60 @@ class VariableConversionCollector {
     */
 
     compiler.hooks.afterEmit.tap('error-display', () => {
-      const {
-        errors,
-        errTable
-      } = require('../postcss-plugins/variableModificationPlugin/index');
+      if (Object.keys(unassigned).length > 0 && strictMode) {
+        console.log();
+        console.log(unassigned);
+        console.log();
+        let str = '{\n';
+        Object.keys(unassigned).forEach(key => {
+          str += `"${key}" : "${unassigned[key]}",\n`;
+        });
+        str += '}';
+        fs.writeFileSync('./.cli/logs/unassignedVariables.log', str, 'utf-8');
+        throw new Error('^^^ Variables above have not been assigned! ^^^');
+      }
 
-      let avlTypes = new Set([]);
-      let srtArr = errTable.sort((a, b) => {
+      const avlTypes = new Set([]);
+      const 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 errHandler = new _ErrorHandler.ErrorHandler();
+        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) {
-              errHandler.printError(err);
+              errorHandler.printError(err);
             }
           });
           console.log('---------------------------------------------------------------------------------------------------------------------------');
@@ -231,14 +332,13 @@ class VariableConversionCollector {
       }
 
       if (errorLogStatus) {
-        _fs.default.writeFileSync('./css_error.log', '');
-
+        fs.writeFileSync('./.cli/logs/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.default.appendFileSync('./css_error.log', err);
+              fs.appendFileSync('./.cli/logs/css_error.log', err);
             }
           });
         }

package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js

@@ -16,13 +16,14 @@ class ErrorHandler {
       DECIMAL_REJECT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n unit : ${errObj.unitErrorVal} ,\n message : ${errObj.message}`),
       UNIT_ERROR: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n unit : ${errObj.unitErrorVal} ,\n message : ${errObj.message}`),
       RANGE_ERROR: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}\r`),
-      VARIABLE_PRESENT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`)
+      VARIABLE_PRESENT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`),
+      MULTIPLE_OCCURANCES: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`)
     });
   }
 
   setAllowedErrs(allErrs) {
     this.allowedErrs = allErrs;
-    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT'].forEach(err => {
+    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT', 'MULTIPLE_OCCURANCES'].forEach(err => {
       if (!this.allowedErrs[err]) {
         this[err] = () => null;
       }
@@ -35,6 +36,7 @@ class ErrorHandler {
 
   errorFunction(errObj) {
     if (errObj.type && this.allowedErrs[errObj.type] && errObj.decl.prop && errObj.decl.value) {
+      console.log(this.allowedErrs[errObj.type]);
       this[errObj.type](errObj);
     }
   }

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -302,5 +302,6 @@ module.exports = {
     };
   }),
   errors: errHandler.errors,
-  errTable: errHandler.errorTable
+  errTable: errHandler.errorTable,
+  errHandler
 };

package/lib/schemas/index.js

@@ -91,6 +91,10 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    moduleResolvePath: {
+      value: '',
+      cli: 'module_resolve_path'
+    },
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -137,6 +141,10 @@ var _default = {
         value: 'dev',
         cli: 'app_mode'
       },
+      httpsCerts: {
+        value: null,
+        cli: 'https_certs'
+      },
       branch: {
         value: 'master',
         cli: 'app_branch'

package/lib/servers/docsServerCore.js

@@ -29,28 +29,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // import fs from 'fs';
 var _default = isSSTest => {
-  let options = (0, _utils.getOptions)();
-  let {
+  const options = (0, _utils.getOptions)();
+  const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
+  const {
     docs: {
       server
     }
   } = options;
-  let {
+  const {
     port,
     branch,
     host,
     domain,
     iphost
   } = server;
-  let appPath = process.cwd();
+  const appPath = process.cwd();
   const app = (0, _express.default)();
   app.use(_express.default.json());
   app.use(_express.default.urlencoded({
     extended: true
   }));
-  let docsConfig = (0, _webpackDocs.default)(isSSTest);
-  let compiler = (0, _webpack.default)(docsConfig);
-  let wdm = (0, _webpackDevMiddleware.default)(compiler, {
+  const docsConfig = (0, _webpackDocs.default)(isSSTest);
+  const compiler = (0, _webpack.default)(docsConfig);
+  const wdm = (0, _webpackDevMiddleware.default)(compiler, {
     logLevel: 'error',
     publicPath: docsConfig.output.publicPath,
     headers: {
@@ -67,7 +68,7 @@ var _default = isSSTest => {
     res.sendFile(_path.default.join(__dirname, '..', '..', 'templates', 'docs', 'index.html'));
   });
   app.use('/author/get', (req, res) => {
-    let {
+    const {
       query: {
         componentName = ''
       }
@@ -84,7 +85,7 @@ var _default = isSSTest => {
 
   if (branch) {
     app.post('/repo/merge', (req, res) => {
-      let {
+      const {
         ref
       } = req.body;
 
@@ -98,7 +99,7 @@ var _default = isSSTest => {
     });
   }
 
-  const httpsServer = _https.default.createServer(_httpsOptions.httpsOptions, app);
+  const httpsServer = _https.default.createServer(httpsOptions, app);
 
   if (!isSSTest) {
     httpsServer.listen(port, err => {
@@ -110,8 +111,8 @@ var _default = isSSTest => {
     });
   }
 
-  let httpPort = Number(port) + 1;
-  let http = app.listen(httpPort, err => {
+  const httpPort = Number(port) + 1;
+  const http = app.listen(httpPort, err => {
     if (err) {
       throw err;
     }

package/lib/servers/httpsOptions.js

@@ -3,16 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.httpsOptions = void 0;
+exports.httpsOptions = httpsOptions;
+exports.httpsOptionsWithUserFriendlyError = httpsOptionsWithUserFriendlyError;
 
-var _fs = _interopRequireDefault(require("fs"));
+// import fs from 'fs';
+// import path from 'path';
+// export const httpsOptions = {
+//   key: fs.readFileSync(path.join(__dirname, './cert/Tsicsezwild-22-23.key')),
+//   cert: fs.readFileSync(path.join(__dirname, './cert/Tsicsezwild-22-23.crt'))
+// };
+function httpsOptions(options) {
+  const {
+    httpsCerts
+  } = options.app.server;
 
-var _path = _interopRequireDefault(require("path"));
+  const certificate = require(require.resolve(httpsCerts, {
+    paths: [process.cwd()]
+  })); // TODO: in future we may do some version based check. certificate.version
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const httpsOptions = {
-  key: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.key')),
-  cert: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.crt'))
-};
-exports.httpsOptions = httpsOptions;
+  return certificate.httpsOptions;
+}
+
+function httpsOptionsWithUserFriendlyError(options) {
+  const {
+    httpsCerts
+  } = options.app.server;
+
+  if (typeof httpsCerts === 'string' && httpsCerts) {
+    try {
+      const certificate = httpsOptions(options);
+      return certificate;
+    } catch (error) {
+      if (error.message.indexOf('Cannot find module') !== -1) {
+        console.error(`You have given react-cli.app.server.httpsCerts as "${httpsCerts}". \n But it seems that file path have some problem.\n we are unable to locate "${httpsCerts}" in "${process.cwd()}"`);
+      } else {
+        console.error(error);
+      }
+
+      process.exit(0);
+    }
+  } else {
+    return null;
+  }
+}

package/lib/servers/nowatchserver.js

@@ -19,15 +19,16 @@ var _devBuild = require("./devBuild");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import webpack from 'webpack';
-let options = (0, _utils.getOptions)(); // let args = process.argv.slice(3);
+const options = (0, _utils.getOptions)(); // let args = process.argv.slice(3);
 
-let {
+const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
+const {
   app: {
     context,
     server
   }
 } = options;
-let {
+const {
   host,
   port,
   domain,
@@ -35,9 +36,9 @@ let {
   hasMock,
   mockPort
 } = server;
-let isCompatableHttp2 = Number(process.version.slice(1).split('.')[0]) >= 8;
-let contextURL = disableContextURL ? '' : `/${context}`;
-let serverUrl = (0, _utils.getServerURL)(server, 'htt' + 'ps');
+const isCompatableHttp2 = Number(process.version.slice(1).split('.')[0]) >= 8;
+const contextURL = disableContextURL ? '' : `/${context}`;
+const serverUrl = (0, _utils.getServerURL)(server, 'htt' + 'ps');
 const {
   zipname,
   cssSelectorZipPath,
@@ -83,7 +84,7 @@ app.use('/wms/*', (req, res) => {
   res.sendFile(_path.default.join(__dirname, '..', '..', 'templates', 'wms', 'index.html'));
 });
 
-const httpsServer = _https.default.createServer(_httpsOptions.httpsOptions, app);
+const httpsServer = _https.default.createServer(httpsOptions, app);
 
 const wss = new _ws.default.Server({
   server: httpsServer
@@ -101,7 +102,7 @@ wss.on('connection', ws => {
 });
 app.post('/wmsmockapi', (req, res) => {
   wsPool.forEach(ws => {
-    let {
+    const {
       body
     } = req;
 
@@ -161,7 +162,7 @@ httpsServer.listen(port, err => {
 if (isCompatableHttp2) {
   const http2 = require('http2');
 
-  const http2Server = http2.createSecureServer(_httpsOptions.httpsOptions); // eslint-disable-next-line no-unused-vars
+  const http2Server = http2.createSecureServer(httpsOptions); // eslint-disable-next-line no-unused-vars
 
   http2Server.on('stream', (stream, headers) => {
     stream.respond({
@@ -170,7 +171,7 @@ if (isCompatableHttp2) {
     });
     stream.end('<h1>Hello World! <br>Working with http2</h1>');
   });
-  let http2Port = Number(port) + 1;
+  const http2Port = Number(port) + 1;
   http2Server.listen(http2Port, err => {
     if (err) {
       throw err;
@@ -186,7 +187,7 @@ if (isCompatableHttp2) {
   (0, _utils.log)('Your node version didn\'t adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2');
 }
 
-let httpPort = Number(port) + (isCompatableHttp2 ? 2 : 1);
+const httpPort = Number(port) + (isCompatableHttp2 ? 2 : 1);
 app.listen(httpPort, err => {
   if (err) {
     throw err;