@zohodesk/react-cli 1.1.18 → 1.1.19-exp.2

package/README.md

@@ -44,6 +44,12 @@ Now to run app
 
 # Change Logs
 
+# 1.1.19 (5-2-2024)
+
+**Feature:-**
+
+- Added config to remove additon of `babel/react` extend code for 'spread' operator usage on JSX.
+
 # 1.1.18 (30-01-2024)
 
 **Feature:-**

package/lib/babel/babel-option-utils/babel-preset-react-option.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getReactPreset;
+
+function getReactPresetOptions() {
+  return {
+    runtime: 'classic',
+    // change it to 'automatic', when react version updated to 18.
+    useSpread: true
+  };
+}
+
+function getReactPreset({
+  disableES5Transpile
+}) {
+  const reactPreset = require.resolve('@babel/preset-react');
+
+  return disableES5Transpile ? [reactPreset, getReactPresetOptions()] : reactPreset;
+}

package/lib/babel/cmjs-plugins-presets.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
+var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-utils/babel-preset-react-option"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 let {
   module: {
     mode
@@ -15,7 +19,9 @@ let {
 let isProd = mode.toLowerCase() === 'prod';
 
 var _default = () => ({
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
+  presets: [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
+    disableES5Transpile: false
+  })],
   plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
     __DOCS__: false
   } : {}]]

package/lib/babel/es-plugins-presets.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
+var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-utils/babel-preset-react-option"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 let {
   module: {
     mode,
@@ -25,7 +29,9 @@ var _default = () => ({
     }
   } : {
     modules: false
-  }], require.resolve('@babel/preset-react')],
+  }], (0, _babelPresetReactOption.default)({
+    disableES5Transpile
+  })],
   plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
     __DOCS__: false
   } : {}], require.resolve('@babel/plugin-syntax-dynamic-import')]

package/lib/configs/webpack.prod.config.js

@@ -14,6 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 var _resolvers = require("./resolvers");
 
+var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
@@ -127,8 +129,13 @@ module.exports = {
             }
           } : {
             modules: false
-          }], require.resolve('@babel/preset-react')],
-          plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+          }], (0, _babelPresetReactOption.default)({
+            disableES5Transpile
+          })],
+          plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve(
+          //   '@babel/plugin-proposal-object-rest-spread'
+          // ), REMOVING IT, BECAUSE WE ALREADY SUPPORT SPREAD SYNTAX FROM LIBRARIES.
+          shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
             exclude: ['error', 'log']
           }] : null].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, [require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,

package/lib/loaderUtils/getDevJsLoaders.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
+var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let getDevJsLoaders = options => {
@@ -40,8 +42,11 @@ let getDevJsLoaders = options => {
         }
       } : {
         modules: false
-      }], require.resolve('@babel/preset-react')],
-      plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+      }], (0, _babelPresetReactOption.default)({
+        disableES5Transpile
+      })],
+      plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve('@babel/plugin-proposal-object-rest-spread'),
+      devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']
       }] : null].filter(Boolean) : [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']

package/lib/loaders/workerLoader.js

@@ -19,32 +19,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
-  'type': 'object',
-  'properties': {
-    'publicPath': {
-      'anyOf': [{
-        'type': 'string'
+  type: 'object',
+  properties: {
+    publicPath: {
+      anyOf: [{
+        type: 'string'
       }, {
-        'instanceof': 'Function'
+        instanceof: 'Function'
       }]
     },
-    'filename': {
-      'anyOf': [{
-        'type': 'string',
-        'minLength': 1
+    filename: {
+      anyOf: [{
+        type: 'string',
+        minLength: 1
       }, {
-        'instanceof': 'Function'
+        instanceof: 'Function'
       }]
     },
-    'chunkFilename': {
-      'type': 'string',
-      'minLength': 1
+    chunkFilename: {
+      type: 'string',
+      minLength: 1
     },
-    'esModule': {
-      'type': 'boolean'
+    esModule: {
+      type: 'boolean'
     }
   },
-  'additionalProperties': false
+  additionalProperties: false
 }; // eslint-disable-next-line
 
 function loader() {}
@@ -112,25 +112,40 @@ function pitch(request) {
     }
 
     function workerCode() {
+      if (this.workerInstance) {
+        return this.workerInstance;
+      }
+
       let blob;
 
       try {
         blob = new Blob([`importScripts('${this.workerUrl}');`], {
-          'type': 'application/javascript'
+          type: 'application/javascript'
         });
       } catch (e1) {
         throw new Error(e1);
       }
 
-      let url = window.URL || window.webkitURL;
-      let blobUrl = url.createObjectURL(blob);
-      let worker = new Worker(blobUrl);
-      return worker;
+      const url = window.URL || window.webkitURL;
+      const blobUrl = url.createObjectURL(blob);
+      this.workerInstance = new Worker(blobUrl);
+      return this.workerInstance;
     }
 
-    return cb(null, `${options.esModule ? 'export default' : 'module.exports ='} {\n
+    return cb(null, `const workerObj ={\n
+      workerInstance: null, \n
 			workerUrl: __webpack_public_path__ + ${JSON.stringify(entry)}, \n
 			getInstance: ${workerCode} \n
-		}`);
+		};\n
+    workerObj.getInstance();
+    ${options.esModule ? 'export default' : 'module.exports ='} workerObj;
+    `); // return cb(
+    //   null,
+    //   `${options.esModule ? 'export default' : 'module.exports ='} {\n
+    //   workerInstance: null, \n
+    // 	workerUrl: __webpack_public_path__ + ${JSON.stringify(entry)}, \n
+    // 	getInstance: ${workerCode} \n
+    // }`
+    // );
   });
 }

package/lib/pluginUtils/configHtmlWebpackPlugins.js

@@ -26,6 +26,12 @@ const defaultHTMLMiniFyOption = {
   removeStyleLinkTypeAttributes: true,
   useShortDoctype: true
 };
+const defaultScriptLoadingStrategy = 'defer';
+
+function getScriptLoadingStrategy(scriptLoadingStategey) {
+  const allowedScriptLoadingStrategies = ['blocking', 'defer'];
+  return allowedScriptLoadingStrategies.includes(scriptLoadingStategey) ? scriptLoadingStategey : defaultScriptLoadingStrategy;
+}
 
 function configHtmlWebpackPlugins(plugins, {
   enableChunkHash = false,
@@ -33,7 +39,8 @@ function configHtmlWebpackPlugins(plugins, {
   inject,
   crossorigin,
   hasEFC,
-  minify: minifyHtmlOptions = false
+  minify: minifyHtmlOptions = false,
+  scriptLoadingStategey
 }) {
   const optionsHtmlWebpack = {
     chunksSortMode: 'none',
@@ -44,7 +51,7 @@ function configHtmlWebpackPlugins(plugins, {
     // ? minifyHtmlOptions
     // : minifyHtmlOptions,,
     templateParameters: _common.templateParameters,
-    scriptLoading: 'defer',
+    scriptLoading: getScriptLoadingStrategy(scriptLoadingStategey),
     inject: inject
   };
 

package/lib/pluginUtils/getDevPlugins.js

@@ -60,7 +60,8 @@ const getDevPlugins = (options, publicPath) => {
         mode
       },
       htmlTemplate: {
-        inject
+        inject,
+        scriptLoadingStrategy
       },
       crossorigin
     },
@@ -166,7 +167,8 @@ const getDevPlugins = (options, publicPath) => {
     minify: false,
     inject,
     crossorigin,
-    hasEFC
+    hasEFC,
+    scriptLoadingStrategy
   });
 
   if (hasEFC) {

package/lib/pluginUtils/getProdPlugins.js

@@ -78,7 +78,8 @@ const getProdPlugins = (options, publicPath = '') => {
   } = options.app;
   const {
     inject,
-    minify: minifyHtmlOptions
+    minify: minifyHtmlOptions,
+    scriptLoadingStategey
   } = htmlTemplate;
   const {
     i18n
@@ -176,6 +177,7 @@ const getProdPlugins = (options, publicPath = '') => {
     folder,
     inject,
     minify: minifyHtmlOptions,
+    scriptLoadingStategey,
     crossorigin,
     hasEFC
   });

package/lib/schemas/index.js

@@ -322,7 +322,8 @@ var _default = {
     },
     htmlTemplate: {
       minify: null,
-      inject: true
+      inject: true,
+      scriptLoadingStategey: ''
     },
     removePropTypes: false,
     customChunksBaseConfig: null,