@rspack/dev-server 2.0.0-beta.1 → 2.0.0-beta.2

package/client/progress.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The following code is modified based on
+ * https://github.com/webpack/webpack-dev-server
+ *
+ * MIT Licensed
+ * Author Tobias Koppers @sokra
+ * Copyright (c) JS Foundation and other contributors
+ * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
+ */
+export declare function isProgressSupported(): boolean;
+export declare function defineProgressElement(): void;

package/client/progress.js

@@ -1,130 +1,197 @@
-/**
- * The following code is modified based on
- * https://github.com/webpack/webpack-dev-server
- *
- * MIT Licensed
- * Author Tobias Koppers @sokra
- * Copyright (c) JS Foundation and other contributors
- * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-export function isProgressSupported() {
-    return ('customElements' in self && Boolean(HTMLElement.prototype.attachShadow));
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
 }
-export function defineProgressElement() {
-    if (customElements.get('wds-progress')) {
-        return;
-    }
-    var WebpackDevServerProgress = /** @class */ (function (_super) {
-        __extends(WebpackDevServerProgress, _super);
-        function WebpackDevServerProgress() {
-            var _this = _super.call(this) || this;
-            _this.attachShadow({ mode: 'open' });
-            _this.maxDashOffset = -219.99078369140625;
-            _this.animationTimer = undefined;
-            _this.type = 'circular';
-            _this.initialProgress = 0;
-            return _this;
-        }
-        WebpackDevServerProgress.prototype.reset = function () {
-            var _a;
+function isProgressSupported() {
+    return 'customElements' in self && Boolean(HTMLElement.prototype.attachShadow);
+}
+function defineProgressElement() {
+    if (customElements.get('wds-progress')) return;
+    class WebpackDevServerProgress extends HTMLElement {
+        reset() {
+            var _this_getAttribute;
             clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-            var typeAttr = (_a = this.getAttribute('type')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            this.type = typeAttr === 'circular' ? 'circular' : 'linear';
-            var innerHTML = this.type === 'circular'
-                ? WebpackDevServerProgress.circularTemplate()
-                : WebpackDevServerProgress.linearTemplate();
+            this.animationTimer = void 0;
+            const typeAttr = null == (_this_getAttribute = this.getAttribute('type')) ? void 0 : _this_getAttribute.toLowerCase();
+            this.type = 'circular' === typeAttr ? 'circular' : 'linear';
+            const innerHTML = 'circular' === this.type ? WebpackDevServerProgress.circularTemplate() : WebpackDevServerProgress.linearTemplate();
             this.shadowRoot.innerHTML = innerHTML;
-            var progressValue = this.getAttribute('progress');
+            const progressValue = this.getAttribute('progress');
             this.initialProgress = progressValue ? Number(progressValue) : 0;
             this.update(this.initialProgress);
-        };
-        WebpackDevServerProgress.circularTemplate = function () {
-            return "\n        <style>\n        :host {\n            width: 200px;\n            height: 200px;\n            position: fixed;\n            right: 5%;\n            top: 5%;\n            pointer-events: none;\n            transition: opacity .25s ease-in-out;\n            z-index: 2147483645;\n        }\n\n        circle {\n            fill: #282d35;\n        }\n\n        path {\n            fill: rgba(0, 0, 0, 0);\n            stroke: rgb(186, 223, 172);\n            stroke-dasharray: 219.99078369140625;\n            stroke-dashoffset: -219.99078369140625;\n            stroke-width: 10;\n            transform: rotate(90deg) translate(0px, -80px);\n        }\n\n        text {\n            font-family: 'Open Sans', sans-serif;\n            font-size: 18px;\n            fill: #ffffff;\n            dominant-baseline: middle;\n            text-anchor: middle;\n        }\n\n        tspan#percent-super {\n            fill: #bdc3c7;\n            font-size: 0.45em;\n            baseline-shift: 10%;\n        }\n\n        @keyframes fade {\n            0% { opacity: 1; transform: scale(1); }\n            100% { opacity: 0; transform: scale(0); }\n        }\n\n        .disappear {\n            animation: fade 0.3s;\n            animation-fill-mode: forwards;\n            animation-delay: 0.5s;\n        }\n\n        .hidden {\n            display: none;\n        }\n        </style>\n        <svg id=\"progress\" class=\"hidden noselect\" viewBox=\"0 0 80 80\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"35\"></circle>\n        <path d=\"M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0\"></path>\n        <text x=\"50%\" y=\"51%\">\n            <tspan id=\"percent-value\">0</tspan>\n            <tspan id=\"percent-super\">%</tspan>\n        </text>\n        </svg>\n      ";
-        };
-        WebpackDevServerProgress.linearTemplate = function () {
-            return "\n        <style>\n        :host {\n            position: fixed;\n            top: 0;\n            left: 0;\n            pointer-events: none;\n            height: 4px;\n            width: 100vw;\n            z-index: 2147483645;\n        }\n\n        #bar {\n            width: 0%;\n            height: 4px;\n            background-color: rgb(186, 223, 172);\n        }\n\n        @keyframes fade {\n            0% { opacity: 1; }\n            100% { opacity: 0; }\n        }\n\n        .disappear {\n            animation: fade 0.3s;\n            animation-fill-mode: forwards;\n            animation-delay: 0.5s;\n        }\n\n        .hidden {\n            display: none;\n        }\n        </style>\n        <div id=\"progress\"></div>\n        ";
-        };
-        WebpackDevServerProgress.prototype.connectedCallback = function () {
+        }
+        static circularTemplate() {
+            return `
+        <style>
+        :host {
+            width: 200px;
+            height: 200px;
+            position: fixed;
+            right: 5%;
+            top: 5%;
+            pointer-events: none;
+            transition: opacity .25s ease-in-out;
+            z-index: 2147483645;
+        }
+
+        circle {
+            fill: #282d35;
+        }
+
+        path {
+            fill: rgba(0, 0, 0, 0);
+            stroke: rgb(186, 223, 172);
+            stroke-dasharray: 219.99078369140625;
+            stroke-dashoffset: -219.99078369140625;
+            stroke-width: 10;
+            transform: rotate(90deg) translate(0px, -80px);
+        }
+
+        text {
+            font-family: 'Open Sans', sans-serif;
+            font-size: 18px;
+            fill: #ffffff;
+            dominant-baseline: middle;
+            text-anchor: middle;
+        }
+
+        tspan#percent-super {
+            fill: #bdc3c7;
+            font-size: 0.45em;
+            baseline-shift: 10%;
+        }
+
+        @keyframes fade {
+            0% { opacity: 1; transform: scale(1); }
+            100% { opacity: 0; transform: scale(0); }
+        }
+
+        .disappear {
+            animation: fade 0.3s;
+            animation-fill-mode: forwards;
+            animation-delay: 0.5s;
+        }
+
+        .hidden {
+            display: none;
+        }
+        </style>
+        <svg id="progress" class="hidden noselect" viewBox="0 0 80 80">
+        <circle cx="50%" cy="50%" r="35"></circle>
+        <path d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0"></path>
+        <text x="50%" y="51%">
+            <tspan id="percent-value">0</tspan>
+            <tspan id="percent-super">%</tspan>
+        </text>
+        </svg>
+      `;
+        }
+        static linearTemplate() {
+            return `
+        <style>
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            height: 4px;
+            width: 100vw;
+            z-index: 2147483645;
+        }
+
+        #bar {
+            width: 0%;
+            height: 4px;
+            background-color: rgb(186, 223, 172);
+        }
+
+        @keyframes fade {
+            0% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        .disappear {
+            animation: fade 0.3s;
+            animation-fill-mode: forwards;
+            animation-delay: 0.5s;
+        }
+
+        .hidden {
+            display: none;
+        }
+        </style>
+        <div id="progress"></div>
+        `;
+        }
+        connectedCallback() {
             this.reset();
-        };
-        Object.defineProperty(WebpackDevServerProgress, "observedAttributes", {
-            get: function () {
-                return ['progress', 'type'];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        WebpackDevServerProgress.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
-            if (name === 'progress') {
-                this.update(Number(newValue));
-            }
-            else if (name === 'type') {
-                this.reset();
-            }
-        };
-        WebpackDevServerProgress.prototype.update = function (percent) {
-            var shadowRoot = this.shadowRoot;
-            var element = shadowRoot.querySelector('#progress');
-            if (this.type === 'circular') {
-                var path = shadowRoot.querySelector('path');
-                var value = shadowRoot.querySelector('#percent-value');
-                var offset = ((100 - percent) / 100) * this.maxDashOffset;
+        }
+        static get observedAttributes() {
+            return [
+                'progress',
+                'type'
+            ];
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if ('progress' === name) this.update(Number(newValue));
+            else if ('type' === name) this.reset();
+        }
+        update(percent) {
+            const shadowRoot = this.shadowRoot;
+            const element = shadowRoot.querySelector('#progress');
+            if ('circular' === this.type) {
+                const path = shadowRoot.querySelector('path');
+                const value = shadowRoot.querySelector('#percent-value');
+                const offset = (100 - percent) / 100 * this.maxDashOffset;
                 path.style.strokeDashoffset = String(offset);
                 value.textContent = String(percent);
-            }
-            else {
-                element.style.width = "".concat(percent, "%");
-            }
-            if (percent >= 100) {
-                this.hide();
-            }
-            else if (percent > 0) {
-                this.show();
-            }
-        };
-        WebpackDevServerProgress.prototype.show = function () {
-            var shadowRoot = this.shadowRoot;
-            var element = shadowRoot.querySelector('#progress');
+            } else element.style.width = `${percent}%`;
+            if (percent >= 100) this.hide();
+            else if (percent > 0) this.show();
+        }
+        show() {
+            const shadowRoot = this.shadowRoot;
+            const element = shadowRoot.querySelector('#progress');
             element.classList.remove('hidden');
-        };
-        WebpackDevServerProgress.prototype.hide = function () {
-            var _this = this;
-            var shadowRoot = this.shadowRoot;
-            var element = shadowRoot.querySelector('#progress');
-            if (this.type === 'circular') {
+        }
+        hide() {
+            const shadowRoot = this.shadowRoot;
+            const element = shadowRoot.querySelector('#progress');
+            if ('circular' === this.type) {
                 element.classList.add('disappear');
-                element.addEventListener('animationend', function () {
+                element.addEventListener('animationend', ()=>{
                     element.classList.add('hidden');
-                    _this.update(0);
-                }, { once: true });
-            }
-            else if (this.type === 'linear') {
+                    this.update(0);
+                }, {
+                    once: true
+                });
+            } else if ('linear' === this.type) {
                 element.classList.add('disappear');
-                this.animationTimer = setTimeout(function () {
+                this.animationTimer = setTimeout(()=>{
                     element.classList.remove('disappear');
                     element.classList.add('hidden');
                     element.style.width = '0%';
-                    _this.animationTimer = undefined;
+                    this.animationTimer = void 0;
                 }, 800);
             }
-        };
-        return WebpackDevServerProgress;
-    }(HTMLElement));
+        }
+        constructor(){
+            super(), _define_property(this, "maxDashOffset", void 0), _define_property(this, "animationTimer", void 0), _define_property(this, "type", void 0), _define_property(this, "initialProgress", void 0);
+            this.attachShadow({
+                mode: 'open'
+            });
+            this.maxDashOffset = -219.99078369140625;
+            this.animationTimer = void 0;
+            this.type = 'circular';
+            this.initialProgress = 0;
+        }
+    }
     customElements.define('wds-progress', WebpackDevServerProgress);
 }
+export { defineProgressElement, isProgressSupported };

package/client/socket.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The following code is modified based on
+ * https://github.com/webpack/webpack-dev-server
+ *
+ * MIT Licensed
+ * Author Tobias Koppers @sokra
+ * Copyright (c) JS Foundation and other contributors
+ * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
+ */
+import type { CommunicationClient, EXPECTED_ANY } from './type.js';
+export declare let client: CommunicationClient | null;
+declare function socket(url: string, handlers: {
+    [handler: string]: (data?: EXPECTED_ANY, params?: EXPECTED_ANY) => EXPECTED_ANY;
+}, reconnect?: number): void;
+export default socket;

package/client/socket.js

@@ -1,60 +1,33 @@
-/**
- * The following code is modified based on
- * https://github.com/webpack/webpack-dev-server
- *
- * MIT Licensed
- * Author Tobias Koppers @sokra
- * Copyright (c) JS Foundation and other contributors
- * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
- */
-import WebSocketClient from './clients/WebSocketClient.js';
-import { log } from './utils/log.js';
-// this WebsocketClient is here as a default fallback, in case the client is not injected
-var Client = typeof __webpack_dev_server_client__ !== 'undefined'
-    ? typeof __webpack_dev_server_client__.default !== 'undefined'
-        ? __webpack_dev_server_client__.default
-        : __webpack_dev_server_client__
-    : WebSocketClient;
-var retries = 0;
-var maxRetries = 10;
-// Initialized client is exported so external consumers can utilize the same instance
-// It is mutable to enforce singleton
-export var client = null;
-var timeout;
+import WebSocketClient from "./clients/WebSocketClient.js";
+import { log } from "./utils/log.js";
+const Client = "u" > typeof __rspack_dev_server_client__ ? void 0 !== __rspack_dev_server_client__.default ? __rspack_dev_server_client__.default : __rspack_dev_server_client__ : WebSocketClient;
+let retries = 0;
+let maxRetries = 10;
+let client = null;
+let timeout;
 function socket(url, handlers, reconnect) {
     client = new Client(url);
-    client.onOpen(function () {
+    client.onOpen(()=>{
         retries = 0;
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-        if (typeof reconnect !== 'undefined') {
-            maxRetries = reconnect;
-        }
+        if (timeout) clearTimeout(timeout);
+        if (void 0 !== reconnect) maxRetries = reconnect;
     });
-    client.onClose(function () {
-        if (retries === 0) {
-            handlers.close();
-        }
-        // Try to reconnect.
+    client.onClose(()=>{
+        if (0 === retries) handlers.close();
         client = null;
-        // After 10 retries stop trying, to prevent logspam.
         if (retries < maxRetries) {
-            // Exponentially increase timeout to reconnect.
-            // Respectfully copied from the package `got`.
-            var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
+            const retryInMs = 1000 * Math.pow(2, retries) + 100 * Math.random();
             retries += 1;
             log.info('Trying to reconnect...');
-            timeout = setTimeout(function () {
+            timeout = setTimeout(()=>{
                 socket(url, handlers, reconnect);
             }, retryInMs);
         }
     });
-    client.onMessage(function (data) {
-        var message = JSON.parse(data);
-        if (handlers[message.type]) {
-            handlers[message.type](message.data, message.params);
-        }
+    client.onMessage((data)=>{
+        const message = JSON.parse(data);
+        if (handlers[message.type]) handlers[message.type](message.data, message.params);
     });
 }
-export default socket;
+const client_src_socket = socket;
+export { client, client_src_socket as default };

package/client/utils/ansiHTML.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The following code is modified based on
+ * https://github.com/webpack/webpack-dev-server
+ *
+ * MIT Licensed
+ * Author Tobias Koppers @sokra
+ * Copyright (c) JS Foundation and other contributors
+ * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
+ */
+interface AnsiHtmlTags {
+    open: typeof _openTags;
+    close: typeof _closeTags;
+}
+type Option<T> = T | null | undefined;
+type Match = {
+    advance: (n: number) => void;
+} & Array<string>;
+declare const _defColors: Record<string, string | Array<string>>;
+declare const _openTags: Record<string, string | ((m: Match) => Option<string>)>;
+declare const _closeTags: Record<string, string | ((ansiCodes: Option<Array<string>>) => string)>;
+/**
+ * Converts text with ANSI color codes to HTML markup.
+ */
+declare function ansiHTML(text: string): string;
+declare namespace ansiHTML {
+    var setColors: (colors: typeof _defColors) => void;
+    var reset: () => void;
+    var tags: AnsiHtmlTags;
+}
+export default ansiHTML;