@rspack/dev-server 0.0.0-02df4322c5-20221125030212

package/src/config.ts

@@ -0,0 +1,68 @@
+import type {
+	Dev,
+	WebSocketServerOptions,
+	RspackOptionsNormalized
+} from "@rspack/core";
+import type { WatchOptions } from "chokidar";
+import path from "node:path";
+import { resolveWatchOption } from "@rspack/core";
+
+export interface ResolvedDev {
+	host: string;
+	port: number;
+	static: {
+		directory: string;
+		watch: false | WatchOptions;
+	};
+	devMiddleware: {};
+	hot: boolean;
+	open: boolean;
+	liveReload: boolean;
+	webSocketServer: false | WebSocketServerOptions;
+}
+
+export function resolveDevOptions(
+	devConfig: Dev,
+	compilerOptions: RspackOptionsNormalized
+): ResolvedDev {
+	const open = true;
+	const hot = devConfig.hot ?? true;
+	// --- static
+	const directory =
+		devConfig.static?.directory ??
+		path.resolve(compilerOptions.context, "dist");
+	let watch: false | WatchOptions = {};
+	if (devConfig.static?.watch === false) {
+		watch = false;
+	} else if (devConfig.static?.watch === true) {
+		watch = resolveWatchOption({});
+	} else if (devConfig.static?.watch) {
+		watch = devConfig.static?.watch;
+	}
+	// ---
+	const devMiddleware = devConfig.devMiddleware ?? {};
+	const liveReload = devConfig.liveReload ?? true;
+
+	let webSocketServer: false | WebSocketServerOptions = {};
+	if (devConfig.webSocketServer === false) {
+		webSocketServer = false;
+	} else if (devConfig.webSocketServer === true) {
+		webSocketServer = {};
+	} else if (devConfig.webSocketServer) {
+		webSocketServer = devConfig.webSocketServer;
+	}
+
+	return {
+		host: devConfig.host,
+		port: devConfig.port ? Number(devConfig.port) : undefined,
+		static: {
+			directory,
+			watch
+		},
+		devMiddleware,
+		open,
+		hot,
+		liveReload,
+		webSocketServer
+	};
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { RspackDevServer } from "./server";

package/src/logger.ts

@@ -0,0 +1,30 @@
+export interface Logger {
+	error(...args: any[]): void;
+	warn(...args: any[]): void;
+	info(...args: any[]): void;
+}
+
+const COLOR = {
+	RESET: "\x1b[0m",
+	//
+	RED: "\x1b[31m",
+	GREEN: "\x1b[32m",
+	YELLOW: "\x1b[33m"
+};
+
+export function createLogger(name: string): Logger {
+	if (!name.length) {
+		throw Error();
+	}
+	return {
+		error(...msgs: any[]) {
+			console.log("[", name, "]:", COLOR.RED, msgs, COLOR.RESET);
+		},
+		warn(...msgs: any[]) {
+			console.log("[", name, "]:", COLOR.YELLOW, msgs, COLOR.RESET);
+		},
+		info(...msgs: any[]) {
+			console.log("[", name, "]:", COLOR.GREEN, msgs, COLOR.RESET);
+		}
+	};
+}

package/src/reload.ts

@@ -0,0 +1,31 @@
+import type { RspackOptionsNormalized } from "@rspack/core";
+
+interface Status {
+	isUnloading: boolean;
+	currentHash: string;
+	previousHash: string[];
+}
+
+export function reloadApp(
+	{ liveReload, hot }: RspackOptionsNormalized["devServer"],
+	status: Status
+) {
+	if (status.isUnloading) {
+		return;
+	}
+
+	function applyReload(rootWindow: Window, intervalId: number) {
+		clearInterval(intervalId);
+		console.log("App update, Reloading...");
+		rootWindow.location.reload();
+	}
+
+	if (liveReload) {
+		let rootWindow = self;
+		const intervalId = self.setInterval(() => {
+			if (rootWindow.location.protocol !== "about:") {
+				applyReload(rootWindow, intervalId);
+			}
+		});
+	}
+}

package/src/server.ts

@@ -0,0 +1,307 @@
+import type { Compiler, Dev, RspackOptionsNormalized } from "@rspack/core";
+import type { Logger } from "./logger";
+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 type { Server } from "http";
+import type { ResolvedDev } from "./config";
+
+import chokidar from "chokidar";
+import http from "http";
+import { createLogger } from "./logger";
+import WebpackDevServer from "webpack-dev-server";
+import express from "express";
+
+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;
+	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();
+	}
+
+	normalizeOptions(dev: Dev = {}) {
+		return resolveDevOptions(dev, this.compiler.options);
+	}
+
+	rewriteCompilerOptions() {
+		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() {
+		const entries: string[] = [];
+
+		if (this.options.hot) {
+			const hotUpdateEntryPath = require.resolve(
+				"@rspack/dev-client/devServer"
+			);
+			entries.push(hotUpdateEntryPath);
+
+			const cssHotEntryPath = require.resolve("@rspack/dev-client/css");
+
+			entries.push(cssHotEntryPath);
+
+			if (this.compiler.options.builtins.react?.refresh) {
+				const reactRefreshEntryPath = require.resolve(
+					"@rspack/dev-client/react-refresh"
+				);
+				entries.push(reactRefreshEntryPath);
+			}
+		}
+
+		const devClientEntryPath = require.resolve("@rspack/dev-client");
+		entries.push(devClientEntryPath);
+		for (const key in this.compiler.options.entry) {
+			this.compiler.options.entry[key].unshift(...entries);
+		}
+	}
+
+	static isAbsoluteURL(URL: string): boolean {
+		return WebpackDevServer.isAbsoluteURL(URL);
+	}
+
+	static findIp(gateway: string): string | undefined {
+		return WebpackDevServer.findIp(gateway);
+	}
+
+	static async internalIP(family: "v6" | "v4"): Promise<string | undefined> {
+		return WebpackDevServer.internalIP(family);
+	}
+
+	static async internalIPSync(
+		family: "v6" | "v4"
+	): Promise<string | undefined> {
+		return WebpackDevServer.internalIPSync(family);
+	}
+
+	static async getHostname(hostname?: Host): Promise<string> {
+		return WebpackDevServer.getHostname(hostname);
+	}
+
+	static async getFreePort(port: Port, host: string): Promise<string | number> {
+		return WebpackDevServer.getFreePort(port, host);
+	}
+
+	static findCacheDir(): string {
+		// TODO: we need remove the `webpack-dev-server` tag in WebpackDevServer;
+		return "";
+	}
+
+	private getCompilerOptions(): RspackOptionsNormalized {
+		return this.compiler.options;
+	}
+
+	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 }));
+			}
+		}
+	}
+
+	watchFiles(watchPath: string | string[], watchOptions?: WatchOptions): void {
+		const watcher = chokidar.watch(watchPath, watchOptions);
+
+		// disabling refreshing on changing the content
+		if (this.options.liveReload) {
+			// TODO: remove this after we had memory filesystem
+			if (this.options.hot) {
+				return;
+			}
+
+			watcher.on("change", item => {
+				if (this.webSocketServer) {
+					this.sendMessage(
+						this.webSocketServer.clients,
+						"static-changed",
+						item
+					);
+				}
+			});
+		}
+
+		this.staticWatchers.push(watcher);
+	}
+
+	invalidate(callback = () => {}): void {
+		if (this.middleware) {
+			this.middleware.invalidate(callback);
+		}
+	}
+
+	async start(): Promise<void> {
+		this.setupHooks();
+		this.setupApp();
+		this.createServer();
+		this.setupWatchStaticFiles();
+		this.createWebsocketServer();
+		this.setupDevMiddleware();
+		this.setupMiddlewares();
+		const host = await RspackDevServer.getHostname(this.options.host);
+		const port = await RspackDevServer.getFreePort(this.options.port, host);
+		await new Promise(resolve =>
+			this.server.listen(
+				{
+					port,
+					host
+				},
+				() => {
+					this.logger.info(`Loopback: http://localhost:${port}`);
+					let internalIPv4 = WebpackDevServer.internalIPSync("v4");
+					this.logger.info(
+						`Your Network (IPV4) http://${internalIPv4}:${port}`
+					);
+					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.");
+	}
+
+	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();
+			});
+		}
+	}
+
+	private setupApp() {
+		this.app = express();
+	}
+
+	private setupWatchStaticFiles() {
+		if (this.options.static.watch === false) {
+			return;
+		}
+		this.watchFiles(this.options.static.directory, this.options.static.watch);
+	}
+
+	private setupDevMiddleware() {
+		// @ts-ignored
+		this.middleware = rdm(this.compiler, this.options.devMiddleware);
+	}
+
+	private createWebsocketServer() {
+		if (this.options.webSocketServer !== false) {
+			this.webSocketServer = createWebsocketServer(this);
+		}
+	}
+
+	private setupMiddlewares() {
+		const middlewares: Middleware[] = [];
+		middlewares.push({
+			name: "rdm",
+			middleware: 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)
+			})
+		});
+		middlewares.push({
+			name: "express-static",
+			path: this.compiler.options.output.publicPath ?? "/",
+			middleware: express.static(this.options.static.directory)
+		});
+
+		middlewares.forEach(m => {
+			if (m.path) {
+				this.app.use(m.path, m.middleware);
+			} else {
+				this.app.use(m.middleware);
+			}
+		});
+	}
+
+	private createServer() {
+		this.server = http.createServer(this.app);
+	}
+
+	private setupHooks() {
+		this.compiler.hooks.done.tap("dev-server", stats => {
+			// send Message
+			if (this.webSocketServer) {
+				this.sendMessage(this.webSocketServer.clients, "ok"); // TODO: send hash
+			}
+		});
+	}
+}

package/src/ws.ts

@@ -0,0 +1,18 @@
+import type { RspackDevServer } from "./server";
+import WebSocket from "ws";
+import WebpackWsServer from "webpack-dev-server/lib/servers/WebsocketServer";
+
+export type ClientConnection = WebSocket & { isAlive?: boolean };
+
+export interface WebSocketServer {
+	heartbeatInterval: number;
+	implementation: WebSocket.Server<WebSocket.WebSocket>;
+	server: RspackDevServer;
+	clients: ClientConnection[];
+}
+
+export function createWebsocketServer(
+	server: RspackDevServer
+): WebSocketServer {
+	return new WebpackWsServer(server);
+}

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`normalize options snapshot additional entires should added 1`] = `
+{
+  "main": [
+    "<prefix>/rspack-dev-client/dist/devServer.js",
+    "<prefix>/rspack-dev-client/dist/css.js",
+    "<prefix>/rspack-dev-client/dist/reactRefresh.js",
+    "<prefix>/rspack-dev-client/dist/index.js",
+    "<prefix>/something",
+  ],
+}
+`;
+
+exports[`normalize options snapshot no options 1`] = `
+{
+  "devMiddleware": {},
+  "host": undefined,
+  "hot": true,
+  "liveReload": true,
+  "open": true,
+  "port": undefined,
+  "static": {
+    "directory": "<PROJECT_ROOT>/dist",
+    "watch": {},
+  },
+  "webSocketServer": {},
+}
+`;
+
+exports[`normalize options snapshot port string 1`] = `
+{
+  "devMiddleware": {},
+  "host": undefined,
+  "hot": true,
+  "liveReload": true,
+  "open": true,
+  "port": 9000,
+  "static": {
+    "directory": "<PROJECT_ROOT>/dist",
+    "watch": {},
+  },
+  "webSocketServer": {},
+}
+`;
+
+exports[`normalize options snapshot react.development and react.refresh should be true in default when hot enabled 1`] = `
+{
+  "builtins": {
+    "browserslist": [],
+    "decorator": {
+      "emitMetadata": true,
+      "legacy": true,
+      "useDefineForClassFields": true,
+    },
+    "define": {},
+    "html": [],
+    "minify": true,
+    "react": {
+      "development": true,
+      "refresh": true,
+    },
+  },
+  "devServer": {
+    "hot": true,
+  },
+}
+`;
+
+exports[`normalize options snapshot react-refresh client added when react/refresh enabled 1`] = `
+{
+  "main": [
+    "<prefix>/rspack-dev-client/dist/devServer.js",
+    "<prefix>/rspack-dev-client/dist/css.js",
+    "<prefix>/rspack-dev-client/dist/reactRefresh.js",
+    "<prefix>/rspack-dev-client/dist/index.js",
+    "<prefix>/something",
+  ],
+}
+`;

package/tests/normalizeOptions.test.ts

@@ -0,0 +1,73 @@
+import type { RspackOptions } from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
+import { createCompiler } from "@rspack/core";
+import serializer from "jest-serializer-path";
+import os from "os";
+expect.addSnapshotSerializer(serializer);
+
+describe("normalize options snapshot", () => {
+	it("no options", () => {
+		match({});
+	});
+
+	it("port string", () => {
+		match({
+			devServer: {
+				port: "9000"
+			}
+		});
+	});
+
+	it("additional entires should added", () => {
+		matchAdditionEntries({
+			entry: ["something"]
+		});
+	});
+
+	it("react-refresh client added when react/refresh enabled", () => {
+		matchAdditionEntries({
+			entry: ["something"],
+			builtins: {
+				react: {
+					refresh: true
+				}
+			}
+		});
+	});
+
+	it("react.development and react.refresh should be true in default when hot enabled", () => {
+		const compiler = createCompiler({
+			devServer: {
+				hot: true
+			}
+		});
+		new RspackDevServer(compiler);
+		expect({
+			builtins: compiler.options.builtins,
+			devServer: compiler.options.devServer
+		}).toMatchSnapshot();
+	});
+});
+
+function match(config: RspackOptions) {
+	const compiler = createCompiler(config);
+	const server = new RspackDevServer(compiler);
+	expect(server.options).toMatchSnapshot();
+}
+
+function matchAdditionEntries(config: RspackOptions) {
+	const compiler = createCompiler(config);
+	const server = new RspackDevServer(compiler);
+	const entires = Object.entries(compiler.options.entry);
+	// some hack for snapshot
+	const value = Object.fromEntries(
+		entires.map(([key, item]) => {
+			const replaced = item.map(entry => {
+				const array = entry.replace(/\\/g, "/").split("/");
+				return "<prefix>" + "/" + array.slice(-3).join("/");
+			});
+			return [key, replaced];
+		})
+	);
+	expect(value).toMatchSnapshot();
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "references": [
+    {
+      "path": "../rspack-dev-middleware"
+    }
+  ]
+}