@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.160

package/lib/configs/webpack.css.umd.config.js

@@ -1,42 +1,42 @@
-'use strict';
+"use strict";
 
-var _path = require('path');
+var _path = _interopRequireDefault(require("path"));
 
-var _path2 = _interopRequireDefault(_path);
+var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _miniCssExtractPlugin = require('mini-css-extract-plugin');
+var _utils = require("../utils");
 
-var _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
+var _cssClassNameGenerate = _interopRequireDefault(require("../utils/cssClassNameGenerate"));
 
-var _utils = require('../utils');
-
-var _pluginUtils = require('../pluginUtils');
+var _pluginUtils = require("../pluginUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var options = (0, _utils.getOptions)();
-var _options$umd$css = options.umd.css,
-    umdVar = _options$umd$css.umdVar,
-    watch = _options$umd$css.watch,
-    outputFolder = _options$umd$css.outputFolder,
-    cssUniqueness = _options$umd$css.cssUniqueness,
-    folder = _options$umd$css.folder,
-    publicPath = _options$umd$css.publicPath,
-    packageVersion = options.packageVersion;
-
-
-var appPath = process.cwd();
-var className = cssUniqueness ? 'fz__[hash:base64:5]' : '[name]__[local]';
-
-var publicPathStr = (publicPath || '//js.zohostatic.com/support/zohodeskcomponent@' + packageVersion) + '/' + outputFolder + '/';
-
+let options = (0, _utils.getOptions)();
+let {
+  umd: {
+    css: {
+      umdVar,
+      watch,
+      outputFolder,
+      cssUniqueness,
+      folder,
+      publicPath,
+      cssHashSelectors,
+      classNamePrefix
+    }
+  },
+  packageVersion
+} = options;
+let appPath = process.cwd();
+let publicPathStr = `${publicPath || `${'//js.zohostatic.com/support/zohodeskcomponent@'}${packageVersion}`}/${outputFolder}/`;
 module.exports = {
   watch: watch,
   entry: {
-    main: _path2.default.join(appPath, folder, 'css.js')
+    main: _path.default.join(appPath, folder, 'css.js')
   },
   output: {
-    path: _path2.default.resolve(appPath, outputFolder),
+    path: _path.default.resolve(appPath, outputFolder),
     filename: '[name].js',
     library: umdVar,
     libraryTarget: 'umd',
@@ -58,33 +58,33 @@ module.exports = {
       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,
-            polyfill: true,
-            regenerator: false,
-            moduleName: 'babel-runtime'
-          }]],
+          presets: [[require.resolve('@babel/preset-env'), {
+            modules: false
+          }], require.resolve('@babel/preset-react')],
+          plugins: [require.resolve('@babel/plugin-proposal-object-rest-spread')],
           cacheDirectory: true
         }
       }],
-      include: _path2.default.join(appPath, 'src') /*,
-                                                   {
-                                                   test: /\.css$/,
-                                                   use: [MiniCssExtractPlugin.loader, 'css-loader']
-                                                   }*/
-    }, {
+      include: _path.default.join(appPath, 'src')
+    }
+    /*,
+    {
+    test: /\.css$/,
+    use: [MiniCssExtractPlugin.loader, 'css-loader']
+    }*/
+    , {
       test: /(\.module)?\.css$/,
       use: [{
-        loader: _miniCssExtractPlugin2.default.loader,
+        loader: _miniCssExtractPlugin.default.loader,
         options: {
           publicPath: '../'
         }
       }, {
         loader: 'css-loader',
         options: {
-          modules: true,
-          localIdentName: className
+          modules: {
+            getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix)
+          }
         }
       }]
     }, {
@@ -108,9 +108,9 @@ module.exports = {
     }]
   },
   resolve: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   },
   resolveLoader: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
 };

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

@@ -1,79 +1,96 @@
-'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 _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
-
-var _pluginUtils = require('../pluginUtils');
-
-var _loaderUtils = require('../loaderUtils');
+var _loaderUtils = require("../loaderUtils");
 
 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,
-    server = _options$app.server,
-    outputFolder = _options$app.outputFolder;
-var disableContextURL = server.disableContextURL;
-
-
-var appPath = process.cwd();
-var contextURL = disableContextURL ? '' : context;
-var serverUrl = (0, _utils.getServerURL)(server);
-
-var output = {
-  path: _path2.default.join(appPath, outputFolder),
+let options = (0, _utils.getOptions)();
+let {
+  app: {
+    folder,
+    context,
+    server,
+    outputFolder,
+    rtlExclude,
+    hasRTL,
+    cssUniqueness,
+    seperateCssModules,
+    changeRuntimeChunkChar,
+    cssHashSelectors,
+    classNamePrefix,
+    selectorReplace,
+    disableES5Transpile,
+    devConsoleExculde,
+    sourcemap,
+    crossorigin
+  }
+} = options;
+let {
+  disableContextURL
+} = server;
+let appPath = process.cwd();
+let contextURL = disableContextURL ? '' : context;
+let serverUrl = (0, _utils.getServerURL)(server, 'https');
+let output = {
+  path: _path.default.join(appPath, outputFolder),
   filename: 'js/[name].js',
   chunkFilename: 'js/[name].js',
-  publicPath: [serverUrl, contextURL].filter(function (a) {
-    return a;
-  }).join('/') + '/',
-  jsonpFunction: context + 'Jsonp'
+  publicPath: `${[serverUrl, contextURL].filter(a => a).join('/')}/`,
+  jsonpFunction: `${context}Jsonp`
 };
 
+if (crossorigin) {
+  output.crossOriginLoading = 'anonymous';
+}
+
 module.exports = {
   entry: (0, _common.getEntries)(options, 'dev'),
-  devtool: 'cheap-eval-source-map',
+  devtool: sourcemap,
   mode: 'development',
-  output: output,
-  optimization: { splitChunks: _common.splitChunks },
-  plugins: (0, _pluginUtils.getDevPlugins)(options),
+  output,
+  stats: options.app.disableWatch ? 'errors-only' : {
+    children: false
+  },
+  optimization: {
+    splitChunks: _common.splitChunks,
+    moduleIds: 'named',
+    runtimeChunk: {
+      name: entrypoint => changeRuntimeChunkChar ? `./runtime-${entrypoint.name}` : `./runtime~${entrypoint.name}`
+    }
+  },
+  plugins: (0, _pluginUtils.getDevPlugins)(options, output.publicPath),
   module: {
     /* strictExportPresence for break the build when imported module not present in respective file */
     strictExportPresence: true,
     rules: [{
       test: /\.js$/,
       use: (0, _loaderUtils.getDevJsLoaders)(options),
-      include: _path2.default.join(appPath, folder)
-    },
-    /*{
-      test: /\.css$/,
-      use: [MiniCssExtractPlugin.loader, 'css-loader']
-    },*/
-    {
-      test: /(\.module)?\.css$/,
-      use: [{
-        loader: _miniCssExtractPlugin2.default.loader,
-        options: {
-          publicPath: '../'
-        }
-      }, {
-        loader: 'css-loader',
-        options: {
-          modules: true,
-          localIdentName: '[name]__[local]__[hash:base64:5]'
+      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)(hasRTL, rtlExclude, '[local]', false, 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]']
@@ -83,15 +100,54 @@ module.exports = {
     }, {
       test: /\.svg$/,
       use: ['url-loader?limit=1&name=./fonts/[name].[ext]']
-    }]
+    }, {
+      test: /\.ogg$/,
+      use: ['file-loader?name=./fonts/[name].[ext]']
+    }, {
+      test: /\.tmpl$/,
+      use: [{
+        loader: 'html-loader',
+        options: {
+          minimize: true
+        }
+      }]
+    }, {
+      test: /\.worker.js$/,
+      use: {
+        loader: require.resolve('../loaders/workerLoader.js'),
+        options: {
+          esModule: true,
+          filename: 'js/[name].js'
+        }
+      }
+    }].filter(Boolean)
   },
   externals: {
     ZC: '$ZC'
   },
   resolve: {
-    modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
+    alias: disableES5Transpile ? {
+      '@zohodesk/components/lib': '@zohodesk/components/es',
+      // "@zohodesk/zc-custom/lib": "@zohodesk/zc-custom/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: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
 };

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

@@ -1,109 +1,115 @@
-'use strict';
+"use strict";
 
-var _path = require('path');
+var _path = _interopRequireDefault(require("path"));
 
-var _path2 = _interopRequireDefault(_path);
+var _utils = require("../utils");
 
-var _miniCssExtractPlugin = require('mini-css-extract-plugin');
+var _pluginUtils = require("../pluginUtils");
 
-var _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
-
-var _utils = require('../utils');
-
-var _pluginUtils = require('../pluginUtils');
+var _loaderUtils = require("../loaderUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var options = (0, _utils.getOptions)();
-var _options$docs = options.docs,
-    server = _options$docs.server,
-    componentFolder = _options$docs.componentFolder,
-    cssUniqueness = _options$docs.cssUniqueness,
-    folder = options.app.folder;
+let options = (0, _utils.getOptions)();
+let {
+  docs: {
+    componentFolder,
+    cssUniqueness,
+    hasRTL,
+    rtlExclude,
+    cssHashSelectors,
+    classNamePrefix
+  },
+  app: {
+    folder
+  }
+} = options;
+let appPath = process.cwd();
 
-var appPath = process.cwd();
-var serverUrl = (0, _utils.getServerURL)(server);
-var className = cssUniqueness ? 'fz__[hash:base64:5]' : '[name]__[local]';
-
-module.exports = function (isSSTest) {
-  return {
-    entry: {
-      main: [_path2.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path2.default.join(appPath, componentFolder, 'index.js')],
-      vendor: ['react', 'react-dom', 'redux', 'react-redux']
-    },
-    devtool: 'eval',
-    mode: 'development',
-    output: {
-      path: _path2.default.join(appPath, 'build'),
-      filename: 'js/[name].js',
-      publicPath: serverUrl + '/docs',
-      library: 'Component',
-      libraryTarget: 'umd'
-    },
-    plugins: (0, _pluginUtils.getDocsPlugins)(isSSTest),
-    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,
-              polyfill: true,
-              regenerator: false,
-              moduleName: 'babel-runtime'
-            }]],
-            cacheDirectory: true
-          }
-        }],
-        include: _path2.default.join(appPath, folder)
-      }, {
-        test: /\.docs\.js$/,
-        use: require.resolve('../loaders/docsLoader.js'),
-        exclude: /node_modules/
-      }, {
-        test: /(\.module)?\.css$/,
-        use: [{
-          loader: _miniCssExtractPlugin2.default.loader,
-          options: {
-            publicPath: '../'
-          }
-        }, {
-          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: /\.html$/,
-        use: {
-          loader: 'html-loader',
-          options: {
-            attrs: [':data-src'],
-            interpolate: 'require'
+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"]
+  },
+  devtool: "none",
+  mode: "development",
+  output: {
+    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",
+        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)(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]"]
+    }, {
+      test: /\.html$/,
+      use: {
+        loader: "html-loader",
+        options: {
+          attrs: [":data-src"],
+          interpolate: "require"
+        }
+      }
+    }, {
+      test: /\.ogg$/,
+      use: ["file-loader?name=./fonts/[name].[ext]"]
+    }, {
+      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']
-    },
-    resolveLoader: {
-      modules: [_path2.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
-    }
-  };
-};
+    }]
+  },
+  externals: {
+    ZC: "$ZC"
+  },
+  resolve: {
+    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+  },
+  resolveLoader: {
+    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+  }
+});

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("../utils");
+
+var _loaderUtils = require("../loaderUtils");
+
+var _getLibraryImactPlugins = _interopRequireDefault(require("../pluginUtils/getLibraryImactPlugins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let options = (0, _utils.getOptions)();
+let {
+  docs: {
+    componentFolder,
+    cssUniqueness,
+    hasRTL,
+    rtlExclude,
+    cssHashSelectors,
+    classNamePrefix
+  },
+  app: {
+    folder
+  }
+} = options;
+let appPath = process.cwd();
+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)(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]']
+    }, {
+      test: /\.html$/,
+      use: {
+        loader: 'html-loader',
+        options: {
+          attrs: [':data-src'],
+          interpolate: 'require'
+        }
+      }
+    }, {
+      test: /\.ogg$/,
+      use: ['file-loader?name=./fonts/[name].[ext]']
+    }, {
+      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'
+};