@zohodesk/react-cli 1.1.1 → 1.1.2-9.exp.3

package/lib/plugins/ResourceHintsPlugin.js

@@ -12,14 +12,21 @@ const {
 const pluginName = 'prefetch-preload-chunk-plugin';
 
 class ResourceHintsPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(pluginName, ({
       mainTemplate
     }) => {
       mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk, hash) => {
+        const {
+          allowPrefetchingMultipleChunks
+        } = this.options;
         const idNameMap = chunk.getChunkMaps().name;
         const nameIdMap = {};
-        let needsMap = false;
+        let needsMap = allowPrefetchingMultipleChunks;
 
         for (const key in idNameMap) {
           if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
@@ -32,7 +39,10 @@ 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);`]), '};',
+        return Template.asString([source, Template.indent([`const nameToChunkIdMap = ${JSON.stringify(needsMap ? nameIdMap : {})};`, 'const chunkNames = Object.keys(nameToChunkIdMap);']), `${mainTemplate.requireFn}.getChunkIds = function getChunkIds(chunkId) {`, Template.indent([allowPrefetchingMultipleChunks ? `const isRegExAsChunkId = chunkId instanceof RegExp; 
+                return isRegExAsChunkId ? chunkNames.filter(chunkName => chunkId.test(chunkName)).map(chunkName => nameToChunkIdMap[chunkName]) : [nameToChunkIdMap[chunkId] || chunkId];` : needsMap ? 'return [nameToChunkIdMap[chunkId] || chunkId];' : 'return [chunkId];']), '}', `// Prefetch a chunk (${pluginName})`, `${mainTemplate.requireFn}.pfc = function prefetchChunk(chunkId) {`, Template.indent([`let chunkIds = ${mainTemplate.requireFn}.getChunkIds(chunkId)`, `chunkIds.forEach(idOfAChunk => {
+                ${mainTemplate.requireFn}.e(idOfAChunk);
+              })`]), '};',
         /*
           (needsMap
             ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`]
@@ -53,7 +63,7 @@ class ResourceHintsPlugin {
         ),
         '}',
         */
-        `// 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];',
+        `// Preload a chunk (${pluginName})`, `${mainTemplate.requireFn}.plc = function preloadChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkIds(chunkId)[0]`, '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),
         // 'head.appendChild(script);'
         ]), '}']), '};']);

package/lib/plugins/StatsPlugin.js

@@ -0,0 +1,82 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const {
+  Readable
+} = require('stream');
+
+const {
+  removeKeysFromObject,
+  convertObjectToStringGen
+} = require('../utils/object-manipulation');
+
+const pluginName = 'stats-plugin';
+const statsSchema = {
+  all: true
+};
+
+class StatsPlugin {
+  constructor({
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
+  }) {
+    this.excludeKeysInStat = statsOutputExcludeKeys || [];
+    this.statsFileName = statsFileName || 'bundle-report-integrity.json';
+    this.statsOptions = Object.assign({}, statsSchema, statsOptions || {});
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tapAsync(pluginName, (stats, callback) => {
+      const statsJson = removeKeysFromObject(stats.toJson(this.statsOptions), this.excludeKeysInStat);
+      this.emitStats(statsJson).on('end', () => {
+        callback();
+      }).on('error', e => {
+        callback(e);
+      });
+    });
+  }
+
+  writeStatsFileInAStream(statsObj) {
+    const {
+      outputPath
+    } = statsObj;
+    const ouputFileName = path.join(outputPath, this.statsFileName);
+    return this.createReadStream(statsObj).pipe(fs.createWriteStream(ouputFileName));
+  }
+
+  createReadStream(statsObj) {
+    const excludeKeys = this.excludeKeysInStat;
+    return new Readable({
+      read() {
+        let isDone = false;
+        const objToStringGen = convertObjectToStringGen(statsObj, excludeKeys);
+
+        while (!isDone) {
+          const {
+            done,
+            value
+          } = objToStringGen.next();
+
+          if (done) {
+            isDone = true;
+            this.push(null);
+          } else {
+            this.push(value);
+          }
+        }
+      }
+
+    });
+  }
+
+  emitStats(statsJson) {
+    return this.writeStatsFileInAStream(statsJson);
+  }
+
+}
+
+module.exports = StatsPlugin;

package/lib/plugins/UnusedFilesFindPlugin.js

@@ -11,6 +11,8 @@ var _fs = _interopRequireDefault(require("fs"));
 
 var _utils = require("../utils");
 
+var _log = require("../utils/log");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let excludeDocsJSON = '{}';
@@ -97,10 +99,10 @@ class UnusedFilesFindPlugin {
       Object.keys(unDocsCompObj).forEach(key => {
         if (unDocsCompObj[key].length > 0) {
           if (key === 'withoutDocs') {
-            (0, _utils.log)('\x1b[36m%s\x1b[0m', '\nPlease write docs file for below componenst :- \n');
+            (0, _log.log)('\x1b[36m%s\x1b[0m', '\nPlease write docs file for below componenst :- \n');
             unDocsCompObj[key].forEach(value => {
               if (!excludeDocsArray.docs.exclude.includes(value)) {
-                (0, _utils.log)('\x1b[33m%s\x1b[0m', `${value}`);
+                (0, _log.log)('\x1b[33m%s\x1b[0m', `${value}`);
               }
             });
           }
@@ -162,10 +164,10 @@ class UnusedFilesFindPlugin {
       });
 
       if (!unusedFiles.length) {
-        (0, _utils.log)('There is no unused files');
+        (0, _log.log)('There is no unused files');
       } else {
         if (this.outputFileName) {
-          (0, _utils.log)(`You can see unused files info from ${_path.default.join(outputPath, this.outputFileName)} path`);
+          (0, _log.log)(`You can see unused files info from ${_path.default.join(outputPath, this.outputFileName)} path`);
           (0, _utils.makeDir)(outputPath);
           (0, _utils.writeFile)(_path.default.join(outputPath, this.outputFileName), JSON.stringify(unusedFiles)).then(() => {
             if (this.sstest) {
@@ -179,7 +181,7 @@ class UnusedFilesFindPlugin {
         unusedFiles.forEach(file => {
           _fs.default.unlinkSync(file);
 
-          (0, _utils.log)(`Deleted - ${file}`);
+          (0, _log.log)(`Deleted - ${file}`);
         });
       }
     });

package/lib/plugins/utils/fileHandling.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
 exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
 
-var _windowsModification = require("../../loaderUtils/windowsModification");
-
 var _ignore = _interopRequireDefault(require("ignore"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const path = require('path');
 
-let aliasNames = {
+const aliasNames = {
   valueReplacer: 'postcss-value-replacer',
   selectorReplace: 'postcss-selector-replace-new',
   hasRTL: 'postcss-rtl',
@@ -48,60 +46,47 @@ unique scenario
 function isFileNameMatchingPattern({
   filename,
   filterObject,
-  plugins
+  plugins,
+  order
 }) {
-  const finalPlugins = []; // console.log(rootDir);
-  // const regex = `^(.+?)${rootDir}?\\\\`;
-
-  const newFilename = path.relative(path.parse(process.cwd()).base, filename); //windowsModificationFile(filename).replace(
-  //   new RegExp(regex, 'gi'),
-  //   ''
-  // );
-  // path.relative('supportapp', 'd:\')
-
-  Object.keys(filterObject).forEach(key => {
-    plugins.forEach(x => {
-      // console.log(key, x.postcssPlugin);
-      if (aliasNames[key] === x.postcssPlugin) {
-        const ig = (0, _ignore.default)({
-          allowRelativePaths: true
-        }).add(filterObject[key]);
+  const pluginObj = {};
+  plugins.forEach(p => {
+    pluginObj[p.postcssPlugin] = p;
+  });
+  const finalPlugins = order.filter(key => {
+    const pluginSpecificFilter = filterObject[key];
+
+    if (!pluginSpecificFilter || pluginSpecificFilter.length === 0) {
+      return true;
+    } // eslint-disable-next-line no-use-before-define
+
+
+    const isMatching = isFilePathMatchingPattern(filename, pluginSpecificFilter);
+    return isMatching;
+  }).map(key => {
+    const p = pluginObj[aliasNames[key]];
+    return p;
+  }); // if unknown key given in plugins and pattern loop will run but post-css plugin won't be available and will be undefined in array
+  // So we do filter as safety measure.
+
+  return finalPlugins.filter(Boolean);
+}
 
-        if (ig.ignores(newFilename)) {
-          // console.log(newFilename);
-          finalPlugins.push(x);
-        }
-      }
-    });
-  }); // console.log(filename);
-  // console.log(finalPlugins);
-  // console.log('----------------------------------------------------------------------')
+function isFilePathMatchingPattern(filePath, patterns) {
+  if (patterns.length === 0) {
+    return true;
+  }
 
-  return finalPlugins; // console.log(filename, filterObject);
+  const ig = (0, _ignore.default)({
+    allowRelativePaths: true
+  }).add(patterns);
+  return ig.ignores(filePath);
 }
 
 function isFileNameMatchingPluginPattern({
   filename,
-  filterArr // =process.cwd()
-
+  filterArr
 }) {
-  // console.log(rootDir);
-  let include = true; // console.log(rootDir);
-  // const regex = `^(.+?)${rootDir}?\\\\`;
-  // console.log(plugin);
-
-  const newFilename = path.relative(path.parse(process.cwd()).base, filename); // const newFilename = windowsModificationFile(filename).replace(
-  //   new RegExp(regex, 'gi'),
-  //   ''
-  // );
-
-  const ig = (0, _ignore.default)({
-    allowRelativePaths: true
-  }).add(filterArr);
-
-  if (!ig.ignores(newFilename)) {
-    include = false;
-  }
-
-  return include;
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename);
+  return isFilePathMatchingPattern(newFilename, filterArr);
 }

package/lib/plugins/variableConvertorUtils.js

@@ -63,7 +63,7 @@ function convertToCalc(pxReplacement, value) {
 
 function convertCalcValue(pxReplacement, parsedValue) {
   Object.keys(parsedValue).forEach(key => {
-    if (parsedValue[key].includes('px')) {
+    if (pxReplacement && parsedValue[key].includes('px')) {
       parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
     }
   });
@@ -95,7 +95,9 @@ function variableConverter(rootOriginal, variables, settingsObject) {
           }
 
           const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+          let valArr = decl.value.split(' ');
+          valArr = valArr.filter(x => x.trim() !== '');
+          valArr = valArr.map(x => x.replace(/\r|\t|\n/gi, '')); // single values are considered in the above array and converted below
 
           valArr.forEach((value, index) => {
             if (value.includes('px')) {

package/lib/postcss-plugins/ValueReplacer.js

@@ -4,29 +4,19 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// module.exports = postcss.plugin('postcss-value-replacer', opts => {
-//   const { plugins } = 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 postcss(plugins)
-//         .process(root, { from: undefined })
-//         .then(handler);
-//     }
-//   };
-// });
-// export default
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
       if (obj.props.indexOf(decl.prop) !== -1) {
-        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
-          decl.value = decl.value.replace(k, obj.values[k]);
+          // if (/^\^.*\$$/gi.test(k)) {
+          if (k.startsWith('^') && k.endsWith('$')) {
+            decl.value = decl.value.replace(new RegExp(k), obj.values[k]);
+          } else {
+            decl.value = decl.value.replace(k, obj.values[k]);
+          }
         }); //decl.value = obj.values[decl.value];
       }
     }); //console.log({root, roots:root+""}, root+"")

package/lib/postcss-plugins/__test__/valueReplacer.spec.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.abc{ cursor : text }`;
+    const cssOutputStr = `.abc{ cursor : --textCursor }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+
+function runValueReplacerForCssString(cssInputStr, cssOptions) {
+  return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
+}

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

@@ -89,11 +89,16 @@ function pxToCalc(value) {
       }
     });
   });
-  console.log(arr.join(' '));
   return arr.join(' ');
 }
 
-const singleConvertor = (value, changeVal, details, range) => {
+const singleConvertor = ({
+  value,
+  changeVal,
+  details,
+  range,
+  allowed
+}) => {
   const {
     path,
     filename,
@@ -107,7 +112,15 @@ const singleConvertor = (value, changeVal, details, range) => {
     }
   }
 
+  if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
+    return decl.value;
+  }
+
   if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    if (value.trim() === '0px') {
+      return '0';
+    }
+
     let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
 
     if (/^-var/.test(retVal)) {
@@ -162,6 +175,7 @@ module.exports = {
     });
     const valRegex = new RegExp(regValStr, 'gi');
     return rootOriginal => {
+      // console.log(rootOriginal.source.input.from, 'passed through variable Plugin');
       rootOriginal.walkRules(rule => {
         // rule.nodes[-1] = {}
         // need map, forEach fine less memory
@@ -200,6 +214,9 @@ module.exports = {
             .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
             // console.log('unit : ');
             // console.log(unit);
+            // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unit, 'case 1');
+            // }
 
             unit.forEach((val, index) => {
               allowed.forEach(alwdVal => {
@@ -219,21 +236,49 @@ module.exports = {
                   unitErrorVal = val;
                 }
               }
-            }); // console.log(allowed, replacements, range)
+            }); // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
+            // }
+            // console.log(allowed, replacements, range)
 
             if (!unitError) {
-              // use variable decl.value.split(' ')
-              if (range) {
+              let calcValue = false;
+
+              if (decl.value.includes('calc')) {
+                decl.value = pxToCalc(decl.value);
+                calcValue = true;
+              } // use variable decl.value.split(' ')
+
+
+              if (range && !calcValue) {
                 // console.log('multiple :', decl.value)
+                const tempVal = decl.value; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
+                // }
+                // if (decl.prop === 'height') {
+                //   console.log('allowed!', decl.prop, decl.value, allowed);
+                // }
+
                 let newVal = '';
-                decl.value.split(' ').forEach(singleVal => {
-                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range)} `;
+                let splitValues = decl.value.split(' ');
+                splitValues = splitValues.filter(val => val.trim() !== '');
+                splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
+                splitValues.forEach(singleVal => {
+                  newVal += `${singleConvertor({
+                    value: singleVal,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  })} `;
                 });
-                decl.value = newVal;
+                decl.value = newVal; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, newVal, 'case 4');
+                // }
               }
             } else {
               if (!decl.value.includes('calc')) {
@@ -272,15 +317,22 @@ module.exports = {
               const valArr = decl.value.split(' ');
               const settings = settingsObject[decl.prop];
               const {
-                range
+                range,
+                allowed
               } = settings;
               const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  const convertedVal = singleConvertor(val, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range);
+                  const convertedVal = singleConvertor({
+                    value: val,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  });
                   return convertedVal ? convertedVal : val;
                 }