fix(cli): devServer.hot: false not work (#12261)

Author: chenjiahan

packages/rspack-cli/src/commands/serve.ts

@@ -1,6 +1,7 @@
-import type { Compiler, DevServer } from "@rspack/core";
+import type { Compiler } from "@rspack/core";
 import type { RspackDevServer as RspackDevServerType } from "@rspack/dev-server";
 import type { RspackCLI } from "../cli";
+import { DEFAULT_SERVER_HOT } from "../constants";
 import type { RspackCommand } from "../types";
 import {
 	type CommonOptionsForBuildAndServe,
@@ -17,14 +18,16 @@ type ServerOptions = CommonOptionsForBuildAndServe & {
 	host?: string;
 };
 
-function normalizeHotOption(value: unknown): ServerOptions["hot"] {
-	if (typeof value === "boolean" || value === "only") {
-		return value;
-	}
+function normalizeHotOption(
+	value: boolean | "true" | "false" | "only" | undefined
+): ServerOptions["hot"] {
 	if (value === "false") {
 		return false;
 	}
-	return true;
+	if (value === "true") {
+		return true;
+	}
+	return value;
 }
 
 export class ServeCommand implements RspackCommand {
@@ -40,15 +43,15 @@ export class ServeCommand implements RspackCommand {
 			.option("--port <port>", "allows to specify a port to use")
 			.option("--host <host>", "allows to specify a hostname to use");
 
-		command.action(async (options: ServerOptions) => {
-			setDefaultNodeEnv(options, "development");
-			normalizeCommonOptions(options, "serve");
-			options.hot = normalizeHotOption(options.hot);
+		command.action(async (cliOptions: ServerOptions) => {
+			setDefaultNodeEnv(cliOptions, "development");
+			normalizeCommonOptions(cliOptions, "serve");
+			cliOptions.hot = normalizeHotOption(cliOptions.hot);
 
 			// Lazy import @rspack/dev-server to avoid loading it on build mode
 			const { RspackDevServer } = await import("@rspack/dev-server");
 
-			const compiler = await cli.createCompiler(options, "serve");
+			const compiler = await cli.createCompiler(cliOptions, "serve");
 			if (!compiler) {
 				return;
 			}
@@ -65,7 +68,7 @@ export class ServeCommand implements RspackCommand {
 			const servers: RspackDevServerType[] = [];
 
 			/**
-			 * Webpack uses an Array of compilerForDevServer,
+			 * webpack uses an Array of compilerForDevServer,
 			 * however according to it's doc https://webpack.js.org/configuration/dev-server/#devserverhot
 			 * It should use only the first one
 			 *
@@ -79,7 +82,9 @@ export class ServeCommand implements RspackCommand {
 			 */
 			for (const compiler of compilers) {
 				const devServer = (compiler.options.devServer ??= {});
-				devServer.hot = options.hot ?? devServer.hot ?? true;
+
+				devServer.hot = cliOptions.hot ?? devServer.hot ?? DEFAULT_SERVER_HOT;
+
 				if (devServer.client !== false) {
 					if (devServer.client === true || devServer.client == null) {
 						devServer.client = {};
@@ -94,12 +99,13 @@ export class ServeCommand implements RspackCommand {
 				}
 			}
 
-			const result = (compilerForDevServer.options.devServer ??= {});
-			const { setupMiddlewares } = result;
+			const devServerOptions = (compilerForDevServer.options.devServer ??= {});
+			const { setupMiddlewares } = devServerOptions;
 
 			const lazyCompileMiddleware =
 				rspack.experiments.lazyCompilationMiddleware(compiler);
-			result.setupMiddlewares = (middlewares, server) => {
+
+			devServerOptions.setupMiddlewares = (middlewares, server) => {
 				let finalMiddlewares = middlewares;
 				if (setupMiddlewares) {
 					finalMiddlewares = setupMiddlewares(finalMiddlewares, server);
@@ -110,23 +116,26 @@ export class ServeCommand implements RspackCommand {
 			/**
 			 * Enable this to tell Rspack that we need to enable React Refresh by default
 			 */
-			result.hot = options.hot ?? result.hot ?? true;
-			result.host = options.host || result.host;
-			result.port = options.port ?? result.port;
-			if (result.client !== false) {
-				if (result.client === true || result.client == null) {
-					result.client = {};
+			devServerOptions.hot =
+				cliOptions.hot ?? devServerOptions.hot ?? DEFAULT_SERVER_HOT;
+			devServerOptions.host = cliOptions.host || devServerOptions.host;
+			devServerOptions.port = cliOptions.port ?? devServerOptions.port;
+			if (devServerOptions.client !== false) {
+				if (
+					devServerOptions.client === true ||
+					devServerOptions.client == null
+				) {
+					devServerOptions.client = {};
 				}
-				result.client = {
+				devServerOptions.client = {
 					overlay: {
 						errors: true,
 						warnings: false
 					},
-					...result.client
+					...devServerOptions.client
 				};
 			}
 
-			const devServerOptions = result as DevServer;
 			if (devServerOptions.port) {
 				const portNumber = Number(devServerOptions.port);
 
@@ -143,9 +152,7 @@ export class ServeCommand implements RspackCommand {
 
 			try {
 				const server = new RspackDevServer(devServerOptions, compiler);
-
 				await server.start();
-
 				servers.push(server);
 			} catch (error) {
 				const logger = cli.getLogger();

packages/rspack-cli/src/constants.ts

@@ -8,3 +8,5 @@ export const DEFAULT_EXTENSIONS = [
 	".cjs",
 	".cts"
 ] as const;
+
+export const DEFAULT_SERVER_HOT = true;

packages/rspack-cli/tests/serve/disable-hot/rspack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	mode: "development",
+	devServer: {
+		hot: false,
+		onListening(devServer) {
+			const { hot } = devServer.options;
+			console.log(JSON.stringify({ hot }));
+		}
+	}
+};

packages/rspack-cli/tests/serve/disable-hot/serve-flags.test.ts

@@ -0,0 +1,9 @@
+import { normalizeStdout, runWatch } from "../../utils/test-utils";
+
+test("should allow to disable HMR via `server.hot`", async () => {
+	const { stdout } = await runWatch(__dirname, ["serve"], {
+		killString: /localhost/
+	});
+
+	expect(normalizeStdout(stdout)).toContain('{"hot":false}');
+});

packages/rspack-cli/tests/serve/disable-hot/src/index.js

@@ -0,0 +1 @@
+console.log("hello world");

packages/rspack-cli/tests/serve/flags/rspack.config.js

@@ -5,7 +5,7 @@ module.exports = {
 		hot: false,
 		port: 8080,
 		host: "127.0.0.1",
-		onListening: function (devServer) {
+		onListening(devServer) {
 			const { hot, host, port } = devServer.options;
 			console.log(JSON.stringify({ hot, host, port }));
 		}

packages/rspack-cli/tests/serve/flags/serve-flags.test.ts

@@ -1,7 +1,7 @@
 import { normalizeStdout, runWatch } from "../../utils/test-utils";
 
 describe("serve usage with flags", () => {
-	it.concurrent("basic flags", async () => {
+	test("basic flags", async () => {
 		const { stdout } = await runWatch(
 			__dirname,
 			["serve", "--host=localhost", "--port=8888", "--hot"],