@zohodesk/react-cli 1.1.19-exp.9 → 1.1.20-exp.1

package/README.md

@@ -44,6 +44,34 @@ Now to run app
 
 # Change Logs
 
+# 1.1.20-exp.1
+
+**Changes**
+
+- Added memory leak fixes for script, links tags
+
+**Feature**
+- Custom Script loading strategy support for initial html script tags.
+
+# 1.1.19-exp.18
+
+**Changes**
+
+- To do further build size optimization by utilizing webpack provided config.
+
+```
+  innerGraph: true,
+  usedExports: true,
+  sideEffects: true
+```
+# 1.1.19 (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)
 
 **Feature:-**

package/bin/cli.js

@@ -300,8 +300,6 @@ switch (option) {
         'src',
         '-d',
         'lib',
-        '--extensions',
-        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/cmjs-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),
@@ -318,8 +316,6 @@ switch (option) {
         'src',
         '--out-dir',
         'es',
-        '--extensions',
-        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/es-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),

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/babel/cmjs-plugins-presets.js

@@ -11,25 +11,20 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const {
+let {
   module: {
     mode
-  },
-  babelCustomizationForLibrary: {
-    babelPlugins
   }
 } = (0, _utils.getOptions)();
-const isProd = mode.toLowerCase() === 'prod';
-const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
-  __DOCS__: false
-} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve('@babel/plugin-proposal-class-properties')];
-const plugins = [...babelPlugins, ...defaultPlugins];
+let isProd = mode.toLowerCase() === 'prod';
 
 var _default = () => ({
   presets: [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
     disableES5Transpile: false
-  }), require.resolve('@babel/preset-typescript')],
-  plugins: plugins
+  })],
+  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
+    __DOCS__: false
+  } : {}]]
 });
 
 exports.default = _default;

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

@@ -11,21 +11,13 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const {
+let {
   module: {
     mode,
     disableES5Transpile
-  },
-  babelCustomizationForLibrary: {
-    babelPlugins
   }
 } = (0, _utils.getOptions)();
-const isProd = mode.toLowerCase() === 'prod';
-const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
-  __DOCS__: false
-} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve('@babel/plugin-proposal-class-properties')];
-const plugins = [...babelPlugins, ...defaultPlugins];
-console.log(disableES5Transpile);
+let isProd = mode.toLowerCase() === 'prod';
 
 var _default = () => ({
   presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
@@ -39,8 +31,10 @@ var _default = () => ({
     modules: false
   }], (0, _babelPresetReactOption.default)({
     disableES5Transpile
-  }), require.resolve('@babel/preset-typescript')],
-  plugins: plugins
+  })],
+  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
+    __DOCS__: false
+  } : {}], require.resolve('@babel/plugin-syntax-dynamic-import')]
 });
 
 exports.default = _default;

package/lib/configs/jest.config.js

@@ -28,7 +28,7 @@ const commonConfig = {
   // },
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
-  moduleFileExtensions: ['js', 'ts', 'tsx'],
+  moduleFileExtensions: ['js'],
   setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
@@ -52,7 +52,7 @@ module.exports = (...args) => {
     testPathIgnorePatterns: ['/node_modules/', 'docs'],
     unmockedModulePathPatterns: ['__tests__', 'node_modules', '.*'],
     roots: [`<rootDir>/${appFolder}/`],
-    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node|ts|tsx)$',
+    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node)$',
     testResultsProcessor: _path.default.resolve(__dirname, '..', 'jest', 'result.js')
   });
 };

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

@@ -146,10 +146,6 @@ module.exports = {
           minimize: true
         }
       }]
-    }, {
-      test: /\.ts$/,
-      use: 'ts-loader',
-      include: _path.default.join(appPath, folder)
     }, {
       test: /\.worker.js$/,
       use: {

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

@@ -102,7 +102,10 @@ module.exports = {
     //     exclude: /\/smap/
     //   })
     // ],
-    moduleIds: 'named'
+    moduleIds: 'named',
+    usedExports: true,
+    // innerGraph: true, // this property present on webpack 5
+    sideEffects: true
   },
   stats: {
     children: false,
@@ -131,7 +134,7 @@ module.exports = {
             modules: false
           }], (0, _babelPresetReactOption.default)({
             disableES5Transpile
-          }), require.resolve('@babel/preset-typescript')],
+          })],
           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.
@@ -237,10 +240,6 @@ module.exports = {
           minimize: false
         }
       }]
-    }, {
-      test: /\.ts$/,
-      use: 'ts-loader',
-      include: _path.default.join(appPath, folder)
     }, {
       test: /\.worker.js$/,
       use: {

package/lib/loaderUtils/getDevJsLoaders.js

@@ -44,7 +44,7 @@ let getDevJsLoaders = options => {
         modules: false
       }], (0, _babelPresetReactOption.default)({
         disableES5Transpile
-      }), require.resolve('@babel/preset-typescript')],
+      })],
       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']

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/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

@@ -13,6 +13,10 @@ var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-we
 
 var _common = require("../common");
 
+var _utils = require("../utils");
+
+var _CustomScriptLoadingStrategyPlugin = _interopRequireDefault(require("../plugins/CustomScriptLoadingStrategyPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultHTMLMiniFyOption = {
@@ -26,6 +30,47 @@ const defaultHTMLMiniFyOption = {
   removeStyleLinkTypeAttributes: true,
   useShortDoctype: true
 };
+const defaultScriptLoadingStrategy = 'defer';
+const allowedScriptLoadingStrategies = ['blocking', 'defer', 'async', 'module'];
+
+function isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey) {
+  return allowedScriptLoadingStrategies.includes(scriptLoadingStategey);
+}
+
+function getScriptLoadingStrategyForStringType(scriptLoadingStategey) {
+  if (isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey)) {
+    return scriptLoadingStategey;
+  }
+
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategyForObject(scriptLoadingStategey) {
+  if (Object.keys(scriptLoadingStategey).length === 0) {
+    return defaultScriptLoadingStrategy;
+  }
+
+  const isAllowedScriptLoadingStrategy = Object.keys(scriptLoadingStategey).every(key => isAllowedScriptLoadingStrategyUsed(key));
+
+  if (isAllowedScriptLoadingStrategy) {
+    return Object.assign({}, scriptLoadingStategey);
+  }
+
+  console.warn('un supported script loading strategy used', scriptLoadingStategey);
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategy(scriptLoadingStategey) {
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'string') {
+    return getScriptLoadingStrategyForStringType(scriptLoadingStategey);
+  }
+
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'object') {
+    return getScriptLoadingStrategyForObject(scriptLoadingStategey);
+  }
+
+  return 'defer';
+}
 
 function configHtmlWebpackPlugins(plugins, {
   enableChunkHash = false,
@@ -33,7 +78,8 @@ function configHtmlWebpackPlugins(plugins, {
   inject,
   crossorigin,
   hasEFC,
-  minify: minifyHtmlOptions = false
+  minify: minifyHtmlOptions = false,
+  customScriptLoadingStrategey
 }) {
   const optionsHtmlWebpack = {
     chunksSortMode: 'none',
@@ -56,4 +102,16 @@ function configHtmlWebpackPlugins(plugins, {
   crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
     crossorigin: 'anonymous'
   }));
+
+  if (customScriptLoadingStrategey) {
+    console.log('script loading stategy', customScriptLoadingStrategey);
+    const currentScriptLoadingStrategy = getScriptLoadingStrategy(customScriptLoadingStrategey);
+    console.log('currentscriptloading strategy', currentScriptLoadingStrategy);
+
+    if ((0, _utils.getTypeOf)(currentScriptLoadingStrategy) === 'object') {
+      plugins.push(new _CustomScriptLoadingStrategyPlugin.default({
+        scriptLoadingStategey: currentScriptLoadingStrategy
+      }));
+    }
+  }
 }

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';
@@ -60,7 +62,8 @@ const getDevPlugins = (options, publicPath) => {
         mode
       },
       htmlTemplate: {
-        inject
+        inject,
+        customScriptLoadingStrategey
       },
       crossorigin
     },
@@ -166,7 +169,8 @@ const getDevPlugins = (options, publicPath) => {
     minify: false,
     inject,
     crossorigin,
-    hasEFC
+    hasEFC,
+    customScriptLoadingStrategey
   });
 
   if (hasEFC) {
@@ -217,12 +221,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");
@@ -78,7 +80,8 @@ const getProdPlugins = (options, publicPath = '') => {
   } = options.app;
   const {
     inject,
-    minify: minifyHtmlOptions
+    minify: minifyHtmlOptions,
+    customScriptLoadingStrategey
   } = htmlTemplate;
   const {
     i18n
@@ -176,6 +179,7 @@ const getProdPlugins = (options, publicPath = '') => {
     folder,
     inject,
     minify: minifyHtmlOptions,
+    customScriptLoadingStrategey,
     crossorigin,
     hasEFC
   });
@@ -237,7 +241,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 +310,7 @@ const getProdPlugins = (options, publicPath = '') => {
     statsOutputExcludeKeys,
     statsFileName
   }));
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin());
   return pluginsArr;
 };