@rspack/dev-server 1.0.4 → 1.0.6

package/client/index.js

@@ -106,6 +106,28 @@ var status = {
 	currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : ""
 };
 
+var decodeOverlayOptions = function decodeOverlayOptions(overlayOptions) {
+	if (typeof overlayOptions === "object") {
+		["warnings", "errors", "runtimeErrors"].forEach(function (property) {
+			if (typeof overlayOptions[property] === "string") {
+				var overlayFilterFunctionString = decodeURIComponent(
+					overlayOptions[property]
+				);
+
+				// eslint-disable-next-line no-new-func
+				var overlayFilterFunction = new Function(
+					"message",
+					"var callback = ".concat(
+						overlayFilterFunctionString,
+						"\n        return callback(message)"
+					)
+				);
+				overlayOptions[property] = overlayFilterFunction;
+			}
+		});
+	}
+};
+
 /** @type {Options} */
 var options = {
 	hot: false,
@@ -132,6 +154,7 @@ if (parsedResourceQuery.progress === "true") {
 	options.progress = true;
 	enabledFeatures.Progress = true;
 }
+
 if (parsedResourceQuery.overlay) {
 	try {
 		options.overlay = JSON.parse(parsedResourceQuery.overlay);
@@ -149,6 +172,7 @@ if (parsedResourceQuery.overlay) {
 			},
 			options.overlay
 		);
+		decodeOverlayOptions(options.overlay);
 	}
 	enabledFeatures.Overlay = true;
 }
@@ -232,6 +256,7 @@ var onSocketMessage = {
 			return;
 		}
 		options.overlay = value;
+		decodeOverlayOptions(options.overlay);
 	},
 	/**
 	 * @param {number} value
@@ -321,16 +346,22 @@ var onSocketMessage = {
 		for (var i = 0; i < printableWarnings.length; i++) {
 			log.warn(printableWarnings[i]);
 		}
-		var needShowOverlayForWarnings =
+		var overlayWarningsSetting =
 			typeof options.overlay === "boolean"
 				? options.overlay
 				: options.overlay && options.overlay.warnings;
-		if (needShowOverlayForWarnings) {
-			overlay.send({
-				type: "BUILD_ERROR",
-				level: "warning",
-				messages: _warnings
-			});
+		if (overlayWarningsSetting) {
+			var warningsToDisplay =
+				typeof overlayWarningsSetting === "function"
+					? _warnings.filter(overlayWarningsSetting)
+					: _warnings;
+			if (warningsToDisplay.length) {
+				overlay.send({
+					type: "BUILD_ERROR",
+					level: "warning",
+					messages: _warnings
+				});
+			}
 		}
 		if (params && params.preventReloading) {
 			return;
@@ -352,16 +383,22 @@ var onSocketMessage = {
 		for (var i = 0; i < printableErrors.length; i++) {
 			log.error(printableErrors[i]);
 		}
-		var needShowOverlayForErrors =
+		var overlayErrorsSettings =
 			typeof options.overlay === "boolean"
 				? options.overlay
 				: options.overlay && options.overlay.errors;
-		if (needShowOverlayForErrors) {
-			overlay.send({
-				type: "BUILD_ERROR",
-				level: "error",
-				messages: _errors
-			});
+		if (overlayErrorsSettings) {
+			var errorsToDisplay =
+				typeof overlayErrorsSettings === "function"
+					? _errors.filter(overlayErrorsSettings)
+					: _errors;
+			if (errorsToDisplay.length) {
+				overlay.send({
+					type: "BUILD_ERROR",
+					level: "error",
+					messages: _errors
+				});
+			}
 		}
 	},
 	/**

package/dist/alias.d.ts

@@ -0,0 +1,2 @@
+export declare const addResolveAlias: (name: string, aliasMap: Record<string, string>) => void;
+export declare const removeResolveAlias: (name: string) => void;

package/dist/alias.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeResolveAlias = exports.addResolveAlias = void 0;
+const RESOLVER_MAP = {};
+const addResolveAlias = (name, aliasMap) => {
+    const modulePath = require.resolve(name);
+    if (RESOLVER_MAP[modulePath]) {
+        throw new Error(`Should not add resolve alias to ${name} again.`);
+    }
+    const m = require.cache[modulePath];
+    if (!m) {
+        throw new Error("Failed to resolve webpack-dev-server.");
+    }
+    RESOLVER_MAP[modulePath] = m.require.resolve;
+    m.require.resolve = ((id, options) => aliasMap[id] ||
+        RESOLVER_MAP[modulePath].apply(m.require, [
+            id,
+            options
+        ]));
+};
+exports.addResolveAlias = addResolveAlias;
+const removeResolveAlias = (name) => {
+    const modulePath = require.resolve(name);
+    if (!RESOLVER_MAP[modulePath]) {
+        return;
+    }
+    const m = require.cache[modulePath];
+    if (!m) {
+        throw new Error("Failed to resolve webpack-dev-server");
+    }
+    if (RESOLVER_MAP[modulePath]) {
+        m.require.resolve = RESOLVER_MAP[modulePath];
+        delete RESOLVER_MAP[modulePath];
+    }
+};
+exports.removeResolveAlias = removeResolveAlias;

package/dist/server.d.ts

@@ -7,7 +7,7 @@ import type { FSWatcher } from "chokidar";
 import WebpackDevServer from "webpack-dev-server";
 import type { DevServer, ResolvedDevServer } from "./config";
 export declare class RspackDevServer extends WebpackDevServer {
-    static getFreePort(port: string, host: string): Promise<any>;
+    static getFreePort: (port: string, host: string) => Promise<any>;
     /**
      * resolved after `normalizedOptions`
      */
@@ -20,9 +20,6 @@ export declare class RspackDevServer extends WebpackDevServer {
     webSocketServer: WebpackDevServer.WebSocketServerImplementation | undefined;
     static version: string;
     constructor(options: DevServer, compiler: Compiler | MultiCompiler);
-    private getClientTransport;
     initialize(): Promise<void>;
-    private setupDevMiddleware;
-    private setupMiddlewares;
     private addAdditionalEntries;
 }

package/dist/server.js

@@ -15,87 +15,35 @@ exports.RspackDevServer = void 0;
  */
 const node_path_1 = __importDefault(require("node:path"));
 const core_1 = require("@rspack/core");
-const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
 const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
 // @ts-ignore 'package.json' is not under 'rootDir'
 const package_json_1 = require("../package.json");
+const alias_1 = require("./alias");
 const patch_1 = require("./patch");
 (0, patch_1.applyDevServerPatch)();
-class RspackDevServer extends webpack_dev_server_1.default {
-    static async getFreePort(port, host) {
-        if (typeof port !== "undefined" && port !== null && port !== "auto") {
-            return port;
-        }
-        const pRetry = require("p-retry");
-        const getPort = require("webpack-dev-server/lib/getPort");
-        const basePort = typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
-            ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
-            : 8080;
-        // Try to find unused port and listen on it for 3 times,
-        // if port is not specified in options.
-        const defaultPortRetry = typeof process.env.WEBPACK_DEV_SERVER_PORT_RETRY !== "undefined"
-            ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
-            : 3;
-        return pRetry(() => getPort(basePort, host), {
-            retries: defaultPortRetry
-        });
+const getFreePort = async function getFreePort(port, host) {
+    if (typeof port !== "undefined" && port !== null && port !== "auto") {
+        return port;
     }
+    const pRetry = require("p-retry");
+    const getPort = require("webpack-dev-server/lib/getPort");
+    const basePort = typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
+        ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
+        : 8080;
+    // Try to find unused port and listen on it for 3 times,
+    // if port is not specified in options.
+    const defaultPortRetry = typeof process.env.WEBPACK_DEV_SERVER_PORT_RETRY !== "undefined"
+        ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
+        : 3;
+    return pRetry(() => getPort(basePort, host), {
+        retries: defaultPortRetry
+    });
+};
+webpack_dev_server_1.default.getFreePort = getFreePort;
+class RspackDevServer extends webpack_dev_server_1.default {
     constructor(options, compiler) {
         super(options, compiler);
-    }
-    getClientTransport() {
-        // WARNING: we can't use `super.getClientTransport`,
-        // because we doesn't had same directory structure.
-        let clientImplementation;
-        let clientImplementationFound = true;
-        const isKnownWebSocketServerImplementation = this.options.webSocketServer &&
-            typeof this.options.webSocketServer.type === "string" &&
-            (this.options.webSocketServer.type === "ws" ||
-                this.options.webSocketServer.type === "sockjs");
-        let clientTransport;
-        if (this.options.client) {
-            if (typeof this.options.client.webSocketTransport !== "undefined") {
-                clientTransport = this.options.client.webSocketTransport;
-            }
-            else if (isKnownWebSocketServerImplementation) {
-                // @ts-expect-error: TS cannot infer webSocketServer is narrowed
-                clientTransport = this.options.webSocketServer.type;
-            }
-            else {
-                clientTransport = "ws";
-            }
-        }
-        else {
-            clientTransport = "ws";
-        }
-        switch (typeof clientTransport) {
-            case "string":
-                // could be 'sockjs', 'ws', or a path that should be required
-                if (clientTransport === "sockjs") {
-                    clientImplementation = require.resolve("webpack-dev-server/client/clients/SockJSClient");
-                }
-                else if (clientTransport === "ws") {
-                    clientImplementation = require.resolve("webpack-dev-server/client/clients/WebSocketClient");
-                }
-                else {
-                    try {
-                        clientImplementation = require.resolve(clientTransport);
-                    }
-                    catch (e) {
-                        clientImplementationFound = false;
-                    }
-                }
-                break;
-            default:
-                clientImplementationFound = false;
-        }
-        if (!clientImplementationFound) {
-            throw new Error(`${!isKnownWebSocketServerImplementation
-                ? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
-                : ""}client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `);
-        }
-        // @ts-expect-error
-        return clientImplementation;
+        // override
     }
     async initialize() {
         const compilers = this.compiler instanceof core_1.MultiCompiler
@@ -108,227 +56,31 @@ class RspackDevServer extends webpack_dev_server_1.default {
                     this.logger.warn("Hot Module Replacement (HMR) is enabled for the production build. \n" +
                         "Make sure to disable HMR for production by setting `devServer.hot` to `false` in the configuration.");
                 }
-                const HMRPluginExists = compiler.options.plugins.find(p => p?.constructor === compiler.webpack.HotModuleReplacementPlugin);
-                if (HMRPluginExists) {
-                    this.logger.warn(`"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`);
-                }
-                else {
-                    // Apply the HMR plugin
-                    const plugin = new compiler.webpack.HotModuleReplacementPlugin();
-                    plugin.apply(compiler);
-                }
-                // Apply modified version of `ansi-html-community`
                 compiler.options.resolve.alias = {
                     "ansi-html-community": node_path_1.default.resolve(__dirname, "./ansiHTML"),
                     ...compiler.options.resolve.alias
                 };
             }
         }
-        if (this.options.webSocketServer) {
-            for (const compiler of compilers) {
-                this.addAdditionalEntries(compiler);
-                new compiler.webpack.ProvidePlugin({
-                    __webpack_dev_server_client__: this.getClientTransport()
-                }).apply(compiler);
-            }
-        }
-        // @ts-expect-error: `setupHooks` is private function in base class.
-        this.setupHooks();
-        // @ts-expect-error: `setupApp` is private function in base class.
-        this.setupApp();
-        // @ts-expect-error: `setupHostHeaderCheck` is private function in base class.
-        this.setupHostHeaderCheck();
-        this.setupDevMiddleware();
-        // @ts-expect-error: `setupBuiltInRoutes` is private function in base class.
-        this.setupBuiltInRoutes();
-        // @ts-expect-error: `setupWatchFiles` is private function in base class.
-        this.setupWatchFiles();
-        // @ts-expect-error: `setupWatchStaticFiles` is private function in base class.
-        this.setupWatchStaticFiles();
-        this.setupMiddlewares();
-        // @ts-expect-error: `createServer` is private function in base class.
-        this.createServer();
-        if (this.options.setupExitSignals) {
-            const signals = ["SIGINT", "SIGTERM"];
-            let needForceShutdown = false;
-            for (const signal of signals) {
-                const listener = () => {
-                    if (needForceShutdown) {
-                        process.exit();
-                    }
-                    this.logger.info("Gracefully shutting down. To force exit, press ^C again. Please wait...");
-                    needForceShutdown = true;
-                    this.stopCallback(() => {
-                        if (typeof this.compiler.close === "function") {
-                            this.compiler.close(() => {
-                                process.exit();
-                            });
-                        }
-                        else {
-                            process.exit();
-                        }
-                    });
-                };
-                // @ts-expect-error: `listeners` is private function in base class.
-                this.listeners.push({ name: signal, listener });
-                process.on(signal, listener);
-            }
-        }
-        // Proxy WebSocket without the initial http request
-        // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-        // @ts-expect-error: `webSocketProxies` is private function in base class.
-        for (const webSocketProxy of this.webSocketProxies) {
-            this.server.on("upgrade", webSocketProxy.upgrade);
-        }
-    }
-    setupDevMiddleware() {
-        // @ts-expect-error
-        this.middleware = (0, webpack_dev_middleware_1.default)(this.compiler, this.options.devMiddleware);
-    }
-    setupMiddlewares() {
-        const middlewares = [];
-        for (const middleware of middlewares) {
-            if (typeof middleware === "function") {
-                // @ts-expect-error
-                this.app.use(middleware);
-            }
-            else if (typeof middleware.path !== "undefined") {
-                // @ts-expect-error
-                this.app.use(middleware.path, middleware.middleware);
-            }
-            else {
-                // @ts-expect-error
-                this.app.use(middleware.middleware);
-            }
-        }
         // @ts-expect-error
-        super.setupMiddlewares();
+        await super.initialize();
     }
+    // @ts-ignore
     addAdditionalEntries(compiler) {
-        const additionalEntries = [];
-        // @ts-expect-error
-        const isWebTarget = webpack_dev_server_1.default.isWebTarget(compiler);
-        // TODO maybe empty client
-        if (this.options.client && isWebTarget) {
-            let webSocketURLStr = "";
-            if (this.options.webSocketServer) {
-                const webSocketURL = this.options.client
-                    .webSocketURL;
-                const webSocketServer = this.options.webSocketServer;
-                const searchParams = new URLSearchParams();
-                let protocol;
-                // We are proxying dev server and need to specify custom `hostname`
-                if (typeof webSocketURL.protocol !== "undefined") {
-                    protocol = webSocketURL.protocol;
-                }
-                else {
-                    protocol = this.options.server.type === "http" ? "ws:" : "wss:";
-                }
-                searchParams.set("protocol", protocol);
-                if (typeof webSocketURL.username !== "undefined") {
-                    searchParams.set("username", webSocketURL.username);
-                }
-                if (typeof webSocketURL.password !== "undefined") {
-                    searchParams.set("password", webSocketURL.password);
-                }
-                let hostname;
-                // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
-                // TODO show warning about this
-                const isSockJSType = webSocketServer.type === "sockjs";
-                // We are proxying dev server and need to specify custom `hostname`
-                if (typeof webSocketURL.hostname !== "undefined") {
-                    hostname = webSocketURL.hostname;
-                }
-                // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
-                else if (typeof webSocketServer.options?.host !== "undefined" &&
-                    !isSockJSType) {
-                    hostname = webSocketServer.options.host;
-                }
-                // The `host` option is specified
-                else if (typeof this.options.host !== "undefined") {
-                    hostname = this.options.host;
-                }
-                // The `port` option is not specified
-                else {
-                    hostname = "0.0.0.0";
-                }
-                searchParams.set("hostname", hostname);
-                let port;
-                // We are proxying dev server and need to specify custom `port`
-                if (typeof webSocketURL.port !== "undefined") {
-                    port = webSocketURL.port;
-                }
-                // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
-                else if (typeof webSocketServer.options?.port !== "undefined" &&
-                    !isSockJSType) {
-                    port = webSocketServer.options.port;
-                }
-                // The `port` option is specified
-                else if (typeof this.options.port === "number") {
-                    port = this.options.port;
-                }
-                // The `port` option is specified using `string`
-                else if (typeof this.options.port === "string" &&
-                    this.options.port !== "auto") {
-                    port = Number(this.options.port);
-                }
-                // The `port` option is not specified or set to `auto`
-                else {
-                    port = "0";
-                }
-                searchParams.set("port", String(port));
-                let pathname = "";
-                // We are proxying dev server and need to specify custom `pathname`
-                if (typeof webSocketURL.pathname !== "undefined") {
-                    pathname = webSocketURL.pathname;
-                }
-                // Web socket server works on custom `path`
-                else if (typeof webSocketServer.options?.prefix !== "undefined" ||
-                    typeof webSocketServer.options?.path !== "undefined") {
-                    pathname =
-                        webSocketServer.options.prefix || webSocketServer.options.path;
-                }
-                searchParams.set("pathname", pathname);
-                const client = /** @type {ClientConfiguration} */ this.options.client;
-                if (typeof client.logging !== "undefined") {
-                    searchParams.set("logging", client.logging);
-                }
-                if (typeof client.progress !== "undefined") {
-                    searchParams.set("progress", String(client.progress));
-                }
-                if (typeof client.overlay !== "undefined") {
-                    searchParams.set("overlay", typeof client.overlay === "boolean"
-                        ? String(client.overlay)
-                        : JSON.stringify(client.overlay));
-                }
-                if (typeof client.reconnect !== "undefined") {
-                    searchParams.set("reconnect", typeof client.reconnect === "number"
-                        ? String(client.reconnect)
-                        : "10");
-                }
-                if (typeof this.options.hot !== "undefined") {
-                    searchParams.set("hot", String(this.options.hot));
-                }
-                if (typeof this.options.liveReload !== "undefined") {
-                    searchParams.set("live-reload", String(this.options.liveReload));
-                }
-                webSocketURLStr = searchParams.toString();
-            }
-            additionalEntries.push(`${require.resolve("@rspack/dev-server/client/index")}?${webSocketURLStr}`);
-        }
-        if (this.options.hot === "only") {
-            additionalEntries.push(require.resolve("@rspack/core/hot/only-dev-server"));
-        }
-        else if (this.options.hot) {
-            additionalEntries.push(require.resolve("@rspack/core/hot/dev-server"));
+        (0, alias_1.addResolveAlias)("webpack-dev-server", {
+            "../client/index.js": require.resolve("@rspack/dev-server/client/index"),
+            "webpack/hot/only-dev-server": require.resolve("@rspack/core/hot/only-dev-server"),
+            "webpack/hot/dev-server": require.resolve("@rspack/core/hot/dev-server")
+        });
+        try {
+            // @ts-expect-error
+            super.addAdditionalEntries(compiler);
         }
-        const webpack = compiler.webpack;
-        for (const additionalEntry of additionalEntries) {
-            new webpack.EntryPlugin(compiler.context, additionalEntry, {
-                name: undefined
-            }).apply(compiler);
+        finally {
+            (0, alias_1.removeResolveAlias)("webpack-dev-server");
         }
     }
 }
+RspackDevServer.getFreePort = getFreePort;
 RspackDevServer.version = package_json_1.version;
 exports.RspackDevServer = RspackDevServer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspack/dev-server",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "description": "Development server for rspack",
   "main": "./dist/index.js",
@@ -29,21 +29,27 @@
     "directory": "packages/rspack-dev-server"
   },
   "devDependencies": {
+    "@jest/test-sequencer": "^29.7.0",
     "@rspack/plugin-react-refresh": "1.0.0",
     "@types/connect-history-api-fallback": "1.5.4",
     "@types/express": "4.17.21",
     "@types/mime-types": "2.1.4",
     "@types/ws": "8.5.10",
+    "css-loader": "^6.11.0",
     "graceful-fs": "4.2.10",
     "http-proxy": "^1.18.1",
     "jest-serializer-path": "^0.1.15",
+    "prettier": "3.2.5",
     "puppeteer": "^23.2.2",
+    "require-from-string": "^2.0.2",
     "sockjs-client": "^1.6.1",
+    "style-loader": "^3.3.3",
     "supertest": "^6.1.3",
     "tcp-port-used": "^1.0.2",
     "typescript": "5.0.2",
-    "@rspack/core": "1.0.4",
-    "@rspack/dev-server": "1.0.4"
+    "wait-for-expect": "^3.0.2",
+    "@rspack/core": "1.0.6",
+    "@rspack/dev-server": "1.0.6"
   },
   "dependencies": {
     "chokidar": "^3.6.0",
@@ -62,7 +68,8 @@
   "scripts": {
     "build": "tsc -b ./tsconfig.build.json",
     "dev": "tsc -w -b ./tsconfig.build.json",
-    "test": "rimraf .test-temp && cross-env NO_COLOR=1 node --expose-gc --max-old-space-size=8192 --experimental-vm-modules ../../node_modules/jest-cli/bin/jest --colors",
+    "test:install": "cross-env ./node_modules/.bin/puppeteer browsers install chrome",
+    "test": "pnpm run test:install && cross-env NO_COLOR=1 node --expose-gc --max-old-space-size=8192 --experimental-vm-modules ../../node_modules/jest-cli/bin/jest --colors",
     "api-extractor": "api-extractor run --verbose",
     "api-extractor:ci": "api-extractor run --verbose || diff temp/api.md etc/api.md"
   }