@rspack/dev-server 1.0.5 → 1.0.7

package/README.md

@@ -5,12 +5,108 @@
 
 # @rspack/dev-server
 
-Development server for rspack.
+Use Rspack with a development server that provides live reloading. This should be used for development only.
 
-## Documentation
+> `@rspack/dev-server` is based on `webpack-dev-server@5`
 
-See [https://rspack.dev](https://rspack.dev) for details.
+## Installation
+
+First of all, install `@rspack/dev-server` and `@rspack/core` by your favorite package manager:
+
+```bash
+# npm
+$ npm install @rspack/dev-server @rspack/core --save-dev
+
+# yarn
+$ yarn add @rspack/dev-server @rspack/core --dev
+
+# pnpm
+$ pnpm add @rspack/dev-server @rspack/core --save-dev
+
+# bun
+$ bun add @rspack/dev-server @rspack/core -D
+```
+
+## Usage
+
+There are two recommended ways to use `@rspack/dev-server`:
+
+### With the CLI
+
+The easiest way to use it is with the [`@rspack/cli`](https://www.npmjs.com/package/@rspack/cli).
+
+You can install it in your project by:
+
+```bash
+# npm
+$ npm install @rspack/cli --save-dev
+
+# yarn
+$ yarn add @rspack/cli --dev
+
+# pnpm
+$ pnpm add @rspack/cli --save-dev
+
+# bun
+$ bun add @rspack/cli -D
+```
+
+And then start the development server by:
+
+```bash
+# with rspack.config.js
+$ rspack serve
+
+# with custom config file
+$ rspack serve -c ./your.config.js
+```
+
+> See [CLI](https://rspack.dev/api/cli) for more details.
+
+While starting the development server, you can specify the configuration by the `devServer` field of your Rspack config file:
+
+```js
+// rspack.config.js
+module.exports = {
+  // ...
+  devServer: {
+    // the configuration of the development server
+    port: 8080
+  },
+};
+```
+
+> See [DevServer](https://rspack.dev/config/dev-server) for all configuration options.
+
+### With the API
+
+While it's recommended to run `@rspack/dev-server` via the CLI, you may also choose to start a server via the API.
+
+```js
+import { RspackDevServer } from "@rspack/dev-server";
+import rspack from "@rspack/core";
+import rspackConfig from './rspack.config.js';
+
+const compiler = rspack(rspackConfig);
+const devServerOptions = {
+  ...rspackConfig.devServer,
+  // override
+  port: 8888
+};
+
+const server = new RspackDevServer(devServerOptions, compiler);
+
+server.startCallback(() => {
+  console.log('Successfully started server on http://localhost:8888');
+});
+```
+
+> Cause `@rspack/dev-server` is based on `webpack-dev-server@5`, you can see the [webpack-dev-server API](https://webpack.js.org/api/webpack-dev-server/) for more methods of the server instance.
+
+## Credits
+
+Thanks to the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) project created by [@sokra](https://github.com/sokra)
 
 ## License
 
-Rspack is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).
+[MIT licensed](https://github.com/web-infra-dev/rspack-dev-server/blob/main/LICENSE).

package/client/index.js

@@ -216,6 +216,7 @@ var overlay =
 		: {
 				send: function send() {}
 			};
+/* Rspack dev server runtime client */
 var onSocketMessage = {
 	hot: function hot() {
 		if (parsedResourceQuery.hot === "false") {

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,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeResolveAlias = exports.addResolveAlias = void 0;
+const Module = require("module");
+const MODULE_MAP = {};
+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
+        ]));
+    MODULE_MAP[modulePath] = Module._resolveFilename;
+    Module._resolveFilename = Module._resolveFilename = (request, mod, ...args) => {
+        if (mod.filename === modulePath && aliasMap[request]) {
+            return aliasMap[request];
+        }
+        return MODULE_MAP[modulePath](request, mod, ...args);
+    };
+};
+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]) {
+        Module._resolveFilename = RESOLVER_MAP[modulePath];
+        m.require.resolve = RESOLVER_MAP[modulePath];
+        delete RESOLVER_MAP[modulePath];
+    }
+};
+exports.removeResolveAlias = removeResolveAlias;

package/dist/server.d.ts

@@ -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,15 +15,12 @@ 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)();
-const encodeOverlaySettings = (setting) => typeof setting === "function"
-    ? encodeURIComponent(setting.toString())
-    : setting;
 const getFreePort = async function getFreePort(port, host) {
     if (typeof port !== "undefined" && port !== null && port !== "auto") {
         return port;
@@ -46,60 +43,7 @@ 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
@@ -112,231 +56,28 @@ 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") {
-                    const overlayString = typeof client.overlay === "boolean"
-                        ? String(client.overlay)
-                        : JSON.stringify({
-                            ...client.overlay,
-                            errors: encodeOverlaySettings(client.overlay.errors),
-                            warnings: encodeOverlaySettings(client.overlay.warnings),
-                            runtimeErrors: encodeOverlaySettings(client.overlay.runtimeErrors)
-                        });
-                    searchParams.set("overlay", overlayString);
-                }
-                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");
         }
     }
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rspack/dev-server",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MIT",
   "description": "Development server for rspack",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public",
+    "registry": "https://registry.npmjs.org/",
     "provenance": true
   },
   "exports": {
@@ -17,19 +18,28 @@
     "./client/*.js": "./client/*.js",
     "./package.json": "./package.json"
   },
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "files": [
     "dist",
     "client"
   ],
   "homepage": "https://rspack.dev",
-  "bugs": "https://github.com/web-infra-dev/rspack/issues",
+  "bugs": "https://github.com/web-infra-dev/rspack-dev-server/issues",
   "repository": {
     "type": "git",
-    "url": "https://github.com/web-infra-dev/rspack",
-    "directory": "packages/rspack-dev-server"
+    "url": "https://github.com/web-infra-dev/rspack-dev-server"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.3",
     "@jest/test-sequencer": "^29.7.0",
+    "@rspack/core": "1.0.6",
     "@rspack/plugin-react-refresh": "1.0.0",
     "@types/connect-history-api-fallback": "1.5.4",
     "@types/express": "4.17.21",
@@ -48,8 +58,23 @@
     "tcp-port-used": "^1.0.2",
     "typescript": "5.0.2",
     "wait-for-expect": "^3.0.2",
-    "@rspack/dev-server": "1.0.5",
-    "@rspack/core": "1.0.5"
+    "@jest/reporters": "29.7.0",
+    "@types/jest": "29.5.12",
+    "cross-env": "^7.0.3",
+    "husky": "^9.0.0",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-node": "29.7.0",
+    "rimraf": "3.0.2",
+    "ts-jest": "29.1.2",
+    "webpack": "^5.94.0",
+    "webpack-cli": "5.1.4",
+    "react-refresh": "0.14.0",
+    "execa": "9.3.0",
+    "fs-extra": "11.2.0",
+    "nano-staged": "^0.8.0",
+    "semver": "7.6.3",
+    "simple-git-hooks": "^2.11.1"
   },
   "dependencies": {
     "chokidar": "^3.6.0",
@@ -67,10 +92,12 @@
   },
   "scripts": {
     "build": "tsc -b ./tsconfig.build.json",
-    "dev": "tsc -w -b ./tsconfig.build.json",
+    "dev": "tsc -b -w",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "format": "node ./node_modules/prettier/bin/prettier.cjs \"packages/**/src/**/*.{ts,tsx,js}\" \"crates/rspack_plugin_runtime/**/*.{ts,js}\" \"x.mjs\" --check",
     "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"
+    "test": "pnpm run test:install && pnpm run build && cross-env NO_COLOR=1 node --expose-gc --max-old-space-size=8192 --experimental-vm-modules ./node_modules/jest-cli/bin/jest --colors",
+    "release": "node ./scripts/release.mjs"
   }
 }