webpack-dev-service 0.13.2 → 0.14.0

package/esm/server/hot/Socket.js

@@ -1,71 +1,65 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
  */
 
 import webpack from 'webpack';
+import { v7 } from 'uuid';
 import { Buffer } from 'node:buffer';
-import { fileURLToPath } from 'node:url';
 import { resolve, dirname } from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
 import WebSocket, { WebSocketServer } from 'ws';
 import { PLUGIN_NAME, getCompilers } from '../utils.js';
-import { getOptions, getStatsOptions, getTimestamp, isUpgradable, hasIssues } from './utils.js';
+import { getOptions, getStatsOptions, getTimestamp, BASE_URL, hasIssues, isUpgradable } from './utils.js';
 
 /**
  * @module Socket
  */
 function entrypoint() {
   const filename = import.meta.url;
-  try {
-    return dirname(fileURLToPath(filename));
-  } catch {
-    return dirname(filename);
-  }
+  return dirname(fileURLToPath(filename));
 }
 const client = resolve(entrypoint(), '../../client/main.js');
 class Socket {
   // Readonly props.
   #logger;
-  #compiler;
   #server;
   #options;
-  // Mutable props.
-  #percentage = -1;
-  #stats = null;
   constructor(compiler, options) {
-    this.#compiler = compiler;
     this.#options = getOptions(options);
     this.#logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
     this.#server = new WebSocketServer({ noServer: true, path: this.#options.path });
-    this.#setupWss();
-    this.#setupHooks();
-    this.#setupPlugins();
-  }
-  #setupWss() {
-    const logger = this.#logger;
-    const server = this.#server;
-    server.on('connection', client => {
-      const stats = this.#stats;
-      logger.log('client connected');
-      client.on('close', () => {
-        logger.log('client disconnected');
-      });
-      if (stats) {
-        this.#broadcastStats([client], stats);
-      }
-    });
-    server.on('error', error => {
-      logger.error(error);
-    });
+    const compilers = getCompilers(compiler);
+    const contexts = new Map();
+    for (const compiler of compilers) {
+      const uuid = v7();
+      const context = {
+        uuid,
+        stats: null,
+        percentage: -1,
+        clients: new Set()
+      };
+      contexts.set(uuid, context);
+      this.#setupHooks(compiler, context);
+      this.#setupPlugins(compiler, context);
+    }
+    this.#setupWss(contexts);
   }
-  #setupHooks() {
-    const compiler = this.#compiler;
+  #setupHooks(compiler, context) {
     const { hooks } = compiler;
     const statsOptions = getStatsOptions(compiler);
+    hooks.invalid.tap(PLUGIN_NAME, (path, timestamp) => {
+      // Set stats to null.
+      context.stats = null;
+      // Reset percentage.
+      context.percentage = -1;
+      // Broadcast invalid.
+      this.#broadcast(context.clients, 'invalid', { path, timestamp });
+    });
     hooks.done.tap(PLUGIN_NAME, stats => {
       // Get json stats.
       const jsonStats = stats.toJson(statsOptions);
@@ -74,66 +68,102 @@ class Socket {
         jsonStats.builtAt = getTimestamp(jsonStats);
       }
       // Cache stats.
-      this.#stats = jsonStats;
+      context.stats = jsonStats;
       // Do the stuff in nextTick, because bundle may be invalidated if a change happened while compiling.
       process.nextTick(() => {
-        const stats = this.#stats;
+        const { stats } = context;
         // Broadcast stats.
         if (stats) {
-          this.#broadcastStats(this.clients(), stats);
+          this.#broadcastStats(context.clients, stats);
         }
       });
     });
-    hooks.invalid.tap(PLUGIN_NAME, (path, timestamp) => {
-      // Set stats to null.
-      this.#stats = null;
-      // Reset percentage.
-      this.#percentage = -1;
-      // Broadcast invalid.
-      this.broadcast(this.clients(), 'invalid', { path, timestamp });
-    });
   }
-  #setupPlugins() {
+  #setupPlugins(compiler, context) {
     const options = this.#options;
-    const compiler = this.#compiler;
-    const compilers = getCompilers(compiler);
+    const params = new URLSearchParams();
+    params.set('uuid', context.uuid);
+    params.set('path', options.path);
+    const { wss } = options;
+    if (wss != null) {
+      params.set('wss', wss ? 'true' : 'false');
+    }
+    params.set('name', compiler.name || 'rspack');
+    params.set('hmr', options.hmr ? 'true' : 'false');
+    params.set('reload', options.reload ? 'true' : 'false');
+    params.set('overlay', options.overlay ? 'true' : 'false');
+    params.set('progress', options.progress ? 'true' : 'false');
     const plugins = [
-      () => {
-        return new webpack.HotModuleReplacementPlugin();
-      },
-      ({ name, context }) => {
-        const params = new URLSearchParams();
-        params.set('path', options.path);
-        params.set('name', name || 'webpack');
-        params.set('hmr', options.hmr ? 'true' : 'false');
-        params.set('wss', options.wss ? 'true' : 'false');
-        params.set('reload', options.reload ? 'true' : 'false');
-        params.set('overlay', options.overlay ? 'true' : 'false');
-        params.set('progress', options.progress ? 'true' : 'false');
-        // Auto add hot client to entry.
-        return new webpack.EntryPlugin(context, `${client}?${params}`, {
-          // Don't create runtime.
-          runtime: false
-        });
-      }
+      new webpack.HotModuleReplacementPlugin(),
+      // Auto add hot client to entry.
+      new webpack.EntryPlugin(compiler.context, `${client}?${params}`, {
+        // Don't create runtime.
+        runtime: false
+      })
     ];
-    for (const compiler of compilers) {
-      for (const plugin of plugins) {
-        plugin(compiler).apply(compiler);
-      }
-    }
     if (options.progress) {
-      const progress = new webpack.ProgressPlugin((percentage, status, ...messages) => {
-        if (percentage > this.#percentage) {
-          this.#percentage = percentage;
-          this.broadcast(this.clients(), 'progress', { status, messages, percentage });
+      plugins.push(
+        new webpack.ProgressPlugin((percentage, status, ...messages) => {
+          if (percentage > context.percentage) {
+            context.percentage = percentage;
+            this.#broadcast(context.clients, 'progress', { status, messages, percentage });
+          }
+        })
+      );
+    }
+    for (const plugin of plugins) {
+      plugin.apply(compiler);
+    }
+  }
+  #setupWss(contexts) {
+    const logger = this.#logger;
+    const server = this.#server;
+    const { path } = this.#options;
+    server.on('connection', (client, { url: input = path }) => {
+      const url = new URL(input, BASE_URL);
+      const uuid = url.searchParams.get('uuid');
+      if (uuid) {
+        const context = contexts.get(uuid);
+        if (context) {
+          const { stats } = context;
+          context.clients.add(client);
+          logger.log('client connected');
+          client.on('close', () => {
+            context.clients.delete(client);
+            logger.log('client disconnected');
+          });
+          if (stats) {
+            const clients = new Set([client]);
+            this.#broadcastStats(clients, stats);
+          }
+        } else {
+          client.close(4001, 'compiler not found');
         }
-      });
-      progress.apply(compiler);
+      } else {
+        client.close(4000, 'uuid not found');
+      }
+    });
+    server.on('error', error => {
+      logger.error(error);
+    });
+  }
+  #broadcast(clients, action, payload) {
+    for (const client of clients) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(JSON.stringify({ action, payload }));
+      }
     }
   }
-  clients() {
-    return this.#server.clients;
+  #broadcastStats(clients, stats) {
+    if (clients.size > 0) {
+      const { hash, errors, warnings, builtAt: timestamp } = stats;
+      this.#broadcast(clients, 'hash', { hash, timestamp });
+      if (hasIssues(errors) || hasIssues(warnings)) {
+        this.#broadcast(clients, 'issues', { errors, warnings, timestamp });
+      } else {
+        this.#broadcast(clients, 'ok', { timestamp });
+      }
+    }
   }
   upgrade(context) {
     const server = this.#server;
@@ -149,24 +179,6 @@ class Socket {
     }
     return false;
   }
-  broadcast(clients, action, payload) {
-    for (const client of clients) {
-      if (client.readyState === WebSocket.OPEN) {
-        client.send(JSON.stringify({ action, payload }));
-      }
-    }
-  }
-  #broadcastStats(clients, stats) {
-    if (clients.size > 0 || clients.length > 0) {
-      const { hash, errors, warnings, builtAt: timestamp } = stats;
-      this.broadcast(clients, 'hash', { hash, timestamp });
-      if (hasIssues(errors) || hasIssues(warnings)) {
-        this.broadcast(clients, 'issues', { errors, warnings, timestamp });
-      } else {
-        this.broadcast(clients, 'ok', { timestamp });
-      }
-    }
-  }
 }
 
 export { Socket };

package/esm/server/hot/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @module index
+ */
+import { Middleware } from 'koa';
+import { Options } from './interface.js';
+import { UnionCompiler } from '../interface.js';
+export { Options };
+export declare function hot(compiler: UnionCompiler, options?: Options): Middleware;

package/esm/server/hot/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -14,19 +14,12 @@ import { Socket } from './Socket.js';
  */
 function hot(compiler, options) {
   const socket = new Socket(compiler, options);
-  const middleware = async (ctx, next) => {
+  // Middleware.
+  return async (ctx, next) => {
     if (!socket.upgrade(ctx)) {
       await next();
     }
   };
-  return Object.assign(middleware, {
-    clients() {
-      return socket.clients();
-    },
-    broadcast(clients, action, payload) {
-      socket.broadcast(clients, action, payload);
-    }
-  });
 }
 
 export { hot };

package/esm/server/hot/interface.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @module interface
+ */
+import WebSocket from 'ws';
+import webpack from 'webpack';
+import { RequiredKeys } from '../interface.js';
+export interface Options {
+  hmr?: boolean;
+  path?: string;
+  wss?: boolean;
+  reload?: boolean;
+  overlay?: boolean;
+  progress?: boolean;
+}
+export type Clients = Set<WebSocket>;
+export interface CompilerContext {
+  percentage: number;
+  readonly uuid: string;
+  readonly clients: Clients;
+  stats: Required<webpack.StatsCompilation> | null;
+}
+export type NormalizedOptions = RequiredKeys<Options, 'hmr' | 'path' | 'reload' | 'overlay' | 'progress'>;

package/esm/server/hot/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module utils
+ */
+import webpack from 'webpack';
+import { Context } from 'koa';
+import { NormalizedOptions, Options } from './interface.js';
+export declare const BASE_URL = 'wss://127.0.0.1';
+export declare function isUpgradable({ request }: Context): boolean;
+export declare function getOptions(options?: Options): NormalizedOptions;
+export declare function hasIssues<T>(issues: ArrayLike<T> | undefined): boolean;
+export declare function getStatsOptions(compiler: webpack.Compiler): webpack.StatsOptions;
+export declare function getTimestamp({ builtAt, children }: webpack.StatsCompilation): number;

package/esm/server/hot/utils.js

@@ -1,60 +1,44 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
  */
 
-import { isMultiCompiler, isObject } from '../utils.js';
+import { URL } from 'node:url';
+import { isString, isBoolean } from '../utils.js';
 
 /**
  * @module utils
  */
+const BASE_URL = 'wss://127.0.0.1';
 function isUpgradable({ request }) {
   const upgrade = request.get('Upgrade');
   return !!upgrade && /^websocket$/i.test(upgrade.trim());
 }
-function normalize(path) {
-  const segments = [];
-  const parts = path.split(/[\\/]+/);
-  for (const segment of parts) {
-    switch (segment) {
-      case '.':
-        break;
-      case '..':
-        segments.pop();
-        break;
-      default:
-        segments.push(segment);
-        break;
-    }
-  }
-  const pathname = segments.join('/');
-  return pathname.startsWith('/') ? pathname : `/${pathname}`;
-}
 function getOptions(options) {
   const settings = {
     hmr: true,
-    wss: false,
     path: '/hot',
     reload: true,
     overlay: true,
     progress: true,
     ...options
   };
-  settings.path = normalize(settings.path);
+  settings.path = new URL(settings.path, BASE_URL).pathname;
   return settings;
 }
 function hasIssues(issues) {
   return Array.isArray(issues) && issues.length > 0;
 }
-function normalizeStatsOptions(statsOptions) {
-  if (!isObject(statsOptions)) {
-    statsOptions = {
-      preset: statsOptions
-    };
+function getStatsOptions(compiler) {
+  let statsOptions = compiler.options.stats;
+  if (isString(statsOptions)) {
+    statsOptions = { preset: statsOptions };
+  } else if (isBoolean(statsOptions)) {
+    statsOptions = statsOptions ? { preset: 'normal' } : { preset: 'none' };
   }
   return {
     ...statsOptions,
@@ -68,16 +52,6 @@ function normalizeStatsOptions(statsOptions) {
     errorDetails: false
   };
 }
-function getStatsOptions(compiler) {
-  if (isMultiCompiler(compiler)) {
-    return {
-      children: compiler.compilers.map(({ options }) => {
-        return normalizeStatsOptions(options.stats);
-      })
-    };
-  }
-  return normalizeStatsOptions(compiler.options.stats);
-}
 function getTimestamp({ builtAt, children = [] }) {
   if (builtAt != null) {
     return builtAt;
@@ -91,4 +65,4 @@ function getTimestamp({ builtAt, children = [] }) {
   return timestamp < 0 ? Date.now() : timestamp;
 }
 
-export { getOptions, getStatsOptions, getTimestamp, hasIssues, isUpgradable };
+export { BASE_URL, getOptions, getStatsOptions, getTimestamp, hasIssues, isUpgradable };

package/esm/server/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @module index
+ */
+import { Middleware } from 'koa';
+import { UnionCompiler } from './interface.js';
+import { Options as HotOptions } from './hot/index.js';
+import { Expose, Options as DevOptions } from './dev/index.js';
+export type Options = DevOptions & {
+  hot?: HotOptions | false;
+};
+/**
+ * @function server
+ * @description Create koa dev server middleware.
+ * @param compiler The rspack compiler instance.
+ * @param options Options.
+ */
+export declare function server(compiler: UnionCompiler, options?: Options): Middleware & Expose;

package/esm/server/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -17,6 +17,12 @@ import { dev } from './dev/index.js';
 /**
  * @module index
  */
+/**
+ * @function server
+ * @description Create koa dev server middleware.
+ * @param compiler The rspack compiler instance.
+ * @param options Options.
+ */
 function server(compiler, options = {}) {
   validate(schema, options, {
     name: PLUGIN_NAME,
@@ -34,4 +40,4 @@ function server(compiler, options = {}) {
   return Object.assign(middleware, devMiddleware, hotMiddleware);
 }
 
-export { server as default };
+export { server };

package/esm/server/interface.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module interface
+ */
+import webpack from 'webpack';
+export type UnionStats = webpack.Stats | webpack.MultiStats;
+export type GetProp<T, P extends keyof T> = NonNullable<T[P]>;
+export type StatsOptions = GetProp<webpack.Configuration, 'stats'>;
+export type UnionCompiler = webpack.Compiler | webpack.MultiCompiler;
+export type RequiredKeys<T, K extends keyof T> = T & {
+  [P in K]-?: T[P];
+};
+export type Logger = ReturnType<GetProp<webpack.Compiler, 'getInfrastructureLogger'>>;
+export type UnionWatching = webpack.Watching | ReturnType<GetProp<webpack.MultiCompiler, 'watch'>>;
+export type Optional<T extends object, K extends keyof T = keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

package/esm/server/schema.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @module schema
+ */
+import { validate } from 'schema-utils';
+type Schema = Parameters<typeof validate>[0];
+export declare const schema: Schema;
+export {};

package/esm/server/schema.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/esm/server/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @module utils
+ */
+import webpack from 'webpack';
+import { UnionCompiler } from './interface.js';
+export declare const PLUGIN_NAME: string;
+export declare function isString(value: unknown): value is string;
+export declare function isBoolean(value: unknown): value is boolean;
+export declare function isFunction(value: unknown): value is Function;
+export declare function getCompilers(compiler: UnionCompiler): webpack.Compiler[];
+export declare function isMultiCompiler(compiler: UnionCompiler): compiler is webpack.MultiCompiler;

package/esm/server/utils.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.13.2
+ * @version 0.14.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -12,9 +12,6 @@
  */
 const { toString } = Object.prototype;
 const PLUGIN_NAME = 'webpack-dev-service';
-function isObject(value) {
-  return toString.call(value) === '[object Object]';
-}
 function isString(value) {
   return toString.call(value) === '[object String]';
 }
@@ -34,4 +31,4 @@ function isMultiCompiler(compiler) {
   return 'compilers' in compiler;
 }
 
-export { PLUGIN_NAME, getCompilers, isBoolean, isFunction, isMultiCompiler, isObject, isString };
+export { PLUGIN_NAME, getCompilers, isBoolean, isFunction, isMultiCompiler, isString };

package/global.d.ts

@@ -4,6 +4,8 @@
 
 /// <reference types="webpack/module" />
 
+declare const __ESM__: boolean;
+
 declare const __HOT_CLIENT__: string;
 
 declare const __PLUGIN_NAME__: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-service",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [
@@ -76,40 +76,41 @@
   "dependencies": {
     "@nuintun/ansi": "^0.1.1",
     "@types/koa": "^2.15.0",
-    "@types/ws": "^8.5.12",
+    "@types/ws": "^8.5.13",
     "etag": "^1.8.1",
-    "memfs": "^4.14.0",
+    "memfs": "^4.15.0",
     "range-parser": "^1.2.1",
-    "schema-utils": "^4.2.0",
+    "schema-utils": "^4.3.0",
     "supports-color": "^9.4.0",
     "tslib": "^2.8.1",
+    "uuid": "^11.0.3",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^6.0.1",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@swc/core": "^1.7.42",
-    "@swc/helpers": "^0.5.13",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@swc/core": "^1.10.1",
+    "@swc/helpers": "^0.5.15",
     "@types/etag": "^1.8.3",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.10.2",
     "@types/range-parser": "^1.2.7",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "css-loader": "^7.1.2",
+    "dts-paths": "^1.0.0",
     "html-webpack-plugin": "^5.6.3",
     "koa": "^2.15.3",
     "koa-compress": "^5.1.1",
-    "magic-string": "^0.30.12",
+    "magic-string": "^0.30.17",
     "mini-css-extract-plugin": "^2.9.2",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.3",
+    "rollup": "^4.28.1",
     "swc-loader": "^0.2.6",
-    "tsc-alias": "^1.8.10",
-    "typescript": "^5.6.3",
-    "webpack": "^5.96.0"
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.1"
   },
   "peerDependencies": {
     "koa": ">=2.0.0",

package/types/client/client.d.ts

@@ -9,5 +9,6 @@ export interface Options {
   readonly reload: boolean;
   readonly overlay: boolean;
   readonly progress: boolean;
+  readonly uuid: string | null;
 }
-export default function createClient(options: Options): void;
+export declare function createClient(options: Options): void;

package/types/client/events.d.ts

@@ -2,15 +2,8 @@
  * @module events
  */
 import { Options } from './client';
-import { GetProp } from '../server/interface';
-import { HashMessage, InvalidMessage, IssuesMessage, OkMessage, ProgressMessage } from './Message';
-export interface Messages {
-  ok: GetProp<OkMessage, 'payload'>;
-  hash: GetProp<HashMessage, 'payload'>;
-  issues: GetProp<IssuesMessage, 'payload'>;
-  invalid: GetProp<InvalidMessage, 'payload'>;
-  progress: GetProp<ProgressMessage, 'payload'>;
-}
+import { GetProp } from '/server/interface';
+import { Messages } from '/server/hot/Message';
 export interface Events {
   ok(message: GetProp<Messages, 'ok'>, options: Options): void;
   hash(message: GetProp<Messages, 'hash'>, options: Options): void;