@zohodesk/react-cli 1.0.2-exp.4 → 1.0.3-beta.1

package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js

@@ -11,6 +11,8 @@ var _fs = require("fs");
 
 var _path = require("path");
 
+var _logger = require("../../../logger");
+
 function isComment(line) {
   return line[0] === '#';
 }
@@ -18,7 +20,7 @@ function isComment(line) {
 function getPropertiesAsJSON(filePath) {
   try {
     const data = (0, _fs.readFileSync)(filePath);
-    let source = data.toString();
+    const source = data.toString();
     const i18nObj = {};
     source.split(/\r?\n\r?/).forEach(fline => {
       const line = fline.trim();
@@ -42,7 +44,7 @@ function getPropertiesAsJSON(filePath) {
 }
 
 function getLang(file) {
-  let underScoreIndex = file.indexOf('_');
+  const underScoreIndex = file.indexOf('_');
   let language = 'en_US';
 
   if (underScoreIndex !== -1) {
@@ -68,26 +70,24 @@ function getAllI18n({
       const filePath = (0, _path.join)(context, file);
 
       if (exclude.test(filePath) || !include.test(filePath)) {
-        // console.log('exclude', filePath);
         return;
-      } // console.log('include', filePath);
-
+      }
 
       const i18n = getPropertiesAsJSON(filePath);
       allLangI18n[getLang(file)] = disableDefault ? i18n : Object.assign({}, jsResourceI18nKeys, i18n);
     });
     return allLangI18n;
   } catch (err) {
-    // console.log(err);
+    (0, _logger.errorLogger)(err);
     return {};
   }
 }
 
 function jsonToString(json, keySeperator) {
   let str = '{';
-  let keys = Object.keys(json);
+  const keys = Object.keys(json);
   keys.forEach((key, i) => {
-    let value = json[key];
+    const value = json[key];
 
     if (!value) {
       return;

package/lib/plugins/ResourceHintsPlugin.js

@@ -33,25 +33,25 @@ class ResourceHintsPlugin {
         }
 
         return Template.asString([source, '', `${mainTemplate.requireFn}.getChunkId = function getChunkId(chunkId) {`, Template.indent((needsMap ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`] : []).concat(['return chunkId;'])), '}', `// Prefetch a chunk (${pluginName})`, `${mainTemplate.requireFn}.pfc = function prefetchChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkId(chunkId)`, `${mainTemplate.requireFn}.e(chunkId);`]), '};',
-        /*
-          (needsMap
-            ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`]
-            : []
-          ).concat([
-            'var promises = [];',
-            'if(installedChunks[chunkId] === undefined) {',
-            Template.indent([
-              'installedChunks[chunkId] = null;',
-              /* mainTemplate.hooks.linkPrefetch.call('', chunk, hash),
+        /*
+          (needsMap
+            ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`]
+            : []
+          ).concat([
+            'var promises = [];',
+            'if(installedChunks[chunkId] === undefined) {',
+            Template.indent([
+              'installedChunks[chunkId] = null;',
+              /* mainTemplate.hooks.linkPrefetch.call('', chunk, hash),
               'document.head.appendChild(link);', */
 
-        /*
-              mainTemplate.hooks.requireEnsure.call('', chunk, hash)
-            ]),
-            '}'
-          ])
-        ),
-        '}',
+        /*
+              mainTemplate.hooks.requireEnsure.call('', chunk, hash)
+            ]),
+            '}'
+          ])
+        ),
+        '}',
         */
         `// Preload a chunk (${pluginName})`, `${mainTemplate.requireFn}.plc = function preloadChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkId(chunkId)`, 'if(installedChunks[chunkId] === undefined) {', Template.indent(['installedChunks[chunkId] = null;', mainTemplate.hooks.linkPreload.call('', chunk, hash), 'document.head.appendChild(link);', `${mainTemplate.requireFn}.e(chunkId);` // 'var head = document.getElementsByTagName(\'head\')[0];',
         // mainTemplate.hooks.jsonpScript.call('', chunk, hash),

package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -24,12 +24,12 @@ const isCss = filename => _path.default.extname(filename) === '.css'; // this  p
 
 class RtlCssPlugin {
   constructor(options = {}) {
-    /**
-     * @typedef {Object} Options
-     * @property  {String} filename [not used]
-     * @property  {String} dirVarName
-     * @property  {Boolean} sourcemap
-     * @property  {Object} config
+    /**
+     * @typedef {Object} Options
+     * @property  {String} filename [not used]
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       filename: options.filename || '[name].rtl.css',

package/lib/plugins/RtlSplitPlugin/RtrSplit.md

@@ -1,30 +1,30 @@
-# RTL Split 
-
-we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
-It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
-Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
-we are try to split them  by [dir] and load which type of css is needed.
-For this purpose  we created RTL Split Plugin 
-
-
-# To Try it  out  rtl-ltr split
-### how to use this feature?
-
-  to use this feature use have give the below oprtions
-  `package.json`
-  ```json
-  {
-    /// ...some things
-    "react-cli": {
-      //  ...some things
-      "css": {
-        "enableRTLSplit": true,
-        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
-        "disableMiniFiySelector": false,
-        "dirVarName": "document.dir" // this will be used for download css based on dir  
-      },
-      //  ...some things
-    }
-  }
-  ```
-
+# RTL Split 
+
+we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
+we are try to split them  by [dir] and load which type of css is needed.
+For this purpose  we created RTL Split Plugin 
+
+
+# To Try it  out  rtl-ltr split
+### how to use this feature?
+
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "css": {
+        "enableRTLSplit": true,
+        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
+        "disableMiniFiySelector": false,
+        "dirVarName": "document.dir" // this will be used for download css based on dir  
+      },
+      //  ...some things
+    }
+  }
+  ```
+

package/lib/plugins/SelectorPlugin.js

@@ -9,24 +9,32 @@ 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 selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
+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) {
   rootOriginal.walkRules((rule, index) => {
     const prevNode = rootOriginal.nodes[index - 1];
 
-    if ((0, _classHandling.hasPrevNodeIgnore)(index, prevNode, 'updateselector:ignore')) {
+    if (index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'updateselector:ignore') {
       return;
     }
 
-    if (!(0, _classHandling.isInsideMediaQuery)(rule)) {
-      return;
+    if (rule.parent && rule.parent.type === 'atrule') {
+      if (rule.parent.name !== 'media') {
+        return;
+      }
     }
 
     const selectorArr = rule.selector.split(',');
@@ -40,24 +48,33 @@ function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
           return;
         }
 
-        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${selector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
+        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${defaultSelector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
         return;
       }
 
-      selectorArr[index] = `${selector}${singleSelectorStr}`;
+      const keyMatch = checkFilename(filename, data);
+      selectorArr[index] = data[keyMatch] ? `${data[keyMatch].defaultSelector}${singleSelectorStr}` : `${defaultSelector}${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;
-    this.rootDir = options.patternsRootDir;
   }
 
   apply(compiler) {
@@ -77,49 +94,15 @@ class SelectorPlugin {
         mods.forEach(module => {
           const rootOriginal = _postcss.default.parse(module.content);
 
-          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"
-              ]
-                rootDir : patternsRootDir : 'supportapp'
-              
-              output : 
-              true or false
-            */
-
-          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
-            filename,
-            filterArr: this.patterns.selectorWeight,
-            rootDir: this.rootDir
-          })) {
+          const filename = module.issuer.resource; // if (!filename.includes('node_modules')) {
+
+          if (ignoreFile(this.exclude, filename)) {
             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 = selectorWeightPrefixAdder(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
+
+          module.content = //new RawSource(
+          rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings).toString(); // );
+          // }
         });
       });
     });

package/lib/plugins/ServiceWorkerPlugin.js

@@ -51,11 +51,11 @@ class ServiceWorkerPlugin {
         if (err) {
           throw new Error(err);
         } else {
-          /* const extractedChunks = compilation.chunks.filter(chunk => {
-            if ('canBeInitial' in chunk) {
-              return chunk.canBeInitial();
-            }
-            return chunk.isInitial();
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
           }); */
           // let [js, css, , , i18nPublicPath] = this.publicPaths;
           // let initialChunkUrls = [];
@@ -64,10 +64,10 @@ class ServiceWorkerPlugin {
           let entrypoint = compilation.entrypoints.get('main');
           let initialChunkUrls = entrypoint.getFiles();
           const cssDirTemplate = '@dir@';
-          /**
-           * NOTE:
-           *  if chunkSplitEnable is false means,
-           *    serviceWorker will get i18n files path for html
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
            */
 
           let initalI18nAssets = chunkSplitEnable ? entrypoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@')) : [];

package/lib/plugins/TPHashMappingPlugin.js

@@ -15,10 +15,10 @@ var _crypto = _interopRequireDefault(require("crypto"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Plugin that generates hash for the provided list of third party files
- * Map the provided key with the file hash and add it to the list of exisiting global constants.
- * Plugin in turn uses the defineplugin to generate global constants. 
+/**
+ * Plugin that generates hash for the provided list of third party files
+ * Map the provided key with the file hash and add it to the list of exisiting global constants.
+ * Plugin in turn uses the defineplugin to generate global constants. 
  */
 class TPHashMappingPlugin {
   constructor(options) {

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

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

package/lib/plugins/VariableConversionCollector.js

@@ -9,8 +9,6 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
-var _fileHandling = require("./utils/fileHandling");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
@@ -28,15 +26,15 @@ const {
 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 
+/*
+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) {
@@ -49,14 +47,14 @@ function isIgnoreValuePresent(ignoreVals, prop) {
   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 
+/*
+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 
 */
 
 
@@ -64,7 +62,7 @@ function extractVariableName(val) {
   return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
 }
 
-function variableConvertor(rootOriginal, variables, settingsObject) {
+function rootConvertor(rootOriginal, variables, settingsObject) {
   rootOriginal.walkRules(rule => {
     rule.nodes.forEach((decl, index) => {
       const prevNode = rule.nodes[index - 1];
@@ -120,13 +118,10 @@ class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
-    this.patterns = options.patterns;
-    this.rootDir = options.patternsRootDir; // console.log(options.patterns, this.patterns);
-
-    this.initializeFiles();
+    this.fileHandler();
   }
 
-  initializeFiles() {
+  fileHandler() {
     createFolderIfNonExistant('./.cli/logs/');
     createFolderIfNonExistant('./.cli/config/variables/');
     createFolderIfNonExistant('./.cli/config/selectorWeight/');
@@ -136,8 +131,7 @@ class VariableConversionCollector {
 
   apply(compiler) {
     const variables = {};
-    const unassigned = {}; // console.log(windowsModification([this.filename])[0]);
-
+    const unassigned = {};
     const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
@@ -160,13 +154,13 @@ class VariableConversionCollector {
         }
       };
     }
-    /* 
-    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
+    /* 
+    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
     */
 
 
@@ -196,9 +190,6 @@ class VariableConversionCollector {
                       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,
@@ -212,7 +203,6 @@ class VariableConversionCollector {
                       }
                     }
                   } 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];
@@ -222,19 +212,19 @@ class VariableConversionCollector {
                 });
               });
             });
-            /*
-             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
+            /*
+             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 => {
@@ -244,62 +234,36 @@ class VariableConversionCollector {
             });
           }
         });
-      }); // -- conversion for the root using variableConvertor --
-
-      /* 
-      input : 
-      .a{
-        padding : 20px 
-      }
-      output :
-      // on settingObject file : 
-      { padding : { replacements : { px : 'zd_size$$' }}} 
-      .a{
-        padding : zd_size20;
-      }
+      }); // -- 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 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"
-            ]
-              rootDir : patternsRootDir : 'supportapp'
-            
-            output : 
-            true or false
-          */
-
-          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
-            filename,
-            filterArr: this.patterns.cssVariableReplacement,
-            rootDir: this.rootDir
-          })) {
-            return;
-          }
-
           const rootOriginal = _postcss.default.parse(module.content);
 
-          module.content = variableConvertor(rootOriginal, variables, settingsObject).toString();
+          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
+    /*
+      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', () => {
@@ -324,7 +288,29 @@ 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();