@zohodesk/react-cli 1.0.3-beta.1 → 1.0.3-exp.2

package/lib/loaders/composeLoader.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', //   'margin',
+'padding-top', 'padding-bottom', 'padding-left', 'padding-right', //   'padding',
+'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width'];
+const renameProps = {
+  'margin-top': {
+    pos: 'mt',
+    neg: 'mt_'
+  },
+  'margin-bottom': {
+    pos: 'mb',
+    neg: 'mb_'
+  },
+  'margin-left': {
+    pos: 'ml',
+    neg: 'ml_'
+  },
+  'margin-right': {
+    pos: 'mr',
+    neg: 'mr_'
+  },
+  margin: {
+    pos: 'm',
+    neg: 'm_'
+  },
+  'padding-top': {
+    pos: 'pt',
+    neg: 'pt_'
+  },
+  'padding-bottom': {
+    pos: 'pb',
+    neg: 'pb_'
+  },
+  'padding-left': {
+    pos: 'pl',
+    neg: 'pl_'
+  },
+  'padding-right': {
+    pos: 'pr',
+    neg: 'pr_'
+  },
+  padding: {
+    pos: 'p',
+    neg: 'p_'
+  },
+  top: {
+    pos: 'post',
+    neg: 'post_'
+  },
+  bottom: {
+    pos: 'posb',
+    neg: 'posb_'
+  },
+  left: {
+    pos: 'posl',
+    neg: 'posl_'
+  },
+  right: {
+    pos: 'posr',
+    neg: 'posr_'
+  },
+  height: {
+    pos: 'h',
+    neg: 'h_'
+  },
+  width: {
+    pos: 'w',
+    neg: 'w_'
+  },
+  'min-height': {
+    pos: 'minh',
+    neg: 'minh_'
+  },
+  'min-width': {
+    pos: 'minw',
+    neg: 'minw_'
+  },
+  'max-height': {
+    pos: 'maxh',
+    neg: 'maxh_'
+  },
+  'max-width': {
+    pos: 'maxw',
+    neg: 'maxw_'
+  }
+};
+
+function objToClassName(prop, data) {
+  return renameProps[prop] ? data < 0 ? renameProps[prop].neg ? `${renameProps[prop].neg}${data * -1}` : `undef${data * -1}` : renameProps[prop].pos ? `${renameProps[prop].pos}${data}` : `undef${data}` : `undef${data}`;
+}
+
+const commonFilePath = {
+  'margin-left': 'src/common/css/margin.css',
+  'margin-right': 'src/common/css/margin.css',
+  'margin-top': 'src/common/css/margin.css',
+  'margin-bottom': 'src/common/css/margin.css',
+  'padding-left': 'src/common/css/padding.css',
+  'padding-right': 'src/common/css/padding.css',
+  'padding-top': 'src/common/css/padding.css',
+  'padding-bottom': 'src/common/css/padding.css',
+  top: 'src/common/css/position.css',
+  bottom: 'src/common/css/position.css',
+  left: 'src/common/css/position.css',
+  right: 'src/common/css/position.css',
+  height: 'src/common/css/height.css',
+  width: 'src/common/css/width.css',
+  'min-height': 'src/common/css/height.css',
+  'min-width': 'src/common/css/width.css',
+  'max-height': 'src/common/css/height.css',
+  'max-width': 'src/common/css/width.css'
+}; // const preNames = {
+//   height: 'zd-height-',
+//   'max-height': 'zd-height-',
+//   'min-height': 'zd-height-',
+//   width: 'zd-width-',
+//   'max-width': 'zd-width-',
+//   'min-width': 'zd-width-',
+//   top: 'zd-position-',
+//   bottom: 'zd-position-',
+//   left: 'zd-position-',
+//   right: 'zd-position-',
+//   'padding-top': 'zd-padding-',
+//   'padding-bottom': 'zd-padding-',
+//   'padding-left': 'zd-padding-',
+//   'padding-right': 'zd-padding-',
+//   'margin-top': 'zd-margin-',
+//   'margin-bottom': 'zd-margin-',
+//   'margin-left': 'zd-margin-',
+//   'margin-right': 'zd-margin-'
+// };
+
+function allowParent(rule) {
+  return rule.parent.type === 'root' || rule.parent.type === 'atrule' && rule.parent.name === 'media';
+}
+
+module.exports = function (source) {
+  const {
+    resourcePath
+  } = this;
+
+  let root = _postcss.default.parse(source);
+
+  root.walkRules(rule => {
+    rule.walkDecls(decl => {
+      if (!allowParent(rule)) {
+        return;
+      }
+
+      if (supportedProps.includes(decl.prop) && /px$/gi.test(decl.value) && !/^--/gi.test(decl.prop) && commonFilePath[decl.prop] && !decl.value.includes('calc') && !/[,\s+]+|(\w+)\.|:|(\d+)%/gi.test(rule.selector)) {
+        let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
+        commonFilePath[decl.prop]).replace(/\\/gi, '/')}"`; // n++ < 10 && console.log(composeString);
+
+        if (!composeString.includes('src')) {
+          const cls = objToClassName(decl.prop, parseInt(decl.value));
+          composeString = `${cls} ${composeString}`;
+          decl.value = composeString;
+          decl.prop = 'composes'; // n < 10 && console.log(rule.selector, decl.prop, decl.value);
+        }
+      }
+    });
+  });
+  const output = root.toString(); // console.log(output);
+
+  return output;
+};

package/lib/loaders/workerLoader.js

@@ -16,7 +16,7 @@ var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntry
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
+/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
   'type': 'object',
@@ -80,14 +80,14 @@ function pitch(request) {
     globalObject: 'self'
   };
   workerContext.compiler = this._compilation.createChildCompiler(`worker-loader ${request}`, workerContext.options);
-  /* 
-  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
-  
-  if (compilerOptions.externals) {
-    new ExternalsPlugin(
-      getExternalsType(compilerOptions),
-      compilerOptions.externals
-    ).apply(workerContext.compiler);
+  /* 
+  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
+  
+  if (compilerOptions.externals) {
+    new ExternalsPlugin(
+      getExternalsType(compilerOptions),
+      compilerOptions.externals
+    ).apply(workerContext.compiler);
   } */
 
   new _SingleEntryPlugin.default(this.context, `!!${request}`, _path.default.parse(this.resourcePath).name).apply(workerContext.compiler);

package/lib/pluginUtils/getDevPlugins.js

@@ -51,6 +51,8 @@ const getDevPlugins = (options, publicPath) => {
       hasShadowDOM,
       cssVariableReplacementConfig,
       plugins: pluginObject,
+      patterns,
+      patternsRootDir,
       exclude,
       selectorWeightConfig,
       server: {
@@ -113,11 +115,11 @@ const getDevPlugins = (options, publicPath) => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].i18n.js';
@@ -199,16 +201,24 @@ const getDevPlugins = (options, publicPath) => {
 
   if (pluginObject.cssVariableReplacement) {
     pluginsArr.push(new _VariableConversionCollector.default({
-      cssVariableReplacementConfig
+      cssVariableReplacementConfig,
+      patterns,
+      patternsRootDir
     }));
   }
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
       selectorWeightConfig,
-      exclude: exclude.selectorWeight
+      exclude: exclude.selectorWeight,
+      patterns,
+      patternsRootDir
     }));
-  }
+  } // if (pluginObject.minifier) {
+  //   // console.log('minifier active');
+  //   pluginsArr.push(new MinifierPlugin());
+  // }
+
 
   return pluginsArr.filter(Boolean);
 };

package/lib/pluginUtils/getProdPlugins.js

@@ -47,12 +47,15 @@ const getProdPlugins = (options, publicPath = '') => {
     bundleAnalyze,
     optimize,
     publicPaths,
+    patterns,
+    patternsRootDir,
     hasEFC: prevOptionForEnableEFC,
     enableSMapHook,
     tpFolder,
     folder,
     outputFolder,
     context,
+    exclude,
     enableSMap,
     server: {
       mode
@@ -105,7 +108,7 @@ const getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -119,11 +122,11 @@ const getProdPlugins = (options, publicPath = '') => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';
@@ -271,13 +274,18 @@ const getProdPlugins = (options, publicPath = '') => {
 
   if (pluginObject.cssVariableReplacement) {
     pluginsArr.push(new _VariableConversionCollector.default({
-      cssVariableReplacementConfig
+      cssVariableReplacementConfig,
+      patterns,
+      patternsRootDir
     }));
   }
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
-      selectorWeightConfig
+      selectorWeightConfig,
+      exclude: exclude.selectorWeight,
+      patterns,
+      patternsRootDir
     }));
   } // plugins.push(new VariableConversionCollector({}));
 

package/lib/pluginUtils/getUMDCSSPlugins.js

@@ -27,7 +27,7 @@ let getUMDCSSPlugins = () => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[id].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/pluginUtils/getUMDComponentPlugins.js

@@ -27,7 +27,7 @@ let getUMDComponentPlugins = isDocs => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[name].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/plugins/CustomAttributePlugin.md

@@ -1,35 +1,35 @@
-# CustomAttributePlugin
- In this plugin we added all dynamic chunks tags (like js script tags , css script tags, i18n split script tags) to extra custom attribute
-
-## Options
-
-```json
-{
-  "name": "some",
-  "react-cli": {
-    "app": {
-      "customAttributes": {// this is the all options
-        "enable": false,
-        "attributes": null,
-        "jsAttributes": null,
-        "cssAttributes": null,
-        "i18nAttributes": null
-      }
-  }
-}
-```
-
-### enable   [Boolean]
-this decides is this plugin or feature needs to be enabled of not.
-
-
-### attributes   [Object] 
-It  was object of key value pairs Example Given Option {"data-app-name":"myapp"}  
-Then all dynamically (js script tags , css script tags, i18n split script tags) added tags via webpack 
-
-### jsAttributes   [Object] 
-same as [attributes] but only for js script tags
-### cssAttributes   [Object] 
-same as [attributes] but only for css script tags
-### i18nAttributes   [Object] 
-same as [attributes] but only for i18n split script tags
+# CustomAttributePlugin
+ In this plugin we added all dynamic chunks tags (like js script tags , css script tags, i18n split script tags) to extra custom attribute
+
+## Options
+
+```json
+{
+  "name": "some",
+  "react-cli": {
+    "app": {
+      "customAttributes": {// this is the all options
+        "enable": false,
+        "attributes": null,
+        "jsAttributes": null,
+        "cssAttributes": null,
+        "i18nAttributes": null
+      }
+  }
+}
+```
+
+### enable   [Boolean]
+this decides is this plugin or feature needs to be enabled of not.
+
+
+### attributes   [Object] 
+It  was object of key value pairs Example Given Option {"data-app-name":"myapp"}  
+Then all dynamically (js script tags , css script tags, i18n split script tags) added tags via webpack 
+
+### jsAttributes   [Object] 
+same as [attributes] but only for js script tags
+### cssAttributes   [Object] 
+same as [attributes] but only for css script tags
+### i18nAttributes   [Object] 
+same as [attributes] but only for i18n split script tags

package/lib/plugins/EFCPlugin.md

@@ -1,6 +1,6 @@
-# EFC Plugin
-
-In EFC plugin we are create sdk file for efc related purpose
-
-
-# document will be soon
+# EFC Plugin
+
+In EFC plugin we are create sdk file for efc related purpose
+
+
+# document will be soon

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -115,10 +115,10 @@ class I18NInjectIntoIndexPlugin {
         i18nObj = i18nFiles.reduce((res, next) => {
           const fileName = next.replace(`i18n${_path.default.sep}`, '');
           const splittedFileName = fileName.split('.');
-          /* if (this.isDevelopment) {
-            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
-          } else {
-            res[splittedFileName[0]] = fileName;
+          /* if (this.isDevelopment) {
+            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          } else {
+            res[splittedFileName[0]] = fileName;
           } */
 
           res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -13,23 +13,23 @@ var _hashUtils = require("./utils/hashUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * this plugin for the download i18n files
- * So, if need to downoad i18n in browser this plugin handle that
- *
- *
- * this plugin works
- * how it works?
- *  this plugin hook the requireEnsure method and we write logic for current compiled file download logic
- *
- * hinds:-
- *  requireEnsure method was loader for all js chunk's ,
- *  which means if we use dynamic import then this function will create script tag for that dynamic resource
- *  so every dynamic js chunk will load by this function,
- *  So we update this function with when  dynamic jschunk call the nour code also execute
- *
- * some thing  missing  in this definetion
- *
+/**
+ * this plugin for the download i18n files
+ * So, if need to downoad i18n in browser this plugin handle that
+ *
+ *
+ * this plugin works
+ * how it works?
+ *  this plugin hook the requireEnsure method and we write logic for current compiled file download logic
+ *
+ * hinds:-
+ *  requireEnsure method was loader for all js chunk's ,
+ *  which means if we use dynamic import then this function will create script tag for that dynamic resource
+ *  so every dynamic js chunk will load by this function,
+ *  So we update this function with when  dynamic jschunk call the nour code also execute
+ *
+ * some thing  missing  in this definetion
+ *
  */
 // import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
 const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
@@ -126,20 +126,20 @@ class I18nDownlodLogic {
       return _webpack.Template.asString([source, '', '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(mainChunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
     });
     mainTemplate.hooks.requireEnsure.tap(pluginName, (source, mainChunk, hash) => {
-      /**
-       * for Information this is tapped in mainTemplate ,
-       * So this hooks argument chunk is main chunk means entry chunk mostly.
-       * if any chunk has i18n then we must write our download  i18n logic,
+      /**
+       * for Information this is tapped in mainTemplate ,
+       * So this hooks argument chunk is main chunk means entry chunk mostly.
+       * if any chunk has i18n then we must write our download  i18n logic,
        */
       const chunkMap = this.getI18nChunkObject(mainChunk);
 
       if (!Object.keys(chunkMap).length) {
         return source;
       }
-      /**
-       *   chunkMaps has
-       *  @property  {Object} hash  [it has key  as chunk id and value as chunkHash ]
-       *  @property  {Object} name  [it has key  as chunk id and value as chunk name ]
+      /**
+       *   chunkMaps has
+       *  @property  {Object} hash  [it has key  as chunk id and value as chunkHash ]
+       *  @property  {Object} name  [it has key  as chunk id and value as chunk name ]
        */
 
 
@@ -176,22 +176,22 @@ class I18nDownlodLogic {
         },
         contentHashType: MODULE_TYPE
       });
-      /** IDEA:
-       *      as my suggestion ignore this `jsop` approch,
-       *      Because json parse is faster then js parse.
-       *      my suggestion  is make ajax or fetch request
+      /** IDEA:
+       *      as my suggestion ignore this `jsop` approch,
+       *      Because json parse is faster then js parse.
+       *      my suggestion  is make ajax or fetch request
        */
 
       const buf = [];
-      /*
-        if (REGEXP_HASH.test(filenameTemplate)) {
-          buf.push(
-            `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
-          );
-        }
-        if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
-          buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
-        }
+      /*
+        if (REGEXP_HASH.test(filenameTemplate)) {
+          buf.push(
+            `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
+          );
+        }
+        if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
+          buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
+        }
         */
 
       if ((0, _hashUtils.hasContentHash)(filenameTemplate)) {

package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js

@@ -13,8 +13,8 @@ var _getI18nKeysFormModules = _interopRequireDefault(require("./utils/getI18nKey
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * this plugin was creating the chunk specific i18n chunk's.
+/**
+ * this plugin was creating the chunk specific i18n chunk's.
  */
 // this plugin's kick  starter is apply method
 const pluginName = 'I18nFilesEmitter';
@@ -141,40 +141,40 @@ class I18nFilesEmitter {
   }
 
   apply(compiler) {
-    /*
-      compiler.hooks.thisCompilation.tap(pluginName, compilation => {
-        compilation.mainTemplate.hooks.renderManifest.tap(
-          pluginName,
-          (result, { chunk }) => {
-            this.renderChunk(result, compilation, chunk);
-          }
-        );
-           compilation.chunkTemplate.hooks.renderManifest.tap(
-          pluginName,
-          (result, { chunk }) => {
-            this.renderChunk(result, compilation, chunk);
-          }
-        );
-      });
+    /*
+      compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+        compilation.mainTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+            compilation.chunkTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+      });
       */
     // this below hook was tapped for create asssets(file) for chunk specific i18nChunk Files
     compiler.hooks.emit.tap(pluginName, compilation => {
       this.emitI18nAssert(compilation);
     });
   }
-  /*
-    renderChunk(result, compilation, chunk) {
-      const i18nKeys = getI18nKeysFormModules(chunk.modulesIterable);
-      // TODO: need to discuss with vimal ji can we chose this place for add i18n locale files ????
-      // IDEA:  we chose this place for add i18n locale files ????
-      if (i18nKeys.length > 0) {
-        Object.keys(this.allI18nObject).forEach(locale => {
-          result.push(
-            this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation)
-          );
-        });
-      }
-    }
+  /*
+    renderChunk(result, compilation, chunk) {
+      const i18nKeys = getI18nKeysFormModules(chunk.modulesIterable);
+      // TODO: need to discuss with vimal ji can we chose this place for add i18n locale files ????
+      // IDEA:  we chose this place for add i18n locale files ????
+      if (i18nKeys.length > 0) {
+        Object.keys(this.allI18nObject).forEach(locale => {
+          result.push(
+            this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation)
+          );
+        });
+      }
+    }
     */
 
 

package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js

@@ -14,14 +14,14 @@ var _NullFactory = _interopRequireDefault(require("webpack/lib/NullFactory"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'I18nKeysIdentifer';
-/**
- * this plugin search the i18 keys and make it as I18nDependency.
- * how it works?
- *  this plugin get jsResourceI18nKeys in constructor.
- *  we walk throught the js files AST
- *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
- *  after the walk of AST we get some I18n keys
- *  then we make it as I18nDependency.
+/**
+ * this plugin search the i18 keys and make it as I18nDependency.
+ * how it works?
+ *  this plugin get jsResourceI18nKeys in constructor.
+ *  we walk throught the js files AST
+ *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
+ *  after the walk of AST we get some I18n keys
+ *  then we make it as I18nDependency.
  */
 
 class I18nKeysIdentifer {