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

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/docsLoader.js

@@ -6,7 +6,7 @@ var _getOptions = _interopRequireDefault(require("../utils/getOptions.js"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _reactLiveConvertor = require("./reactLiveConvertor");
+var _enhancedReactLiveConverter = require("./enhancedReactLiveConverter.js");
 
 var _markdownLoader = require("./markdownLoader.js");
 
@@ -27,7 +27,7 @@ module.exports = function (source) {
   const src = _fs.default.readFileSync(originalFilePath).toString();
 
   options.docs.enableMDParser && (source = (0, _markdownLoader.markdownParser)(source));
-  options.docs.enableReactLive && (source = (0, _reactLiveConvertor.reactLiveConvertor)(source, originalFilePath)); //to Enable the ReactLive Converter
+  options.docs.enableReactLive && (source = (0, _enhancedReactLiveConverter.enhancedReactLiveConverter)(source, originalFilePath)); //to Enable the ReactLive Converter
 
   return `${source};${name}.source=${JSON.stringify(src)};${name}.filePath=${JSON.stringify(filePath)}`;
 };

package/lib/loaders/enhancedReactLiveConverter.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enhancedReactLiveConverter = enhancedReactLiveConverter;
+
+const parser = require('@babel/parser');
+
+const traverse = require('@babel/traverse').default;
+
+const t = require("@babel/types");
+
+const path = require('path');
+
+function getFilename(originalFilePath) {
+  const [fileName] = path.basename(originalFilePath).split('.');
+  return fileName;
+}
+
+function convertKeyToValue(object = {}) {
+  let keys = Object.keys(object);
+  let values = Object.values(object);
+  return keys.reduce((value, item, i) => {
+    if (item.includes(',')) {
+      item = item.replace(/{|}/g, "");
+      item = '{ ' + item + ' }';
+    }
+
+    value = value + "'" + values[i] + "'" + ": " + item + ",";
+    return value;
+  }, '');
+}
+
+function mergeDuplicateValues(obj) {
+  let mergedObj = {};
+
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      let value = obj[key];
+      let existingKey = Object.keys(mergedObj).find(k => mergedObj[k] === value);
+
+      if (existingKey) {
+        mergedObj[existingKey + ' , ' + key] = value;
+        delete mergedObj[existingKey];
+      } else {
+        mergedObj[key] = value;
+      }
+    }
+  }
+
+  return mergedObj;
+}
+
+function enhancedReactLiveConverter(source, originalFilePath) {
+  const fileName = getFilename(originalFilePath);
+
+  if (!source) {
+    return '';
+  }
+
+  let docCode = '';
+  const fileContent = source.replace(/[\s\r\n]*$/, '');
+  const ast = parser.parse(fileContent, {
+    sourceType: 'module',
+    plugins: ['jsx', 'classProperties']
+  });
+
+  function createImportStatements(input) {
+    let output = '';
+
+    for (const key in input) {
+      if (input.hasOwnProperty(key) && key !== 'React') {
+        output += `import ${key} from '${input[key]}';\n`;
+      }
+    }
+
+    return output;
+  }
+
+  const importBlock = {};
+  const printableCode = {}; // Traverse the AST and find the import and export blocks
+
+  let remainingCode = ast.program.body.filter(node => node.type !== 'ImportDeclaration').filter(node => node.type !== 'ExpressionStatement').map(node => fileContent.substring(node.start, node.end)).join('').trim();
+  traverse(ast, {
+    ImportDeclaration(path) {
+      path.node.specifiers.map(specifier => {
+        if (t.isImportSpecifier(specifier)) {
+          importBlock[`{ ${specifier.local.name} }`] = path.node.source.value;
+          printableCode[`{ ${specifier.local.name} }`] = path.node.source.value;
+          return `{'${specifier.imported.name}': ${specifier.local.name}}`;
+        } else if (t.isImportDefaultSpecifier(specifier)) {
+          importBlock[`${specifier.local.name}`] = `${path.node.source.value}`;
+          printableCode[`${specifier.local.name}`] = `${path.node.source.value} `;
+          return specifier.local.name;
+        }
+      }).join(", ");
+    },
+
+    ExpressionStatement(path) {
+      const expression = path.get('expression');
+      const expressionLeft = expression.get('left');
+
+      if (path.isExpressionStatement() && expression.isAssignmentExpression() && expressionLeft.isMemberExpression()) {
+        const docCheck = expressionLeft.toString();
+
+        if (docCheck === `${fileName}.docs`) {
+          docCode = expression.toString();
+        }
+      }
+    }
+
+  });
+  remainingCode = remainingCode.replace(/__DOCS__/, true);
+  remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  const addBractick = `\`
+  ${createImportStatements(printableCode)}
+  ${remainingCode}\`
+  `;
+  const template = `
+  
+    ${createImportStatements(importBlock)}
+  
+    import { LiveProviderv3, LiveEditorv3, LiveErrorv3, LivePreviewv3, Wrapper, EditorWrapper , ErrorWrapper, PreviewWrapper } from '@zohodesk-private/react-live/es/index'
+
+    export default class ${fileName} extends React.Component{
+      render(){
+        return(
+          <LiveProviderv3 needToolBox scope={{import: {${convertKeyToValue(mergeDuplicateValues(printableCode))}}}} code={${addBractick}}>
+            <Wrapper>
+                <EditorWrapper><LiveEditorv3 /></EditorWrapper>
+                <PreviewWrapper><LivePreviewv3 /></PreviewWrapper>
+                <LiveErrorv3 needStyle />
+            </Wrapper>
+          </LiveProviderv3>
+        )
+      }
+    }
+  
+    ${docCode}
+    `;
+  return template;
+}