@zohodesk/react-cli 1.1.5-exp.2 → 1.1.5-exp.4

package/README.md

@@ -44,12 +44,12 @@ Now to run app
 
 # Change Logs
 
-# 1.1.5-exp.2
+# 1.1.5-exp.4
+- added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook.
 
-**Issue Fix**
-- local install react-cli spawnSync Error fix in npm 8
-
-# 1.1.5
+# 1.1.5-exp.3
+- added options to split chunks base config
+- added support for passing custom chunks split logic as function.
 
 **Issue Fix**
 
@@ -62,11 +62,6 @@ Now to run app
 - `0px` variable value conversion issue fixed
 - pattern exclude for postcss plugins case fixed
 
-# 1.1.3
-
-**Issue Fix**
-- local install react-cli spawnSync Error fix
-
 # 1.1.2
 
 **Issue Fix**

package/docs/CustomChunks.md

@@ -4,17 +4,17 @@ In react-cli we provide options to create custom chunks.
 This Custom Chunk Option is array of Object
 that Object keys are
 
-- `pattern` regex pattern as string
-- `name` chunk name
-- `size` is count which is minmum chunk dublicated or need in chunks
+- `pattern` **{ String | Function }** regex pattern as string and custom logic to split chunks can be defined using function
+- `name` **{ String }** chunk name
+- `size` **{ Number }** is count which is minimum chunk duplicated or need in chunks
 
 > Since 0.0.1-exp.164.1
 
 extra features in custom chunks :-
 for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) webpack
 
-- `minChunks`: `minChunks` is alies of `size` default value is `2`,
-- `rules`: `rules` is same as `pattern` with some easy hooks
+- `minChunks`: `minChunks` is alias of `size` default value is `2`,
+- `rules`: `rules` is same as `pattern` with some easy hooks **(removed after v1.1.5)**
   - use `/` for both windows and linux we will replace internally
   - for `.*` we need to use `*`
   - we can consider rules as regex when the `rules-string` has any of these `*`, `^`, `$`. So if you want regex then kindly use `*` in your `rules-string` for force regex
@@ -23,4 +23,4 @@ for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-
 - `enforce`: enforce default value is true,
 - `maxSize`: maxSize, default value is 0,
 - `minSize`: minSize, default value is 20000,
-  includeDepenency: includeDepenency default value is false
+  includeDependency: includeDependency default value is false

package/lib/common/splitChunks.js

@@ -15,35 +15,53 @@ var _testPattern = require("./testPattern");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let isWindows = _os.default.platform().toLowerCase() === 'win32';
-let ps = _path.default.sep;
-let options = (0, _utils.getOptions)();
-let {
+const isWindows = _os.default.platform().toLowerCase() === 'win32';
+const ps = _path.default.sep;
+const options = (0, _utils.getOptions)();
+const {
   app: {
     vendorExclude,
     customChunks,
-    vendorInclude
+    vendorInclude,
+    customChunksBaseConfig
   }
 } = options;
+const reactBundle = ['react', 'react-dom', 'react-redux', 'react-transition-group', 'scheduler', 'prop-types'];
 
-let isVendor = function isVendor(module) {
-  let {
+const isVendor = function isVendor(module) {
+  const {
     userRequest
   } = module;
-  let excludeList = ['script-loader', 'raw-loader', 'react', 'react-dom'];
+  let excludeList = ['script-loader', 'raw-loader', ...reactBundle];
   excludeList = [...excludeList, ...vendorExclude];
   return userRequest && (vendorInclude.some(item => userRequest.indexOf(item) !== -1) || userRequest.indexOf('node_modules') >= 0 && userRequest.endsWith('.css') === false && userRequest.endsWith('publicPathConfig.js') === false && excludeList.every(item => userRequest.indexOf(`node_modules${ps}${item}${ps}`) === -1));
 };
 
-let isReact = module => {
-  let {
+const isReact = module => {
+  const {
     userRequest
   } = module;
-  let reactBundle = ['react', 'react-dom'];
   return userRequest && reactBundle.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
 };
 
-let defaultChunks = {
+function rulesMatcher(pattern) {
+  if (typeof pattern === 'function') {
+    return pattern;
+  }
+
+  if (Array.isArray(pattern)) {
+    return ({
+      userRequest
+    }) => (0, _testPattern.testPattern)(userRequest, pattern);
+  }
+
+  return new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern);
+}
+
+const baseSplitChunkConfig = Object.assign({
+  minSize: 12000
+}, customChunksBaseConfig);
+const specificCacheGroupConfig = {
   'react.vendor': {
     name: 'react.vendor',
     chunks: 'all',
@@ -63,43 +81,36 @@ let defaultChunks = {
     priority: -10
   }
 };
-let customChunksConfig = {};
+const customChunksConfig = {};
 customChunks.map((obj, index) => ({
   name: obj.name,
-  pattern: obj.pattern,
+  chunks: obj.chunks || 'all',
   minChunks: obj.minChunks || obj.size || 2,
-  rules: obj.rules,
-  // includeDepenency: obj.includeDepenency || false,
+  pattern: obj.pattern,
   priority: obj.priority || -10 * (index + 2),
   enforce: obj.enforce || true,
-  maxSize: obj.maxSize,
-  // || 0,
   minSize: obj.minSize,
   // || 20000,
-  chunks: obj.chunks || 'all'
-})).map(({
+  maxSize: obj.maxSize,
+  // || 0,
+  reuseExistingChunk: obj.reuseExistingChunk || false,
+  automaticNamePrefix: obj.automaticNamePrefix || null,
+  cacheGroupName: obj.cacheGroupName || obj.name
+})).forEach(({
   name,
-  pattern,
+  chunks = 'all',
   minChunks,
-  rules,
+  pattern,
   priority,
-  // includeDepenency,
   enforce,
   minSize,
   maxSize,
-  chunks = 'all'
+  reuseExistingChunk,
+  automaticNamePrefix,
+  cacheGroupName
 }) => {
-  let obj = {
-    name,
-    test: rules ? m => {
-      const {
-        userRequest
-      } = m;
-      return (0, _testPattern.testPattern)(userRequest, rules); // return (
-      //   pkgs.some(p => isRelated(userRequest, p)) ||
-      //   (includeDepenency && isDependency(m, pkgs))
-      // );
-    } : new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
+  const obj = {
+    test: rulesMatcher(pattern),
     chunks,
     enforce,
     minChunks,
@@ -114,13 +125,25 @@ customChunks.map((obj, index) => ({
     obj.maxSize = maxSize;
   }
 
-  return customChunksConfig[name] = obj;
+  if (name) {
+    obj.name = name;
+  }
+
+  if (reuseExistingChunk) {
+    obj.reuseExistingChunk = reuseExistingChunk;
+  }
+
+  if (automaticNamePrefix) {
+    obj.automaticNamePrefix = automaticNamePrefix;
+  }
+
+  customChunksConfig[cacheGroupName] = obj;
 });
-var _default = {
-  minSize: 12000,
+const splitChunkConfig = Object.assign({}, baseSplitChunkConfig, {
   cacheGroups: Object.assign({
     default: false,
     vendors: false
-  }, defaultChunks, customChunksConfig)
-};
+  }, specificCacheGroupConfig, customChunksConfig)
+});
+var _default = splitChunkConfig;
 exports.default = _default;

package/lib/common/testPattern.js

@@ -13,25 +13,25 @@ var _path = require("path");
 const isWindows = _path.sep !== '/'; // this function  will  return true if pattern matched
 
 function _testPattern(req, pattern) {
-  let modifyedPattern = pattern;
+  let modifiedPattern = pattern;
 
-  if (/[*.$^]/.test(modifyedPattern)) {
+  if (/[*.$^]/.test(modifiedPattern)) {
     if (isWindows) {
-      // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-      modifyedPattern = modifyedPattern.replace(/\//g, '\\\\');
+      // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+      modifiedPattern = modifiedPattern.replace(/\//g, '\\\\');
     }
 
-    modifyedPattern = modifyedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
-    const re = new RegExp(modifyedPattern);
+    modifiedPattern = modifiedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+    const re = new RegExp(modifiedPattern);
     return re.test(req);
   }
 
   if (isWindows) {
-    // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-    modifyedPattern = modifyedPattern.replace(/\//g, '\\');
+    // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+    modifiedPattern = modifiedPattern.replace(/\//g, '\\');
   }
 
-  return req.indexOf(modifyedPattern) !== -1;
+  return req.indexOf(modifiedPattern) !== -1;
 }
 
 function testPattern(req, pattern) {

package/lib/plugins/ResourceHintsPlugin.js

@@ -19,7 +19,7 @@ class ResourceHintsPlugin {
       mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk, hash) => {
         const idNameMap = chunk.getChunkMaps().name;
         const nameIdMap = {};
-        let needsMap = false;
+        let needsMap = true;
 
         for (const key in idNameMap) {
           if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
@@ -32,7 +32,9 @@ 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, '', `${mainTemplate.requireFn}.getChunkIds = function getChunkIds(chunkId) {`, Template.indent((needsMap ? [`const nameToChunkIdMap = ${JSON.stringify(nameIdMap)}`, 'const chunkNames = Object.keys(nameToChunkIdMap)'] : []).concat(['return chunkNames.filter(chunkName => chunkId.test(chunkName)).map(chunkName => nameToChunkIdMap[chunkName]);'])), '}', `// Prefetch a chunk (${pluginName})`, `${mainTemplate.requireFn}.pfc = function prefetchChunk(chunkId) {`, Template.indent([`let chunkIds = ${mainTemplate.requireFn}.getChunkIds(new RegExp(chunkId, 'i'))`, `chunkIds.forEach(idOfAChunk => {
+                ${mainTemplate.requireFn}.e(idOfAChunk);
+              })`]), '};',
         /*
           (needsMap
             ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`]
@@ -53,7 +55,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(new RegExp('^' + 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/schemas/index.js

@@ -333,6 +333,7 @@ var _default = {
       inject: true
     },
     removePropTypes: false,
+    customChunksBaseConfig: {},
     customChunks: [{
       name: 'styles',
       pattern: '\\.css$'

package/lib/utils/getOptions.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _child_process = require("child_process");
 
-var _fs = _interopRequireDefault(require("fs"));
+var _fs = _interopRequireWildcard(require("fs"));
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -15,6 +15,10 @@ var _schemas = _interopRequireDefault(require("../schemas"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 // import { argv } from 'process';
 const args = process.argv.slice(2); // console.log('argv', argv);
 
@@ -183,8 +187,9 @@ function deprecationSupport(options) {
   Object.keys(options.app.patterns).forEach(key => {
     if (options.app.exclude[key] && options.app.patterns[key].length === 0) {
       let tempArr = options.app.exclude[key];
-      tempArr = tempArr.map(x => {
-        x = x.replace(/\//gi, _path.default.sep);
+      tempArr = tempArr.map(_x => {
+        const x = _x.replace(/\//gi, _path.default.sep);
+
         return `!**${x[0] === _path.default.sep || x[0] === '@' ? '' : _path.default.sep}${x}${x[x.length - 1] === _path.default.sep ? '' : _path.default.sep}**`;
       });
       options.app.patterns[key] = tempArr;
@@ -193,8 +198,9 @@ function deprecationSupport(options) {
   Object.keys(options.docs.patterns).forEach(key => {
     if (options.docs.exclude[key] && options.docs.patterns[key].length === 0) {
       let tempArr = options.docs.exclude[key];
-      tempArr = tempArr.map(x => {
-        x = x.replace(/\//gi, _path.default.sep);
+      tempArr = tempArr.map(_x => {
+        const x = _x.replace(/\//gi, _path.default.sep);
+
         return `!**${x[0] === _path.default.sep || x[0] === '@' ? '' : _path.default.sep}${x}${x[x.length - 1] === _path.default.sep ? '' : _path.default.sep}**`;
       });
       options.docs.patterns[key] = tempArr;
@@ -202,18 +208,30 @@ function deprecationSupport(options) {
   });
 }
 
+const getOptionsFromConfigFile = (appPath, configFileName) => {
+  const fileName = configFileName || 'build.config.js';
+
+  const packagePath = _path.default.join(appPath, fileName);
+
+  if ((0, _fs.existsSync)(packagePath)) {
+    return require(packagePath).config;
+  }
+
+  return null;
+};
+
 const getOptions = () => {
   if (global.reactCLIOptions) {
     return global.reactCLIOptions;
   }
 
   const appPath = process.cwd();
-  let userSchemas;
+  let userSchemas = getOptionsFromConfigFile(appPath, processEnv.config_file);
 
   const packagePath = _path.default.join(appPath, 'package.json');
 
   if (_fs.default.existsSync(packagePath)) {
-    userSchemas = require(packagePath)['react-cli'] || {};
+    userSchemas = userSchemas || require(packagePath)['react-cli'] || {};
   }
 
   const options = defaulter(_schemas.default, userSchemas || {}); // for future may be for npm 8 edge cases

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.5-exp.2",
+  "version": "1.1.5-exp.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.5-exp.2",
+      "version": "1.1.5-exp.4",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.5-exp.2",
+  "version": "1.1.5-exp.4",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",