@zohodesk/react-cli 0.0.1-beta.17 → 0.0.1-beta.171

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

@@ -1,88 +1,81 @@
-'use strict';
+"use strict";
 
-var _path = require('path');
+var _path = _interopRequireDefault(require("path"));
 
-var _path2 = _interopRequireDefault(_path);
+var _utils = require("../utils");
 
-var _utils = require('../utils');
+var _pluginUtils = require("../pluginUtils");
 
-var _pluginUtils = require('../pluginUtils');
+var _loaderUtils = require("../loaderUtils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _libAlias = require("./libAlias");
+
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
-var options = (0, _utils.getOptions)();
-var _options$docs = options.docs,
-    server = _options$docs.server,
-    componentFolder = _options$docs.componentFolder,
-    cssUniqueness = _options$docs.cssUniqueness,
-    singleStyleTag = _options$docs.singleStyleTag,
-    folder = options.app.folder;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var appPath = process.cwd();
-var serverUrl = (0, _utils.getServerURL)(server);
-var className = cssUniqueness ? 'fz__[hash:base64:5]' : '[name]__[local]';
+let options = (0, _utils.getOptions)();
+let {
+  unstableDepsInverse,
+  docs: {
+    componentFolder,
+    disableES5Transpile,
+    enableChunkHash,
+    cssUniqueness,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssHashSelectors,
+    classNamePrefix
+  },
+  app: {
+    folder
+  }
+} = options;
+let appPath = process.cwd();
+const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 
-module.exports = {
+module.exports = isSSTest => ({
   entry: {
-    main: [_path2.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path2.default.join(appPath, componentFolder, 'index.js')],
+    main: [_path.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path.default.join(appPath, componentFolder, 'index.js')],
     vendor: ['react', 'react-dom', 'redux', 'react-redux']
   },
-  devtool: 'eval',
+  devtool: 'none',
   mode: 'development',
   output: {
-    path: _path2.default.join(appPath, 'build'),
-    filename: '[name].js',
-    publicPath: serverUrl + '/docs/js',
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
     library: 'Component',
     libraryTarget: 'umd'
   },
-  plugins: (0, _pluginUtils.getDocsPlugins)(),
+  plugins: (0, _pluginUtils.getDocsPlugins)(isSSTest, options),
   module: {
     rules: [{
       test: /\.js$/,
       use: [{
         loader: 'babel-loader',
         options: {
-          presets: [[require.resolve('babel-preset-env'), { modules: false }], require.resolve('babel-preset-react')],
-          plugins: [[require.resolve('babel-plugin-transform-runtime'), {
+          presets: [[require.resolve('@babel/preset-env'), {
+            modules: false
+          }], require.resolve('@babel/preset-react')],
+          plugins: [[require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,
-            polyfill: true,
-            regenerator: false,
-            moduleName: 'babel-runtime'
-          }]],
+            regenerator: false
+          }], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-object-rest-spread')],
           cacheDirectory: true
         }
       }],
-      include: _path2.default.join(appPath, folder)
-      // exclude: /node_modules/
+      include: _path.default.join(appPath, folder)
     }, {
       test: /\.docs\.js$/,
       use: require.resolve('../loaders/docsLoader.js'),
+      include: _path.default.join(appPath, folder),
       exclude: /node_modules/
     }, {
-      test: /\.css$/,
-      use: [{
-        loader: 'style-loader',
-        options: {
-          singleton: singleStyleTag
-        }
-      }, {
-        loader: 'css-loader',
-        options: {
-          modules: true,
-          localIdentName: className
-        }
-      }]
-    }, {
-      test: /\.jpe?g$|\.gif$|\.png$/,
-      use: ['url-loader?limit=1000&name=./images/[name].[ext]']
-    }, {
-      test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
-      use: ['url-loader?limit=1000&name=./fonts/[name].[ext]']
-    }, {
-      test: /\.svg$/,
-      use: ['url-loader?limit=1&name=./fonts/[name].[ext]']
-    }, {
+      test: /(\.module)?\.css$/,
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {
         loader: 'html-loader',
@@ -91,15 +84,30 @@ module.exports = {
           interpolate: 'require'
         }
       }
+    }, {
+      test: /\.tmpl$/,
+      use: [{
+        loader: 'html-loader',
+        options: {
+          minimize: {
+            removeComments: true,
+            collapseWhitespace: false,
+            removeAttributeQuotes: false,
+            minifyCSS: false,
+            minifyJS: false
+          }
+        }
+      }]
     }]
   },
   externals: {
     ZC: '$ZC'
   },
   resolve: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
+    alias: disableES5Transpile ? _libAlias.libAlias : {}
   },
   resolveLoader: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
-};
+});

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("../utils");
+
+var _loaderUtils = require("../loaderUtils");
+
+var _getLibraryImactPlugins = _interopRequireDefault(require("../pluginUtils/getLibraryImactPlugins"));
+
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let options = (0, _utils.getOptions)();
+let {
+  docs: {
+    componentFolder,
+    cssUniqueness,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssHashSelectors,
+    enableChunkHash,
+    classNamePrefix
+  },
+  app: {
+    folder
+  }
+} = options;
+let appPath = process.cwd();
+const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
+module.exports = {
+  entry: {
+    main: [_path.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path.default.join(appPath, componentFolder, 'index.js')],
+    vendor: ['react', 'react-dom', 'redux', 'react-redux']
+  },
+  devtool: 'none',
+  mode: 'development',
+  output: {
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
+    library: 'Component',
+    libraryTarget: 'umd'
+  },
+  plugins: (0, _getLibraryImactPlugins.default)(options),
+  module: {
+    rules: [{
+      test: /\.js$/,
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          presets: [[require.resolve('@babel/preset-env'), {
+            modules: false
+          }], require.resolve('@babel/preset-react')],
+          plugins: [[require.resolve('@babel/plugin-transform-runtime'), {
+            helpers: true,
+            regenerator: false
+          }], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-object-rest-spread')],
+          cacheDirectory: true
+        }
+      }],
+      include: _path.default.join(appPath, folder)
+    }, {
+      test: /\.docs\.js$/,
+      use: require.resolve('../loaders/docsLoader.js'),
+      include: _path.default.join(appPath, folder),
+      exclude: /node_modules/
+    }, {
+      test: /(\.module)?\.css$/,
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
+      test: /\.html$/,
+      use: {
+        loader: 'html-loader',
+        options: {
+          attrs: [':data-src'],
+          interpolate: 'require'
+        }
+      }
+    }, {
+      test: /\.tmpl$/,
+      use: [{
+        loader: 'html-loader',
+        options: {
+          interpolate: 'require',
+          ignoreCustomFragments: [/\{\{.*?}}/, /\$\{.*?}/],
+          minimize: true,
+          removeComments: true,
+          collapseWhitespace: false,
+          removeAttributeQuotes: false,
+          minifyCSS: false,
+          minifyJS: false
+        }
+      }]
+    }]
+  },
+  externals: {
+    ZC: '$ZC'
+  },
+  resolve: {
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+  },
+  resolveLoader: {
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+  },
+  stats: 'errors-only'
+};

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

@@ -1,82 +1,108 @@
-'use strict';
+"use strict";
 
-var _path = require('path');
+var _path = _interopRequireDefault(require("path"));
 
-var _path2 = _interopRequireDefault(_path);
+var _utils = require("../utils");
 
-var _utils = require('../utils');
+var _common = require("../common");
 
-var _common = require('../common');
+var _pluginUtils = require("../pluginUtils");
 
-var _miniCssExtractPlugin = require('mini-css-extract-plugin');
+var _loaderUtils = require("../loaderUtils");
 
-var _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
+var _libAlias = require("./libAlias");
 
-var _pluginUtils = require('../pluginUtils');
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var options = (0, _utils.getOptions)();
-
-var _options$app = options.app,
-    folder = _options$app.folder,
-    context = _options$app.context,
-    styleTarget = _options$app.styleTarget,
-    useInsertInto = _options$app.useInsertInto,
-    useInsertAt = _options$app.useInsertAt,
-    cssUniqueness = _options$app.cssUniqueness,
-    enableChunkHash = _options$app.enableChunkHash,
-    outputFolder = _options$app.outputFolder,
-    disableES5Transpile = _options$app.disableES5Transpile,
-    singleStyleTag = _options$app.singleStyleTag,
-    removeAttribute = _options$app.removeAttribute;
-
-
-var appPath = process.cwd();
-//let { images, fonts } = staticDomainKeys;
-var className = cssUniqueness ? 'fz__[hash:base64:5]' : '[name]__[local]';
-
-var _process = process,
-    _process$isDevelopmen = _process.isDevelopment,
-    isDevelopment = _process$isDevelopmen === undefined ? false : _process$isDevelopmen;
-
+// import TerserPlugin from 'terser-webpack-plugin';
+let options = (0, _utils.getOptions)();
+let {
+  unstableDepsInverse,
+  app: {
+    folder,
+    context,
+    enableChunkHash,
+    outputFolder,
+    disableES5Transpile,
+    removeAttribute,
+    enableSMap,
+    server,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssUniqueness,
+    server: {
+      mode
+    },
+    seperateCssModules,
+    changeRuntimeChunkChar,
+    cssHashSelectors,
+    classNamePrefix,
+    selectorReplace,
+    removePropTypes,
+    devConsoleExculde,
+    crossorigin
+  }
+} = options;
+let appPath = process.cwd();
+let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
 enableChunkHash = !isDevelopment && enableChunkHash;
-
-var styleLoaderOption = {
-  singleton: singleStyleTag
+let output = {
+  path: _path.default.resolve(appPath, outputFolder),
+  filename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
+  chunkFilename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
+  jsonpFunction: `${context}Jsonp`,
+  sourceMapFilename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js.map' : 'js/[name]_.js.map'
 };
 
-if (useInsertInto) {
-  styleLoaderOption.insertInto = (0, _common.getInsertIntoFunction)(styleTarget);
+if (crossorigin) {
+  output.crossOriginLoading = 'anonymous';
 }
-if (useInsertAt) {
-  var getInsertAt = require('../common/getInsertAt');
-  var insertAt = getInsertAt();
-  styleLoaderOption.insertAt = insertAt;
+
+if (isDevelopment) {
+  let {
+    disableContextURL
+  } = server;
+  let contextURL = disableContextURL ? '' : context;
+  let serverUrl = (0, _utils.getServerURL)(server, 'https');
+  output.publicPath = `${[serverUrl, contextURL].filter(a => a).join('/')}/`;
 }
 
+let shouldRemovePropTypes = !isDevelopment && removePropTypes;
 module.exports = {
   entry: (0, _common.getEntries)(options, 'production'),
-  devtool: isDevelopment ? 'source-map' : 'hidden-source-map',
+  devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
   mode: 'production',
-  output: {
-    path: _path2.default.resolve(appPath, outputFolder),
-    filename: enableChunkHash ? 'js/[name].[chunkhash:20].js' : 'js/[name].js',
-    chunkFilename: enableChunkHash ? 'js/[name].[chunkhash:20].js' : 'js/[name].js',
-    jsonpFunction: context + 'Jsonp',
-    sourceMapFilename: enableChunkHash ? 'smap/[name].[chunkhash:20].map' : 'smap/[name].map'
-  },
+  output,
   optimization: {
     splitChunks: _common.splitChunks,
-    minimize: true,
     runtimeChunk: {
-      name: function name(entrypoint) {
-        return 'runtime~' + entrypoint.name;
-      }
+      name: entrypoint => changeRuntimeChunkChar ? `./runtime-${entrypoint.name}` : `./runtime~${entrypoint.name}`
     },
-    concatenateModules: true
+    concatenateModules: true,
+    minimize: true,
+    // by  default if  minimize: true in webpack minimize then webpack automaticaly add TerserPlugin,
+    //  So we are overrideing it.
+    // minimizer: [
+    //   new TerserPlugin({
+    //     cache: true,
+    //     parallel: true,
+    //     sourceMap: isDevelopment && enableSMap,
+    //     exclude: /\/smap/
+    //   })
+    // ],
+    moduleIds: 'named'
+  },
+  stats: {
+    children: false,
+    colors: true,
+    // excludeAssets: /i18n/,
+    // excludeAssets: /./,
+    warningsFilter: /\[mini-css-extract-plugin\]/
   },
-  plugins: (0, _pluginUtils.getProdPlugins)(options),
+  plugins: (0, _pluginUtils.getProdPlugins)(options, output.publicPath),
   module: {
     /* strictExportPresence for break the build when imported module not present in respective file */
     strictExportPresence: true,
@@ -85,40 +111,46 @@ module.exports = {
       use: [{
         loader: 'babel-loader',
         options: {
-          presets: [[require.resolve('babel-preset-env'), disableES5Transpile ? {
+          presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
             modules: false,
-            useBuiltIns: true,
+            useBuiltIns: 'usage',
+            corejs: 3,
             targets: {
-              browsers: ['Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15']
+              browsers: ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions']
             }
-          } : { modules: false }], require.resolve('babel-preset-react')],
-          plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, [require.resolve('babel-plugin-transform-runtime'), {
+          } : {
+            modules: false
+          }], require.resolve('@babel/preset-react')],
+          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'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+            exclude: ['error', 'log']
+          }] : null].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, [require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,
-            polyfill: true,
-            regenerator: false,
-            moduleName: 'babel-runtime'
-          }]].filter(Boolean),
+            regenerator: false
+          }], require.resolve('@babel/plugin-proposal-object-rest-spread'), require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+            exclude: ['error', 'log']
+          }] : null].filter(Boolean),
           cacheDirectory: true
         }
-      }],
-      include: _path2.default.join(appPath, folder)
-    }, {
-      test: /\.css$/,
-      use: [{
-        loader: _miniCssExtractPlugin2.default.loader,
-        options: {
-          // you can specify a publicPath here
-          // by default it use publicPath in webpackOptions.output
-          //publicPath: '../'
-        }
-      }, {
-        loader: 'css-loader',
-        options: {
-          modules: true,
-          localIdentName: '' + className,
-          minimize: true
+      }].filter(Boolean),
+      // include: path.join(appPath, folder)
+      include: module => {
+        let srcPath = _path.default.join(appPath, folder);
+
+        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+
+        if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
+          return true;
         }
-      }]
+
+        return false;
+      }
+    }, seperateCssModules ? {
+      test: /\.css$/,
+      exclude: /\.module\.css$/,
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
+    } : null, {
+      test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
       use: [{
@@ -126,27 +158,17 @@ module.exports = {
         options: {
           limit: 1000,
           name: enableChunkHash ? './images/[name].[hash:20].[ext]' : './images/[name].[ext]',
-          // publicPath: url =>
-          //   `staticDomain[${JSON.stringify(images)}] + ${JSON.stringify(
-          //     url
-          //   )}`,
-          //publicPathStringify: false,
-          fallback: _path2.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
+          fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
         }
       }]
-    }, {
+    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './images/[name].[hash:20].[ext]' : './images/[name].[ext]'), {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
       use: [{
         loader: 'url-loader',
         options: {
           limit: 1000,
           name: enableChunkHash ? './fonts/[name].[hash:20].[ext]' : './fonts/[name].[ext]',
-          // publicPath: url =>
-          //   `staticDomain[${JSON.stringify(fonts)}] + ${JSON.stringify(
-          //     url
-          //   )}`,
-          // publicPathStringify: false,
-          fallback: _path2.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
+          fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
         }
       }]
     }, {
@@ -156,23 +178,44 @@ module.exports = {
         options: {
           limit: 1,
           name: enableChunkHash ? './fonts/[name].[hash:20].[ext]' : './fonts/[name].[ext]',
-          // publicPath: url =>
-          //   `staticDomain[${JSON.stringify(fonts)}] + ${JSON.stringify(
-          //     url
-          //   )}`,
-          // publicPathStringify: false,
-          fallback: _path2.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
+          fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
+        }
+      }]
+    }, {
+      test: /\.ogg$/,
+      use: [{
+        loader: 'file-loader',
+        options: {
+          name: enableChunkHash ? './fonts/[name].[hash:20].[ext]' : './fonts/[name].[ext]'
+        }
+      }]
+    }, {
+      test: /\.tmpl$/,
+      use: [{
+        loader: 'html-loader',
+        options: {
+          minimize: false
         }
       }]
-    }]
+    }, {
+      test: /\.worker.js$/,
+      use: {
+        loader: require.resolve('../loaders/workerLoader.js'),
+        options: {
+          esModule: true,
+          filename: 'js/[name].[chunkhash:20].js'
+        }
+      }
+    }].filter(Boolean)
   },
   externals: {
     ZC: '$ZC'
   },
   resolve: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
+    alias: disableES5Transpile ? _libAlias.libAlias : {}
   },
   resolveLoader: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: unstableDepsInverse ? ['node_modules', _path.default.resolve(__dirname, '..', '..', 'node_modules')] : [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
 };