@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.162

package/lib/plugins/PublicPathChangePlugin.js

@@ -1,213 +1,226 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+var _path = _interopRequireDefault(require("path"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _webpackSources = require("webpack-sources");
 
-var _path = require('path');
-
-var _path2 = _interopRequireDefault(_path);
-
-var _webpackSources = require('webpack-sources');
-
-var _utils = require('../utils');
+var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+const MODULE_TYPE = 'css/mini-extract';
+let {
+  chunkSplitEnable
+} = (0, _utils.getOptions)().i18n || {};
 
-var MODULE_TYPE = 'css/mini-extract';
+let filenameParser = filename => {
+  let filepaths = filename.split('/');
+  let hashedName = filepaths[filepaths.length - 1];
 
-var filenameParser = function filenameParser(filename) {
-  var filepaths = filename.split('/');
-  var hashedName = filepaths[filepaths.length - 1];
+  let {
+    name,
+    ext
+  } = _path.default.parse(hashedName);
 
-  var _path$parse = _path2.default.parse(hashedName),
-      name = _path$parse.name,
-      ext = _path$parse.ext;
-
-  var nameparts = name.split('.');
+  let nameparts = name.split('.');
   return {
     name: nameparts.slice(0, nameparts.length - 1).join('.') + ext,
-    hashedName: hashedName
+    hashedName,
+    ext
   };
 };
 
-var PublicPathChangePlugin = function () {
-  function PublicPathChangePlugin(_ref) {
-    var publicPaths = _ref.publicPaths;
-
-    _classCallCheck(this, PublicPathChangePlugin);
-
+class PublicPathChangePlugin {
+  constructor({
+    publicPaths,
+    resourceHints
+  }) {
     if (Array.isArray(publicPaths)) {
-      var _publicPaths = publicPaths,
-          _publicPaths2 = _slicedToArray(_publicPaths, 4),
-          js = _publicPaths2[0],
-          css = _publicPaths2[1],
-          image = _publicPaths2[2],
-          font = _publicPaths2[3];
-
-      publicPaths = { __REACT_CLI_PUBLIC_PATHS__: { js: js, css: css, image: image, font: font } }; //eslint-disable-line
+      let [js, css, image, font, i18njs] = publicPaths; //eslint-disable-next-line
+
+      publicPaths = {
+        __REACT_CLI_PUBLIC_PATHS__: {
+          js,
+          css,
+          image,
+          font,
+          i18njs
+        }
+      };
     }
+
     this.publicPaths = publicPaths;
+    this.resourceHints = resourceHints;
   }
 
-  _createClass(PublicPathChangePlugin, [{
-    key: 'getCssChunkObject',
-    value: function getCssChunkObject(mainChunk) {
-      var obj = {};
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = mainChunk.getAllAsyncChunks()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var chunk = _step.value;
-          var _iteratorNormalCompletion2 = true;
-          var _didIteratorError2 = false;
-          var _iteratorError2 = undefined;
-
-          try {
-            for (var _iterator2 = chunk.modulesIterable[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var module = _step2.value;
-
-              if (module.type === MODULE_TYPE) {
-                obj[chunk.id] = 1;
-                break;
-              }
-            }
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                _iterator2.return();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
+  getCssChunkObject(mainChunk) {
+    const obj = {};
+
+    for (const chunk of mainChunk.getAllAsyncChunks()) {
+      for (const module of chunk.modulesIterable) {
+        if (module.type === MODULE_TYPE) {
+          obj[chunk.id] = 1;
+          break;
         }
       }
+    }
+
+    return obj;
+  }
 
-      return obj;
+  needChunkOnDemandLoadingCode(chunk) {
+    for (const chunkGroup of chunk.groupsIterable) {
+      if (chunkGroup.getNumberOfChildren() > 0) {
+        return true;
+      }
     }
-  }, {
-    key: 'needChunkOnDemandLoadingCode',
-    value: function needChunkOnDemandLoadingCode(chunk) {
-      var _iteratorNormalCompletion3 = true;
-      var _didIteratorError3 = false;
-      var _iteratorError3 = undefined;
-
-      try {
-        for (var _iterator3 = chunk.groupsIterable[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-          var chunkGroup = _step3.value;
-
-          if (chunkGroup.getNumberOfChildren() > 0) {
-            return true;
-          }
+
+    return false;
+  }
+
+  getResourceHints(resourceHints, manifest, publicPaths) {
+    let ruleMapping = {};
+    let validFiles = Object.keys(manifest).filter(filename => {
+      let isValidFile = false;
+
+      for (let pattern of resourceHints) {
+        if (typeof pattern === 'string') {
+          isValidFile = new RegExp(pattern).test(filename);
+        } else {
+          isValidFile = new RegExp(pattern.pattern).test(filename);
         }
-      } catch (err) {
-        _didIteratorError3 = true;
-        _iteratorError3 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion3 && _iterator3.return) {
-            _iterator3.return();
-          }
-        } finally {
-          if (_didIteratorError3) {
-            throw _iteratorError3;
-          }
+
+        if (isValidFile) {
+          ruleMapping[filename] = typeof pattern !== 'string' ? pattern : {};
+          break;
         }
       }
 
-      return false;
+      return isValidFile;
+    });
+    let resourceHintsContent = '';
+
+    for (let file of validFiles) {
+      let {
+        fileType,
+        filename
+      } = manifest[file];
+      let rules = ruleMapping[file];
+      resourceHintsContent += `<link rel=${rules.hint || 'preload'} href='${publicPaths[fileType] + filename}'${rules.hint === 'prefetch' ? '' : `as='${fileType}' crossorigin='${rules.crossorigin || 'false'}'`} />`;
     }
-  }, {
-    key: 'apply',
-    value: function apply(compiler) {
-      var _this = this;
-
-      compiler.hooks.thisCompilation.tap('PublicPathChangePlugin', function (compilation) {
-        compilation.mainTemplate.hooks.requireEnsure.tap('PublicPathChangePlugin', function (source, chunk) {
-          var chunkMap = _this.getCssChunkObject(chunk);
-          if (Object.keys(chunkMap).length > 0) {
-            return source.replace('__webpack_require__.p', '__REACT_CLI_CSS_PUBLIC_PATH__');
-          }
-        });
-      });
 
-      compiler.hooks.compilation.tap('PublicPathChangePlugin', function (compilation) {
-        compilation.mainTemplate.hooks.localVars.tap('PublicPathChangePlugin', function (source, chunk) {
-          if (_this.needChunkOnDemandLoadingCode(chunk)) {
-            return source.replace('__webpack_require__.p', '__REACT_CLI_JS_PUBLIC_PATH__');
-          }
-        });
+    return resourceHintsContent;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('PublicPathChangePlugin', compilation => {
+      compilation.mainTemplate.hooks.requireEnsure.tap('PublicPathChangePlugin', (source, chunk) => {
+        const chunkMap = this.getCssChunkObject(chunk);
+
+        if (Object.keys(chunkMap).length > 0) {
+          return source.replace('__webpack_require__.p', '__REACT_CLI_CSS_PUBLIC_PATH__');
+        }
+      });
+    });
+    compiler.hooks.compilation.tap('PublicPathChangePlugin', compilation => {
+      compilation.mainTemplate.hooks.localVars.tap('PublicPathChangePlugin', (source, chunk) => {
+        if (this.needChunkOnDemandLoadingCode(chunk)) {
+          return source.replace('__webpack_require__.p', '__REACT_CLI_JS_PUBLIC_PATH__');
+        }
       });
+    });
+    compiler.hooks.emit.tap('PublicPathChangePlugin', compilation => {
+      let cdns = Object.keys(this.publicPaths);
+      let stats = compilation.getStats().toJson();
+      let manifest = stats.assets.reduce((files, asset) => {
+        let {
+          name: filename
+        } = asset;
+        let fileType = (0, _utils.getFileType)(filename);
+
+        if (fileType === 'image' || fileType === 'font') {
+          let {
+            name,
+            hashedName,
+            ext
+          } = filenameParser(filename);
+          files[name] = {
+            hashedName,
+            ext,
+            fileType,
+            filename
+          };
+        }
+
+        return files;
+      }, {});
+      Object.keys(compilation.assets).forEach(filename => {
+        if (Array.isArray(cdns)) {
+          cdns.forEach(cdn => {
+            let source = compilation.assets[filename].source();
+
+            if (/\.css$/g.test(filename)) {
+              let publicPaths = this.publicPaths[cdn];
+              source = (0, _utils.cssUrlReplacer)(source, publicPaths, manifest, cdn);
+            } else if (/\.js$/g.test(filename)) {
+              let {
+                js,
+                css,
+                image,
+                font
+              } = this.publicPaths[cdn];
+
+              if (typeof source === 'string') {
+                source = source.replace(/__REACT_CLI_JS_PUBLIC_PATH__/g, `"${js}"`);
+                source = source.replace(/__REACT_CLI_CSS_PUBLIC_PATH__/g, `"${css}"`);
+                source = source.replace(/__REACT_CLI_IMAGE_PUBLIC_PATH__/g, `"${image}"`);
+                source = source.replace(/__REACT_CLI_FONT_PUBLIC_PATH__/g, `"${font}"`);
+              }
+            } else if (/\.html$/g.test(filename)) {
+              let {
+                js,
+                css,
+                i18njs
+              } = this.publicPaths[cdn];
+              source = source.replace(new RegExp('<script defer src="([^"]*)"', 'g'), (match, arg) => match.replace(arg, js + arg));
+              source = source.replace(new RegExp('<link href="([^"]*)"', 'g'), (match, arg) => match.replace(arg, css + arg));
+              let [i18nStr] = source.match(/<!--I18nInfoToServer(.*?)I18nInfoToServer-->/gm);
+
+              if (i18nStr && !chunkSplitEnable) {
+                try {
+                  let [i18nObj] = i18nStr.match(/{(.*?)}/gm);
+                  i18nObj = JSON.parse(JSON.parse(JSON.stringify(i18nObj)));
+                  Object.keys(i18nObj).forEach(locale => {
+                    i18nObj[locale] = i18njs + i18nObj[locale];
+                  });
+                  source = source.replace(/<!--I18nInfoToServer(.*?)I18nInfoToServer-->/gm, `<!--I18nInfoToServer${JSON.stringify(i18nObj)}I18nInfoToServer-->`);
+                } catch (e) {
+                  // eslint-disable-next-line no-console
+                  console.warn('may be I18nInfoToServer inside object was not valid make sure it is parseable by JSON.parse'); // eslint-disable-next-line no-console
+
+                  console.warn(e);
+                }
+              }
 
-      compiler.hooks.emit.tap('PublicPathChangePlugin', function (compilation) {
-        var cdns = Object.keys(_this.publicPaths);
-        var stats = compilation.getStats().toJson();
-
-        var manifest = stats.assets.reduce(function (files, asset) {
-          var filename = asset.name;
-
-          var fileType = (0, _utils.getFileType)(filename);
-          if (fileType === 'image' || fileType === 'font') {
-            var _filenameParser = filenameParser(filename),
-                name = _filenameParser.name,
-                hashedName = _filenameParser.hashedName;
-
-            files[name] = hashedName;
-          }
-          return files;
-        }, {});
-
-        Object.keys(compilation.assets).forEach(function (filename) {
-          var source = compilation.assets[filename].source();
-          if (Array.isArray(cdns)) {
-            cdns.forEach(function (cdn) {
-              if (/\.css$/g.test(filename)) {
-                var publicPaths = _this.publicPaths[cdn];
-                source = (0, _utils.cssUrlReplacer)(source, publicPaths, manifest);
-              } else if (/\.js$/g.test(filename)) {
-                var _publicPaths$cdn = _this.publicPaths[cdn],
-                    js = _publicPaths$cdn.js,
-                    css = _publicPaths$cdn.css;
-
-                source = source.replace(/__REACT_CLI_JS_PUBLIC_PATH__/g, '"' + js + '"');
-                source = source.replace(/__REACT_CLI_CSS_PUBLIC_PATH__/g, '"' + css + '"');
+              if (Array.isArray(this.resourceHints) && this.resourceHints.length) {
+                let resourceHintsContent = this.getResourceHints(this.resourceHints, manifest, this.publicPaths[cdn]);
+                source = source.replace(/<\/head>/g, `${resourceHintsContent}</head>`);
               }
-              compilation.assets['' + (cdn === '__REACT_CLI_PUBLIC_PATHS__' ? '' : cdn + '/') + (cdn === '__REACT_CLI_PUBLIC_PATHS__' ? filename : filename.split('/').slice(1).join('/'))] = new _webpackSources.RawSource(source);
-            });
-          }
-        });
+            }
+
+            compilation.assets[cdn === '__REACT_CLI_PUBLIC_PATHS__' ? filename : `${cdn}/${filename}`] = new _webpackSources.RawSource(source);
+          });
+        }
       });
-    }
-  }]);
+    });
+  }
 
-  return PublicPathChangePlugin;
-}();
+}
 
-exports.default = PublicPathChangePlugin;
+var _default = PublicPathChangePlugin;
+exports.default = _default;

package/lib/plugins/ReportGeneratePlugin.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _redis = _interopRequireDefault(require("redis"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let options = (0, _utils.getOptions)();
+let {
+  app: {
+    branch,
+    redisHost,
+    redisPort
+  }
+} = options;
+
+class reportGeneratePlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync('reportGeneratePlugin', (compilation, callback) => {
+      function formatBytes(bytes) {
+        if (bytes) {
+          let isNegative;
+
+          if (bytes < 0) {
+            bytes = bytes * -1; //eslint-disable-line
+
+            isNegative = true;
+          }
+
+          if (bytes < 1024) {
+            if (isNegative) {
+              return `- ${bytes} Bytes`;
+            }
+
+            return `${bytes} Bytes`;
+          } else if (bytes < 1048576) {
+            if (isNegative) {
+              return `- ${(bytes / 1024).toFixed(3)} KB`;
+            }
+
+            return `${(bytes / 1024).toFixed(3)} KB`;
+          } else if (bytes < 1073741824) {
+            if (isNegative) {
+              return `- ${(bytes / 1048576).toFixed(3)} MB`;
+            }
+
+            return `${(bytes / 1048576).toFixed(3)} MB`;
+          }
+
+          if (isNegative) {
+            return `- ${(bytes / 1073741824).toFixed(3)} GB`;
+          }
+
+          return `${(bytes / 1073741824).toFixed(3)} GB`;
+        }
+      }
+
+      let client = _redis.default.createClient(redisPort, redisHost);
+
+      client.on('connect', () => {
+        (0, _utils.log)('Redis client connected');
+      });
+      client.on('error', err => {
+        (0, _utils.log)(`Something went wrong ${err}`);
+      });
+
+      if (_fs.default.existsSync(_path.default.resolve(process.cwd(), 'build', 'stats.json'))) {
+        let statsJSON = _fs.default.readFileSync(_path.default.resolve(process.cwd(), 'build', 'stats.json'), 'utf8');
+
+        statsJSON = JSON.parse(statsJSON);
+        let finalObj = {};
+        let branchName = branch ? branch : (0, _utils.getCurrentBranch)();
+        (0, _utils.log)(branchName);
+        statsJSON.assets.forEach(assetObj => {
+          let nameSplitList = assetObj.name.split('/')[assetObj.name.split('/').length - 1].split('.'); // eslint-disable-line
+
+          let [, hash] = nameSplitList;
+          let name = `${nameSplitList[0]}.${nameSplitList[2]}`;
+          let {
+            size
+          } = assetObj;
+          let tempObject = {
+            name,
+            hash,
+            size
+          }; // eslint-disable-next-line
+
+          if (!finalObj.hasOwnProperty(name)) {
+            finalObj[name] = tempObject;
+          }
+        });
+        client.exists(branchName, (err, bool) => {
+          if (!bool) {
+            client.set(branchName, JSON.stringify(finalObj), _redis.default.print);
+            client.quit();
+          } else {
+            let reportObj = {
+              increased: [],
+              hashChanged: [],
+              branchName
+            };
+            client.get(branchName, (err, reply) => {
+              if (err) {
+                (0, _utils.log)(err);
+              } else {
+                reply = JSON.parse(reply); // eslint-disable-line
+
+                Object.keys(reply).forEach(fileName => {
+                  // eslint-disable-next-line
+                  if (finalObj.hasOwnProperty(fileName)) {
+                    if (parseInt(reply[fileName].size) < parseInt(finalObj[fileName].size)) {
+                      reportObj.increased.push({
+                        name: fileName,
+                        size: {
+                          old: formatBytes(reply[fileName].size),
+                          new: formatBytes(finalObj[fileName].size),
+                          diff: formatBytes(parseInt(finalObj[fileName].size) - parseInt(reply[fileName].size))
+                        }
+                      });
+                    }
+
+                    if (reply[fileName].hash !== finalObj[fileName].hash) {
+                      reportObj.hashChanged.push({
+                        name: fileName,
+                        hash: {
+                          old: reply[fileName].hash,
+                          new: finalObj[fileName].hash
+                        }
+                      });
+                    }
+                  }
+                });
+                let json = JSON.stringify(reportObj);
+
+                _fs.default.writeFile(_path.default.resolve(process.cwd(), 'build', 'buildtrack.js'), `let statsJson=${json}`, err => {
+                  if (err) {
+                    throw err;
+                  }
+
+                  (0, _utils.log)('Stats Json generated!');
+                });
+              }
+            });
+            client.set(branchName, JSON.stringify(finalObj), _redis.default.print); // fs.copyFileSync(
+            //   path.resolve(
+            //     process.cwd(),
+            //     'node_modules',
+            //     '@zohodesk',
+            //     'react-cli',
+            //     'lib',
+            //     'utils',
+            //     'buildstats.html'
+            //   ),
+            //   path.resolve(process.cwd(), 'build', 'buildstats.html')
+            // );
+
+            client.quit();
+            callback && callback();
+          }
+
+          if (err) {
+            (0, _utils.log)(err);
+          }
+        });
+      }
+    });
+  }
+
+}
+
+exports.default = reportGeneratePlugin;

package/lib/plugins/RequireVariablePublicPlugin.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const {
+  Template
+} = require('webpack');
+
+const pluginName = 'RequireVariablePublicPlugin';
+
+class RequireVariablePublicPlugin {
+  constructor(options) {
+    this.requireFuncName = options.requireFuncName;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, ({
+      mainTemplate
+    }) => {
+      mainTemplate.hooks.requireExtensions.tap(pluginName, source => Template.asString([source, '', `window[${JSON.stringify(this.requireFuncName)}] = ${mainTemplate.requireFn};`]));
+    });
+  }
+
+}
+
+var _default = RequireVariablePublicPlugin;
+exports.default = _default;