@zohodesk/react-cli 0.0.1-test.148.3 → 1.0.0

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

@@ -10,46 +10,65 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
+
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   app: {
     folder,
     context,
     server,
     outputFolder,
-    rtlExclude,
-    hasRTL,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
+    selectorWeightConfig,
     cssUniqueness,
     seperateCssModules,
     changeRuntimeChunkChar,
+    // we are going to use this for fonts file name collide in issue in devmode
+    enableChunkHash,
     cssHashSelectors,
     classNamePrefix,
     selectorReplace,
-    disableES5Transpile,
-    devConsoleExculde
+    devConsoleExculde,
+    sourcemap,
+    crossorigin
   }
 } = options;
-let {
+const {
   disableContextURL
 } = server;
-let appPath = process.cwd();
-let contextURL = disableContextURL ? '' : context;
-let serverUrl = (0, _utils.getServerURL)(server, 'https');
-let output = {
+const appPath = process.cwd();
+const contextURL = disableContextURL ? '' : context;
+const serverUrl = (0, _utils.getServerURL)(server, 'https');
+const output = {
   path: _path.default.join(appPath, outputFolder),
   filename: 'js/[name].js',
   chunkFilename: 'js/[name].js',
   publicPath: `${[serverUrl, contextURL].filter(a => a).join('/')}/`,
   jsonpFunction: `${context}Jsonp`
 };
+const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
+
+if (crossorigin) {
+  output.crossOriginLoading = 'anonymous';
+}
+
 module.exports = {
   entry: (0, _common.getEntries)(options, 'dev'),
-  devtool: 'cheap-eval-source-map',
+  devtool: sourcemap,
   mode: 'development',
+  // watchOptions: {
+  //   ignored: /node_modules.(?!@zohodesk)/
+  // },
   output,
-  stats: {
+  stats: options.app.disableWatch ? 'errors-only' : {
     children: false
   },
   optimization: {
@@ -67,9 +86,9 @@ module.exports = {
       test: /\.js$/,
       use: (0, _loaderUtils.getDevJsLoaders)(options),
       include: module => {
-        let srcPath = _path.default.join(appPath, folder);
+        const srcPath = _path.default.join(appPath, folder);
 
-        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+        const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
 
         if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
           return true;
@@ -80,23 +99,31 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)({
+        plugins,
+        exclude,
+        mediaQueryHoverActiveString,
+        cssVariableReplacementConfig,
+        selectorWeightConfig,
+        classNameBlob: '[local]',
+        cssUniqueness: false,
+        selectorReplace: null
+      })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
-    }, {
-      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: /\.ogg$/,
-      use: ['file-loader?name=./fonts/[name].[ext]']
-    }, {
+      use: (0, _loaderUtils.getCSSLoaders)({
+        plugins,
+        exclude,
+        mediaQueryHoverActiveString,
+        cssVariableReplacementConfig,
+        selectorWeightConfig,
+        classNameBlob: null,
+        cssUniqueness,
+        selectorReplace,
+        cssHashSelectors,
+        classNamePrefix
+      })
+    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
       use: [{
         loader: 'html-loader',
@@ -118,28 +145,6 @@ module.exports = {
   externals: {
     ZC: '$ZC'
   },
-  resolve: {
-    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
-    alias: disableES5Transpile ? {
-      '@zohodesk/components/lib': '@zohodesk/components/es',
-      '@zohodesk/dot/lib': '@zohodesk/dot/es',
-      '@zohodesk/i18n/lib': '@zohodesk/i18n/es',
-      '@zohodesk/icons/lib': '@zohodesk/icons/es',
-      '@zohodesk/normalizer/lib': '@zohodesk/normalizer/es',
-      '@zohodesk/perf-components/lib': '@zohodesk/perf-components/es',
-      '@zohodesk/perf-middleware/lib': '@zohodesk/perf-middleware/es',
-      '@zohodesk/permissions/lib': '@zohodesk/permissions/es',
-      '@zohodesk/platform-middleware/lib': '@zohodesk/platform-middleware/es',
-      '@zohodesk/react-dnd/lib': '@zohodesk/react-dnd/es',
-      '@zohodesk/router-middleware/lib': '@zohodesk/router-middleware/es',
-      '@zohodesk/storage/lib': '@zohodesk/storage/es',
-      '@zohodesk/svg/lib': '@zohodesk/svg/es',
-      '@zohodesk/timetracker/lib': '@zohodesk/timetracker/es',
-      '@zohodesk/variables/lib': '@zohodesk/variables/es',
-      '@zohodesk/virtualizer/lib': '@zohodesk/virtualizer/es'
-    } : {}
-  },
-  resolveLoader: {
-    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-  }
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -8,15 +8,23 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
+
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   docs: {
     componentFolder,
+    enableChunkHash,
     cssUniqueness,
-    hasRTL,
-    rtlExclude,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
+    selectorWeightConfig,
     cssHashSelectors,
     classNamePrefix
   },
@@ -24,93 +32,88 @@ let {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const appPath = process.cwd();
+const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 
 module.exports = isSSTest => ({
   entry: {
-    main: [_path.default.resolve(__dirname, "..", "hooks", "docsProptypeHook.js"), _path.default.join(appPath, componentFolder, "index.js")],
-    vendor: ["react", "react-dom", "redux", "react-redux"]
+    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",
+  devtool: 'none',
+  mode: 'development',
   output: {
-    path: _path.default.join(appPath, "build"),
-    filename: "js/[name].js",
-    publicPath: "/docs/",
-    library: "Component",
-    libraryTarget: "umd"
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
+    library: 'Component',
+    libraryTarget: 'umd'
   },
   plugins: (0, _pluginUtils.getDocsPlugins)(isSSTest, options),
   module: {
     rules: [{
       test: /\.js$/,
       use: [{
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          presets: [[require.resolve("@babel/preset-env"), {
+          presets: [[require.resolve('@babel/preset-env'), {
             modules: false
-          }], require.resolve("@babel/preset-react")],
-          plugins: [[require.resolve("@babel/plugin-transform-runtime"), {
+          }], 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")],
+          }], 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"),
+      use: require.resolve('../loaders/docsLoader.js'),
       include: _path.default.join(appPath, folder),
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
-    }, {
-      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]"]
-    }, {
+      use: (0, _loaderUtils.getCSSLoaders)({
+        plugins,
+        exclude,
+        mediaQueryHoverActiveString,
+        cssVariableReplacementConfig,
+        selectorWeightConfig,
+        classNameBlob: false,
+        cssUniqueness,
+        selectorReplace: 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",
+        loader: 'html-loader',
         options: {
-          attrs: [":data-src"],
-          interpolate: "require"
+          attrs: [':data-src'],
+          interpolate: 'require'
         }
       }
-    }, {
-      test: /\.ogg$/,
-      use: ["file-loader?name=./fonts/[name].[ext]"]
     }, {
       test: /\.tmpl$/,
       use: [{
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
-          interpolate: "require",
-          ignoreCustomFragments: [/\{\{.*?}}/, /\$\{.*?}/],
-          minimize: true,
-          removeComments: true,
-          collapseWhitespace: false,
-          removeAttributeQuotes: false,
-          minifyCSS: false,
-          minifyJS: false
+          minimize: {
+            removeComments: true,
+            collapseWhitespace: false,
+            removeAttributeQuotes: false,
+            minifyCSS: false,
+            minifyJS: false
+          }
         }
       }]
     }]
   },
   externals: {
-    ZC: "$ZC"
+    ZC: '$ZC'
   },
-  resolve: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
-  },
-  resolveLoader: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
-  }
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 });

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

@@ -4,94 +4,103 @@ var _path = _interopRequireDefault(require("path"));
 
 var _utils = require("../utils");
 
-var _pluginUtils = require("../pluginUtils");
-
 var _loaderUtils = require("../loaderUtils");
 
+var _getLibraryImactPlugins = _interopRequireDefault(require("../pluginUtils/getLibraryImactPlugins"));
+
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
+
+var _resolvers = require("./resolvers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   docs: {
     componentFolder,
     cssUniqueness,
-    hasRTL,
-    rtlExclude,
+    plugins,
+    exclude,
+    mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
+    selectorWeightConfig,
     cssHashSelectors,
+    enableChunkHash,
     classNamePrefix
   },
   app: {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const 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"]
+    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",
+  devtool: 'none',
+  mode: 'development',
+  stats: 'errors-only',
   output: {
-    path: _path.default.join(appPath, "build"),
-    filename: "js/[name].js",
-    publicPath: "/docs/",
-    library: "Component",
-    libraryTarget: "umd"
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
+    library: 'Component',
+    libraryTarget: 'umd'
   },
-  plugins: (0, _pluginUtils.getDocsPlugins)(false, options),
+  plugins: (0, _getLibraryImactPlugins.default)(options),
   module: {
     rules: [{
       test: /\.js$/,
       use: [{
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          presets: [[require.resolve("@babel/preset-env"), {
+          presets: [[require.resolve('@babel/preset-env'), {
             modules: false
-          }], require.resolve("@babel/preset-react")],
-          plugins: [[require.resolve("@babel/plugin-transform-runtime"), {
+          }], 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")],
+          }], 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"),
+      use: require.resolve('../loaders/docsLoader.js'),
       include: _path.default.join(appPath, folder),
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
-    }, {
-      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]"]
-    }, {
+      use: (0, _loaderUtils.getCSSLoaders)({
+        plugins,
+        exclude,
+        mediaQueryHoverActiveString,
+        cssVariableReplacementConfig,
+        selectorWeightConfig,
+        classNameBlob: false,
+        cssUniqueness,
+        selectorReplace: 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",
+        loader: 'html-loader',
         options: {
-          attrs: [":data-src"],
-          interpolate: "require"
+          attrs: [':data-src'],
+          interpolate: 'require'
         }
       }
-    }, {
-      test: /\.ogg$/,
-      use: ["file-loader?name=./fonts/[name].[ext]"]
     }, {
       test: /\.tmpl$/,
       use: [{
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
-          interpolate: "require",
+          interpolate: 'require',
           ignoreCustomFragments: [/\{\{.*?}}/, /\$\{.*?}/],
           minimize: true,
           removeComments: true,
@@ -104,13 +113,8 @@ module.exports = {
     }]
   },
   externals: {
-    ZC: "$ZC"
-  },
-  resolve: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
-  },
-  resolveLoader: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+    ZC: '$ZC'
   },
-  stats: 'errors-only'
+  resolve: (0, _resolvers.moduleResolver)(options),
+  resolveLoader: (0, _resolvers.loaderResolver)(options)
 };