@rspack/dev-server 0.0.0-e859caeee2-20221212102225 → 0.0.0-faecddc-20230109081930

package/CHANGELOG.md

@@ -1,15 +1,118 @@
 # rspack-dev-server
 
-## 0.0.0-e859caeee2-20221212102225
+## 0.0.0-faecddc-20230109081930
 
 ### Patch Changes
 
-- 3701a8bf58: fix less resolve bug
-- Updated dependencies [3701a8bf58]
-  - @rspack/core@0.0.0-e859caeee2-20221212102225
-  - @rspack/dev-client@0.0.0-e859caeee2-20221212102225
-  - @rspack/dev-middleware@0.0.0-e859caeee2-20221212102225
-  - @rspack/dev-server@0.0.0-e859caeee2-20221212102225
+- 59edc2cb: fix watch options
+- Updated dependencies [59edc2cb]
+- Updated dependencies [3fcfa746]
+  - @rspack/core@0.0.0-faecddc-20230109081930
+  - @rspack/dev-client@0.0.0-faecddc-20230109081930
+  - @rspack/dev-middleware@0.0.0-faecddc-20230109081930
+  - @rspack/dev-server@0.0.0-faecddc-20230109081930
+
+## 0.0.21
+
+### Patch Changes
+
+- fix watch
+- Updated dependencies
+  - @rspack/core@0.0.21
+  - @rspack/dev-client@0.0.21
+  - @rspack/dev-middleware@0.0.21
+  - @rspack/dev-server@0.0.21
+
+## 0.0.20
+
+### Patch Changes
+
+- fix load extra css chunk
+- Updated dependencies
+  - @rspack/core@0.0.20
+  - @rspack/dev-client@0.0.20
+  - @rspack/dev-middleware@0.0.20
+  - @rspack/dev-server@0.0.20
+
+## 0.0.19
+
+### Patch Changes
+
+- 882093b8: support module.resolve
+- Updated dependencies [db66ae2e]
+- Updated dependencies [882093b8]
+  - @rspack/core@0.0.19
+  - @rspack/dev-client@0.0.19
+  - @rspack/dev-middleware@0.0.19
+  - @rspack/dev-server@0.0.19
+
+## 0.0.18
+
+### Patch Changes
+
+- bump version
+- Updated dependencies
+  - @rspack/core@0.0.18
+  - @rspack/dev-client@0.0.18
+  - @rspack/dev-middleware@0.0.18
+  - @rspack/dev-server@0.0.18
+
+## 0.0.17
+
+### Patch Changes
+
+- upgrade
+- Updated dependencies
+  - @rspack/core@0.0.17
+  - @rspack/dev-client@0.0.17
+  - @rspack/dev-middleware@0.0.17
+  - @rspack/dev-server@0.0.17
+
+## 0.0.16
+
+### Patch Changes
+
+- support optional dependency
+- Updated dependencies
+  - @rspack/core@0.0.16
+  - @rspack/dev-client@0.0.16
+  - @rspack/dev-middleware@0.0.16
+  - @rspack/dev-server@0.0.16
+
+## 0.0.15
+
+### Patch Changes
+
+- bump version
+- Updated dependencies
+  - @rspack/core@0.0.15
+  - @rspack/dev-client@0.0.15
+  - @rspack/dev-middleware@0.0.15
+  - @rspack/dev-server@0.0.15
+
+## 0.0.14
+
+### Patch Changes
+
+- bump version
+- 11e87c61: fix less resolve bug
+- Updated dependencies
+- Updated dependencies [11e87c61]
+  - @rspack/core@0.0.14
+  - @rspack/dev-client@0.0.14
+  - @rspack/dev-middleware@0.0.14
+  - @rspack/dev-server@0.0.14
+
+## 0.0.13
+
+### Patch Changes
+
+- 3701a8bf: fix less resolve bug
+- Updated dependencies [3701a8bf]
+  - @rspack/core@0.0.13
+  - @rspack/dev-client@0.0.13
+  - @rspack/dev-middleware@0.0.13
+  - @rspack/dev-server@0.0.13
 
 ## 0.0.12
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Rspack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/jest.config.js

@@ -2,6 +2,7 @@
 module.exports = {
 	preset: "ts-jest",
 	testEnvironment: "node",
-	testMatch: ["<rootDir>/tests/*.test.ts"],
-	cache: false
+	testMatch: ["<rootDir>/tests/*.test.ts", "<rootDir>/tests/e2e/*.test.ts"],
+	cache: false,
+	testTimeout: process.env.CI ? 60000 : 30000
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspack/dev-server",
   "description": "",
-  "version": "0.0.0-e859caeee2-20221212102225",
+  "version": "0.0.0-faecddc-20230109081930",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "",
@@ -9,10 +9,13 @@
   "devDependencies": {
     "tsm": "^2.2.2",
     "typescript": "^4.7.4",
+    "@types/ws": "8.5.3",
     "@types/node": "16.11.7",
     "@types/express": "4.17.14",
     "@types/connect-history-api-fallback": "1.3.5",
-    "@rspack/core": "0.0.0-e859caeee2-20221212102225"
+    "fs-extra": "11.1.0",
+    "puppeteer": "19.4.0",
+    "@rspack/core": "0.0.0-faecddc-20230109081930"
   },
   "dependencies": {
     "express": "4.18.1",
@@ -21,16 +24,16 @@
     "webpack-dev-server": "4.11.1",
     "connect-history-api-fallback": "2.0.0",
     "http-proxy-middleware": "2.0.6",
-    "@rspack/dev-client": "0.0.0-e859caeee2-20221212102225",
-    "@rspack/dev-middleware": "0.0.0-e859caeee2-20221212102225",
-    "@rspack/dev-server": "0.0.0-e859caeee2-20221212102225"
+    "@rspack/dev-client": "0.0.0-faecddc-20230109081930",
+    "@rspack/dev-server": "0.0.0-faecddc-20230109081930",
+    "@rspack/dev-middleware": "0.0.0-faecddc-20230109081930"
   },
   "peerDependencies": {
-    "@rspack/core": "0.0.0-e859caeee2-20221212102225"
+    "@rspack/core": "0.0.0-faecddc-20230109081930"
   },
   "scripts": {
-    "build": "rm -rf lib/ && tsc",
+    "build": "rm -rf dist/ && tsc",
     "dev": "tsc -w",
-    "test": "jest --verbose"
+    "test": "rm -rf .test-temp && jest --verbose"
   }
 }

package/src/config.ts

@@ -5,12 +5,11 @@ import type {
 } from "@rspack/core";
 import type { WatchOptions } from "chokidar";
 import path from "path";
-import { resolveWatchOption } from "@rspack/core";
 import { ProxyOptions } from "@rspack/core/src/config/devServer";
 
 export interface ResolvedDev {
 	host: string;
-	port: number;
+	port: number | string;
 	static: {
 		directory: string;
 		watch: false | WatchOptions;
@@ -23,6 +22,18 @@ export interface ResolvedDev {
 	proxy: ProxyOptions;
 }
 
+function resolveStaticWatchOptions(watch: WatchOptions = {}) {
+	const ignored = watch.ignored ?? [
+		"**/dist/**",
+		"**/node_modules/**",
+		"**/.git/**"
+	];
+	return {
+		...watch,
+		ignored
+	};
+}
+
 export function resolveDevOptions(
 	devConfig: Dev,
 	compilerOptions: RspackOptionsNormalized
@@ -38,7 +49,7 @@ export function resolveDevOptions(
 	if (devConfig.static?.watch === false) {
 		watch = false;
 	} else if (devConfig.static?.watch === true) {
-		watch = resolveWatchOption({});
+		watch = resolveStaticWatchOptions({});
 	} else if (devConfig.static?.watch) {
 		watch = devConfig.static?.watch;
 	}

package/src/server.ts

@@ -8,7 +8,7 @@ import type {
 	RequestHandler as ExpressRequestHandler,
 	ErrorRequestHandler as ExpressErrorRequestHandler
 } from "express";
-import type { DevMiddleware } from "@rspack/dev-middleware";
+import { DevMiddleware, getRspackMemoryAssets } from "@rspack/dev-middleware";
 import type { Server } from "http";
 import type { ResolvedDev } from "./config";
 import fs from "fs";
@@ -64,6 +64,7 @@ export class RspackDevServer {
 	}
 
 	rewriteCompilerOptions() {
+		this.compiler.options.devServer = this.options;
 		if (!this.compiler.options.builtins.react) {
 			this.compiler.options.builtins.react = {};
 		}
@@ -72,6 +73,10 @@ export class RspackDevServer {
 		if (this.options.hot) {
 			this.compiler.options.builtins.react.refresh =
 				this.compiler.options.builtins.react.refresh ?? true;
+		} else if (this.compiler.options.builtins.react.refresh) {
+			this.logger.warn(
+				"[Builtins] react.refresh need react.development and devServer.hot enabled."
+			);
 		}
 	}
 
@@ -187,6 +192,7 @@ export class RspackDevServer {
 		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(
 				{
@@ -219,15 +225,30 @@ export class RspackDevServer {
 	}
 
 	async stop(): Promise<void> {
+		this.compiler.close(() => {});
 		await Promise.all(this.staticWatchers.map(watcher => watcher.close()));
-		this.middleware = null;
 		this.staticWatchers = [];
+
+		if (this.middleware) {
+			await new Promise((resolve, reject) => {
+				this.middleware.close((error: Error) => {
+					if (error) {
+						reject(error);
+						return;
+					}
+					resolve(undefined);
+				});
+			});
+		}
+		this.middleware = null;
+
 		if (this.server) {
 			this.server.close();
 		}
 		if (this.webSocketServer) {
 			await new Promise(resolve => {
 				this.webSocketServer.implementation.close(() => {
+					this.webSocketServer = null;
 					resolve(void 0);
 				});
 				for (const client of this.webSocketServer.clients) client.terminate();
@@ -271,7 +292,7 @@ export class RspackDevServer {
 					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) => {
+							this.compiler.rebuild(new Set([path]), new Set(), error => {
 								if (error) {
 									throw error;
 								}
@@ -375,9 +396,18 @@ export class RspackDevServer {
 				});
 			});
 		}
+		const publicPath =
+			this.compiler.options.output.publicPath === "auto"
+				? ""
+				: this.compiler.options.output.publicPath;
+		middlewares.push({
+			name: "rspack-memory-assets",
+			path: publicPath,
+			middleware: getRspackMemoryAssets(this.compiler)
+		});
 		middlewares.push({
 			name: "express-static",
-			path: this.compiler.options.output.publicPath ?? "/",
+			path: publicPath,
 			middleware: express.static(this.options.static.directory)
 		});
 

package/tests/__snapshots__/normalizeOptions.test.ts.snap

@@ -52,7 +52,6 @@ exports[`normalize options snapshot react.development and react.refresh should b
     "decorator": {
       "emitMetadata": true,
       "legacy": true,
-      "useDefineForClassFields": true,
     },
     "define": {},
     "html": [],
@@ -66,7 +65,18 @@ exports[`normalize options snapshot react.development and react.refresh should b
     },
   },
   "devServer": {
+    "devMiddleware": {},
+    "host": undefined,
     "hot": true,
+    "liveReload": true,
+    "open": true,
+    "port": undefined,
+    "proxy": undefined,
+    "static": {
+      "directory": "<PROJECT_ROOT>/dist",
+      "watch": {},
+    },
+    "webSocketServer": {},
   },
 }
 `;

package/tests/e2e/hot-reaload.test.ts

@@ -0,0 +1,215 @@
+import { RspackDevServer } from "@rspack/dev-server";
+import { createCompiler } from "@rspack/core";
+import { initFixture, installDeps } from "../helpers/tempDir";
+import { editFile, waitingForBuild } from "../helpers/emitFile";
+import path from "path";
+import runBrowser from "../helpers/runBrowser";
+import type { Browser, Page } from "puppeteer";
+import fs from "fs";
+// FIXME: A concurrency problem occurs when executing on ci
+// describe("reload and hot should works", () => {
+// 	let browser: Browser;
+// 	let server: RspackDevServer;
+
+// 	afterEach(async () => {
+// 		if (browser) {
+// 			await browser.close();
+// 		}
+// 		if (server) {
+// 			await server.stop();
+// 		}
+// 	});
+
+// 	it("reload should works", async () => {
+// 		console.log("=== first start ===");
+// 		const tempDir = await initFixture("react");
+// 		await installDeps(tempDir);
+// 		const config = require(path.resolve(tempDir, "./webpack.config.js"));
+// 		const compiler = createCompiler({
+// 			...config,
+// 			context: tempDir,
+// 			devServer: {
+// 				hot: false,
+// 				liveReload: true
+// 			}
+// 		});
+// 		server = new RspackDevServer(compiler);
+// 		await server.start();
+// 		const launched = await runBrowser();
+// 		({ browser } = launched);
+// 		const { page } = launched;
+
+// 		const consoleMessages: string[] = [];
+// 		page.on("console", message => {
+// 			const text = message.text();
+// 			consoleMessages.push(text);
+// 		});
+
+// 		await page.goto(`http://localhost:${server.options.port}`);
+// 		await page.click(".test-button");
+// 		expect(await getText(page, ".test-button-content")).toBe("1");
+// 		expect(await getText(page, ".placeholder")).toBe("__PLACE_HOLDER__");
+// 		await editFile(path.resolve(tempDir, "./app.jsx"), code =>
+// 			code.replace("__PLACE_HOLDER__", "update")
+// 		);
+// 		expect(await getText(page, ".test-button-content")).toBe("0");
+// 		await page.click(".test-button");
+// 		expect(await getText(page, ".placeholder")).toBe("update");
+// 		await editFile(path.resolve(tempDir, "./index.css"), code =>
+// 			code.replace("rgba(0, 0, 0, 0)", "rgba(255, 0, 0, 0)")
+// 		);
+// 		expect(await getText(page, ".test-button-content")).toBe("0");
+// 		expect((await getComputedStyle(page, "body")).backgroundColor).toBe(
+// 			"rgba(255, 0, 0, 0)"
+// 		);
+// 		console.log("=== first end ===");
+// 	});
+
+// 	it("hot should works", async () => {
+// 		console.log("=== second start ===");
+// 		const tempDir = await initFixture("react");
+// 		await installDeps(tempDir);
+// 		const config = require(path.resolve(tempDir, "./webpack.config.js"));
+// 		const compiler = createCompiler({
+// 			...config,
+// 			context: tempDir
+// 		});
+// 		server = new RspackDevServer(compiler);
+// 		await server.start();
+
+// 		const launched = await runBrowser();
+// 		({ browser } = launched);
+// 		const { page } = launched;
+
+// 		const consoleMessages: string[] = [];
+// 		page.on("console", message => {
+// 			const text = message.text();
+// 			consoleMessages.push(text);
+// 		});
+
+// 		await page.goto(`http://localhost:${server.options.port}`);
+
+// 		await page.click(".test-button");
+// 		expect(await getText(page, ".test-button-content")).toBe("1");
+// 		expect(await getText(page, ".placeholder")).toBe("__PLACE_HOLDER__");
+// 		await editFile(path.resolve(tempDir, "./app.jsx"), code =>
+// 			code.replace("__PLACE_HOLDER__", "update")
+// 		);
+// 		expect(await getText(page, ".placeholder")).toBe("update");
+// 		await editFile(path.resolve(tempDir, "./index.css"), code =>
+// 			code.replace("rgba(0, 0, 0, 0)", "rgba(255, 0, 0, 0)")
+// 		);
+// 		expect((await getComputedStyle(page, "body")).backgroundColor).toBe(
+// 			"rgba(255, 0, 0, 0)"
+// 		);
+// 		expect(await getText(page, ".test-button-content")).toBe("1");
+// 		expect(consoleMessages).toContain("App hot update...");
+// 		console.log("=== second end ===");
+// 	});
+// });
+
+describe("reload and hot should works", () => {
+	// TODO: skip it temporary
+	it.skip("reload and hot should works", async () => {
+		// reload should works
+		let tempDir = await initFixture("react");
+		await installDeps(tempDir);
+		let config = require(path.resolve(tempDir, "./webpack.config.js"));
+		let compiler = createCompiler({
+			...config,
+			context: tempDir,
+			devServer: {
+				hot: false,
+				liveReload: true
+			}
+		});
+		let server = new RspackDevServer(compiler);
+		await server.start();
+		await waitingForBuild(server.options.port);
+		console.log("=== before goto page ===");
+		let { browser, page } = await runBrowser();
+
+		await page.goto(`http://localhost:${server.options.port}`);
+		await page.click(".test-button");
+		expect(await getText(page, ".test-button-content")).toBe("1");
+		expect(await getText(page, ".placeholder")).toBe("__PLACE_HOLDER__");
+
+		const appFilePath = path.resolve(tempDir, "./app.jsx");
+		await editFile(appFilePath, code =>
+			code.replace("__PLACE_HOLDER__", "update")
+		);
+		console.log(
+			"after emit file: ",
+			appFilePath,
+			fs.readFileSync(appFilePath, "utf-8")
+		);
+		expect(await getText(page, ".test-button-content")).toBe("0");
+		await page.click(".test-button");
+		expect(await getText(page, ".placeholder")).toBe("update");
+		await editFile(path.resolve(tempDir, "./index.css"), code =>
+			code.replace("rgba(0, 0, 0, 0)", "rgba(255, 0, 0, 0)")
+		);
+		expect(await getText(page, ".test-button-content")).toBe("0");
+		expect((await getComputedStyle(page, "body")).backgroundColor).toBe(
+			"rgba(255, 0, 0, 0)"
+		);
+		await server.stop();
+		await browser.close();
+		console.log("=== first end ===");
+
+		// hot should works;
+		console.log("=== second start ===");
+		tempDir = await initFixture("react");
+		await installDeps(tempDir);
+		config = require(path.resolve(tempDir, "./webpack.config.js"));
+		compiler = createCompiler({
+			...config,
+			context: tempDir
+		});
+		server = new RspackDevServer(compiler);
+		await server.start();
+		await waitingForBuild(server.options.port);
+		console.log("=== before goto page ===");
+
+		({ browser, page } = await runBrowser());
+		const consoleMessages: string[] = [];
+		page.on("console", message => {
+			const text = message.text();
+			consoleMessages.push(text);
+		});
+		await page.goto(`http://localhost:${server.options.port}`);
+		await page.click(".test-button");
+		expect(await getText(page, ".test-button-content")).toBe("1");
+		expect(await getText(page, ".placeholder")).toBe("__PLACE_HOLDER__");
+		await editFile(path.resolve(tempDir, "./app.jsx"), code =>
+			code.replace("__PLACE_HOLDER__", "update")
+		);
+		expect(await getText(page, ".placeholder")).toBe("update");
+		await editFile(path.resolve(tempDir, "./index.css"), code =>
+			code.replace("rgba(0, 0, 0, 0)", "rgba(255, 0, 0, 0)")
+		);
+		expect((await getComputedStyle(page, "body")).backgroundColor).toBe(
+			"rgba(255, 0, 0, 0)"
+		);
+		expect(await getText(page, ".test-button-content")).toBe("1");
+		expect(consoleMessages).toContain("App hot update...");
+		await server.stop();
+		await browser.close();
+		console.log("=== second end ===");
+	});
+});
+
+async function getComputedStyle(
+	page: Page,
+	selector: string
+): Promise<CSSStyleDeclaration> {
+	await page.waitForSelector(selector);
+	return await page.$eval(selector, ele =>
+		JSON.parse(JSON.stringify(window.getComputedStyle(ele)))
+	);
+}
+
+async function getText(page: Page, selector: string) {
+	await page.waitForSelector(selector);
+	return await page.$eval(selector, ele => ele.textContent);
+}

package/tests/e2e-fixtures/react/app.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "./index.css";
+
+export const App = () => {
+	const [count, setCount] = React.useState(0);
+	return (
+		<div>
+			<div className="test-button" onClick={() => setCount(() => count + 1)}>
+				<span className="test-button-content">{count}</span>
+			</div>
+			<div className="placeholder">__PLACE_HOLDER__</div>
+		</div>
+	);
+};

package/tests/e2e-fixtures/react/index.css

@@ -0,0 +1,3 @@
+body {
+	background-color: rgba(0, 0, 0, 0);
+}

package/tests/e2e-fixtures/react/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>

package/tests/e2e-fixtures/react/index.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+const container = createRoot(document.getElementById("root"));
+container.render(<App />);

package/tests/e2e-fixtures/react/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

package/tests/e2e-fixtures/react/webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+	mode: "development",
+	entry: "./index.jsx",
+	devServer: {
+		hot: true
+	},
+	stats: "none",
+	infrastructureLogging: {
+		debug: false
+	},
+	builtins: {
+		html: [
+			{
+				template: "./index.html",
+				publicPath: "/"
+			}
+		],
+		define: {
+			"process.env.NODE_ENV": JSON.stringify("development")
+		}
+	}
+};