From 98f965f1c56a653cbaaf819dadd1a7f2f62f8760 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Nov 2024 00:01:32 +0000
Subject: [PATCH] fix(webpack,rspack): add adapter for `webpack-dev-middleware`
 (#29806)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
---
 packages/webpack/src/webpack.ts | 45 +++++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/webpack/src/webpack.ts b/packages/webpack/src/webpack.ts
index 96177faeb7..69b4ffb80a 100644
--- a/packages/webpack/src/webpack.ts
+++ b/packages/webpack/src/webpack.ts
@@ -1,8 +1,7 @@
 import pify from 'pify'
-import type { NodeMiddleware } from 'h3'
 import { resolve } from 'pathe'
 import { defineEventHandler, fromNodeMiddleware } from 'h3'
-import type { MultiWatching } from 'webpack-dev-middleware'
+import type { IncomingMessage, MultiWatching, ServerResponse } from 'webpack-dev-middleware'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
 import type { Compiler, Stats, Watching } from 'webpack'
@@ -132,16 +131,52 @@ async function createDevMiddleware (compiler: Compiler) {
   })
 
   // Register devMiddleware on server
-  const devHandler = fromNodeMiddleware(devMiddleware as NodeMiddleware)
-  const hotHandler = fromNodeMiddleware(hotMiddleware as NodeMiddleware)
+  const devHandler = wdmToH3Handler(devMiddleware)
+  const hotHandler = fromNodeMiddleware(hotMiddleware)
   await nuxt.callHook('server:devHandler', defineEventHandler(async (event) => {
-    await devHandler(event)
+    const body = await devHandler(event)
+    if (body !== undefined) {
+      return body
+    }
     await hotHandler(event)
   }))
 
   return devMiddleware
 }
 
+// TODO: implement upstream in `webpack-dev-middleware`
+function wdmToH3Handler (devMiddleware: webpackDevMiddleware.API<IncomingMessage, ServerResponse>) {
+  return defineEventHandler(async (event) => {
+    event.context.webpack = {
+      ...event.context.webpack,
+      devMiddleware: devMiddleware.context,
+    }
+    const { req, res } = event.node
+    const body = await new Promise((resolve, reject) => {
+      // @ts-expect-error handle injected methods
+      res.stream = (stream) => {
+        resolve(stream)
+      }
+      // @ts-expect-error handle injected methods
+      res.send = (data) => {
+        resolve(data)
+      }
+      // @ts-expect-error handle injected methods
+      res.finish = (data) => {
+        resolve(data)
+      }
+      devMiddleware(req, res, (err) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(undefined)
+        }
+      })
+    })
+    return body
+  })
+}
+
 async function compile (compiler: Compiler) {
   const nuxt = useNuxt()