@zohodesk/react-cli 1.1.12 → 1.1.14-exp.1

package/README.md

@@ -44,50 +44,49 @@ Now to run app
 
 # Change Logs
 
-# 1.1.12
+# 1.1.14-exp.1 (20-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.
+**Feature:-**
 
-**Changes**
-- Added a new config `stats` to control stats file generation.
-- Using Existing custom attributes flag, we can control resource cleanup plugin.
+- externals was added to  Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.
+- to use externals, we use the following pattern in `app > externals` :
 
-# 1.1.11-exp.6 (31-8-2023)
+For example
+```
+   externals: {
+    <key> : <value>
+   }
+```
+# 1.1.14 (11-9-2023)
 
-**Features**
+**Feature:-**
 
-- Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by custom attributes enable flag.
+- Value Replacer supports `^` before and `$` after the word to consider the whole word for replacement. Only if the exact word comes as value, there will be a replacement made.
 
-**Changes**
+**Issue Fix**
 
-- For stats plugin, added the separation of object manipulation method with converting object to string.
+- 'space' character on variable conversion changes to undefined fixed.
+- calc(100%) variable conversion to undefined fixed.
+- height value if text converts to undefined, issue fixed.
 
-# 1.1.11-exp.3 (22-8-2023)
+# 1.1.13 (4-9-2023)
 
 **Changes**
 
-- Changed the default name of stats file to `build-report-integrity.json`
-- Added optimization to reduce the stats file creation time. like streaming.
-- Added support to exclude keys suggested
+- Fixed the issue related to the resource cleanup plugin. (EfcResouceCleanupPlugin)
 
-# 1.1.11-exp.2 (11-8-2023)
 
-**Changes**
+# 1.1.12 (1-9-2023)
 
-- Added more customization support for `stats.json` output.
-- Disabling `bundle-analyser` stats report for our customized stats output based on a flag.
+**Features**
 
-# 1.1.11-exp.1 (8-8-2023)
+- 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.
-
-**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`.
+- Using Existing custom attributes flag, we can control resource cleanup plugin.
 
 # 1.1.11 (4-8-2023)
 

package/docs/ValueReplacer.md

@@ -58,3 +58,30 @@ new option `valueReplacer` added for replace css property value while build runn
     font: zdf-rCallBar_1 !important;
   }
   ```
+
+
+If we need the exact word to be considered for replacement ( that is, if value is `text` and only if the value is `text` and not `text_cursor` or `cursortext` for example, the conversion happens ) we have to use `^` before the word and `$` after the word in the key. 
+
+# For Example : 
+{
+  valueReplacer: [
+      {
+        "props": [
+          "cursor",
+          "--label_cursor",
+          "--checkbox_cursor",
+          "--tag_cursor",
+          "--button_cursor",
+          "--textboxicon_icon_cursor",
+        ],
+        "values": {
+          "^default$": "var(--zdr-cursor-default)",
+          "^pointer$": "var(--zdr-cursor-pointer)",
+          "^text$": "var(--zdr-cursor-text)",
+          "^move$": "var(--zdr-cursor-move)",
+        }
+      }
+    ]
+}
+
+- Here we have added `^` before and `$` after default, pointer, text and move. Only if the exact words default, pointer, text and move are used, the values will be converted.

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

@@ -41,7 +41,8 @@ const {
     devConsoleExculde,
     sourcemap,
     crossorigin,
-    postCssPluginOrder
+    postCssPluginOrder,
+    externals
   }
 } = options;
 const {
@@ -151,9 +152,9 @@ module.exports = {
       }
     }].filter(Boolean)
   },
-  externals: {
+  externals: Object.assign({
     ZC: '$ZC'
-  },
+  }, externals),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -46,7 +46,8 @@ const {
     removePropTypes,
     devConsoleExculde,
     crossorigin,
-    postCssPluginOrder
+    postCssPluginOrder,
+    externals
   }
 } = options;
 let {
@@ -240,9 +241,9 @@ module.exports = {
       }
     }].filter(Boolean)
   },
-  externals: {
+  externals: Object.assign(externals, {
     ZC: '$ZC'
-  },
+  }),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

package/lib/pluginUtils/getDevPlugins.js

@@ -193,7 +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(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

@@ -298,7 +298,9 @@ const getProdPlugins = (options, publicPath = '') => {
 
 
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
-  customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(customAttributes));
+  customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(Object.assign({}, customAttributes, {
+    globalCacheObj: context
+  })));
   enableStats && pluginsArr.push(new _StatsPlugin.default({
     statsOptions,
     statsOutputExcludeKeys,

package/lib/plugins/EfcResourceCleanupPlugin.js

@@ -15,10 +15,14 @@ module.exports = class EfcResouceCleanupPlugin {
       mainTemplate
     }) => {
       mainTemplate.hooks.afterStartup.tap(plugInName, source => {
-        const attributesArr = Object.entries(this.options.attributes);
+        const {
+          attributes,
+          globalCacheObj
+        } = this.options;
+        const attributesArr = Object.entries(attributes);
         const [[attributekey, attributeValue]] = attributesArr;
         const resourceSelector = `[${attributekey}="${attributeValue}"]`;
-        return Template.asString([source, Template.indent([`     jsonpArray.unInstall = function() {
+        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);
                  `, `
@@ -27,11 +31,11 @@ module.exports = class EfcResouceCleanupPlugin {
                  __webpack_require__.m = null;
                  __webpack_require__.c = null;
               
-                 `, `   
-                const addedResources = document.querySelectorAll('${resourceSelector}');
-                addedResources.forEach(addedResource => addedResource.remove());
-            }
-                `])]);
+                 `, attributekey && attributeValue ? `    
+          const addedResources = document.querySelectorAll('${resourceSelector}');
+          addedResources.forEach(addedResource => addedResource.remove());
+      }
+          ` : ''])]);
       });
     });
   }

package/lib/plugins/StatsPlugin.js

@@ -20,13 +20,13 @@ const statsSchema = {
 
 class StatsPlugin {
   constructor({
-    statsOptions = {},
-    statsOutputExcludeKeys = [],
-    statsFileName = 'bundle-report-integrity.json'
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
   }) {
-    this.excludeKeysInStat = statsOutputExcludeKeys;
-    this.statsOptions = Object.assign({}, statsSchema, statsOptions);
-    this.statsFileName = statsFileName;
+    this.excludeKeysInStat = statsOutputExcludeKeys || [];
+    this.statsFileName = statsFileName || 'bundle-report-integrity.json';
+    this.statsOptions = Object.assign({}, statsSchema, statsOptions || {});
   }
 
   apply(compiler) {

package/lib/plugins/variableConvertorUtils.js

@@ -63,7 +63,7 @@ function convertToCalc(pxReplacement, value) {
 
 function convertCalcValue(pxReplacement, parsedValue) {
   Object.keys(parsedValue).forEach(key => {
-    if (parsedValue[key].includes('px')) {
+    if (pxReplacement && parsedValue[key].includes('px')) {
       parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
     }
   });
@@ -95,7 +95,9 @@ function variableConverter(rootOriginal, variables, settingsObject) {
           }
 
           const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+          let valArr = decl.value.split(' ');
+          valArr = valArr.filter(x => x.trim() !== '');
+          valArr = valArr.map(x => x.replace(/\r|\t|\n/gi, '')); // single values are considered in the above array and converted below
 
           valArr.forEach((value, index) => {
             if (value.includes('px')) {

package/lib/postcss-plugins/ValueReplacer.js

@@ -4,29 +4,19 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// module.exports = postcss.plugin('postcss-value-replacer', opts => {
-//   const { plugins } = opts;
-//   return (root, result) => {
-//     const inputFile = root.source.input.file;
-//     let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
-//     if (!isIgnoredFile) {
-//       const handler = response =>
-//         response.messages.forEach(msg => result.messages.push(msg));
-//       return postcss(plugins)
-//         .process(root, { from: undefined })
-//         .then(handler);
-//     }
-//   };
-// });
-// export default
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
       if (obj.props.indexOf(decl.prop) !== -1) {
-        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
-          decl.value = decl.value.replace(k, obj.values[k]);
+          // if (/^\^.*\$$/gi.test(k)) {
+          if (k.startsWith('^') && k.endsWith('$')) {
+            decl.value = decl.value.replace(new RegExp(k), obj.values[k]);
+          } else {
+            decl.value = decl.value.replace(k, obj.values[k]);
+          }
         }); //decl.value = obj.values[decl.value];
       }
     }); //console.log({root, roots:root+""}, root+"")

package/lib/postcss-plugins/__test__/valueReplacer.spec.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.abc{ cursor : text }`;
+    const cssOutputStr = `.abc{ cursor : --textCursor }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+
+function runValueReplacerForCssString(cssInputStr, cssOptions) {
+  return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
+}

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -92,7 +92,13 @@ function pxToCalc(value) {
   return arr.join(' ');
 }
 
-const singleConvertor = (value, changeVal, details, range) => {
+const singleConvertor = ({
+  value,
+  changeVal,
+  details,
+  range,
+  allowed
+}) => {
   const {
     path,
     filename,
@@ -106,6 +112,10 @@ const singleConvertor = (value, changeVal, details, range) => {
     }
   }
 
+  if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
+    return decl.value;
+  }
+
   if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
     if (value.trim() === '0px') {
       return '0';
@@ -204,6 +214,9 @@ module.exports = {
             .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
             // console.log('unit : ');
             // console.log(unit);
+            // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unit, 'case 1');
+            // }
 
             unit.forEach((val, index) => {
               allowed.forEach(alwdVal => {
@@ -223,21 +236,49 @@ module.exports = {
                   unitErrorVal = val;
                 }
               }
-            }); // console.log(allowed, replacements, range)
+            }); // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
+            // }
+            // console.log(allowed, replacements, range)
 
             if (!unitError) {
-              // use variable decl.value.split(' ')
-              if (range) {
+              let calcValue = false;
+
+              if (decl.value.includes('calc')) {
+                decl.value = pxToCalc(decl.value);
+                calcValue = true;
+              } // use variable decl.value.split(' ')
+
+
+              if (range && !calcValue) {
                 // console.log('multiple :', decl.value)
+                const tempVal = decl.value; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
+                // }
+                // if (decl.prop === 'height') {
+                //   console.log('allowed!', decl.prop, decl.value, allowed);
+                // }
+
                 let newVal = '';
-                decl.value.split(' ').forEach(singleVal => {
-                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range)} `;
+                let splitValues = decl.value.split(' ');
+                splitValues = splitValues.filter(val => val.trim() !== '');
+                splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
+                splitValues.forEach(singleVal => {
+                  newVal += `${singleConvertor({
+                    value: singleVal,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  })} `;
                 });
-                decl.value = newVal;
+                decl.value = newVal; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, newVal, 'case 4');
+                // }
               }
             } else {
               if (!decl.value.includes('calc')) {
@@ -276,15 +317,22 @@ module.exports = {
               const valArr = decl.value.split(' ');
               const settings = settingsObject[decl.prop];
               const {
-                range
+                range,
+                allowed
               } = settings;
               const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  const convertedVal = singleConvertor(val, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range);
+                  const convertedVal = singleConvertor({
+                    value: val,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  });
                   return convertedVal ? convertedVal : val;
                 }
 

package/lib/schemas/index.js

@@ -729,9 +729,10 @@ var _default = {
       value: false,
       cli: 'enable_stats'
     },
-    fileName: undefined,
-    options: undefined,
-    excludeKeys: undefined
-  }
+    fileName: null,
+    options: null,
+    excludeKeys: null
+  },
+  externals: null
 };
 exports.default = _default;

package/npm-shrinkwrap.json

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

package/package.json

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