@rspack/dev-server 0.0.21 → 0.0.22

package/src/server.ts

@@ -1,154 +1,207 @@
-import type { Compiler, Dev, RspackOptionsNormalized } from "@rspack/core";
-import type { Logger } from "./logger";
+import { Compiler, MultiCompiler } from "@rspack/core";
 import type { Socket } from "net";
 import type { FSWatcher, WatchOptions } from "chokidar";
-import type { WebSocketServer, ClientConnection } from "./ws";
-import type {
-	Application,
-	RequestHandler as ExpressRequestHandler,
-	ErrorRequestHandler as ExpressErrorRequestHandler
-} from "express";
-import type { DevMiddleware } from "@rspack/dev-middleware";
+import rdm, { getRspackMemoryAssets } from "@rspack/dev-middleware";
 import type { Server } from "http";
-import type { ResolvedDev } from "./config";
 import fs from "fs";
-import chokidar from "chokidar";
-import http from "http";
-import { createLogger } from "./logger";
 import WebpackDevServer from "webpack-dev-server";
-import express from "express";
+import type { ResolvedDevServer, DevServer } from "./config";
 
-import rdm from "@rspack/dev-middleware";
-import { createWebsocketServer } from "./ws";
-import { resolveDevOptions } from "./config";
-
-interface Middleware {
-	name?: string;
-	path?: string;
-	middleware: ExpressErrorRequestHandler | ExpressRequestHandler;
-}
-interface Listener {
-	name: string | Symbol;
-	listener: (...args: any) => void;
-}
-type Host = "local-ip" | "local-ipv4" | "local-ipv6" | string;
-type Port = number | string | "auto";
-
-// copy from webpack-dev-server
-export class RspackDevServer {
-	options: ResolvedDev;
-	logger: Logger;
+export class RspackDevServer extends WebpackDevServer {
+	/**
+	 * resolved after `normalizedOptions`
+	 */
+	options: ResolvedDevServer;
 	staticWatchers: FSWatcher[];
 	sockets: Socket[];
-	app: Application;
 	server: Server;
-	private listeners: Listener[];
-	private currentHash: string;
-	private middleware: DevMiddleware | undefined;
-	// TODO: now only support 'ws'
-	webSocketServer: WebSocketServer | undefined;
-
-	constructor(public compiler: Compiler) {
-		this.logger = createLogger("rspack-dev-server");
-		this.staticWatchers = [];
-		this.listeners = [];
-		this.sockets = [];
-		this.currentHash = "";
-		this.options = this.normalizeOptions(compiler.options.devServer);
-		this.rewriteCompilerOptions();
-		this.addAdditionEntires();
-	}
+	// @ts-expect-error
+	public compiler: Compiler | MultiCompiler;
+	webSocketServer: WebpackDevServer.WebSocketServerImplementation | undefined;
 
-	normalizeOptions(dev: Dev = {}) {
-		return resolveDevOptions(dev, this.compiler.options);
+	constructor(options: DevServer, compiler: Compiler | MultiCompiler) {
+		// @ts-expect-error
+		super(options, compiler);
 	}
 
-	rewriteCompilerOptions() {
-		this.compiler.options.devServer = this.options;
-		if (!this.compiler.options.builtins.react) {
-			this.compiler.options.builtins.react = {};
-		}
-		this.compiler.options.builtins.react.development =
-			this.compiler.options.builtins.react.development ?? true;
-		if (this.options.hot) {
-			this.compiler.options.builtins.react.refresh =
-				this.compiler.options.builtins.react.refresh ?? true;
-		}
-	}
+	addAdditionEntires(compiler: Compiler) {
+		const additionalEntries: string[] = [];
+		// TODO: align with webpack-dev-server after options.target is aligned
+		const isWebTarget =
+			compiler.options.target.includes("web") ||
+			compiler.options.target.includes("webworker");
+		if (this.options.client && isWebTarget) {
+			let webSocketURLStr = "";
+
+			if (this.options.webSocketServer) {
+				const webSocketURL = this.options.client
+					.webSocketURL as WebpackDevServer.WebSocketURL;
+				const webSocketServer = this.options.webSocketServer;
+				const searchParams = new URLSearchParams();
+
+				let protocol: string;
+
+				// 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:";
+				}
 
-	addAdditionEntires() {
-		const entries: string[] = [];
+				searchParams.set("protocol", protocol);
 
-		if (this.options.hot) {
-			const hotUpdateEntryPath = require.resolve(
-				"@rspack/dev-client/devServer"
-			);
-			entries.push(hotUpdateEntryPath);
+				if (typeof webSocketURL.username !== "undefined") {
+					searchParams.set("username", webSocketURL.username);
+				}
 
-			if (this.compiler.options.builtins.react?.refresh) {
-				const reactRefreshEntryPath = require.resolve(
-					"@rspack/dev-client/react-refresh"
-				);
-				entries.push(reactRefreshEntryPath);
-			}
-		}
+				if (typeof webSocketURL.password !== "undefined") {
+					searchParams.set("password", webSocketURL.password);
+				}
 
-		const devClientEntryPath = require.resolve("@rspack/dev-client");
-		entries.push(devClientEntryPath);
-		for (const key in this.compiler.options.entry) {
-			this.compiler.options.entry[key].import.unshift(...entries);
-		}
-	}
+				let hostname: string;
 
-	static isAbsoluteURL(URL: string): boolean {
-		return WebpackDevServer.isAbsoluteURL(URL);
-	}
+				// 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";
 
-	static findIp(gateway: string): string | undefined {
-		return WebpackDevServer.findIp(gateway);
-	}
+				// 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";
+				}
 
-	static async internalIP(family: "v6" | "v4"): Promise<string | undefined> {
-		return WebpackDevServer.internalIP(family);
-	}
+				searchParams.set("hostname", hostname);
 
-	static async internalIPSync(
-		family: "v6" | "v4"
-	): Promise<string | undefined> {
-		return WebpackDevServer.internalIPSync(family);
-	}
+				let port: number | string;
 
-	static async getHostname(hostname?: Host): Promise<string> {
-		return WebpackDevServer.getHostname(hostname);
-	}
+				// 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";
+				}
 
-	static async getFreePort(port: Port, host: string): Promise<string | number> {
-		return WebpackDevServer.getFreePort(port, host);
-	}
+				searchParams.set("port", String(port));
 
-	static findCacheDir(): string {
-		// TODO: we need remove the `webpack-dev-server` tag in WebpackDevServer;
-		return "";
-	}
+				let pathname = "";
 
-	private getCompilerOptions(): RspackOptionsNormalized {
-		return this.compiler.options;
-	}
+				// 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)
+					);
+				}
 
-	sendMessage(
-		clients: ClientConnection[],
-		type: string,
-		data?: any,
-		params?: any
-	) {
-		for (const client of clients) {
-			if (client.readyState === 1) {
-				client.send(JSON.stringify({ type, data, params }));
+				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();
 			}
+
+			// TODO: should use providerPlugin
+			additionalEntries.push(this.getClientTransport());
+
+			additionalEntries.push(
+				`${require.resolve("@rspack/dev-client")}?${webSocketURLStr}`
+			);
+		}
+
+		if (this.options.hot) {
+			const hotUpdateEntryPath = require.resolve(
+				"@rspack/dev-client/devServer"
+			);
+			additionalEntries.push(hotUpdateEntryPath);
+
+			if (compiler.options.builtins.react?.refresh) {
+				const reactRefreshEntryPath = require.resolve(
+					"@rspack/dev-client/react-refresh"
+				);
+				additionalEntries.push(reactRefreshEntryPath);
+			}
+		}
+
+		for (const key in compiler.options.entry) {
+			compiler.options.entry[key].import.unshift(...additionalEntries);
 		}
 	}
 
 	watchFiles(watchPath: string | string[], watchOptions?: WatchOptions): void {
+		const chokidar = require("chokidar");
 		const watcher = chokidar.watch(watchPath, watchOptions);
 
 		// disabling refreshing on changing the content
@@ -172,80 +225,154 @@ export class RspackDevServer {
 		this.staticWatchers.push(watcher);
 	}
 
-	invalidate(callback = () => {}): void {
-		if (this.middleware) {
-			this.middleware.invalidate(callback);
+	getClientTransport(): string {
+		// WARNING: we can't use `super.getClientTransport`,
+		// because we doesn't had same directory structure.
+		// and TODO: we need impelement `webpack.providerPlugin`
+		let clientImplementation: string | undefined;
+		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: string | undefined;
+
+		if (this.options.client) {
+			if (
+				// @ts-ignore
+				typeof this.options.client.webSocketTransport !== "undefined"
+			) {
+				// @ts-ignore
+				clientTransport = this.options.client.webSocketTransport;
+			} else if (isKnownWebSocketServerImplementation) {
+				// @ts-ignore
+				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(
+						"@rspack/dev-client/clients/SockJSClient"
+					);
+				} else if (clientTransport === "ws") {
+					clientImplementation = require.resolve(
+						"@rspack/dev-client/clients/WebSocketClient"
+					);
+				} else {
+					try {
+						clientImplementation = require.resolve(clientTransport);
+						throw Error("Do not support custom ws client now");
+					} 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 `
+			);
 		}
+
+		return clientImplementation;
 	}
 
-	async start(): Promise<void> {
+	async initialize() {
+		const compilers =
+			this.compiler instanceof MultiCompiler
+				? this.compiler.compilers
+				: [this.compiler];
+
+		compilers.forEach(compiler => {
+			compiler.options.builtins.react ??= {};
+			if (this.options.hot) {
+				compiler.options.builtins.react.refresh ??= true;
+				compiler.options.builtins.react.development ??= true;
+			} else if (compiler.options.builtins.react.refresh) {
+				this.logger.warn(
+					"builtins.react.refresh needs builtins.react.development and devServer.hot enabled"
+				);
+			}
+		});
+
+		if (this.options.webSocketServer) {
+			compilers.forEach(compiler => {
+				this.addAdditionEntires(compiler);
+			});
+		}
+
 		this.setupHooks();
+		// @ts-expect-error: `setupApp` is private function in base class.
 		this.setupApp();
-		this.createServer();
-		this.setupWatchStaticFiles();
-		this.createWebsocketServer();
+		// @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();
-		const host = await RspackDevServer.getHostname(this.options.host);
-		const port = await RspackDevServer.getFreePort(this.options.port, host);
-		this.options.port = port;
-		await new Promise(resolve =>
-			this.server.listen(
-				{
-					port,
-					host
-				},
-				() => {
-					this.logger.info(`Loopback: http://localhost:${port}`);
-					let internalIPv4 = WebpackDevServer.internalIPSync("v4");
+		// @ts-expect-error: `createServer` is private function in base class.
+		this.createServer();
+
+		if (this.options.setupExitSignals) {
+			const signals = ["SIGINT", "SIGTERM"];
+
+			let needForceShutdown = false;
+
+			signals.forEach(signal => {
+				const listener = () => {
+					if (needForceShutdown) {
+						process.exit();
+					}
+
 					this.logger.info(
-						`Your Network (IPV4) http://${internalIPv4}:${port}`
+						"Gracefully shutting down. To force exit, press ^C again. Please wait..."
 					);
-					resolve({});
-				}
-			)
-		);
-	}
 
-	startCallback(callback?: (err?: Error) => void): void {
-		throw new Error("Method not implemented.");
-	}
-	stopCallback(callback?: (err?: Error) => void): void {
-		throw new Error("Method not implemented.");
-	}
-	listen(port: Port, hostname: string, fn: (err?: Error) => void): void {
-		throw new Error("Method not implemented.");
-	}
-	close(callback?: (err?: Error) => void): void {
-		throw new Error("Method not implemented.");
-	}
+					needForceShutdown = true;
 
-	async stop(): Promise<void> {
-		await Promise.all(this.staticWatchers.map(watcher => watcher.close()));
-		this.middleware = null;
-		this.staticWatchers = [];
-		if (this.server) {
-			this.server.close();
-		}
-		if (this.webSocketServer) {
-			await new Promise(resolve => {
-				this.webSocketServer.implementation.close(() => {
-					resolve(void 0);
-				});
-				for (const client of this.webSocketServer.clients) client.terminate();
-			});
-		}
-	}
+					this.stopCallback(() => {
+						if (typeof this.compiler.close === "function") {
+							this.compiler.close(() => {
+								process.exit();
+							});
+						} else {
+							process.exit();
+						}
+					});
+				};
 
-	private setupApp() {
-		this.app = express();
-	}
+				// @ts-expect-error: `listeners` is private function in base class.
+				this.listeners.push({ name: signal, listener });
 
-	private setupWatchStaticFiles() {
-		if (this.options.static.watch === false) {
-			return;
+				process.on(signal, listener);
+			});
 		}
-		this.watchFiles(this.options.static.directory, this.options.static.watch);
+
+		// 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.
+		this.webSocketProxies.forEach(webSocketProxy => {
+			this.server.on("upgrade", webSocketProxy.upgrade);
+		}, this);
 	}
 
 	private setupDevMiddleware() {
@@ -253,151 +380,63 @@ export class RspackDevServer {
 		this.middleware = rdm(this.compiler, this.options.devMiddleware);
 	}
 
-	private createWebsocketServer() {
-		if (this.options.webSocketServer !== false) {
-			this.webSocketServer = createWebsocketServer(this);
-		}
-	}
-
 	private setupMiddlewares() {
-		const options = this.options;
-		const middlewares: Middleware[] = [];
-		middlewares.push({
-			name: "rdm",
-			middleware: this.middleware
-		});
-
-		if (this.compiler.options.experiments.lazyCompilation) {
-			middlewares.push({
-				middleware: (req, res, next) => {
-					if (req.url.indexOf("/lazy-compilation-web/") > -1) {
-						const path = req.url.replace("/lazy-compilation-web/", "");
-						if (fs.existsSync(path)) {
-							this.compiler.rebuild([path], (error, stats) => {
-								if (error) {
-									throw error;
-								}
-								res.write("");
-								res.end();
-								console.log("lazy compiler success");
+		const middlewares: WebpackDevServer.Middleware[] = [];
+		const compilers =
+			this.compiler instanceof MultiCompiler
+				? this.compiler.compilers
+				: [this.compiler];
+
+		if (Array.isArray(this.options.static)) {
+			this.options.static.forEach(staticOptions => {
+				staticOptions.publicPath.forEach(publicPath => {
+					compilers.forEach(compiler => {
+						if (compiler.options.builtins.noEmitAssets) {
+							middlewares.push({
+								name: "rspack-memory-assets",
+								path: publicPath,
+								middleware: getRspackMemoryAssets(compiler, this.middleware)
 							});
 						}
-					}
-				}
+					});
+				});
 			});
 		}
 
-		// Todo Add options
-		const connectHistoryApiFallback = require("connect-history-api-fallback");
-		middlewares.push({
-			name: "[connect-history-api-fallback]",
-			middleware: connectHistoryApiFallback({
-				verbose: true,
-				logger: console.log.bind(console)
-			})
-		});
-		/**
-		 * supports three kinds of proxy configuration
-		 * {context: 'xxxx', target: 'yyy}
-		 * {['xxx']: { target: 'yyy}}
-		 * [{context: 'xxx',target:'yyy'}, {context: 'aaa', target: 'zzzz'}]
-		 */
-		if (typeof options.proxy !== "undefined") {
-			const { createProxyMiddleware } = require("http-proxy-middleware");
-			function getProxyMiddleware(proxyConfig) {
-				if (proxyConfig.target) {
-					const context = proxyConfig.context || proxyConfig.path;
-					return createProxyMiddleware(context, proxyConfig);
-				}
-				if (proxyConfig.router) {
-					return createProxyMiddleware(proxyConfig);
-				}
-			}
-			if (!Array.isArray(options.proxy)) {
-				if (
-					Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
-					Object.prototype.hasOwnProperty.call(options.proxy, "router")
-				) {
-					options.proxy = [options.proxy];
-				} else {
-					options.proxy = Object.keys(options.proxy).map(context => {
-						let proxyOptions;
-						// For backwards compatibility reasons.
-						const correctedContext = context
-							.replace(/^\*$/, "**")
-							.replace(/\/\*$/, "");
-
-						if (
-							typeof (/** @type {ProxyConfigMap} */ options.proxy[context]) ===
-							"string"
-						) {
-							proxyOptions = {
-								context: correctedContext,
-								target:
-									/** @type {ProxyConfigMap} */
-									options.proxy[context]
-							};
-						} else {
-							proxyOptions = {
-								// @ts-ignore
-								.../** @type {ProxyConfigMap} */ options.proxy[context]
-							};
-							proxyOptions.context = correctedContext;
+		compilers.forEach(compiler => {
+			if (compiler.options.experiments.lazyCompilation) {
+				middlewares.push({
+					middleware: (req, res, next) => {
+						if (req.url.indexOf("/lazy-compilation-web/") > -1) {
+							const path = req.url.replace("/lazy-compilation-web/", "");
+							if (fs.existsSync(path)) {
+								compiler.rebuild(new Set([path]), new Set(), error => {
+									if (error) {
+										throw error;
+									}
+									res.write("");
+									res.end();
+									console.log("lazy compiler success");
+								});
+							}
 						}
-
-						return proxyOptions;
-					});
-				}
-			}
-			options.proxy.forEach(proxyConfig => {
-				const handler = async (req, res, next) => {
-					let proxyMiddleware = getProxyMiddleware(proxyConfig);
-					const isByPassFuncDefined = typeof proxyConfig.bypass === "function";
-					const bypassUrl = isByPassFuncDefined
-						? await proxyConfig.bypass(req, res, proxyConfig)
-						: null;
-					if (typeof bypassUrl === "boolean") {
-						req.url = null;
-						next();
-					} else if (typeof bypassUrl === "string") {
-						req.url = bypassUrl;
-					} else if (proxyMiddleware) {
-						return proxyMiddleware(req, res, next);
-					} else {
-						next();
 					}
-				};
-				middlewares.push({
-					name: "http-proxy-middleware",
-					middleware: handler
-				});
-				middlewares.push({
-					name: "http-proxy-middleware-error-handler",
-					middleware: (error, req, res, next) => handler(req, res, next)
 				});
-			});
-		}
-		const publicPath =
-			this.compiler.options.output.publicPath === "auto"
-				? ""
-				: this.compiler.options.output.publicPath;
-		middlewares.push({
-			name: "express-static",
-			path: publicPath,
-			middleware: express.static(this.options.static.directory)
+			}
 		});
 
-		middlewares.forEach(m => {
-			if (m.path) {
-				this.app.use(m.path, m.middleware);
+		middlewares.forEach(middleware => {
+			if (typeof middleware === "function") {
+				this.app.use(middleware);
+			} else if (typeof middleware.path !== "undefined") {
+				this.app.use(middleware.path, middleware.middleware);
 			} else {
-				this.app.use(m.middleware);
+				this.app.use(middleware.middleware);
 			}
 		});
-	}
 
-	private createServer() {
-		this.server = http.createServer(this.app);
+		// @ts-expect-error
+		super.setupMiddlewares();
 	}
 
 	private setupHooks() {