@zohodesk/react-cli 0.0.1-beta.17 → 0.0.1-beta.170

package/lib/plugins/ModuleStatsPlugin.js

@@ -1,123 +1,124 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-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 _path = _interopRequireDefault(require("path"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _webpackSources = require("webpack-sources");
 
-var ModuleStatsPlugin = function () {
-  function ModuleStatsPlugin() {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    _classCallCheck(this, ModuleStatsPlugin);
+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;
+  }
 
-    this.options = options;
-    this.options.filename = options.filename || 'moduleStats.js';
+  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}`;
   }
 
-  _createClass(ModuleStatsPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      var _this = this;
-
-      compiler.hooks.emit.tap('ModuleStatsPlugin', function (compilation) {
-        var stats = compilation.getStats().toJson();
-
-        var modules = stats.modules;
-
-        var moduleName = '';
-        var rModuleName = '';
-        var rReferencesArray = [];
-        var rReferencedByArray = [];
-        var data = { results: [] };
-        var moduleDetails = {};
-        var references = '';
-        var referencedBy = '';
-        // let normalizedData = '';
-        var dre = void 0;
-
-        // eslint-disable-next-line guard-for-in
-        for (var i in modules) {
-          moduleName = modules[i].name;
-          if (moduleName.startsWith('./src') && !(moduleName.indexOf('index.js') > -1) && !moduleName.endsWith('css')) {
-            rModuleName = moduleName.substring(moduleName.lastIndexOf('/') + 1, moduleName.lastIndexOf('.'));
-            if (rModuleName.endsWith('docs')) {
-              rModuleName = rModuleName.substring(0, rModuleName.lastIndexOf('.'));
-            }
+  return name;
+};
 
-            if (modules[i].reasons.length > 0) {
-              // eslint-disable-next-line guard-for-in
-              for (var l in modules[i].reasons) {
-                referencedBy = modules[i].reasons[l].moduleName;
-                if (!referencedBy.endsWith('index.js')) {
-                  var referencedby = referencedBy.substring(referencedBy.lastIndexOf('/') + 1, referencedBy.lastIndexOf('.'));
-                  if (referencedby.endsWith('docs')) {
-                    rReferencedByArray.push(referencedby.substring(0, referencedby.lastIndexOf('.')));
-                  } else {
-                    rReferencedByArray.push(referencedBy.substring(referencedBy.lastIndexOf('/') + 1, referencedBy.lastIndexOf('.')));
-                  }
-                }
-              }
-            }
+class ModuleStatsPlugin {
+  constructor(options = {}) {
+    this.options = options;
+    this.options.filename = options.filename || 'js/moduleStats.js';
+  }
 
-            for (var module in modules) {
-              if (modules[module].name.startsWith('./src')) {
-                for (var reason in modules[module].reasons) {
-                  if (moduleName === modules[module].reasons[reason].moduleName && !(modules[module].name.indexOf('css') > -1)) {
-                    if (!modules[module].name.endsWith('react.js') && !(modules[module].name.indexOf('react-dom') > -1) && !modules[module].name.endsWith('.png')) {
-                      references = modules[module].name;
-                      rReferencesArray.push(references.substring(references.lastIndexOf('/') + 1, references.lastIndexOf('.')));
-                    }
-                  }
+  apply(compiler) {
+    compiler.hooks.emit.tap('ModuleStatsPlugin', compilation => {
+      let stats = compilation.getStats().toJson();
+      let results = {};
+      let {
+        modules
+      } = stats;
+
+      for (let module of modules) {
+        let {
+          name,
+          reasons
+        } = module;
+
+        if (isValidModule(name)) {
+          let references = new Set();
+          let referencedby = new Set();
+          let docsName;
+          let fileName;
+          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;
                 }
               }
-            }
-
-            rReferencesArray = rReferencesArray.filter(function (item, index, inputArray) {
-              return inputArray.indexOf(item) === index;
             });
+          });
+          let currentModuleName = name;
+
+          if (Array.isArray(reasons)) {
+            for (let reason of reasons) {
+              let {
+                moduleName
+              } = reason;
+
+              if (isValidModule(moduleName)) {
+                let reasonedModuleName = moduleName;
+                referencedby.add(reasonedModuleName);
+              }
+            }
+          }
 
-            moduleDetails = {
-              name: rModuleName,
-              references: rReferencesArray,
-              referencedby: rReferencedByArray
-            };
+          for (let subModule of modules) {
+            let {
+              name: subModuleName,
+              reasons
+            } = subModule;
 
-            dre = '';
+            if (isValidModule(subModuleName)) {
+              let currentModuleName = subModuleName;
 
-            data.results.push(moduleDetails);
-            moduleDetails = {};
-            rReferencesArray = [];
-            rReferencedByArray = [];
-            referencedBy = '';
-            references = '';
+              if (Array.isArray(reasons)) {
+                for (let reason of reasons) {
+                  let {
+                    moduleName: reasonedModuleName
+                  } = reason;
 
-            //eslint-disable-next-line no-loop-func
-            data.results.forEach(function (mod) {
-              dre += '\'' + mod.name + '\':' + JSON.stringify(mod) + ',';
-            });
+                  if (name === reasonedModuleName) {
+                    references.add(currentModuleName);
+                  }
+                }
+              }
+            }
           }
-        }
 
-        var dataResult = '{' + dre + '}';
-        var mResult = 'let mdata = ' + dataResult;
+          results[currentModuleName] = {
+            name: currentModuleName,
+            references: Array.from(references),
+            referencedby: Array.from(referencedby),
+            docsName: docsName ? docsName : '',
+            fileName: name ? name : currentModuleName
+          };
+        }
+      }
 
-        compilation.assets[_this.options.filename] = {
-          source: function source() {
-            return mResult;
-          },
-          size: function size() {
-            return mResult.length;
-          }
-        };
-      });
-    }
-  }]);
+      compilation.assets[this.options.filename] = new _webpackSources.RawSource(JSON.stringify(results));
+    });
+  }
 
-  return ModuleStatsPlugin;
-}();
+}
 
 exports.default = ModuleStatsPlugin;

package/lib/plugins/OptimizeJSPlugin.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _optimizeJs = _interopRequireDefault(require("optimize-js"));
+
+var _webpackSources = require("webpack-sources");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class OptimizeJSPlugin {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('OptimizeJSPlugin', compilation => {
+      compilation.hooks.afterOptimizeChunks.tap('OptimizeJSPlugin', chunks => {
+        chunks.forEach(chunk => {
+          const files = chunk.files.map(file => file);
+          files.filter(file => /\.js$/.test(file)).forEach(file => {
+            try {
+              const asset = compilation.assets[file].source();
+              const result = (0, _optimizeJs.default)(asset);
+              compilation.assets[file] = new _webpackSources.RawSource(result);
+            } catch (e) {
+              compilation.errors.push(e);
+            }
+          });
+        });
+      });
+    });
+  }
+
+}
+
+var _default = OptimizeJSPlugin;
+exports.default = _default;

package/lib/plugins/PublicPathCallbackPlugin.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const MODULE_TYPE = 'css/mini-extract';
+
+class PublicPathCallbackPlugin {
+  constructor({
+    callback
+  }) {
+    this.publicPathCallback = callback;
+  }
+
+  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;
+  }
+
+  needChunkOnDemandLoadingCode(chunk) {
+    for (const chunkGroup of chunk.groupsIterable) {
+      if (chunkGroup.getNumberOfChildren() > 0) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('PublicPathCallbackPlugin', compilation => {
+      compilation.mainTemplate.hooks.requireEnsure.tap('PublicPathCallbackPlugin', (source, chunk) => {
+        const chunkMap = this.getCssChunkObject(chunk);
+
+        if (Object.keys(chunkMap).length > 0) {
+          return source.replace('__webpack_require__.p', `${this.publicPathCallback}("css")`);
+        }
+      });
+    });
+    compiler.hooks.compilation.tap('PublicPathCallbackPlugin', compilation => {
+      compilation.mainTemplate.hooks.localVars.tap('PublicPathCallbackPlugin', (source, chunk) => {
+        if (this.needChunkOnDemandLoadingCode(chunk)) {
+          return source.replace('__webpack_require__.p', `${this.publicPathCallback}("js")`);
+        }
+      });
+    });
+  }
+
+}
+
+var _default = PublicPathCallbackPlugin;
+exports.default = _default;

package/lib/plugins/PublicPathChangePlugin.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _webpackSources = require("webpack-sources");
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MODULE_TYPE = 'css/mini-extract';
+let {
+  chunkSplitEnable
+} = (0, _utils.getOptions)().i18n || {};
+
+let filenameParser = filename => {
+  let filepaths = filename.split('/');
+  let hashedName = filepaths[filepaths.length - 1];
+
+  let {
+    name,
+    ext
+  } = _path.default.parse(hashedName);
+
+  let nameparts = name.split('.');
+  return {
+    name: nameparts.slice(0, nameparts.length - 1).join('.') + ext,
+    hashedName,
+    ext
+  };
+};
+
+class PublicPathChangePlugin {
+  constructor({
+    publicPaths,
+    resourceHints
+  }) {
+    if (Array.isArray(publicPaths)) {
+      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;
+  }
+
+  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;
+  }
+
+  needChunkOnDemandLoadingCode(chunk) {
+    for (const chunkGroup of chunk.groupsIterable) {
+      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);
+        }
+
+        if (isValidFile) {
+          ruleMapping[filename] = typeof pattern !== 'string' ? pattern : {};
+          break;
+        }
+      }
+
+      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'}'`} />`;
+    }
+
+    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);
+                }
+              }
+
+              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__' ? filename : `${cdn}/${filename}`] = new _webpackSources.RawSource(source);
+          });
+        }
+      });
+    });
+  }
+
+}
+
+var _default = PublicPathChangePlugin;
+exports.default = _default;