Fix: switch over to webpack-dev-server

cli.js

@@ -52,7 +52,13 @@ const cli = meow(`
     },
     port: {
       type: 'string',
-      alias: 'p'
+      alias: 'p',
+      default: '8080'
+    },
+    host: {
+      type: 'string',
+      alias: 'h',
+      default: '0.0.0.0'
     },
     analyze: {},
     // build
@@ -145,8 +151,7 @@ switch (cmd) {
     const dev = require('./lib/dev')
     dev(opts)
       .then(({ server }) => {
-        const { port } = server.options
-        const url = `http://localhost:${port}`
+        const url = `http://${server.host}:${server.port}`
         log.stop(
           'dev server listening on',
           chalk.green(url),

lib/dev.js

@@ -1,30 +1,29 @@
 const fs = require('fs')
 const path = require('path')
 const webpack = require('webpack')
-const serve = require('webpack-serve')
+const WebpackDevServer = require("webpack-dev-server")
 const history = require('connect-history-api-fallback')
-const convert = require('koa-connect')
 const MiniHTMLWebpackPlugin = require('mini-html-webpack-plugin')
 const merge = require('webpack-merge')
 
 const baseConfig = require('./config')
 const createTemplate = require('./createTemplate')
 
-const dev = {
-  hot: true,
-  logLevel: 'error',
-  clientLogLevel: 'none',
-  stats: 'errors-only'
-}
-
 module.exports = async (opts) => {
   if (opts.basename) delete opts.basename
-  const config = merge(baseConfig, opts.webpack)
+  const config = merge(baseConfig,
+                       {devServer: {
+                         hot: true,
+                         port: opts.port,
+                         host: opts.host
+                       }},opts.webpack)
   const template = createTemplate(opts)
 
   config.mode = 'development'
   config.context = opts.dirname
-  config.entry = opts.entry || path.join(__dirname, '../src/entry')
+  config.entry = opts.entry || path.join(__dirname, '../src/entry');
+  config.devtool = 'source-map';
+
   config.output = {
     path: path.join(process.cwd(), 'dev'),
     filename: 'dev.js',
@@ -53,12 +52,15 @@ module.exports = async (opts) => {
     })
   )
 
-  config.plugins.push(
+  config.plugins = config.plugins.concat([
     new MiniHTMLWebpackPlugin({
       context: opts,
       template
-    })
-  )
+    }),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ])
 
   if (opts.analyze) {
     const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
@@ -77,25 +79,39 @@ module.exports = async (opts) => {
     // todo: enable other logging
   }
 
-  const serveOpts = {
-    config,
-    dev,
-    logLevel: 'error',
-    content: opts.dirname,
-    port: opts.port,
-    hot: { logLevel: 'error' },
-    add: (app, middleware, options) => {
-      app.use(convert(history({})))
+  const serveOpts = Object.assign({}, config.devServer, {
+    hot: true,
+
+    stats: {
+      colors: true
+    },
+
+    logLevel: opts.debug && 'info' || 'error',
+    clientLogLevel: opts.debug && 'info' || 'error',
+    contentBase: opts.dirname,
+
+    before (app) {
+      app.use(history({}));
     }
-  }
+  });
 
   return new Promise((resolve, reject) => {
-    serve(serveOpts)
-      .then(server => {
-        server.compiler.hooks.done.tap({ name: 'x0' }, (stats) => {
-          resolve({ server, stats })
-        })
-      })
-      .catch(reject)
+
+    WebpackDevServer.addDevServerEntrypoints(config, serveOpts);
+    const compiler = webpack(config);
+    const {port, host} = serveOpts;
+
+    const server = new WebpackDevServer(compiler, serveOpts)
+    server.listen(port, host, (err) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        compiler.hooks.done
+          .tap({ name: 'x0' }, (stats) => {
+            const server = {port, host};
+            resolve({ server, stats })
+          })
+      });
   })
 }

package.json

@@ -7,8 +7,9 @@
     "x0": "cli.js"
   },
   "scripts": {
-    "start": "./cli.js docs",
-    "build": "./cli.js build docs",
+    "start": "node ./cli.js docs --debug",
+    "debug": "node --nolazy --inspect-brk=5858 ./cli.js docs",
+    "build": "node ./cli.js build docs",
     "test": "nyc ava --timeout=60s",
     "test:components": "nyc ava test/components.js",
     "cover": "nyc report --reporter=html --reporter=lcov"
@@ -53,7 +54,6 @@
     "glamor": "^2.20.40",
     "gray-matter": "^4.0.1",
     "html-minifier": "^3.5.16",
-    "koa-connect": "^2.0.1",
     "lodash.sortby": "^4.7.0",
     "meow": "^5.0.0",
     "mini-html-webpack-plugin": "^0.2.3",
@@ -63,7 +63,7 @@
     "react": "^16.4.1",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.4.1",
-    "react-live": "^1.10.1",
+    "react-live": "1.8.0-0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scope-provider": "^1.0.0-1",
@@ -81,7 +81,7 @@
     "webpack": "^4.10.2",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-merge": "^4.1.3",
-    "webpack-serve": "^1.0.4"
+    "webpack-dev-server": "3.1.9"
   },
   "devDependencies": {
     "@compositor/logo": "^1.4.0",

test/snapshots/build.js.md

@@ -1,4 +1,4 @@
-# Snapshot report for `test/build.js`
+# Snapshot report for `test\build.js`
 
 The actual snapshot is saved in `build.js.snap`.
 

test/snapshots/components.js.md

@@ -1,4 +1,4 @@
-# Snapshot report for `test/components.js`
+# Snapshot report for `test\components.js`
 
 The actual snapshot is saved in `components.js.snap`.
 
@@ -94,6 +94,7 @@ Generated by [AVA](https://ava.li).
     >
       <div
         className="react-live"
+        scope={{}}
       >
         <div
           className="react-live-preview"

test/snapshots/template.js.md

@@ -1,4 +1,4 @@
-# Snapshot report for `test/template.js`
+# Snapshot report for `test\template.js`
 
 The actual snapshot is saved in `template.js.snap`.