refactor: bundle http-proxy-middleware (#180)

Author: chenjiahan

package.json

@@ -50,7 +50,6 @@
     "chokidar": "^5.0.0",
     "connect-history-api-fallback": "^2.0.0",
     "connect-next": "^4.0.0",
-    "http-proxy-middleware": "^3.0.5",
     "ws": "^8.20.0"
   },
   "devDependencies": {
@@ -71,6 +70,7 @@
     "hono": "^4.12.9",
     "http-compression": "^1.1.2",
     "http-proxy": "^1.18.1",
+    "http-proxy-middleware": "^3.0.5",
     "ipaddr.js": "^2.3.0",
     "launch-editor": "^2.13.2",
     "nano-staged": "^0.9.0",

pnpm-lock.yaml

@@ -10,7 +10,6 @@ export default defineConfig({
         externals: {
           'connect-history-api-fallback':
             'commonjs connect-history-api-fallback',
-          'http-proxy-middleware': 'commonjs http-proxy-middleware',
           selfsigned: 'commonjs selfsigned',
         },
       },

rslib.config.ts

@@ -25,6 +25,7 @@ import type {
   DevServerStaticItem,
   DevServerWebSocketURL,
 } from '@rspack/core';
+import type { RequestHandler } from 'http-proxy-middleware';
 import { devMiddleware } from '@rspack/dev-middleware';
 import type {
   HandleFunction,
@@ -64,7 +65,6 @@ import type {
   OverlayMessageOptions,
   Port,
   Request,
-  RequestHandler,
   Response,
   ServerConfiguration,
   ServerOptions,
@@ -186,7 +186,7 @@ class Server<
     name: string | symbol;
     listener: (...args: EXPECTED_ANY[]) => void;
   }[];
-  webSocketProxies: RequestHandler[];
+  webSocketProxies: NextHandleFunction[];
   sockets: Socket[];
   currentHash: string | undefined;
   isTlsServer = false;
@@ -1445,14 +1445,14 @@ class Server<
 
     // Proxy WebSocket without the initial http request
     // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-    const webSocketProxies = this.webSocketProxies as RequestHandler[];
+    const webSocketProxies = this.webSocketProxies as NextHandleFunction[];
 
     for (const webSocketProxy of webSocketProxies) {
       (this.server as S).on(
         'upgrade',
         (
-          webSocketProxy as RequestHandler & {
-            upgrade: NonNullable<RequestHandler['upgrade']>;
+          webSocketProxy as NextHandleFunction & {
+            upgrade: RequestHandler['upgrade'];
           }
         ).upgrade,
       );
@@ -1729,11 +1729,13 @@ class Server<
     });
 
     if (this.options.proxy) {
-      const { createProxyMiddleware } = require('http-proxy-middleware');
+      const { createProxyMiddleware } = await import(
+        /* webpackChunkName: "http-proxy-middleware" */ 'http-proxy-middleware'
+      );
 
       const getProxyMiddleware = (
         proxyConfig: DevServerProxyConfigArrayItem,
-      ): RequestHandler | undefined => {
+      ): NextHandleFunction | undefined => {
         const { context, ...proxyOptions } = proxyConfig;
         const pathFilter = proxyOptions.pathFilter ?? context;
 
@@ -1746,7 +1748,9 @@ class Server<
         }
 
         if (proxyOptions.target || proxyOptions.router) {
-          return createProxyMiddleware(proxyOptions);
+          return createProxyMiddleware(
+            proxyOptions as Parameters<typeof createProxyMiddleware>[0],
+          );
         }
 
         util.deprecate(
@@ -1774,7 +1778,7 @@ class Server<
        * ]
        */
       for (const proxyConfigOrCallback of this.options.proxy) {
-        let proxyMiddleware: RequestHandler | undefined;
+        let proxyMiddleware: NextHandleFunction | undefined;
 
         let proxyConfig =
           typeof proxyConfigOrCallback === 'function'
@@ -1941,7 +1945,7 @@ class Server<
 
     for (const i of middlewares) {
       if (i.name === '@rspack/dev-middleware') {
-        const item = i as MiddlewareObject | RequestHandler;
+        const item = i as MiddlewareObject | NextHandleFunction;
 
         if (typeof (item as MiddlewareObject).middleware === 'undefined') {
           (item as MiddlewareObject).middleware =

src/server.ts

@@ -18,12 +18,10 @@ import type {
   HandleFunction,
   NextHandleFunction,
 } from 'connect-next';
-import type { RequestHandler } from 'http-proxy-middleware';
 
 export type {
   FSWatcher,
   WatchOptions,
-  RequestHandler,
   BasicServer,
   HTTPServer,
   ServerOptions,