feat(docz-core): add hot reload

examples/basic/src/Alert.jsx

@@ -11,7 +11,7 @@ const kinds = {
 }
 
 const Alert = styled('div')`
-  padding: 10px 15px;
+  padding: 15px 20px;
   background: white;
   border-radius: 3px;
   color: white;

packages/playgrodd-core/package.json

@@ -16,33 +16,33 @@
   },
   "dependencies": {
     "@babel/core": "^7.0.0-beta.42",
+    "@babel/runtime": "^7.0.0-beta.42",
     "babel-loader": "^8.0.0-beta.1",
     "babel-polyfill": "^7.0.0-beta.3",
     "babel-traverse": "^6.26.0",
     "babel-types": "^6.26.0",
     "babylon": "^6.18.0",
-    "connect-history-api-fallback": "^1.5.0",
     "deepmerge": "^2.1.0",
     "del": "^3.0.0",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
     "html-webpack-plugin": "^3.1.0",
     "mkdirp": "^0.5.1",
+    "react-dev-utils": "^5.0.0",
     "react-hot-loader": "^4.0.0",
     "webpack": "^4.2.0",
     "webpack-dev-middleware": "^3.0.1",
-    "webpack-hot-middleware": "^2.21.2"
+    "webpack-dev-server": "^3.1.1",
+    "webpack-messages": "^1.0.1"
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
-    "@types/connect-history-api-fallback": "^1.3.1",
     "@types/deepmerge": "^2.1.0",
     "@types/del": "^3.0.0",
     "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",
     "@types/webpack": "^4.1.2",
-    "@types/webpack-dev-middleware": "^2.0.1",
-    "@types/webpack-hot-middleware": "^2.16.3"
+    "@types/webpack-dev-server": "^2.9.4"
   }
 }

packages/playgrodd-core/src/compiler/create-compiler.ts

@@ -2,10 +2,13 @@ import * as fs from 'fs'
 import * as mkdir from 'mkdirp'
 import * as del from 'del'
 import * as webpack from 'webpack'
+import * as webpackDevServerUtils from 'react-dev-utils/WebpackDevServerUtils'
 
 import { IEntryObj } from './files-parser'
 import { createConfig } from './create-config'
 import { generateApp, generateHtml, generateJs } from './generate-files'
+
+import { PORT, HOST } from '../config/dev-server'
 import * as paths from '../config/paths'
 
 const createTempDir = (): void => {
@@ -25,12 +28,21 @@ export const createCompiler = async (entries: IEntryObj[]) => {
   const app = generateApp(entries)
   const js = generateJs()
   const html = generateHtml()
-  const webpackConfig = await createConfig(entries)
+  const config = await createConfig(entries)
+  const appName = require(paths.PACKAGE_JSON).name
+  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+  const urls = webpackDevServerUtils.prepareUrls(protocol, HOST, PORT)
 
   await del.sync(paths.PLAYGRODD)
   tempFile(paths.APP_JS, app)
   tempFile(paths.INDEX_JS, js)
   tempFile(paths.INDEX_HTML, html)
 
-  return webpack(webpackConfig)
+  return webpackDevServerUtils.createCompiler(
+    webpack,
+    config,
+    appName,
+    urls,
+    true
+  )
 }

packages/playgrodd-core/src/compiler/create-config.ts

@@ -33,7 +33,11 @@ export const createConfig = async (
     mode: 'development',
     context: paths.ROOT,
     devtool: '#source-map',
-    entry: [require.resolve('babel-polyfill'), paths.INDEX_JS],
+    entry: [
+      require.resolve('babel-polyfill'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.INDEX_JS,
+    ],
     output: {
       pathinfo: true,
       path: paths.DIST,
@@ -58,18 +62,20 @@ export const createConfig = async (
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       modules: [paths.ROOT, 'node_modules'],
       alias: {
-        src: path.join(paths.ROOT, 'src'),
+        '@babel/runtime': path.dirname(
+          require.resolve('@babel/runtime/package.json')
+        ),
       },
     },
     devServer: {
-      contentBase: paths.DIST,
-      hot: true,
+      logLevel: 'silent',
     },
     plugins: [
       new webpack.NamedModulesPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoEmitOnErrorsPlugin(),
       new HtmlWebpackPlugin({
+        inject: true,
         template: paths.INDEX_HTML,
       }),
     ],

packages/playgrodd-core/src/config/dev-server.ts

@@ -0,0 +1,35 @@
+import { Application } from 'express'
+import * as errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
+import * as paths from './paths'
+
+export const PORT = 3000
+export const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
+export const HOST = process.env.HOST || '0.0.0.0'
+
+export const devServerConfig = () => ({
+  compress: true,
+  clientLogLevel: 'none',
+  contentBase: paths.PLAYGRODD,
+  watchContentBase: true,
+  hot: true,
+  quiet: true,
+  noInfo: true,
+  publicPath: '/',
+  https: PROTOCOL === 'https',
+  host: HOST,
+  overlay: false,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+  stats: {
+    colors: true,
+    chunks: false,
+    chunkModules: false,
+  },
+  historyApiFallback: {
+    disableDotRule: true,
+  },
+  before(app: Application) {
+    app.use(errorOverlayMiddleware())
+  },
+})

packages/playgrodd-core/src/config/paths.ts

@@ -3,6 +3,8 @@ import * as path from 'path'
 
 export const ROOT = fs.realpathSync(process.cwd())
 export const PLAYGRODD = path.join(ROOT, '.playgrodd')
+export const PACKAGE_JSON = path.join(ROOT, 'package.json')
+
 export const APP_JS = path.join(PLAYGRODD, 'app.jsx')
 export const INDEX_JS = path.join(PLAYGRODD, 'index.jsx')
 export const INDEX_HTML = path.join(PLAYGRODD, 'index.html')

packages/playgrodd-core/src/server.ts

@@ -1,33 +1,14 @@
 import { Arguments } from 'yargs'
-import * as express from 'express'
-import * as hotMiddleware from 'webpack-hot-middleware'
-import * as devServerMiddleware from 'webpack-dev-middleware'
-import * as historyApiFallback from 'connect-history-api-fallback'
+import * as WebpackDevServer from 'webpack-dev-server'
 
 import { entriesMapper } from './compiler'
 import { createCompiler } from './compiler'
+import { devServerConfig } from './config/dev-server'
 
 export const server = async ({ files: pattern }: Arguments) => {
-  const app = express()
   const entries = await entriesMapper(pattern)
   const compiler = await createCompiler(entries)
+  const server = new WebpackDevServer(compiler, devServerConfig())
 
-  const opts = {
-    publicPath: '/',
-    logLevel: 'warn',
-    watchOptions: {
-      ignored: /node_modules/,
-    },
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-  }
-
-  app.use(historyApiFallback())
-  app.use(devServerMiddleware(compiler, opts))
-  app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
-
-  app.listen(3000, () => {
-    console.log('Example app listening on port 3000!')
-  })
+  server.listen(3000)
 }

packages/playgrodd-core/src/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-dev-utils/errorOverlayMiddleware'
+declare module 'react-dev-utils/WebpackDevServerUtils'