@zohodesk/react-cli 1.1.5-exp.5 → 1.1.6

package/README.md

@@ -44,15 +44,18 @@ Now to run app
 
 # Change Logs
 
-# 1.1.5-exp.5
-- fixed the issues regarding custom chunks base config schema.
+# 1.1.6
 
-# 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
+- babel version update issue fix (Cannot read properties of undefined (reading 'file')) and (BABEL_TRANSFORM_ERROR)
+
+# 1.1.5-exp.2
+
+**Issue Fix**
+- local install react-cli spawnSync Error fix in npm 8
 
-# 1.1.5-exp.3
-- added options to split chunks base config
-- added support for passing custom chunks split logic as function.
+# 1.1.5
 
 **Issue Fix**
 
@@ -65,6 +68,11 @@ 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` **{ 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
+- `pattern` regex pattern as string
+- `name` chunk name
+- `size` is count which is minmum chunk dublicated 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 alias of `size` default value is `2`,
-- `rules`: `rules` is same as `pattern` with some easy hooks **(removed after v1.1.5)**
+- `minChunks`: `minChunks` is alies of `size` default value is `2`,
+- `rules`: `rules` is same as `pattern` with some easy hooks
   - 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,
-  includeDependency: includeDependency default value is false
+  includeDepenency: includeDepenency default value is false

package/lib/common/splitChunks.js

@@ -15,53 +15,35 @@ var _testPattern = require("./testPattern");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const isWindows = _os.default.platform().toLowerCase() === 'win32';
-const ps = _path.default.sep;
-const options = (0, _utils.getOptions)();
-const {
+let isWindows = _os.default.platform().toLowerCase() === 'win32';
+let ps = _path.default.sep;
+let options = (0, _utils.getOptions)();
+let {
   app: {
     vendorExclude,
     customChunks,
-    vendorInclude,
-    customChunksBaseConfig
+    vendorInclude
   }
 } = options;
-const reactBundle = ['react', 'react-dom', 'react-redux', 'react-transition-group', 'scheduler', 'prop-types'];
 
-const isVendor = function isVendor(module) {
-  const {
+let isVendor = function isVendor(module) {
+  let {
     userRequest
   } = module;
-  let excludeList = ['script-loader', 'raw-loader', ...reactBundle];
+  let excludeList = ['script-loader', 'raw-loader', 'react', 'react-dom'];
   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));
 };
 
-const isReact = module => {
-  const {
+let isReact = module => {
+  let {
     userRequest
   } = module;
+  let reactBundle = ['react', 'react-dom'];
   return userRequest && reactBundle.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
 };
 
-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: 15000
-}, customChunksBaseConfig);
-const specificCacheGroupConfig = {
+let defaultChunks = {
   'react.vendor': {
     name: 'react.vendor',
     chunks: 'all',
@@ -81,36 +63,43 @@ const specificCacheGroupConfig = {
     priority: -10
   }
 };
-const customChunksConfig = {};
+let customChunksConfig = {};
 customChunks.map((obj, index) => ({
   name: obj.name,
-  chunks: obj.chunks || 'all',
-  minChunks: obj.minChunks || obj.size || 2,
   pattern: obj.pattern,
+  minChunks: obj.minChunks || obj.size || 2,
+  rules: obj.rules,
+  // includeDepenency: obj.includeDepenency || false,
   priority: obj.priority || -10 * (index + 2),
   enforce: obj.enforce || true,
-  minSize: obj.minSize,
-  // || 20000,
   maxSize: obj.maxSize,
   // || 0,
-  reuseExistingChunk: obj.reuseExistingChunk || false,
-  automaticNamePrefix: obj.automaticNamePrefix || null,
-  cacheGroupName: obj.cacheGroupName || obj.name
-})).forEach(({
+  minSize: obj.minSize,
+  // || 20000,
+  chunks: obj.chunks || 'all'
+})).map(({
   name,
-  chunks = 'all',
-  minChunks,
   pattern,
+  minChunks,
+  rules,
   priority,
+  // includeDepenency,
   enforce,
   minSize,
   maxSize,
-  reuseExistingChunk,
-  automaticNamePrefix,
-  cacheGroupName
+  chunks = 'all'
 }) => {
-  const obj = {
-    test: rulesMatcher(pattern),
+  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),
     chunks,
     enforce,
     minChunks,
@@ -125,25 +114,13 @@ customChunks.map((obj, index) => ({
     obj.maxSize = maxSize;
   }
 
-  if (name !== undefined) {
-    obj.name = name;
-  }
-
-  if (reuseExistingChunk !== undefined) {
-    obj.reuseExistingChunk = reuseExistingChunk;
-  }
-
-  if (automaticNamePrefix) {
-    obj.automaticNamePrefix = automaticNamePrefix;
-  }
-
-  customChunksConfig[cacheGroupName] = obj;
+  return customChunksConfig[name] = obj;
 });
-const splitChunkConfig = Object.assign({}, baseSplitChunkConfig, {
+var _default = {
+  minSize: 12000,
   cacheGroups: Object.assign({
     default: false,
     vendors: false
-  }, specificCacheGroupConfig, customChunksConfig)
-});
-var _default = splitChunkConfig;
+  }, defaultChunks, customChunksConfig)
+};
 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 modifiedPattern = pattern;
+  let modifyedPattern = pattern;
 
-  if (/[*.$^]/.test(modifiedPattern)) {
+  if (/[*.$^]/.test(modifyedPattern)) {
     if (isWindows) {
-      // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-      modifiedPattern = modifiedPattern.replace(/\//g, '\\\\');
+      // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+      modifyedPattern = modifyedPattern.replace(/\//g, '\\\\');
     }
 
-    modifiedPattern = modifiedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
-    const re = new RegExp(modifiedPattern);
+    modifyedPattern = modifyedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+    const re = new RegExp(modifyedPattern);
     return re.test(req);
   }
 
   if (isWindows) {
-    // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-    modifiedPattern = modifiedPattern.replace(/\//g, '\\');
+    // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+    modifyedPattern = modifyedPattern.replace(/\//g, '\\');
   }
 
-  return req.indexOf(modifiedPattern) !== -1;
+  return req.indexOf(modifyedPattern) !== -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 = true;
+        let needsMap = false;
 
         for (const key in idNameMap) {
           if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
@@ -32,9 +32,7 @@ class ResourceHintsPlugin {
           }
         }
 
-        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);
-              })`]), '};',
+        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;`]
@@ -55,7 +53,7 @@ class ResourceHintsPlugin {
         ),
         '}',
         */
-        `// 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];',
+        `// 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),
         // 'head.appendChild(script);'
         ]), '}']), '};']);

package/lib/schemas/index.js

@@ -333,7 +333,6 @@ var _default = {
       inject: true
     },
     removePropTypes: false,
-    customChunksBaseConfig: null,
     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 = _interopRequireWildcard(require("fs"));
+var _fs = _interopRequireDefault(require("fs"));
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -15,10 +15,6 @@ 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);
 
@@ -187,9 +183,8 @@ 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 => {
-        const x = _x.replace(/\//gi, _path.default.sep);
-
+      tempArr = tempArr.map(x => {
+        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;
@@ -198,9 +193,8 @@ 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 => {
-        const x = _x.replace(/\//gi, _path.default.sep);
-
+      tempArr = tempArr.map(x => {
+        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;
@@ -208,30 +202,18 @@ 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 = getOptionsFromConfigFile(appPath, processEnv.config_file);
+  let userSchemas;
 
   const packagePath = _path.default.join(appPath, 'package.json');
 
   if (_fs.default.existsSync(packagePath)) {
-    userSchemas = userSchemas || require(packagePath)['react-cli'] || {};
+    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.5",
+  "version": "1.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.5-exp.5",
+      "version": "1.1.6",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

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