@zohodesk/react-cli 1.1.20-exp.7 → 1.1.21

package/README.md

@@ -44,9 +44,28 @@ Now to run app
 
 # Change Logs
 
-# exp.12 for stats disable
+# 1.1.21 (4-6-2024)
 
-# exp.11 exp.10 exp.9 exp.8 for typescript
+- TypeScript support has been added for the application, library, and Jest.
+
+- The `enable_typescript` option has been added in the react-cli.config.js. Set it to true to enable TypeScript
+
+- Support for adding plugins is now available. To use this, configure your react-cli.config.js file as follows:
+
+   ```
+      babelCustomizationForLibrary: {
+        babelPlugins: [<`your plugins`>]
+      },
+   ```
+- The Memory leak issue while downloading i18n and CSS files has been fixed
+
+# 1.1.20 (27-5-2024)
+
+**Feature**
+
+- enhancedReactLiveConverter.js added and imported in  docLoader file
+
+- stats.json file creation deleted, if `enable_stats` option is false.
 
 # 1.1.19 (5-2-2024)
 

package/docs/ReactLive.md

@@ -11,4 +11,8 @@
 
 # v1.1.2 update:
 
-* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file
+* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file
+
+# v1.1.20 update:
+
+* enhancedReactLiveConverter.js added and imported in  docLoader file

package/lib/jest/preProcessors/jsPreprocessor.js

@@ -6,7 +6,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const getOptions = require('../../../lib/utils/getOptions').default;
 
-console.log('water');
 const {
   enableTypeScript,
   babelCustomizationForLibrary
@@ -26,7 +25,6 @@ if (enableTypeScript) {
 
 const defaultPlugins = [require.resolve('babel-plugin-transform-dynamic-import')];
 const plugins = [...defaultPlugins, ...resolvedPlugins];
-console.log(presets, plugins, 'wtru');
 module.exports = _babelJest.default.createTransformer({
   presets: presets,
   plugins: plugins

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,151 @@
+"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 = {};
+  let remainingBlock = ''; // 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();
+        } else if (docCheck.includes(fileName)) {
+          const startIndex = path.node.start;
+          const endIndex = path.node.end;
+          remainingBlock += fileContent.slice(startIndex, endIndex);
+        }
+      }
+    }
+
+  });
+  remainingCode = remainingCode.replace(/__DOCS__/, true);
+  remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  remainingBlock = remainingBlock.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  const addBractick = `\`
+  ${createImportStatements(printableCode)}
+  ${remainingCode}
+
+  ${remainingBlock}\`
+  `;
+  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;
+}

package/lib/pluginUtils/getDevPlugins.js

@@ -37,6 +37,8 @@ var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
 var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
 
+var _EventsHandlingPlugin = require("../plugins/EventsHandlingPlugin");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { windowsModification } from '../loaderUtils/windowsModification';
@@ -217,12 +219,13 @@ const getDevPlugins = (options, publicPath) => {
       exclude: exclude.selectorWeight,
       patterns
     }));
-  } // if (pluginObject.minifier) {
+  }
+
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin()); // if (pluginObject.minifier) {
   //   // console.log('minifier active');
   //   pluginsArr.push(new MinifierPlugin());
   // }
 
-
   return pluginsArr.filter(Boolean);
 };
 

package/lib/pluginUtils/getProdPlugins.js

@@ -27,6 +27,8 @@ var _VariableConversionCollector = _interopRequireDefault(require("../plugins/Va
 
 var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"));
 
+var _EventsHandlingPlugin = require("../plugins/EventsHandlingPlugin");
+
 var _plugins = require("../plugins");
 
 var _CustomAttributePlugin = require("../plugins/CustomAttributePlugin");
@@ -237,7 +239,7 @@ const getProdPlugins = (options, publicPath = '') => {
     if (bundleAnalyze) {
       pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        generateStatsFile: !enableStats,
+        generateStatsFile: false,
         openAnalyzer: false,
         statsOptions: enableStats ? null : {
           source: false,
@@ -306,6 +308,7 @@ const getProdPlugins = (options, publicPath = '') => {
     statsOutputExcludeKeys,
     statsFileName
   }));
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin());
   return pluginsArr;
 };
 

package/lib/plugins/EventsHandlingPlugin.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventsHandlingPlugin = void 0;
+
+/* eslint-disable no-use-before-define */
+class EventsHandlingPlugin {
+  constructor(options) {}
+
+  apply(compiler) {
+    // NOTE: we not using this, Reason currently this option is only need for EFC,
+    // So it do not needed.
+    compiler.hooks.thisCompilation.tap({
+      name: 'CustomAttributePlugin',
+      stage: 1,
+      fn: compilation => {
+        compilation.mainTemplate.hooks.requireEnsure.tap('CustomAttributePlugin', source => {
+          // const str = attributeSetTemplate(cssAttributes, 'linkTag');
+          const sourceStr = source.replace('linkTag.onerror = function(event) {', 'linkTag.onerror = function(event) { linkTag.onerror = linkTag.onload = null');
+          const replacedSourceStr = sourceStr.replace('linkTag.onload = resolve', `linkTag.onload = () =>  { 
+          resolve();
+          linkTag.onerror = linkTag.onload = null
+        };`);
+          return replacedSourceStr;
+        });
+      }
+    });
+  }
+
+}
+
+exports.EventsHandlingPlugin = EventsHandlingPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -228,8 +228,12 @@ class I18nDownlodLogic {
         if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
       }
       var scriptTag = document.createElement("script");
-      scriptTag.onload = resolve;
+      scriptTag.onload = () =>  { 
+        resolve();
+        scriptTag.onerror = scriptTag.onload = null;
+      };
       scriptTag.onerror = function(event) {
+        scriptTag.onerror = scriptTag.onload = null;
         var request = event && event.target && event.target.src || fullsrcPath;
         var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + request + ")");
         err.code = "I18N_CHUNK_LOAD_FAILED";

package/lib/schemas/index.js

@@ -740,10 +740,10 @@ var _default = {
     excludeKeys: null
   },
   babelCustomizationForLibrary: {
-    babelPlugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-class-properties']
+    babelPlugins: []
   },
   enableTypeScript: {
-    value: true,
+    value: false,
     cli: 'enable_typescript'
   }
 };