Update zen to work with webpack-dev-server 4

lib/head.js

@@ -328,9 +328,10 @@ async function runIfCodeChanged() {
   // HMR can't recover from compile errors. Once the build is good again, we need to reload
   if (compile.status == 'error') return (compileHasFailed = true)
 
-  if (compileHasFailed)
+  if (compileHasFailed) {
     // after recovering, we need to reload
     return window.location.reload()
+  }
 
   // If we loaded before the first compile, reload once the code is ready
   // ZenWebpackClient can be undefined while errored or still bundling

lib/server.js

@@ -16,6 +16,10 @@ module.exports = class Server {
     this.results = [] // results of all tests run
     this.passedFocus = [] // all tests that passed after running
 
+    this.start()
+  }
+
+  async start () {
     // start up the local webserver for `head` to connect to
     let app = connect()
     let server = http.createServer(app).listen(Zen.config.port)
@@ -29,7 +33,7 @@ module.exports = class Server {
     app.use('/icons', Util.serveIcons)
 
     if (Zen.webpack) {
-      Zen.webpack.startDevServer(app)
+      await Zen.webpack.startDevServer(app)
       Zen.webpack.on('status', (stats) => {
         if (Zen.webpack.status == 'done') {
           this.workers.forEach(

lib/webpack/index.ts

@@ -96,28 +96,34 @@ module.exports = class WebpackAdapter extends EventEmitter {
     })
   }
 
-  startDevServer(server: Server) {
+  async startDevServer(server: Server) {
     const zenConfig = this.zenConfig
-    if (zenConfig?.setDevelopmentHeaders) {
-      WebpackDevServer.prototype.setContentHeaders = function (req, res, next) {
-        if (this.headers) {
-          for (var name in this.headers) {
-            res.setHeader(name, this.headers[name])
-          }
+    const devServer = new WebpackDevServer({
+      hot: false,
+      client: false,
+      headers: (req, res) => {
+        const headers = zenConfig.getDevelopmentHeaders(req.originalUrl)
+        return headers
+      },
+      devMiddleware: {
+        publicPath: '/',
+        stats: {
+          preset: 'minimal', // Only output when errors or new compilation
+          moduleTrace: false,
+          errorDetails: false
         }
-
-        zenConfig.setDevelopmentHeaders(req, res)
-        next()
-      }
-    }
-
-    const devServer = new WebpackDevServer(this.compiler, {
-      stats: { errorDetails: true },
-      hot: true,
-      inline: false,
-    })
-
-    // @ts-expect-error app does exist in this version of dev server
+      },
+      // Silence server startup logs.
+      setupMiddlewares: (middlewares, devServer) => {
+        devServer.logger.info = () => {};
+        return middlewares;
+      },
+      static: {
+        directory: zenConfig.devServerOptions.directory,
+      },
+      port: 9000
+    }, this.compiler)
+    await devServer.start()
     server.use('/webpack', devServer.app)
   }
 
@@ -126,18 +132,18 @@ module.exports = class WebpackAdapter extends EventEmitter {
       return e.module ? `${e.module.id}: ${e.message}` : e.message
     })
 
-    const state = Object.assign(stats, {
-      files: Object.keys(stats.compilation.assets).map((name) => {
-        const source = stats.compilation.assets[name].source()
-        return { path: `webpack/${name}`, body: source }
-      }),
-
-      entrypoints:
-        stats.compilation.entrypoints
-          .get('bundle')
-          ?.chunks.map((chunk: Chunk) => chunk.files.values().next().value) ||
-        [],
+    const files = Object.keys(stats.compilation.assets).map((name) => {
+      const source = stats.compilation.assets[name].source()
+      return { path: `webpack/${name}`, body: source }
+    })
+    const entrypoints = stats.compilation.entrypoints
+      .get('bundle')
+      ?.chunks.map((chunk: Chunk) => chunk.files.values().next().value) ||
+      []
 
+    const state = Object.assign(stats, {
+      files,
+      entrypoints,
       errors,
       status: errors.length ? ('error' as const) : ('done' as const),
     })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superhuman/zen",
-  "version": "0.3.32",
+  "version": "0.3.33",
   "description": "Karma replacement that runs your tests in seconds",
   "main": "lib/cli.js",
   "scripts": {
@@ -68,6 +68,6 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.4.3",
     "webpack": "4.47.0",
-    "webpack-dev-server": "^3.4"
+    "webpack-dev-server": "4.15.2"
   }
 }