@rspack/dev-server 0.0.21 → 0.0.22

package/dist/server.js

@@ -1,98 +1,171 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RspackDevServer = void 0;
+const core_1 = require("@rspack/core");
+const dev_middleware_1 = __importStar(require("@rspack/dev-middleware"));
 const fs_1 = __importDefault(require("fs"));
-const chokidar_1 = __importDefault(require("chokidar"));
-const http_1 = __importDefault(require("http"));
-const logger_1 = require("./logger");
 const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
-const express_1 = __importDefault(require("express"));
-const dev_middleware_1 = __importDefault(require("@rspack/dev-middleware"));
-const ws_1 = require("./ws");
-const config_1 = require("./config");
-// copy from webpack-dev-server
-class RspackDevServer {
-    constructor(compiler) {
-        this.compiler = compiler;
-        this.logger = (0, logger_1.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 = {}) {
-        return (0, config_1.resolveDevOptions)(dev, this.compiler.options);
-    }
-    rewriteCompilerOptions() {
-        var _a, _b;
-        this.compiler.options.devServer = this.options;
-        if (!this.compiler.options.builtins.react) {
-            this.compiler.options.builtins.react = {};
-        }
-        this.compiler.options.builtins.react.development =
-            (_a = this.compiler.options.builtins.react.development) !== null && _a !== void 0 ? _a : true;
-        if (this.options.hot) {
-            this.compiler.options.builtins.react.refresh =
-                (_b = this.compiler.options.builtins.react.refresh) !== null && _b !== void 0 ? _b : true;
-        }
+class RspackDevServer extends webpack_dev_server_1.default {
+    constructor(options, compiler) {
+        // @ts-expect-error
+        super(options, compiler);
     }
-    addAdditionEntires() {
+    addAdditionEntires(compiler) {
         var _a;
-        const entries = [];
+        const additionalEntries = [];
+        // 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;
+                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") {
+                    searchParams.set("overlay", typeof client.overlay === "boolean"
+                        ? String(client.overlay)
+                        : JSON.stringify(client.overlay));
+                }
+                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");
-            entries.push(hotUpdateEntryPath);
-            if ((_a = this.compiler.options.builtins.react) === null || _a === void 0 ? void 0 : _a.refresh) {
+            additionalEntries.push(hotUpdateEntryPath);
+            if ((_a = compiler.options.builtins.react) === null || _a === void 0 ? void 0 : _a.refresh) {
                 const reactRefreshEntryPath = require.resolve("@rspack/dev-client/react-refresh");
-                entries.push(reactRefreshEntryPath);
+                additionalEntries.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].import.unshift(...entries);
-        }
-    }
-    static isAbsoluteURL(URL) {
-        return webpack_dev_server_1.default.isAbsoluteURL(URL);
-    }
-    static findIp(gateway) {
-        return webpack_dev_server_1.default.findIp(gateway);
-    }
-    static async internalIP(family) {
-        return webpack_dev_server_1.default.internalIP(family);
-    }
-    static async internalIPSync(family) {
-        return webpack_dev_server_1.default.internalIPSync(family);
-    }
-    static async getHostname(hostname) {
-        return webpack_dev_server_1.default.getHostname(hostname);
-    }
-    static async getFreePort(port, host) {
-        return webpack_dev_server_1.default.getFreePort(port, host);
-    }
-    static findCacheDir() {
-        // TODO: we need remove the `webpack-dev-server` tag in WebpackDevServer;
-        return "";
-    }
-    getCompilerOptions() {
-        return this.compiler.options;
-    }
-    sendMessage(clients, type, data, params) {
-        for (const client of clients) {
-            if (client.readyState === 1) {
-                client.send(JSON.stringify({ type, data, params }));
-            }
+        for (const key in compiler.options.entry) {
+            compiler.options.entry[key].import.unshift(...additionalEntries);
         }
     }
     watchFiles(watchPath, watchOptions) {
-        const watcher = chokidar_1.default.watch(watchPath, watchOptions);
+        const chokidar = require("chokidar");
+        const watcher = chokidar.watch(watchPath, watchOptions);
         // disabling refreshing on changing the content
         if (this.options.liveReload) {
             // TODO: remove this after we had memory filesystem
@@ -107,213 +180,191 @@ class RspackDevServer {
         }
         this.staticWatchers.push(watcher);
     }
-    invalidate(callback = () => { }) {
-        if (this.middleware) {
-            this.middleware.invalidate(callback);
+    getClientTransport() {
+        // WARNING: we can't use `super.getClientTransport`,
+        // because we doesn't had same directory structure.
+        // and TODO: we need impelement `webpack.providerPlugin`
+        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 (
+            // @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() {
+    async initialize() {
+        const compilers = this.compiler instanceof core_1.MultiCompiler
+            ? this.compiler.compilers
+            : [this.compiler];
+        compilers.forEach(compiler => {
+            var _a, _b, _c;
+            var _d, _e, _f;
+            (_a = (_d = compiler.options.builtins).react) !== null && _a !== void 0 ? _a : (_d.react = {});
+            if (this.options.hot) {
+                (_b = (_e = compiler.options.builtins.react).refresh) !== null && _b !== void 0 ? _b : (_e.refresh = true);
+                (_c = (_f = compiler.options.builtins.react).development) !== null && _c !== void 0 ? _c : (_f.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 = webpack_dev_server_1.default.internalIPSync("v4");
-            this.logger.info(`Your Network (IPV4) http://${internalIPv4}:${port}`);
-            resolve({});
-        }));
-    }
-    startCallback(callback) {
-        throw new Error("Method not implemented.");
-    }
-    stopCallback(callback) {
-        throw new Error("Method not implemented.");
-    }
-    listen(port, hostname, fn) {
-        throw new Error("Method not implemented.");
-    }
-    close(callback) {
-        throw new Error("Method not implemented.");
-    }
-    async stop() {
-        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();
+        // @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("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);
             });
         }
-    }
-    setupApp() {
-        this.app = (0, express_1.default)();
-    }
-    setupWatchStaticFiles() {
-        if (this.options.static.watch === false) {
-            return;
-        }
-        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);
     }
     setupDevMiddleware() {
         // @ts-ignored
         this.middleware = (0, dev_middleware_1.default)(this.compiler, this.options.devMiddleware);
     }
-    createWebsocketServer() {
-        if (this.options.webSocketServer !== false) {
-            this.webSocketServer = (0, ws_1.createWebsocketServer)(this);
-        }
-    }
     setupMiddlewares() {
-        const options = this.options;
         const middlewares = [];
-        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_1.default.existsSync(path)) {
-                            this.compiler.rebuild([path], (error, stats) => {
-                                if (error) {
-                                    throw error;
-                                }
-                                res.write("");
-                                res.end();
-                                console.log("lazy compiler success");
+        const compilers = this.compiler instanceof core_1.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: (0, dev_middleware_1.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_1.default.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_1.default.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);
             }
         });
-    }
-    createServer() {
-        this.server = http_1.default.createServer(this.app);
+        // @ts-expect-error
+        super.setupMiddlewares();
     }
     setupHooks() {
         this.compiler.hooks.done.tap("dev-server", stats => {