fix: align devServer options with Rspack v2 config (#90)

Author: chenjiahan

README.md

@@ -898,71 +898,31 @@ config.node(false)
 config.devServer : ChainedMap
 ```
 
-#### devServer allowedHosts
-
-```js
-config.devServer.allowedHosts : ChainedSet
-
-config.devServer.allowedHosts
-  .add(value)
-  .prepend(value)
-  .clear()
-```
-
 #### devServer: shorthand methods
 
 ```js
 config.devServer
-  .after(after)
-  .before(before)
-  .bonjour(bonjour)
-  .clientLogLevel(clientLogLevel)
+  .allowedHosts(allowedHosts)
+  .app(app)
+  .client(client)
   .compress(compress)
-  .contentBase(contentBase)
-  .contentBasePublicPath(contentBasePublicPath)
-  .disableHostCheck(disableHostCheck)
-  .filename(filename)
+  .devMiddleware(devMiddleware)
   .headers(headers)
   .historyApiFallback(historyApiFallback)
   .host(host)
   .hot(hot)
-  .hotOnly(hotOnly)
-  .http2(http2)
-  .https(https)
-  .index(index)
-  .injectClient(injectClient)
-  .injectHot(injectHot)
-  .inline(inline)
-  .lazy(lazy)
   .liveReload(liveReload)
-  .mimeTypes(mimeTypes)
-  .noInfo(noInfo)
+  .ipc(ipc)
   .onListening(onListening)
   .open(open)
-  .openPage(openPage)
-  .overlay(overlay)
-  .pfx(pfx)
-  .pfxPassphrase(pfxPassphrase)
   .port(port)
-  .progress(progress)
   .proxy(proxy)
-  .public(public)
-  .publicPath(publicPath)
-  .quiet(quiet)
-  .serveIndex(serveIndex)
-  .setup(setup)
-  .socket(socket)
-  .sockHost(sockHost)
-  .sockPath(sockPath)
-  .sockPort(sockPort)
-  .staticOptions(staticOptions)
-  .stats(stats)
-  .stdin(stdin)
-  .transportMode(transportMode)
-  .useLocalIp(useLocalIp)
-  .watchContentBase(watchContentBase)
-  .watchOptions(watchOptions)
-  .writeToDisk(writeToDisk);
+  .server(server)
+  .setupExitSignals(setupExitSignals)
+  .setupMiddlewares(setupMiddlewares)
+  .static(static)
+  .watchFiles(watchFiles)
+  .webSocketServer(webSocketServer);
 ```
 
 #### module
@@ -1271,26 +1231,27 @@ config.merge({
   devServer: {
     [key]: value,
 
-    clientLogLevel,
+    allowedHosts,
+    app,
+    client,
     compress,
-    contentBase,
-    filename,
+    devMiddleware,
     headers,
     historyApiFallback,
     host,
     hot,
-    hotOnly,
-    https,
-    inline,
-    lazy,
-    noInfo,
-    overlay,
+    ipc,
+    liveReload,
+    onListening,
+    open,
     port,
     proxy,
-    quiet,
-    setup,
-    stats,
-    watchContentBase,
+    server,
+    setupExitSignals,
+    setupMiddlewares,
+    static,
+    watchFiles,
+    webSocketServer,
   },
 
   node: {

src/DevServer.js

@@ -1,78 +1,35 @@
 import ChainedMap from './ChainedMap.js';
-import ChainedSet from './ChainedSet.js';
 
 export default class extends ChainedMap {
   constructor(parent) {
     super(parent);
 
-    this.allowedHosts = new ChainedSet(this);
-
     this.extend([
-      'after',
-      'before',
-      'bonjour',
-      'clientLogLevel',
+      'allowedHosts',
+      'app',
+      'client',
       'compress',
-      'contentBase',
-      'contentBasePublicPath',
-      'disableHostCheck',
-      'filename',
+      'devMiddleware',
       'headers',
-      'historyApiFallback',
       'host',
+      'historyApiFallback',
       'hot',
-      'hotOnly',
-      'http2',
-      'https',
-      'index',
-      'injectClient',
-      'injectHot',
-      'inline',
-      'lazy',
+      'ipc',
       'liveReload',
-      'mimeTypes',
-      'noInfo',
       'onListening',
       'open',
-      'openPage',
-      'overlay',
-      'pfx',
-      'pfxPassphrase',
       'port',
       'proxy',
-      'progress',
-      'public',
-      'publicPath',
-      'quiet',
-      'serveIndex',
-      'setup',
-      'socket',
-      'sockHost',
-      'sockPath',
-      'sockPort',
-      'staticOptions',
-      'stats',
-      'stdin',
-      'transportMode',
-      'useLocalIp',
-      'watchContentBase',
-      'watchOptions',
-      'writeToDisk',
+      'server',
+      'setupExitSignals',
+      'setupMiddlewares',
+      'static',
+      'watchFiles',
+      'webSocketServer',
     ]);
   }
 
   toConfig() {
-    return this.clean({
-      allowedHosts: this.allowedHosts.values(),
-      ...(this.entries() || {}),
-    });
-  }
-
-  merge(obj, omit = []) {
-    if (!omit.includes('allowedHosts') && 'allowedHosts' in obj) {
-      this.allowedHosts.merge(obj.allowedHosts);
-    }
-
-    return super.merge(obj, ['allowedHosts']);
+    return this.clean(this.entries() || {});
   }
 }

test/DevServer.js

@@ -7,16 +7,55 @@ test('is Chainable', () => {
   expect(devServer.end()).toBe(parent);
 });
 
-test('sets allowed hosts', () => {
+test('sets allowed hosts arrays', () => {
   const devServer = new DevServer();
-  const instance = devServer.allowedHosts.add('https://github.com').end();
+  const instance = devServer.allowedHosts(['https://github.com']);
 
   expect(instance).toBe(devServer);
   expect(devServer.toConfig()).toStrictEqual({
     allowedHosts: ['https://github.com'],
   });
 });
 
+test('sets allowed hosts scalar values', () => {
+  const devServer = new DevServer();
+
+  devServer.allowedHosts('all');
+
+  expect(devServer.toConfig()).toStrictEqual({
+    allowedHosts: 'all',
+  });
+});
+
+test('merges allowedHosts values', () => {
+  const devServer = new DevServer();
+
+  devServer.allowedHosts('auto');
+  devServer.merge({
+    allowedHosts: ['https://github.com'],
+  });
+
+  expect(devServer.toConfig()).toStrictEqual({
+    allowedHosts: ['https://github.com'],
+  });
+});
+
+test('preserves omitted keys during merge', () => {
+  const devServer = new DevServer();
+
+  devServer.proxy('https://example.com');
+  devServer.merge(
+    {
+      proxy: 'https://rspack.rs',
+    },
+    ['proxy'],
+  );
+
+  expect(devServer.toConfig()).toStrictEqual({
+    proxy: 'https://example.com',
+  });
+});
+
 test('shorthand methods', () => {
   const devServer = new DevServer();
   const obj = {};

types/index.d.ts

@@ -1,5 +1,4 @@
-import { Configuration, Compiler, RuleSetRule } from '@rspack/core';
-import * as https from 'node:https';
+import { Configuration, RuleSetRule } from '@rspack/core';
 
 // The compiler type of Rspack / webpack are mismatch,
 // so we use a loose type here to allow using webpack plugins.
@@ -234,86 +233,15 @@ export declare namespace RspackChain {
     clean(value: RspackOutput['clean']): this;
   }
 
-  // await for @types/webpack-dev-server update do v4 to remove all any
-  class DevServer extends ChainedMap<RspackChain> {
-    allowedHosts: TypedChainedSet<this, string>;
-    after(value: (app: any, server: any, compiler: Compiler) => void): this;
-    before(value: (app: any, server: any, compiler: Compiler) => void): this;
-    bonjour(value: boolean): this;
-    clientLogLevel(
-      value:
-        | 'silent'
-        | 'trace'
-        | 'debug'
-        | 'info'
-        | 'warn'
-        | 'error'
-        | 'none'
-        | 'warning',
-    ): this;
-    compress(value: boolean): this;
-    contentBase(value: boolean | string | string[]): this;
-    contentBasePublicPath(value: string): this;
-    disableHostCheck(value: boolean): this;
-    filename(value: string): this;
-    headers(value: { [header: string]: string }): this;
-    historyApiFallback(value: boolean | any): this;
-    host(value: string): this;
-    hot(value: boolean): this;
-    hotOnly(value: boolean): this;
-    http2(value: boolean): this;
-    https(value: boolean | https.ServerOptions): this;
-    index(value: string): this;
-    injectClient(value: boolean | ((compiler: Compiler) => boolean)): this;
-    injectHot(value: boolean | ((compiler: Compiler) => boolean)): this;
-    inline(value: boolean): this;
-    lazy(value: boolean): this;
-    liveReload(value: boolean): this;
-    mimeTypes(value: Object): this;
-    noInfo(value: boolean): this;
-    onListening(value: (server: any) => void): this;
-    open(value: boolean): this;
-    openPage(value: string | string[]): this;
-    overlay(value: boolean | { warnings?: boolean; errors?: boolean }): this;
-    pfx(value: string): this;
-    pfxPassphrase(value: string): this;
-    port(value: number): this;
-    progress(value: boolean): this;
-    proxy(value: any): this;
-    public(value: string): this;
-    publicPath(publicPath: string): this;
-    quiet(value: boolean): this;
-    serveIndex(value: boolean): this;
-    setup(value: (expressApp: any) => void): this;
-    socket(value: string): this;
-    sockHost(value: string): this;
-    sockPath(value: string): this;
-    sockPort(value: number): this;
-    staticOptions(value: any): this;
-    stats(value: Configuration['stats']): this;
-    stdin(value: boolean): this;
-    transportMode(
-      value:
-        | 'sockjs'
-        | 'ws'
-        | {
-            server: 'ws';
-            client: object;
-          }
-        | {
-            client: 'sockjs';
-            server: object;
-          }
-        | {
-            client: object;
-            server: object;
-          },
-    ): this;
-    useLocalIp(value: boolean): this;
-    watchContentBase(value: boolean): this;
-    watchOptions(value: Configuration['watchOptions']): this;
-    writeToDisk(value: boolean): this;
-  }
+  type RspackDevServer = Required<NonNullable<Configuration['devServer']>>;
+
+  type DevServerShorthandMethods<T> = {
+    [K in keyof RspackDevServer]-?: (value: RspackDevServer[K]) => T;
+  };
+
+  class DevServer extends TypedChainedMap<RspackChain, RspackDevServer> {}
+
+  interface DevServer extends DevServerShorthandMethods<DevServer> {}
 
   type RspackPerformance = Exclude<
     Required<NonNullable<Configuration['performance']>>,