refactor(docz-theme-default): use webpack to build instead of rollup (#263)

packages/docz-theme-default/librc.js

@@ -1,46 +0,0 @@
-const svg = require('rollup-plugin-svg')
-const pkg = require('./package.json')
-
-const internal = [
-  'facepaint',
-  'match-sorter',
-  'react-feather',
-  'react-powerplug',
-  'webfontloader',
-]
-
-const depsExternal = [
-  '@mdx-js/tag',
-  'react-codemirror',
-  'codemirror',
-  'react-dom/server',
-  'codemirror/mode/markdown/markdown',
-  'codemirror/mode/javascript/javascript',
-  'codemirror/mode/jsx/jsx',
-  'codemirror/mode/css/css',
-  'codemirror/addon/edit/matchbrackets',
-  'polished/lib/color/rgba',
-  'polished/lib/color/lighten',
-  'polished/lib/color/darken',
-  'react-feather/dist/icons/edit-2',
-  'react-feather/dist/icons/chevron-down',
-  'react-feather/dist/icons/search',
-  'react-feather/dist/icons/clipboard',
-  'react-feather/dist/icons/check',
-  'react-feather/dist/icons/smartphone',
-  'react-feather/dist/icons/tablet',
-  'react-feather/dist/icons/monitor',
-  'react-feather/dist/icons/maximize',
-  'react-feather/dist/icons/minimize',
-  'react-feather/dist/icons/refresh-cw',
-]
-
-const external = Object.keys(pkg.dependencies)
-  .concat(depsExternal)
-  .filter(dep => internal.indexOf(dep) === -1)
-
-module.exports = {
-  external,
-  sourcemap: false,
-  plugins: [svg()],
-}

packages/docz-theme-default/package.json

@@ -13,8 +13,8 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "libundler watch --ts",
-    "build": "libundler build --ts --c --sm",
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "cross-env NODE_ENV=development webpack --progress --colors --watch",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
     "fix:tslint": "tslint --fix --project .",
@@ -49,10 +49,18 @@
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
+    "@babel/core": "7.0.0-beta.55",
     "@types/lodash.get": "^4.4.4",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
+    "babel-loader": "^8.0.0-beta.6",
     "babel-plugin-emotion": "^9.2.6",
-    "rollup-plugin-svg": "^1.0.1"
+    "cross-env": "^5.2.0",
+    "filemanager-webpack-plugin": "^2.0.2",
+    "ts-loader": "^4.5.0",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.17.1",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.1.0"
   }
 }

packages/docz-theme-default/webpack.config.js

@@ -0,0 +1,127 @@
+const path = require('path')
+const webpack = require('webpack')
+const UglifyJs = require('uglifyjs-webpack-plugin')
+const FileManagerPlugin = require('filemanager-webpack-plugin')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const pkg = require('./package.json')
+const ENV = process.env.NODE_ENV || 'development'
+const IS_PROD = ENV === 'production'
+
+const externalList = [
+  '@mdx-js/tag',
+  'codemirror',
+  'codemirror/mode/markdown/markdown',
+  'codemirror/mode/javascript/javascript',
+  'codemirror/mode/jsx/jsx',
+  'codemirror/mode/css/css',
+  'codemirror/addon/edit/matchbrackets',
+  'polished/lib/color/rgba',
+  'polished/lib/color/lighten',
+  'polished/lib/color/darken',
+  'react-codemirror',
+  'react-dom/server',
+  'react-feather',
+  'react-feather/dist/icons/edit-2',
+  'react-feather/dist/icons/chevron-down',
+  'react-feather/dist/icons/search',
+  'react-feather/dist/icons/clipboard',
+  'react-feather/dist/icons/check',
+  'react-feather/dist/icons/smartphone',
+  'react-feather/dist/icons/tablet',
+  'react-feather/dist/icons/monitor',
+  'react-feather/dist/icons/maximize',
+  'react-feather/dist/icons/minimize',
+  'react-feather/dist/icons/refresh-cw',
+]
+
+const deps = Object.keys(pkg.dependencies)
+const externals = Object.keys(pkg.dependencies)
+  .concat(externalList)
+  .concat(deps.filter(dep => dep.startsWith('react-feather')))
+
+const uglify = new UglifyJs({
+  parallel: true,
+  cache: true,
+  sourceMap: true,
+  uglifyOptions: {
+    parse: {
+      ecma: 8,
+    },
+    compress: {
+      ecma: 5,
+      warnings: false,
+      comparisons: false,
+    },
+    mangle: {
+      safari10: true,
+    },
+    output: {
+      ecma: 5,
+      comments: false,
+      ascii_only: true,
+    },
+  },
+})
+
+const plugins = [
+  new FileManagerPlugin({
+    onStart: [{ delete: ['./dist'] }],
+  }),
+  IS_PROD &&
+    new BundleAnalyzerPlugin({
+      openAnalyzer: false,
+      analyzerMode: 'static',
+    }),
+].filter(Boolean)
+
+module.exports = {
+  externals,
+  plugins,
+  mode: IS_PROD ? 'production' : 'development',
+  entry: path.join(__dirname, '/src/index.tsx'),
+  devtool: 'source-map',
+  output: {
+    path: path.join(__dirname, '/dist'),
+    filename: `index.js`,
+    library: 'DoczThemeDefault',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /(\.ts|\.tsx)$/,
+        exclude: /node_modules/,
+        loader: [
+          { loader: 'babel-loader' },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.json', '.js', '.ts', '.tsx'],
+    modules: [
+      path.resolve('./node_modules'),
+      path.resolve('../../node_modules'),
+      path.resolve('./src'),
+    ],
+  },
+  optimization: {
+    nodeEnv: ENV,
+    namedModules: true,
+    ...(IS_PROD && {
+      minimize: true,
+      minimizer: [uglify],
+    }),
+  },
+  performance: {
+    hints: false,
+  },
+}