@zohodesk/react-cli 1.1.0 → 1.1.2-9.exp.3

package/lib/loaders/reactLiveConvertor.js

@@ -11,74 +11,76 @@ const traverse = require('@babel/traverse').default;
 
 const path = require('path');
 
+function getFilename(originalFilePath) {
+  const [fileName] = path.basename(originalFilePath).split('.');
+  return fileName;
+}
+
 function reactLiveConvertor(source, originalFilePath) {
-  let stringifyPath = JSON.stringify(originalFilePath);
-  var fileName = stringifyPath.substring(stringifyPath.lastIndexOf("/") + 1, stringifyPath.length).split('.')[0];
-
-  if (source) {
-    let importBlock = '';
-    let docCode = '';
-    let packages = new Set();
-    const fileContent = source.replace(/[\s\r\n]*$/, '');
-    const ast = parser.parse(fileContent, {
-      sourceType: 'module',
-      plugins: ['jsx', 'classProperties']
-    }); // Traverse the AST and find the import and export blocks
-
-    let remainingCode = ast.program.body.filter(node => {
-      return node.type !== "ImportDeclaration";
-    }).map(node => {
-      return fileContent.substring(node.start, node.end);
-    }).join("").replace(/export default/, '').replace(/export /, '').trim();
-    traverse(ast, {
-      ImportDeclaration(path) {
-        importBlock += fileContent.slice(path.node.start, path.node.end) + '\n';
-        path.node.specifiers.forEach(specifier => {
-          if (specifier.type === 'ImportSpecifier') {
-            packages.add(specifier.imported.name);
-          }
-
-          if (specifier.local.type == 'Identifier') {
-            packages.add(specifier.local.name);
-          }
-        });
-      },
-
-      ExpressionStatement(path) {
-        if (path.node.type == 'ExpressionStatement') {
-          if (path.node.expression.type == 'AssignmentExpression') {
-            if (path.node.expression.left.type == 'MemberExpression') {
-              let docCheck = fileContent.slice(path.node.expression.left.start, path.node.expression.left.end);
-
-              if (docCheck == `${fileName}.docs`) {
-                docCode = fileContent.slice(path.node.expression.start, path.node.expression.end);
-              }
-            }
-          }
+  const fileName = getFilename(originalFilePath);
+
+  if (!source) {
+    return '';
+  }
+
+  let importBlock = '';
+  let docCode = '';
+  const packages = new Set();
+  const fileContent = source.replace(/[\s\r\n]*$/, '');
+  const ast = parser.parse(fileContent, {
+    sourceType: 'module',
+    plugins: ['jsx', 'classProperties']
+  }); // Traverse the AST and find the import and export blocks
+
+  let remainingCode = ast.program.body.filter(node => node.type !== 'ImportDeclaration').map(node => fileContent.substring(node.start, node.end)).join('').replace(/export default/, '').replace(/export /, '').trim();
+  traverse(ast, {
+    ImportDeclaration(path) {
+      importBlock += `${fileContent.slice(path.node.start, path.node.end)}\n`;
+      path.node.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          packages.add(specifier.imported.name);
+        }
+
+        if (specifier.local.type === 'Identifier') {
+          packages.add(specifier.local.name);
+        }
+      });
+    },
+
+    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();
         }
-      } // IfStatement(path){
-      //   if(path.node.type == 'IfStatement'){
-      //     if(path.node.test.name == '__DOCS__'){
-      //       let final = fileContent.slice(path.node.start,path.node.end)
-      //       fileContent = fileContent.replace(final,'')
-      //       console.log(fileContent);
-      //     }
-      //   }
-      // }
-
-
-    });
-    remainingCode = remainingCode.replace(/__DOCS__/, true);
-    remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
-    let brcklets = `(function () { 
+      }
+    } // IfStatement(path){
+    //   if(path.node.type == 'IfStatement'){
+    //     if(path.node.test.name == '__DOCS__'){
+    //       let final = fileContent.slice(path.node.start,path.node.end)
+    //       fileContent = fileContent.replace(final,'')
+    //       console.log(fileContent);
+    //     }
+    //   }
+    // }
+
+
+  });
+  remainingCode = remainingCode.replace(/__DOCS__/, true);
+  remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  const brcklets = `(function () { 
 
       ${remainingCode}  
 
       return <${fileName} />
 
     }) ()`;
-    let addBractick = '`' + brcklets + '`';
-    let template = `
+  const addBractick = `\`${brcklets}\``;
+  const template = `
   
     ${importBlock}
   
@@ -98,10 +100,6 @@ function reactLiveConvertor(source, originalFilePath) {
     }
   
     ${docCode}
-    `; // fileName == 'CustomLookup__default' &&  console.log(docCode);
-
-    return template;
-  }
-
-  ;
+    `;
+  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);
+      const url = window.URL || window.webkitURL;
+      const blobUrl = url.createObjectURL(blob); // this.workerInstance = new Worker(blobUrl);
+      // return this.workerInstance;
+
       let worker = new Worker(blobUrl);
       return worker;
     }
 
-    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
+    ${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/logger.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.errorLogger = errorLogger;
 exports.messageLogger = messageLogger;
+exports.verboseLogger = verboseLogger;
 exports.warnLogger = warnLogger;
 
+/* eslint-disable no-console */
 function messageLogger(...args) {
   console.log(...args);
 }
@@ -17,4 +19,9 @@ function errorLogger(...args) {
 
 function warnLogger(...args) {
   console.warn(...args);
+}
+
+function verboseLogger(...args) {
+  // TODO: need to be remove when publish happens
+  process.env.VERBOSE === 'true' && console.log('\x1b[33m [verbose] \x1b[0m', ...args);
 }

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,51 @@ 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 {
+    [defaultScriptLoadingStrategy]: [/.*/]
+  };
+}
 
 function configHtmlWebpackPlugins(plugins, {
   enableChunkHash = false,
@@ -33,7 +82,8 @@ function configHtmlWebpackPlugins(plugins, {
   inject,
   crossorigin,
   hasEFC,
-  minify: minifyHtmlOptions = false
+  minify: minifyHtmlOptions = false,
+  customScriptLoadingStrategey = {}
 }) {
   const optionsHtmlWebpack = {
     chunksSortMode: 'none',
@@ -44,7 +94,7 @@ function configHtmlWebpackPlugins(plugins, {
     // ? minifyHtmlOptions
     // : minifyHtmlOptions,,
     templateParameters: _common.templateParameters,
-    scriptLoading: 'defer',
+    scriptLoading: defaultScriptLoadingStrategy,
     inject: inject
   };
 
@@ -56,4 +106,14 @@ function configHtmlWebpackPlugins(plugins, {
   crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
     crossorigin: 'anonymous'
   }));
+
+  if (customScriptLoadingStrategey.enable) {
+    const currentScriptLoadingStrategy = getScriptLoadingStrategy(customScriptLoadingStrategey.options);
+
+    if ((0, _utils.getTypeOf)(currentScriptLoadingStrategy) === 'object') {
+      plugins.push(new _CustomScriptLoadingStrategyPlugin.default({
+        scriptLoadingStategey: currentScriptLoadingStrategy
+      }));
+    }
+  }
 }

package/lib/pluginUtils/getDevPlugins.js

@@ -19,6 +19,8 @@ var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugi
 
 var _RequireVariablePublicPlugin = _interopRequireDefault(require("../plugins/RequireVariablePublicPlugin"));
 
+var _CssOrderControlPlugin = _interopRequireDefault(require("../plugins/CssOrderControlPlugin"));
+
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
 
 var _webpack = _interopRequireDefault(require("webpack"));
@@ -35,12 +37,17 @@ var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"
 
 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';
 const getDevPlugins = (options, publicPath) => {
   const {
     app: {
+      generateHtml,
       tpFolder,
       folder,
       instrumentScript,
@@ -58,7 +65,8 @@ const getDevPlugins = (options, publicPath) => {
         mode
       },
       htmlTemplate: {
-        inject
+        inject,
+        customScriptLoadingStrategey
       },
       crossorigin
     },
@@ -69,10 +77,12 @@ const getDevPlugins = (options, publicPath) => {
       localeAttr: efcLocaleAttr
     },
     css: {
-      enableRTLSplit
+      enableRTLSplit,
+      cssOrderControler
     },
     i18n,
-    unusedFiles
+    unusedFiles,
+    resourceHints
   } = options;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const cssLTRFileNameTempalte = enableRTLSplit ? 'css/[name].ltr.css' : 'css/[name].css';
@@ -94,7 +104,7 @@ const getDevPlugins = (options, publicPath) => {
     filename: cssLTRFileNameTempalte,
     // ignoreOrder: true,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin()];
+  }), new _plugins.ResourceHintsPlugin(resourceHints)];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -157,13 +167,14 @@ const getDevPlugins = (options, publicPath) => {
     collections: true,
     shorthands: true
   }));
-  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+  generateHtml && (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
     enableChunkHash: false,
     folder,
     minify: false,
     inject,
     crossorigin,
-    hasEFC
+    hasEFC,
+    customScriptLoadingStrategey
   });
 
   if (hasEFC) {
@@ -189,7 +200,11 @@ const getDevPlugins = (options, publicPath) => {
     mainChunkName: 'main'
   }));
   instrumentScript && pluginsArr.push(new _plugins.ScriptInstrumentPlugin());
+  cssOrderControler.enable && pluginsArr.push(new _CssOrderControlPlugin.default(cssOrderControler));
   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) {
@@ -211,12 +226,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,14 +27,22 @@ 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");
 
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _CssOrderControlPlugin = _interopRequireDefault(require("../plugins/CssOrderControlPlugin"));
+
 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
@@ -43,6 +51,7 @@ const getProdPlugins = (options, publicPath = '') => {
     enableChunkHash
   } = options.app;
   const {
+    generateHtml,
     manifestFileName,
     bundleAnalyze,
     optimize,
@@ -74,13 +83,15 @@ const getProdPlugins = (options, publicPath = '') => {
   } = options.app;
   const {
     inject,
-    minify: minifyHtmlOptions
+    minify: minifyHtmlOptions,
+    customScriptLoadingStrategey
   } = htmlTemplate;
   const {
     i18n
   } = options;
   const {
-    enableRTLSplit
+    enableRTLSplit,
+    cssOrderControler
   } = options.css;
   const {
     hasEFC: newOptionForEnableEFC,
@@ -88,6 +99,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`;
@@ -107,7 +124,7 @@ const getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
+  }), new _plugins.ResourceHintsPlugin(options.resourceHints), new _plugins.MinifyPlugin()];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -161,11 +178,12 @@ const getProdPlugins = (options, publicPath = '') => {
     to: `./${tpFolder}/`,
     toType: 'dir'
   }]));
-  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+  generateHtml && (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
     enableChunkHash,
     folder,
     inject,
     minify: minifyHtmlOptions,
+    customScriptLoadingStrategey,
     crossorigin,
     hasEFC
   });
@@ -227,9 +245,9 @@ const getProdPlugins = (options, publicPath = '') => {
     if (bundleAnalyze) {
       pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        generateStatsFile: true,
+        generateStatsFile: false,
         openAnalyzer: false,
-        statsOptions: {
+        statsOptions: enableStats ? null : {
           source: false,
           normal: true,
           chunks: false,
@@ -287,7 +305,17 @@ const getProdPlugins = (options, publicPath = '') => {
   } // plugins.push(new VariableConversionCollector({}));
 
 
+  cssOrderControler.enable && pluginsArr.push(new _CssOrderControlPlugin.default(cssOrderControler));
   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
+  }));
+  pluginsArr.push(new _EventsHandlingPlugin.EventsHandlingPlugin());
   return pluginsArr;
 };
 

package/lib/plugins/CssOrderControlPlugin.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class CssOrderControlPlugin {
+  constructor(options) {
+    this.options = {
+      className: options.className
+    };
+  }
+
+  apply(compiler) {
+    // NOTE: we not using this, Reason currently this option is only need for EFC,
+    // So it do not needed.
+    const className = this.options.className;
+    compiler.hooks.thisCompilation.tap({
+      name: 'CssOrderControlPlugin',
+      stage: 1,
+      fn: compilation => {
+        compilation.mainTemplate.hooks.requireEnsure.tap('CssOrderControlPlugin', source => {
+          // const str = attributeSetTemplate(cssAttributes, 'linkTag');
+          const replacedStr = source.replace('head.appendChild(linkTag);', `var referenceTag = document.getElementById('${className}');
+                   head.insertBefore(linkTag, referenceTag);`); //   console.log({ s: source, r: replacedStr });
+
+          return replacedStr;
+        });
+      }
+    });
+  }
+
+}
+
+exports.default = CssOrderControlPlugin;