@rspack/dev-server 1.2.0 → 2.0.0-beta.1

package/README.md

@@ -9,7 +9,9 @@
 
 Use Rspack with a development server that provides live reloading. This should be used for development only.
 
-> `@rspack/dev-server` is based on `webpack-dev-server@5`
+> [!NOTE]
+> The `main` branch is under active development for 2.0.
+> The stable `1.x` releases are maintained in the [v1.x](https://github.com/rstackjs/rspack-dev-server/tree/v1.x) branch.
 
 ## Installation
 
@@ -17,16 +19,16 @@ First of all, install `@rspack/dev-server` and `@rspack/core` by your favorite p
 
 ```bash
 # npm
-$ npm install @rspack/dev-server @rspack/core --save-dev
+$ npm install -D @rspack/dev-server @rspack/core
 
 # yarn
-$ yarn add @rspack/dev-server @rspack/core --dev
+$ yarn add -D @rspack/dev-server @rspack/core
 
 # pnpm
-$ pnpm add @rspack/dev-server @rspack/core --save-dev
+$ pnpm add -D @rspack/dev-server @rspack/core
 
 # bun
-$ bun add @rspack/dev-server @rspack/core -D
+$ bun add -D @rspack/dev-server @rspack/core
 ```
 
 ## Usage
@@ -41,16 +43,16 @@ You can install it in your project by:
 
 ```bash
 # npm
-$ npm install @rspack/cli --save-dev
+$ npm install -D @rspack/cli
 
 # yarn
-$ yarn add @rspack/cli --dev
+$ yarn add -D @rspack/cli
 
 # pnpm
-$ pnpm add @rspack/cli --save-dev
+$ pnpm add -D @rspack/cli
 
 # bun
-$ bun add @rspack/cli -D
+$ bun add -D @rspack/cli
 ```
 
 And then start the development server by:
@@ -70,7 +72,6 @@ While starting the development server, you can specify the configuration by the
 ```js
 // rspack.config.mjs
 export default {
-  // ...
   devServer: {
     // the configuration of the development server
     port: 8080,
@@ -78,7 +79,7 @@ export default {
 };
 ```
 
-> See [DevServer](https://rspack.rs/config/dev-server) for all configuration options.
+> See [Rspack - devServer](https://rspack.rs/config/dev-server) for all configuration options.
 
 ### With the API
 
@@ -86,12 +87,12 @@ While it's recommended to run `@rspack/dev-server` via the CLI, you may also cho
 
 ```js
 import { RspackDevServer } from '@rspack/dev-server';
-import rspack from '@rspack/core';
-import rspackConfig from './rspack.config.mjs';
+import { rspack } from '@rspack/core';
+import config from './rspack.config.mjs';
 
-const compiler = rspack(rspackConfig);
+const compiler = rspack(config);
 const devServerOptions = {
-  ...rspackConfig.devServer,
+  ...config.devServer,
   // override
   port: 8888,
 };
@@ -103,8 +104,6 @@ server.startCallback(() => {
 });
 ```
 
-> Cause `@rspack/dev-server` is based on `webpack-dev-server@5`, you can see the [webpack-dev-server API](https://webpack.js.org/api/webpack-dev-server/) for more methods of the server instance.
-
 ## Credits
 
 This plugin is forked from [webpack-dev-server](https://github.com/webpack/webpack-dev-server), and is used to smooth out some differences between rspack and webpack, while also providing rspack-specific new features.

package/client/index.js

@@ -19,10 +19,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 // @ts-expect-error: No type definitions available for '@rspack/core/hot/emitter.js'
-import hotEmitter from '@rspack/core/hot/emitter.js';
+import { emitter as hotEmitter } from '@rspack/core/hot/emitter.js';
 /* Rspack dev server runtime client */
 // @ts-expect-error: No type definitions available for '@rspack/core/hot/log.js'
-import webpackHotLog from '@rspack/core/hot/log.js';
+import { log as webpackHotLog } from '@rspack/core/hot/log.js';
 import { createOverlay, formatProblem } from './overlay.js';
 import socket from './socket.js';
 import { defineProgressElement, isProgressSupported } from './progress.js';
@@ -86,7 +86,7 @@ var getCurrentScriptSource = function () {
         return currentScript.getAttribute('src');
     }
     // Fail as there was no script to use.
-    throw new Error('[webpack-dev-server] Failed to get current script source.');
+    throw new Error('[rspack-dev-server] Failed to get current script source.');
 };
 var parsedResourceQuery = parseURL(__resourceQuery);
 var enabledFeatures = {
@@ -187,8 +187,8 @@ var reloadApp = function (_a, currentStatus) {
         rootWindow.location.reload();
     }
     var search = self.location.search.toLowerCase();
-    var allowToHot = search.indexOf('webpack-dev-server-hot=false') === -1;
-    var allowToLiveReload = search.indexOf('webpack-dev-server-live-reload=false') === -1;
+    var allowToHot = search.indexOf('rspack-dev-server-hot=false') === -1;
+    var allowToLiveReload = search.indexOf('rspack-dev-server-live-reload=false') === -1;
     if (hot && allowToHot) {
         log.info('App hot update...');
         hotEmitter.emit('webpackHotUpdate', currentStatus.currentHash);
@@ -280,7 +280,7 @@ var onSocketMessage = {
     },
     'progress-update': function progressUpdate(data) {
         if (options.progress) {
-            log.info("".concat(data.pluginName ? "[".concat(data.pluginName, "] ") : '').concat(data.percent, "% - ").concat(data.msg, "."));
+            log.info("".concat(data.percent, "% - ").concat(data.msg, "."));
         }
         if (isProgressSupported()) {
             if (typeof options.progress === 'string') {

package/client/overlay.js

@@ -340,18 +340,18 @@ var createOverlay = function (options) {
     function createContainer(trustedTypesPolicyName) {
         // Enable Trusted Types if they are available in the current browser.
         if (window.trustedTypes) {
-            overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || 'webpack-dev-server#overlay', {
+            overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || 'rspack-dev-server#overlay', {
                 createHTML: function (value) { return value; },
             });
         }
         iframeContainerElement = document.createElement('iframe');
-        iframeContainerElement.id = 'webpack-dev-server-client-overlay';
+        iframeContainerElement.id = 'rspack-dev-server-client-overlay';
         iframeContainerElement.src = 'about:blank';
         applyStyle(iframeContainerElement, iframeStyle);
         iframeContainerElement.onload = function () {
             var contentElement = (iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.contentDocument).createElement('div');
             containerElement = (iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.contentDocument).createElement('div');
-            contentElement.id = 'webpack-dev-server-client-overlay-div';
+            contentElement.id = 'rspack-dev-server-client-overlay-div';
             applyStyle(contentElement, containerStyle);
             headerElement = document.createElement('div');
             headerElement.innerText = 'Compiled with problems:';
@@ -421,7 +421,7 @@ var createOverlay = function (options) {
                     // element.dataset not supported in IE
                     typeElement.setAttribute('data-can-open', 'true');
                     typeElement.addEventListener('click', function () {
-                        fetch("/webpack-dev-server/open-editor?fileName=".concat(message.moduleIdentifier));
+                        fetch("/rspack-dev-server/open-editor?fileName=".concat(message.moduleIdentifier));
                     });
                 }
                 // Make it look similar to our terminal.

package/client/utils/ansiHTML.js

@@ -1,7 +1,7 @@
 // Reference to https://github.com/sindresorhus/ansi-regex
 var _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/;
 var _defColors = {
-    reset: ['fff', '000'],
+    reset: ['fff', '000'], // [FOREGROUND_COLOR, BACKGROUND_COLOR]
     black: '000',
     red: 'ff0000',
     green: '209805',
@@ -26,12 +26,12 @@ var _colorMode = {
     2: 'rgb',
 };
 var _openTags = {
-    1: 'font-weight:bold',
-    2: 'opacity:0.5',
-    3: '<i>',
-    4: '<u>',
-    8: 'display:none',
-    9: '<del>',
+    1: 'font-weight:bold', // bold
+    2: 'opacity:0.5', // dim
+    3: '<i>', // italic
+    4: '<u>', // underscore
+    8: 'display:none', // hidden
+    9: '<del>', // delete
     38: function (match) {
         // color
         var mode = _colorMode[match[0]];
@@ -78,8 +78,8 @@ var _closeTags = {
         }
         return ret;
     },
-    23: '</i>',
-    24: '</u>',
+    23: '</i>', // reset italic
+    24: '</u>', // reset underscore
     29: '</del>', // reset delete
 };
 for (var _i = 0, _a = [21, 22, 27, 28, 39, 49]; _i < _a.length; _i++) {

package/client/utils/log.js

@@ -8,7 +8,7 @@
  * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
  */
 import logger from '../modules/logger/index';
-var name = 'webpack-dev-server';
+var name = 'rspack-dev-server';
 // default level is set on the client side, so it does not need
 // to be set by the CLI or API
 var defaultLevel = 'info';

package/dist/config.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="connect-history-api-fallback" />
-import type { BonjourOptions, ClientConfiguration, ConnectHistoryApiFallbackOptions, DevServer, NormalizedStatic, Open, ServerConfiguration, WatchFiles, WebSocketServerConfiguration } from './types';
+import type { ClientConfiguration, ConnectHistoryApiFallbackOptions, DevServer, NormalizedStatic, Open, ServerConfiguration, WatchFiles, WebSocketServerConfiguration } from './types';
 export interface ResolvedDevServer extends DevServer {
     port: number | string;
     static: false | Array<NormalizedStatic>;
@@ -13,7 +12,6 @@ export interface ResolvedDevServer extends DevServer {
     proxy: Required<DevServer['proxy']>;
     client: ClientConfiguration;
     allowedHosts: 'auto' | string[] | 'all';
-    bonjour: false | Record<string, never> | BonjourOptions;
     compress: boolean;
     historyApiFallback: false | ConnectHistoryApiFallbackOptions;
     server: ServerConfiguration;

package/dist/getPort.js

@@ -24,13 +24,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 /*
  * Based on the packages get-port https://www.npmjs.com/package/get-port
@@ -41,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const net = __importStar(require("node:net"));
 const os = __importStar(require("node:os"));
 const minPort = 1024;
-const maxPort = 65535;
+const maxPort = 65_535;
 /**
  * Get all local hosts
  */

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { default as RspackDevServer } from './server';
+export { Server as RspackDevServer } from './server';
 export type { DevServer as Configuration } from '@rspack/core';

package/dist/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RspackDevServer = void 0;
 var server_1 = require("./server");
-Object.defineProperty(exports, "RspackDevServer", { enumerable: true, get: function () { return __importDefault(server_1).default; } });
+Object.defineProperty(exports, "RspackDevServer", { enumerable: true, get: function () { return server_1.Server; } });

package/dist/server.d.ts

@@ -7,11 +7,7 @@
  * Copyright (c) JS Foundation and other contributors
  * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
  */
-/// <reference types="express" />
-/// <reference types="node" />
-/// <reference types="connect-history-api-fallback" />
-/// <reference types="node" />
-import type { BasicApplication, ExpressApplication, HTTPServer, Response, Request, Host, Port, DevMiddlewareOptions, ConnectHistoryApiFallbackOptions, BonjourOptions, WatchFiles, Static, ServerType, ServerConfiguration, WebSocketServerConfiguration, ProxyConfigArray, Open, ClientConfiguration, Middleware, DevMiddlewareContext, Compiler, MultiCompiler, FSWatcher, EXPECTED_ANY, RequestHandler, Socket, Bonjour, WebSocketServerImplementation, Stats, MultiStats, DevServer, Schema, StatsOptions, WatchOptions, StatsCompilation, NextFunction, ClientConnection, Headers } from './types';
+import type { BasicApplication, ClientConfiguration, ClientConnection, Compiler, ConnectHistoryApiFallbackOptions, DevMiddlewareContext, DevMiddlewareOptions, DevServer, EXPECTED_ANY, ExpressApplication, FSWatcher, HTTPServer, Headers, Host, Middleware, MultiCompiler, MultiStats, NextFunction, Open, Port, ProxyConfigArray, Request, RequestHandler, Response, ServerConfiguration, ServerType, Socket, Static, Stats, StatsCompilation, StatsOptions, WatchFiles, WatchOptions, WebSocketServerConfiguration, WebSocketServerImplementation } from './types';
 export interface Configuration<A extends BasicApplication = ExpressApplication, S extends HTTPServer = HTTPServer> {
     ipc?: boolean | string;
     host?: Host;
@@ -22,12 +18,11 @@ export interface Configuration<A extends BasicApplication = ExpressApplication,
     compress?: boolean;
     allowedHosts?: 'auto' | 'all' | string | string[];
     historyApiFallback?: boolean | ConnectHistoryApiFallbackOptions;
-    bonjour?: boolean | Record<string, never> | BonjourOptions;
     watchFiles?: string | string[] | WatchFiles | Array<string | WatchFiles>;
     static?: boolean | string | Static | Array<string | Static>;
     server?: ServerType<A, S> | ServerConfiguration<A, S>;
     app?: () => Promise<A>;
-    webSocketServer?: boolean | 'sockjs' | 'ws' | string | WebSocketServerConfiguration;
+    webSocketServer?: boolean | 'ws' | string | WebSocketServerConfiguration;
     proxy?: ProxyConfigArray;
     open?: boolean | string | Open | Array<string | Open>;
     setupExitSignals?: boolean;
@@ -49,36 +44,32 @@ declare class Server<A extends BasicApplication = ExpressApplication, S extends
     sockets: Socket[];
     currentHash: string | undefined;
     isTlsServer: boolean;
-    bonjour: Bonjour | undefined;
     webSocketServer: WebSocketServerImplementation | null | undefined;
     middleware: import('webpack-dev-middleware').API<Request, Response> | undefined;
     server: S | undefined;
     app: A | undefined;
     stats: Stats | MultiStats | undefined;
     constructor(options: DevServer, compiler: Compiler | MultiCompiler);
-    static get schema(): Schema;
     static get DEFAULT_STATS(): StatsOptions;
     static isAbsoluteURL(URL: string): boolean;
     static findIp(gatewayOrFamily: string, isInternal: boolean): string | undefined;
-    static internalIP(family: 'v4' | 'v6'): Promise<string | undefined>;
-    static internalIPSync(family: 'v4' | 'v6'): string | undefined;
     static getHostname(hostname: Host): Promise<string>;
     static getFreePort(port: string, host: string): Promise<any>;
     static findCacheDir(): string;
-    static isWebTarget(compiler: Compiler): boolean;
     addAdditionalEntries(compiler: Compiler): void;
     /**
      * @private
      * @returns {Compiler["options"]} compiler options
      */
-    getCompilerOptions(): import("@rspack/core").RspackOptionsNormalized;
+    getCompilerOptions(): import("@rspack/core", { with: { "resolution-mode": "import" } }).RspackOptionsNormalized;
+    shouldLogInfrastructureInfo(): boolean;
     normalizeOptions(): Promise<void>;
     /**
      * @private
      * @returns {string} client transport
      */
     getClientTransport(): string;
-    getServerTransport(): typeof import("./servers/SockJSServer") | typeof import("./servers/WebsocketServer") | undefined;
+    getServerTransport(): typeof import("./servers/WebsocketServer") | undefined;
     getClientEntry(): string;
     getClientHotEntry(): string | undefined;
     setupProgressPlugin(): void;
@@ -100,8 +91,6 @@ declare class Server<A extends BasicApplication = ExpressApplication, S extends
     createServer(): Promise<void>;
     createWebSocketServer(): void;
     openBrowser(defaultOpenTarget: string): Promise<void>;
-    runBonjour(): void;
-    stopBonjour(callback?: () => void): void;
     logStatus(): Promise<void>;
     setHeaders(req: Request, res: Response, next: NextFunction): void;
     isHostAllowed(value: string): boolean;
@@ -116,4 +105,4 @@ declare class Server<A extends BasicApplication = ExpressApplication, S extends
     stop(): Promise<void>;
     stopCallback(callback?: (err?: Error) => void): void;
 }
-export default Server;
+export { Server };