@rspack/dev-server 1.0.9 → 1.1.0

package/README.md

@@ -5,6 +5,13 @@
 
 # @rspack/dev-server
 
+<p>
+  <a href="https://npmjs.com/package/@rspack/dev-server?activeTab=readme"><img src="https://img.shields.io/npm/v/@rspack/dev-server?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" /></a>
+  <a href="https://npmcharts.com/compare/@rspack/dev-server?minimal=true"><img src="https://img.shields.io/npm/dm/@rspack/dev-server.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
+  <a href="https://nodejs.org/en/about/previous-releases"><img src="https://img.shields.io/node/v/@rspack/dev-server.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="node version"></a>
+  <a href="https://github.com/web-infra-dev/rspack-dev-server/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" /></a>
+</p>
+
 Use Rspack with a development server that provides live reloading. This should be used for development only.
 
 > `@rspack/dev-server` is based on `webpack-dev-server@5`

package/client/index.js

@@ -1,79 +1,39 @@
 // @ts-nocheck
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        enumerableOnly &&
-            (symbols = symbols.filter(function (sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            })),
-            keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-        var source = null != arguments[i] ? arguments[i] : {};
-        i % 2
-            ? ownKeys(Object(source), !0).forEach(function (key) {
-                _defineProperty(target, key, source[key]);
-            })
-            : Object.getOwnPropertyDescriptors
-                ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source))
-                : ownKeys(Object(source)).forEach(function (key) {
-                    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-                });
-    }
-    return target;
-}
-function _defineProperty(obj, key, value) {
-    key = _toPropertyKey(key);
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    }
-    else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _toPropertyKey(arg) {
-    var key = _toPrimitive(arg, "string");
-    return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive(input, hint) {
-    if (typeof input !== "object" || input === null)
-        return input;
-    var prim = input[Symbol.toPrimitive];
-    if (prim !== undefined) {
-        var res = prim.call(input, hint || "default");
-        if (typeof res !== "object")
-            return res;
-        throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (hint === "string" ? String : Number)(input);
-}
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import hotEmitter from "@rspack/core/hot/emitter.js";
 /* global __resourceQuery, __webpack_hash__ */
+/* Rspack dev server runtime client */
 /// <reference types="webpack/module" />
 import webpackHotLog from "@rspack/core/hot/log.js";
-import stripAnsi from "webpack-dev-server/client/utils/stripAnsi.js";
-import parseURL from "webpack-dev-server/client/utils/parseURL.js";
+import { createOverlay, formatProblem, } from "webpack-dev-server/client/overlay.js";
 import socket from "webpack-dev-server/client/socket.js";
-import { formatProblem, createOverlay } from "webpack-dev-server/client/overlay.js";
-import { log, logEnabledFeatures, setLogLevel } from "webpack-dev-server/client/utils/log.js";
+import { defineProgressElement, isProgressSupported, } from "webpack-dev-server/client/progress.js";
+import socket from "webpack-dev-server/client/socket.js";
+import { log, setLogLevel } from "webpack-dev-server/client/utils/log.js";
 import sendMessage from "webpack-dev-server/client/utils/sendMessage.js";
-import reloadApp from "./utils/reloadApp.js";
-import createSocketURL from "webpack-dev-server/client/utils/createSocketURL.js";
+/**
+ * @typedef {Object} OverlayOptions
+ * @property {boolean | (error: Error) => boolean} [warnings]
+ * @property {boolean | (error: Error) => boolean} [errors]
+ * @property {boolean | (error: Error) => boolean} [runtimeErrors]
+ * @property {string} [trustedTypesPolicyName]
+ */
 /**
  * @typedef {Object} Options
  * @property {boolean} hot
  * @property {boolean} liveReload
  * @property {boolean} progress
- * @property {boolean | { warnings?: boolean, errors?: boolean, runtimeErrors?: boolean, trustedTypesPolicyName?: string }} overlay
+ * @property {boolean | OverlayOptions} overlay
  * @property {string} [logging]
  * @property {number} [reconnect]
  */
@@ -84,39 +44,94 @@ import createSocketURL from "webpack-dev-server/client/utils/createSocketURL.js"
  * @property {string} [previousHash]
  */
 /**
- * @type {Status}
+ * @param {boolean | { warnings?: boolean | string; errors?: boolean | string; runtimeErrors?: boolean | string; }} overlayOptions
  */
-var status = {
-    isUnloading: false,
-    // TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement
-    // eslint-disable-next-line camelcase
-    currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : ""
-};
-var decodeOverlayOptions = function decodeOverlayOptions(overlayOptions) {
+var decodeOverlayOptions = function (overlayOptions) {
     if (typeof overlayOptions === "object") {
         ["warnings", "errors", "runtimeErrors"].forEach(function (property) {
             if (typeof overlayOptions[property] === "string") {
                 var overlayFilterFunctionString = decodeURIComponent(overlayOptions[property]);
                 // eslint-disable-next-line no-new-func
-                var overlayFilterFunction = new Function("message", "var callback = ".concat(overlayFilterFunctionString, "\n        return callback(message)"));
-                overlayOptions[property] = overlayFilterFunction;
+                overlayOptions[property] = new Function("message", "var callback = ".concat(overlayFilterFunctionString, "\n\t\t\t\treturn callback(message)"));
             }
         });
     }
 };
-/** @type {Options} */
-var options = {
-    hot: false,
-    liveReload: false,
-    progress: false,
-    overlay: false
+/**
+ * @param {string} resourceQuery
+ * @returns {{ [key: string]: string | boolean }}
+ */
+var parseURL = function (resourceQuery) {
+    /** @type {{ [key: string]: string }} */
+    var result = {};
+    if (typeof resourceQuery === "string" && resourceQuery !== "") {
+        var searchParams = resourceQuery.slice(1).split("&");
+        for (var i = 0; i < searchParams.length; i++) {
+            var pair = searchParams[i].split("=");
+            result[pair[0]] = decodeURIComponent(pair[1]);
+        }
+    }
+    else {
+        // Else, get the url from the <script> this file was called with.
+        var scriptSource = getCurrentScriptSource();
+        var scriptSourceURL = void 0;
+        try {
+            // The placeholder `baseURL` with `window.location.href`,
+            // is to allow parsing of path-relative or protocol-relative URLs,
+            // and will have no effect if `scriptSource` is a fully valid URL.
+            scriptSourceURL = new URL(scriptSource, self.location.href);
+        }
+        catch (error) {
+            // URL parsing failed, do nothing.
+            // We will still proceed to see if we can recover using `resourceQuery`
+        }
+        if (scriptSourceURL) {
+            result = scriptSourceURL;
+            result.fromCurrentScript = true;
+        }
+    }
+    return result;
+};
+/**
+ * @type {Status}
+ */
+var status = {
+    isUnloading: false,
+    // eslint-disable-next-line camelcase
+    currentHash: __webpack_hash__,
+};
+/**
+ * @returns {string}
+ */
+var getCurrentScriptSource = function () {
+    // `document.currentScript` is the most accurate way to find the current script,
+    // but is not supported in all browsers.
+    if (document.currentScript) {
+        return document.currentScript.getAttribute("src");
+    }
+    // Fallback to getting all scripts running in the document.
+    var scriptElements = document.scripts || [];
+    var scriptElementsWithSrc = Array.prototype.filter.call(scriptElements, function (element) { return element.getAttribute("src"); });
+    if (scriptElementsWithSrc.length > 0) {
+        var currentScript = scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
+        return currentScript.getAttribute("src");
+    }
+    // Fail as there was no script to use.
+    throw new Error("[webpack-dev-server] Failed to get current script source.");
 };
 var parsedResourceQuery = parseURL(__resourceQuery);
 var enabledFeatures = {
     "Hot Module Replacement": false,
     "Live Reloading": false,
     Progress: false,
-    Overlay: false
+    Overlay: false,
+};
+/** @type {Options} */
+var options = {
+    hot: false,
+    liveReload: false,
+    progress: false,
+    overlay: false,
 };
 if (parsedResourceQuery.hot === "true") {
     options.hot = true;
@@ -139,11 +154,7 @@ if (parsedResourceQuery.overlay) {
     }
     // Fill in default "true" params for partially-specified objects.
     if (typeof options.overlay === "object") {
-        options.overlay = _objectSpread({
-            errors: true,
-            warnings: true,
-            runtimeErrors: true
-        }, options.overlay);
+        options.overlay = __assign({ errors: true, warnings: true, runtimeErrors: true }, options.overlay);
         decodeOverlayOptions(options.overlay);
     }
     enabledFeatures.Overlay = true;
@@ -157,14 +168,29 @@ if (typeof parsedResourceQuery.reconnect !== "undefined") {
 /**
  * @param {string} level
  */
-function setAllLogLevel(level) {
+var setAllLogLevel = function (level) {
     // This is needed because the HMR logger operate separately from dev server logger
     webpackHotLog.setLogLevel(level === "verbose" || level === "log" ? "info" : level);
     setLogLevel(level);
-}
+};
 if (options.logging) {
     setAllLogLevel(options.logging);
 }
+var logEnabledFeatures = function (features) {
+    var listEnabledFeatures = Object.keys(features);
+    if (!features || listEnabledFeatures.length === 0) {
+        return;
+    }
+    var logString = "Server started:";
+    // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
+    for (var i = 0; i < listEnabledFeatures.length; i++) {
+        var key = listEnabledFeatures[i];
+        logString += " ".concat(key, " ").concat(features[key] ? "enabled" : "disabled", ",");
+    }
+    // replace last comma with a period
+    logString = logString.slice(0, -1).concat(".");
+    log.info(logString);
+};
 logEnabledFeatures(enabledFeatures);
 self.addEventListener("beforeunload", function () {
     status.isUnloading = true;
@@ -173,43 +199,113 @@ var overlay = typeof window !== "undefined"
     ? createOverlay(typeof options.overlay === "object"
         ? {
             trustedTypesPolicyName: options.overlay.trustedTypesPolicyName,
-            catchRuntimeError: options.overlay.runtimeErrors
+            catchRuntimeError: options.overlay.runtimeErrors,
         }
         : {
             trustedTypesPolicyName: false,
-            catchRuntimeError: options.overlay
+            catchRuntimeError: options.overlay,
         })
-    : {
-        send: function send() { }
-    };
-/* Rspack dev server runtime client */
+    : { send: function () { } };
+/**
+ * @param {Options} options
+ * @param {Status} currentStatus
+ */
+var reloadApp = function (_a, currentStatus) {
+    var hot = _a.hot, liveReload = _a.liveReload;
+    if (currentStatus.isUnloading) {
+        return;
+    }
+    var currentHash = currentStatus.currentHash, previousHash = currentStatus.previousHash;
+    var isInitial = currentHash.indexOf(/** @type {string} */ (previousHash)) >= 0;
+    if (isInitial) {
+        return;
+    }
+    /**
+     * @param {Window} rootWindow
+     * @param {number} intervalId
+     */
+    function applyReload(rootWindow, intervalId) {
+        clearInterval(intervalId);
+        log.info("App updated. Reloading...");
+        rootWindow.location.reload();
+    }
+    var search = self.location.search.toLowerCase();
+    var allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
+    var allowToLiveReload = search.indexOf("webpack-dev-server-live-reload=false") === -1;
+    if (hot && allowToHot) {
+        log.info("App hot update...");
+        hotEmitter.emit("webpackHotUpdate", currentStatus.currentHash);
+        if (typeof self !== "undefined" && self.window) {
+            // broadcast update to window
+            self.postMessage("webpackHotUpdate".concat(currentStatus.currentHash), "*");
+        }
+    }
+    // allow refreshing the page only if liveReload isn't disabled
+    else if (liveReload && allowToLiveReload) {
+        var rootWindow_1 = self;
+        // use parent window for reload (in case we're in an iframe with no valid src)
+        var intervalId_1 = self.setInterval(function () {
+            if (rootWindow_1.location.protocol !== "about:") {
+                // reload immediately if protocol is valid
+                applyReload(rootWindow_1, intervalId_1);
+            }
+            else {
+                rootWindow_1 = rootWindow_1.parent;
+                if (rootWindow_1.parent === rootWindow_1) {
+                    // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
+                    applyReload(rootWindow_1, intervalId_1);
+                }
+            }
+        });
+    }
+};
+var ansiRegex = new RegExp([
+    "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)",
+    "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))",
+].join("|"), "g");
+/**
+ *
+ * Strip [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) from a string.
+ * Adapted from code originally released by Sindre Sorhus
+ * Licensed the MIT License
+ *
+ * @param {string} string
+ * @return {string}
+ */
+var stripAnsi = function (string) {
+    if (typeof string !== "string") {
+        throw new TypeError("Expected a `string`, got `".concat(typeof string, "`"));
+    }
+    return string.replace(ansiRegex, "");
+};
 var onSocketMessage = {
-    hot: function hot() {
+    hot: function () {
         if (parsedResourceQuery.hot === "false") {
             return;
         }
         options.hot = true;
     },
-    liveReload: function liveReload() {
+    liveReload: function () {
         if (parsedResourceQuery["live-reload"] === "false") {
             return;
         }
         options.liveReload = true;
     },
-    invalid: function invalid() {
+    invalid: function () {
         log.info("App updated. Recompiling...");
         // Fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
         if (options.overlay) {
-            overlay.send({
-                type: "DISMISS"
-            });
+            overlay.send({ type: "DISMISS" });
         }
         sendMessage("Invalid");
     },
     /**
-     * @param {string} hash
+     * @param {string | undefined} hash
      */
     hash: function hash(_hash) {
+        if (!_hash) {
+            return;
+        }
         status.previousHash = status.currentHash;
         status.currentHash = _hash;
     },
@@ -217,7 +313,7 @@ var onSocketMessage = {
     /**
      * @param {boolean} value
      */
-    overlay: function overlay(value) {
+    overlay: function (value) {
         if (typeof document === "undefined") {
             return;
         }
@@ -227,7 +323,7 @@ var onSocketMessage = {
     /**
      * @param {number} value
      */
-    reconnect: function reconnect(value) {
+    reconnect: function (value) {
         if (parsedResourceQuery.reconnect === "false") {
             return;
         }
@@ -236,7 +332,7 @@ var onSocketMessage = {
     /**
      * @param {boolean} value
      */
-    progress: function progress(value) {
+    progress: function (value) {
         options.progress = value;
     },
     /**
@@ -244,54 +340,51 @@ var onSocketMessage = {
      */
     "progress-update": function progressUpdate(data) {
         if (options.progress) {
-            log.info(""
-                .concat(data.pluginName ? "[".concat(data.pluginName, "] ") : "")
-                .concat(data.percent, "% - ")
-                .concat(data.msg, "."));
+            log.info("".concat(data.pluginName ? "[".concat(data.pluginName, "] ") : "").concat(data.percent, "% - ").concat(data.msg, "."));
+        }
+        if (isProgressSupported()) {
+            if (typeof options.progress === "string") {
+                var progress = document.querySelector("wds-progress");
+                if (!progress) {
+                    defineProgressElement();
+                    progress = document.createElement("wds-progress");
+                    document.body.appendChild(progress);
+                }
+                progress.setAttribute("progress", data.percent);
+                progress.setAttribute("type", options.progress);
+            }
         }
         sendMessage("Progress", data);
     },
     "still-ok": function stillOk() {
         log.info("Nothing changed.");
         if (options.overlay) {
-            overlay.send({
-                type: "DISMISS"
-            });
+            overlay.send({ type: "DISMISS" });
         }
         sendMessage("StillOk");
     },
-    ok: function ok() {
+    ok: function () {
         sendMessage("Ok");
         if (options.overlay) {
-            overlay.send({
-                type: "DISMISS"
-            });
+            overlay.send({ type: "DISMISS" });
         }
         reloadApp(options, status);
     },
-    // TODO: remove in v5 in favor of 'static-changed'
-    /**
-     * @param {string} file
-     */
-    "content-changed": function contentChanged(file) {
-        log.info("".concat(file ? '"'.concat(file, '"') : "Content", " from static directory was changed. Reloading..."));
-        self.location.reload();
-    },
     /**
      * @param {string} file
      */
     "static-changed": function staticChanged(file) {
-        log.info("".concat(file ? '"'.concat(file, '"') : "Content", " from static directory was changed. Reloading..."));
+        log.info("".concat(file ? "\"".concat(file, "\"") : "Content", " from static directory was changed. Reloading..."));
         self.location.reload();
     },
     /**
      * @param {Error[]} warnings
      * @param {any} params
      */
-    warnings: function warnings(_warnings, params) {
+    warnings: function (warnings, params) {
         log.warn("Warnings while compiling.");
-        var printableWarnings = _warnings.map(function (error) {
-            var _formatProblem = formatProblem("warning", error), header = _formatProblem.header, body = _formatProblem.body;
+        var printableWarnings = warnings.map(function (error) {
+            var _a = formatProblem("warning", error), header = _a.header, body = _a.body;
             return "".concat(header, "\n").concat(stripAnsi(body));
         });
         sendMessage("Warnings", printableWarnings);
@@ -303,13 +396,13 @@ var onSocketMessage = {
             : options.overlay && options.overlay.warnings;
         if (overlayWarningsSetting) {
             var warningsToDisplay = typeof overlayWarningsSetting === "function"
-                ? _warnings.filter(overlayWarningsSetting)
-                : _warnings;
+                ? warnings.filter(overlayWarningsSetting)
+                : warnings;
             if (warningsToDisplay.length) {
                 overlay.send({
                     type: "BUILD_ERROR",
                     level: "warning",
-                    messages: _warnings
+                    messages: warnings,
                 });
             }
         }
@@ -321,10 +414,10 @@ var onSocketMessage = {
     /**
      * @param {Error[]} errors
      */
-    errors: function errors(_errors) {
+    errors: function (errors) {
         log.error("Errors while compiling. Reload prevented.");
-        var printableErrors = _errors.map(function (error) {
-            var _formatProblem2 = formatProblem("error", error), header = _formatProblem2.header, body = _formatProblem2.body;
+        var printableErrors = errors.map(function (error) {
+            var _a = formatProblem("error", error), header = _a.header, body = _a.body;
             return "".concat(header, "\n").concat(stripAnsi(body));
         });
         sendMessage("Errors", printableErrors);
@@ -336,13 +429,13 @@ var onSocketMessage = {
             : options.overlay && options.overlay.errors;
         if (overlayErrorsSettings) {
             var errorsToDisplay = typeof overlayErrorsSettings === "function"
-                ? _errors.filter(overlayErrorsSettings)
-                : _errors;
+                ? errors.filter(overlayErrorsSettings)
+                : errors;
             if (errorsToDisplay.length) {
                 overlay.send({
                     type: "BUILD_ERROR",
                     level: "error",
-                    messages: _errors
+                    messages: errors,
                 });
             }
         }
@@ -350,18 +443,137 @@ var onSocketMessage = {
     /**
      * @param {Error} error
      */
-    error: function error(_error) {
-        log.error(_error);
+    error: function (error) {
+        log.error(error);
     },
-    close: function close() {
+    close: function () {
         log.info("Disconnected!");
         if (options.overlay) {
-            overlay.send({
-                type: "DISMISS"
-            });
+            overlay.send({ type: "DISMISS" });
         }
         sendMessage("Close");
+    },
+};
+/**
+ * @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL
+ * @returns {string}
+ */
+var formatURL = function (objURL) {
+    var protocol = objURL.protocol || "";
+    if (protocol && protocol.substr(-1) !== ":") {
+        protocol += ":";
+    }
+    var auth = objURL.auth || "";
+    if (auth) {
+        auth = encodeURIComponent(auth);
+        auth = auth.replace(/%3A/i, ":");
+        auth += "@";
+    }
+    var host = "";
+    if (objURL.hostname) {
+        host =
+            auth +
+                (objURL.hostname.indexOf(":") === -1
+                    ? objURL.hostname
+                    : "[".concat(objURL.hostname, "]"));
+        if (objURL.port) {
+            host += ":".concat(objURL.port);
+        }
+    }
+    var pathname = objURL.pathname || "";
+    if (objURL.slashes) {
+        host = "//".concat(host || "");
+        if (pathname && pathname.charAt(0) !== "/") {
+            pathname = "/".concat(pathname);
+        }
+    }
+    else if (!host) {
+        host = "";
+    }
+    var search = objURL.search || "";
+    if (search && search.charAt(0) !== "?") {
+        search = "?".concat(search);
+    }
+    var hash = objURL.hash || "";
+    if (hash && hash.charAt(0) !== "#") {
+        hash = "#".concat(hash);
+    }
+    pathname = pathname.replace(/[?#]/g, 
+    /**
+     * @param {string} match
+     * @returns {string}
+     */
+    function (match) { return encodeURIComponent(match); });
+    search = search.replace("#", "%23");
+    return "".concat(protocol).concat(host).concat(pathname).concat(search).concat(hash);
+};
+/**
+ * @param {URL & { fromCurrentScript?: boolean }} parsedURL
+ * @returns {string}
+ */
+var createSocketURL = function (parsedURL) {
+    var hostname = parsedURL.hostname;
+    // Node.js module parses it as `::`
+    // `new URL(urlString, [baseURLString])` parses it as '[::]'
+    var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
+    // why do we need this check?
+    // hostname n/a for file protocol (example, when using electron, ionic)
+    // see: https://github.com/webpack/webpack-dev-server/pull/384
+    if (isInAddrAny &&
+        self.location.hostname &&
+        self.location.protocol.indexOf("http") === 0) {
+        hostname = self.location.hostname;
+    }
+    var socketURLProtocol = parsedURL.protocol || self.location.protocol;
+    // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
+    if (socketURLProtocol === "auto:" ||
+        (hostname && isInAddrAny && self.location.protocol === "https:")) {
+        socketURLProtocol = self.location.protocol;
+    }
+    socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, "ws");
+    var socketURLAuth = "";
+    // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+    // Parse authentication credentials in case we need them
+    if (parsedURL.username) {
+        socketURLAuth = parsedURL.username;
+        // Since HTTP basic authentication does not allow empty username,
+        // we only include password if the username is not empty.
+        if (parsedURL.password) {
+            // Result: <username>:<password>
+            socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
+        }
+    }
+    // In case the host is a raw IPv6 address, it can be enclosed in
+    // the brackets as the brackets are needed in the final URL string.
+    // Need to remove those as url.format blindly adds its own set of brackets
+    // if the host string contains colons. That would lead to non-working
+    // double brackets (e.g. [[::]]) host
+    //
+    // All of these web socket url params are optionally passed in through resourceQuery,
+    // so we need to fall back to the default if they are not provided
+    var socketURLHostname = (hostname ||
+        self.location.hostname ||
+        "localhost").replace(/^\[(.*)\]$/, "$1");
+    var socketURLPort = parsedURL.port;
+    if (!socketURLPort || socketURLPort === "0") {
+        socketURLPort = self.location.port;
+    }
+    // If path is provided it'll be passed in via the resourceQuery as a
+    // query param so it has to be parsed out of the querystring in order for the
+    // client to open the socket to the correct location.
+    var socketURLPathname = "/ws";
+    if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
+        socketURLPathname = parsedURL.pathname;
     }
+    return formatURL({
+        protocol: socketURLProtocol,
+        auth: socketURLAuth,
+        hostname: socketURLHostname,
+        port: socketURLPort,
+        pathname: socketURLPathname,
+        slashes: true,
+    });
 };
 var socketURL = createSocketURL(parsedResourceQuery);
 socket(socketURL, onSocketMessage, options.reconnect);
+export { getCurrentScriptSource, parseURL, createSocketURL };

package/client/utils/ansiHTML.js

@@ -10,7 +10,7 @@ var _defColors = {
     magenta: "ff00ff",
     cyan: "00ffee",
     lightgrey: "f0f0f0",
-    darkgrey: "888"
+    darkgrey: "888",
 };
 var _styles = {
     30: "black",
@@ -20,10 +20,10 @@ var _styles = {
     34: "blue",
     35: "magenta",
     36: "cyan",
-    37: "lightgrey"
+    37: "lightgrey",
 };
 var _colorMode = {
-    2: "rgb"
+    2: "rgb",
 };
 var _openTags = {
     1: "font-weight:bold",
@@ -53,12 +53,12 @@ var _openTags = {
             match.advance(4);
             return "background-color: rgb(".concat(r, ",").concat(g, ",").concat(b, ")");
         }
-    }
+    },
 };
 var _openTagToCloseTag = {
     3: "23",
     4: "24",
-    9: "29"
+    9: "29",
 };
 var _closeTags = {
     0: function (ansiCodes) {
@@ -80,7 +80,7 @@ var _closeTags = {
     },
     23: "</i>",
     24: "</u>",
-    29: "</del>" // reset delete
+    29: "</del>", // reset delete
 };
 for (var _i = 0, _a = [21, 22, 27, 28, 39, 49]; _i < _a.length; _i++) {
     var n = _a[_i];
@@ -115,7 +115,7 @@ export default function ansiHTML(text) {
         Object.defineProperty(match, "advance", {
             value: function (count) {
                 this.splice(0, count);
-            }
+            },
         });
         var rep = "";
         var seq;
@@ -127,7 +127,8 @@ export default function ansiHTML(text) {
         function applySeq(seq) {
             var other = _openTags[seq];
             if (other &&
-                (other = typeof other === "function" ? other(match) : other)) {
+                (other =
+                    typeof other === "function" ? other(match) : other)) {
                 // If reset signal is encountered, we have to reset everything.
                 var ret_1 = "";
                 if (seq === "0") {
@@ -213,10 +214,10 @@ ansiHTML.reset = function () {
 ansiHTML.tags = {};
 if (Object.defineProperty) {
     Object.defineProperty(ansiHTML.tags, "open", {
-        get: function () { return _openTags; }
+        get: function () { return _openTags; },
     });
     Object.defineProperty(ansiHTML.tags, "close", {
-        get: function () { return _closeTags; }
+        get: function () { return _closeTags; },
     });
 }
 else {

package/dist/middleware.js

@@ -8,6 +8,7 @@ const node_crypto_1 = __importDefault(require("node:crypto"));
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const mime_types_1 = __importDefault(require("mime-types"));
+// biome-ignore lint/suspicious/noExplicitAny: _
 function etag(buf) {
     const hash = node_crypto_1.default.createHash("sha256").update(buf).digest("hex");
     const etag = hash;

package/dist/server.d.ts

@@ -30,5 +30,6 @@ export declare class RspackDevServer extends WebpackDevServer {
     static version: string;
     constructor(options: DevServer, compiler: Compiler | MultiCompiler);
     initialize(): Promise<void>;
-    private addAdditionalEntries;
+    getClientEntry(): string;
+    getClientHotEntry(): string | undefined;
 }

package/dist/server.js

@@ -8,14 +8,13 @@ const core_1 = require("@rspack/core");
 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 getFreePort = async function getFreePort(port, host) {
     if (typeof port !== "undefined" && port !== null && port !== "auto") {
         return port;
     }
-    const pRetry = require("p-retry");
+    const { default: pRetry } = await import("p-retry");
     const getPort = require("webpack-dev-server/lib/getPort");
     const basePort = typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
         ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
@@ -26,12 +25,13 @@ const getFreePort = async function getFreePort(port, host) {
         ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
         : 3;
     return pRetry(() => getPort(basePort, host), {
-        retries: defaultPortRetry
+        retries: defaultPortRetry,
     });
 };
 webpack_dev_server_1.default.getFreePort = getFreePort;
 class RspackDevServer extends webpack_dev_server_1.default {
     constructor(options, compiler) {
+        // biome-ignore lint/suspicious/noExplicitAny: _
         super(options, compiler);
         // override
     }
@@ -48,26 +48,22 @@ class RspackDevServer extends webpack_dev_server_1.default {
                 }
                 compiler.options.resolve.alias = {
                     "ansi-html-community": require.resolve("@rspack/dev-server/client/utils/ansiHTML"),
-                    ...compiler.options.resolve.alias
+                    ...compiler.options.resolve.alias,
                 };
             }
         }
         // @ts-expect-error
         await super.initialize();
     }
-    // @ts-ignore
-    addAdditionalEntries(compiler) {
-        (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);
+    getClientEntry() {
+        return require.resolve("@rspack/dev-server/client/index");
+    }
+    getClientHotEntry() {
+        if (this.options.hot === "only") {
+            return require.resolve("@rspack/core/hot/only-dev-server");
         }
-        finally {
-            (0, alias_1.removeResolveAlias)("webpack-dev-server");
+        if (this.options.hot) {
+            return require.resolve("@rspack/core/hot/dev-server");
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspack/dev-server",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "Development server for rspack",
   "main": "./dist/index.js",
@@ -30,6 +30,9 @@
     "dist",
     "client"
   ],
+  "engines": {
+    "node": ">= 18.12.0"
+  },
   "homepage": "https://rspack.dev",
   "bugs": "https://github.com/web-infra-dev/rspack-dev-server/issues",
   "repository": {
@@ -38,53 +41,51 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
+    "@jest/reporters": "29.7.0",
     "@jest/test-sequencer": "^29.7.0",
-    "@rspack/core": "1.0.6",
+    "@rspack/core": "1.0.11",
     "@rspack/plugin-react-refresh": "1.0.0",
-    "@types/connect-history-api-fallback": "1.5.4",
     "@types/express": "4.17.21",
+    "@types/jest": "29.5.12",
     "@types/mime-types": "2.1.4",
     "@types/ws": "8.5.10",
+    "@hono/node-server": "^1.13.3",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",
+    "connect": "^3.7.0",
+    "execa": "9.3.0",
+    "fs-extra": "11.2.0",
     "graceful-fs": "4.2.10",
     "http-proxy": "^1.18.1",
+    "hono": "^4.6.8",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-node": "29.7.0",
     "jest-serializer-path": "^0.1.15",
+    "nano-staged": "^0.8.0",
     "prettier": "3.2.5",
     "puppeteer": "^23.2.2",
+    "react-refresh": "0.14.0",
     "require-from-string": "^2.0.2",
+    "semver": "7.6.3",
+    "simple-git-hooks": "^2.11.1",
     "sockjs-client": "^1.6.1",
     "style-loader": "^3.3.3",
     "supertest": "^6.1.3",
     "tcp-port-used": "^1.0.2",
+    "ts-jest": "29.1.2",
     "typescript": "5.0.2",
     "wait-for-expect": "^3.0.2",
-    "@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"
+    "webpack": "^5.94.0"
   },
   "dependencies": {
     "chokidar": "^3.6.0",
-    "connect-history-api-fallback": "^2.0.0",
     "express": "^4.19.2",
     "http-proxy-middleware": "^2.0.6",
     "mime-types": "^2.1.35",
-    "p-retry": "4.6.2",
+    "p-retry": "^6.2.0",
     "webpack-dev-middleware": "^7.4.2",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.2.0",
     "ws": "^8.16.0"
   },
   "peerDependencies": {

package/client/utils/reloadApp.js

@@ -1,60 +0,0 @@
-// @ts-nocheck
-import hotEmitter from "@rspack/core/hot/emitter.js";
-import { log } from "webpack-dev-server/client/utils/log.js";
-/** @typedef {import("../index").Options} Options
-/** @typedef {import("../index").Status} Status
-
-/**
- * @param {Options} options
- * @param {Status} status
- */
-function reloadApp(_ref, status) {
-    var hot = _ref.hot, liveReload = _ref.liveReload;
-    if (status.isUnloading) {
-        return;
-    }
-    var currentHash = status.currentHash, previousHash = status.previousHash;
-    var isInitial = currentHash.indexOf(/** @type {string} */ previousHash) >= 0;
-    if (isInitial) {
-        return;
-    }
-    /**
-     * @param {Window} rootWindow
-     * @param {number} intervalId
-     */
-    function applyReload(rootWindow, intervalId) {
-        clearInterval(intervalId);
-        log.info("App updated. Reloading...");
-        rootWindow.location.reload();
-    }
-    var search = self.location.search.toLowerCase();
-    var allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
-    var allowToLiveReload = search.indexOf("webpack-dev-server-live-reload=false") === -1;
-    if (hot && allowToHot) {
-        log.info("App hot update...");
-        hotEmitter.emit("webpackHotUpdate", status.currentHash);
-        if (typeof self !== "undefined" && self.window) {
-            // broadcast update to window
-            self.postMessage("webpackHotUpdate".concat(status.currentHash), "*");
-        }
-    }
-    // allow refreshing the page only if liveReload isn't disabled
-    else if (liveReload && allowToLiveReload) {
-        var rootWindow = self;
-        // use parent window for reload (in case we're in an iframe with no valid src)
-        var intervalId = self.setInterval(function () {
-            if (rootWindow.location.protocol !== "about:") {
-                // reload immediately if protocol is valid
-                applyReload(rootWindow, intervalId);
-            }
-            else {
-                rootWindow = rootWindow.parent;
-                if (rootWindow.parent === rootWindow) {
-                    // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
-                    applyReload(rootWindow, intervalId);
-                }
-            }
-        });
-    }
-}
-export default reloadApp;

package/dist/alias.d.ts

@@ -1,2 +0,0 @@
-export declare const addResolveAlias: (name: string, aliasMap: Record<string, string>) => void;
-export declare const removeResolveAlias: (name: string) => void;

package/dist/alias.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeResolveAlias = exports.addResolveAlias = void 0;
-const Module = require("node:module");
-const MODULE_MAP = {};
-const RESOLVER_MAP = {};
-const addResolveAlias = (name, aliasMap) => {
-    const modulePath = require.resolve(name);
-    if (modulePath in RESOLVER_MAP) {
-        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;
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    m.require.resolve = ((id, options) => aliasMap[id] ||
-        RESOLVER_MAP[modulePath].apply(m.require, [
-            id,
-            options,
-        ]));
-    MODULE_MAP[modulePath] = 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 (!(modulePath in RESOLVER_MAP)) {
-        return;
-    }
-    const m = require.cache[modulePath];
-    if (!m) {
-        throw new Error("Failed to resolve webpack-dev-server");
-    }
-    Module._resolveFilename = MODULE_MAP[modulePath];
-    m.require.resolve = RESOLVER_MAP[modulePath];
-    delete RESOLVER_MAP[modulePath];
-};
-exports.removeResolveAlias = removeResolveAlias;