@zohodesk/react-cli 1.1.11 → 1.1.13

package/README.md

@@ -44,6 +44,25 @@ Now to run app
 
 # Change Logs
 
+# 1.1.13 (4-9-2023)
+
+**Changes**
+
+- Fixed the issue related to the resource cleanup plugin. (EfcResouceCleanupPlugin)
+
+
+# 1.1.12 (1-9-2023)
+
+**Features**
+
+- Generating stats.json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
+- Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by custom attributes enable flag.
+
+**Changes**
+
+- Added a new config `stats` to control stats file generation.
+- Using Existing custom attributes flag, we can control resource cleanup plugin.
+
 # 1.1.11 (4-8-2023)
 
 **Changes**

package/lib/pluginUtils/getDevPlugins.js

@@ -35,6 +35,8 @@ var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"
 
 var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
+var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { windowsModification } from '../loaderUtils/windowsModification';
@@ -191,6 +193,9 @@ const getDevPlugins = (options, publicPath) => {
   }));
   instrumentScript && pluginsArr.push(new _plugins.ScriptInstrumentPlugin());
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
+  customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(Object.assign({}, customAttributes, {
+    globalCacheObj: context
+  })));
   hasShadowDOM && pluginsArr.push(new _plugins.ShadowDOMSupportPlugin());
 
   if (devCssFileBountry) {

package/lib/pluginUtils/getProdPlugins.js

@@ -35,6 +35,10 @@ var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
 var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
+var _StatsPlugin = _interopRequireDefault(require("../plugins/StatsPlugin"));
+
+var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-unused-vars
@@ -88,6 +92,12 @@ const getProdPlugins = (options, publicPath = '') => {
     templateFilePath,
     localeAttr: efcLocaleAttr
   } = options.efc;
+  const {
+    enable: enableStats,
+    options: statsOptions,
+    excludeKeys: statsOutputExcludeKeys,
+    fileName: statsFileName
+  } = options.stats;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
   const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
@@ -227,9 +237,9 @@ const getProdPlugins = (options, publicPath = '') => {
     if (bundleAnalyze) {
       pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        generateStatsFile: true,
+        generateStatsFile: !enableStats,
         openAnalyzer: false,
-        statsOptions: {
+        statsOptions: enableStats ? null : {
           source: false,
           normal: true,
           chunks: false,
@@ -288,6 +298,14 @@ const getProdPlugins = (options, publicPath = '') => {
 
 
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
+  customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(Object.assign({}, customAttributes, {
+    globalCacheObj: context
+  })));
+  enableStats && pluginsArr.push(new _StatsPlugin.default({
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
+  }));
   return pluginsArr;
 };
 

package/lib/plugins/EfcResourceCleanupPlugin.js

@@ -0,0 +1,43 @@
+"use strict";
+
+const {
+  Template
+} = require('webpack');
+
+const plugInName = 'EFCResourceCleanup';
+module.exports = class EfcResouceCleanupPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(plugInName, ({
+      mainTemplate
+    }) => {
+      mainTemplate.hooks.afterStartup.tap(plugInName, source => {
+        const {
+          attributes,
+          globalCacheObj
+        } = this.options;
+        const attributesArr = Object.entries(attributes);
+        const [[attributekey, attributeValue]] = attributesArr;
+        const resourceSelector = `[${attributekey}="${attributeValue}"]`;
+        return Template.asString([source, Template.indent([`     window['${globalCacheObj}Jsonp'].unInstall = function() {
+                  Object.keys(installedModules).forEach(installedModulesKey => installedModules[installedModulesKey] = null);
+                  Object.keys(modules).forEach(moduleKey => modules[moduleKey] = null);
+                 `, `
+                 installedModules = null;
+                 modules = null;
+                 __webpack_require__.m = null;
+                 __webpack_require__.c = null;
+              
+                 `, attributekey && attributeValue ? `    
+          const addedResources = document.querySelectorAll('${resourceSelector}');
+          addedResources.forEach(addedResource => addedResource.remove());
+      }
+          ` : ''])]);
+      });
+    });
+  }
+
+};

package/lib/plugins/StatsPlugin.js

@@ -0,0 +1,82 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const {
+  Readable
+} = require('stream');
+
+const {
+  removeKeysFromObject,
+  convertObjectToStringGen
+} = require('../utils/object-manipulation');
+
+const pluginName = 'stats-plugin';
+const statsSchema = {
+  all: true
+};
+
+class StatsPlugin {
+  constructor({
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
+  }) {
+    this.excludeKeysInStat = statsOutputExcludeKeys || [];
+    this.statsFileName = statsFileName || 'bundle-report-integrity.json';
+    this.statsOptions = Object.assign({}, statsSchema, statsOptions || {});
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tapAsync(pluginName, (stats, callback) => {
+      const statsJson = removeKeysFromObject(stats.toJson(this.statsOptions), this.excludeKeysInStat);
+      this.emitStats(statsJson).on('end', () => {
+        callback();
+      }).on('error', e => {
+        callback(e);
+      });
+    });
+  }
+
+  writeStatsFileInAStream(statsObj) {
+    const {
+      outputPath
+    } = statsObj;
+    const ouputFileName = path.join(outputPath, this.statsFileName);
+    return this.createReadStream(statsObj).pipe(fs.createWriteStream(ouputFileName));
+  }
+
+  createReadStream(statsObj) {
+    const excludeKeys = this.excludeKeysInStat;
+    return new Readable({
+      read() {
+        let isDone = false;
+        const objToStringGen = convertObjectToStringGen(statsObj, excludeKeys);
+
+        while (!isDone) {
+          const {
+            done,
+            value
+          } = objToStringGen.next();
+
+          if (done) {
+            isDone = true;
+            this.push(null);
+          } else {
+            this.push(value);
+          }
+        }
+      }
+
+    });
+  }
+
+  emitStats(statsJson) {
+    return this.writeStatsFileInAStream(statsJson);
+  }
+
+}
+
+module.exports = StatsPlugin;

package/lib/schemas/index.js

@@ -723,6 +723,15 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    },
+    fileName: null,
+    options: null,
+    excludeKeys: null
   }
 };
 exports.default = _default;

package/lib/utils/getOptions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaulter = exports.default = void 0;
 
 var _child_process = require("child_process");
 
@@ -132,6 +132,7 @@ const defaulter = (target, source) => {
   return defaultObject;
 };
 
+exports.defaulter = defaulter;
 global.reactCLIOptions = null;
 
 const getOptionsFromConfigFile = (appPath, configFileName) => {

package/lib/utils/object-manipulation.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertObjectToStringGen = convertObjectToStringGen;
+exports.removeKeysFromObject = removeKeysFromObject;
+
+function objectPathMatcher(currentKey, objHierarchy = [], keysToBeRemoved = []) {
+  const objPathKey = objHierarchy.length > 0 ? `${objHierarchy.join('.')}.${currentKey}` : currentKey;
+  return keysToBeRemoved.some(key => {
+    const isWildPath = /^\*/.test(key);
+
+    if (isWildPath) {
+      const newKey = key.replace(/\*\.?/, '');
+      return objPathKey.includes(newKey);
+    }
+
+    return key === objPathKey;
+  });
+}
+/*
+    1) *.keyTobeRemoved -> means match every object path, this key will be removed
+    2) keyToBeremoved -> means root object key
+    3) nestedPath.keyToBeRemoved -> means only that nested path key
+    4) don't need to account for array iteration, just object key path is enough in the key to be removed.
+*/
+
+
+function removeKeysFromObject(obj, keysToBeRemoved, prevKeys = []) {
+  if (Array.isArray(obj)) {
+    return obj.map(item => removeKeysFromObject(item, keysToBeRemoved, prevKeys));
+  }
+
+  if (obj && typeof obj === 'object') {
+    const filteredKeyObject = {};
+    const ObjectKeys = Object.keys(obj);
+
+    for (const objectKey of ObjectKeys) {
+      const isKeyToBeRemoved = objectPathMatcher(objectKey, prevKeys, keysToBeRemoved);
+
+      if (!isKeyToBeRemoved) {
+        filteredKeyObject[objectKey] = removeKeysFromObject(obj[objectKey], keysToBeRemoved, [...prevKeys, objectKey]);
+      }
+    }
+
+    return filteredKeyObject;
+  }
+
+  return obj;
+}
+
+function* convertObjectToStringGen(obj) {
+  if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || obj === null) {
+    yield JSON.stringify(obj);
+  } else if (Array.isArray(obj)) {
+    yield '[';
+    let isFirst = true;
+
+    for (let item of obj) {
+      if (item === undefined) {
+        item = null;
+      }
+
+      yield `${isFirst ? '' : ','}`;
+      yield* convertObjectToStringGen(item);
+      isFirst = false;
+    }
+
+    yield ']';
+  } else {
+    yield '{';
+    let isFirst = true;
+    const entries = Object.entries(obj);
+
+    for (const [itemKey, itemValue] of entries) {
+      if (itemValue === undefined) {
+        continue;
+      }
+
+      yield `${isFirst ? '' : ','}${JSON.stringify(itemKey)}: `;
+      yield* convertObjectToStringGen(itemValue);
+      isFirst = false;
+    }
+
+    yield '}';
+  }
+}

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.11",
+  "version": "1.1.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.11",
+      "version": "1.1.10",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

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