@rspack/dev-server 1.1.4 → 1.2.0

package/client/overlay.js

@@ -0,0 +1,503 @@
+/**
+ * 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 __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);
+};
+// The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
+// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
+import ansiHTML from './utils/ansiHTML';
+var getCodePoint = !!String.prototype.codePointAt
+    ? function (input, position) {
+        return input.codePointAt(position);
+    }
+    : function (input, position) {
+        return (input.charCodeAt(position) - 0xd800) * 0x400 +
+            input.charCodeAt(position + 1) -
+            0xdc00 +
+            0x10000;
+    };
+var replaceUsingRegExp = function (macroText, macroRegExp, macroReplacer) {
+    macroRegExp.lastIndex = 0;
+    var replaceMatch = macroRegExp.exec(macroText);
+    var replaceResult;
+    if (replaceMatch) {
+        replaceResult = '';
+        var replaceLastIndex = 0;
+        do {
+            if (replaceLastIndex !== replaceMatch.index) {
+                replaceResult += macroText.slice(replaceLastIndex, replaceMatch.index);
+            }
+            var replaceInput = replaceMatch[0];
+            replaceResult += macroReplacer(replaceInput);
+            replaceLastIndex = replaceMatch.index + replaceInput.length;
+        } while ((replaceMatch = macroRegExp.exec(macroText)));
+        if (replaceLastIndex !== macroText.length) {
+            replaceResult += macroText.slice(replaceLastIndex);
+        }
+    }
+    else {
+        replaceResult = macroText;
+    }
+    return replaceResult;
+};
+var references = {
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&apos;',
+    '&': '&amp;',
+};
+function encode(text) {
+    if (!text) {
+        return '';
+    }
+    return replaceUsingRegExp(text, /[<>'"&]/g, function (input) {
+        var result = references[input];
+        if (!result) {
+            var code = input.length > 1 ? getCodePoint(input, 0) : input.charCodeAt(0);
+            result = "&#".concat(code, ";");
+        }
+        return result;
+    });
+}
+/**
+ * A simplified `createMachine` from `@xstate/fsm` with the following differences:
+ * - the returned machine is technically a "service". No `interpret(machine).start()` is needed.
+ * - the state definition only support `on` and target must be declared with { target: 'nextState', actions: [] } explicitly.
+ * - event passed to `send` must be an object with `type` property.
+ * - actions implementation will be [assign action](https://xstate.js.org/docs/guides/context.html#assign-action) if you return any value.
+ * Do not return anything if you just want to invoke side effect.
+ *
+ * The goal of this custom function is to avoid installing the entire `'xstate/fsm'` package, while enabling modeling using
+ * state machine. You can copy the first parameter into the editor at https://stately.ai/viz to visualize the state machine.
+ */
+function createMachine(_a, _b) {
+    var states = _a.states, context = _a.context, initial = _a.initial;
+    var actions = _b.actions;
+    var currentState = initial;
+    var currentContext = context;
+    return {
+        send: function (event) {
+            var currentStateOn = states[currentState].on;
+            var transitionConfig = currentStateOn && currentStateOn[event.type];
+            if (transitionConfig) {
+                currentState = transitionConfig.target;
+                if (transitionConfig.actions) {
+                    transitionConfig.actions.forEach(function (actName) {
+                        var actionImpl = actions[actName];
+                        var nextContextValue = actionImpl && actionImpl(currentContext, event);
+                        if (nextContextValue) {
+                            currentContext = __assign(__assign({}, currentContext), nextContextValue);
+                        }
+                    });
+                }
+            }
+        },
+    };
+}
+var createOverlayMachine = function (options) {
+    var hideOverlay = options.hideOverlay, showOverlay = options.showOverlay;
+    return createMachine({
+        initial: 'hidden',
+        context: {
+            level: 'error',
+            messages: [],
+            messageSource: 'build',
+        },
+        states: {
+            hidden: {
+                on: {
+                    BUILD_ERROR: {
+                        target: 'displayBuildError',
+                        actions: ['setMessages', 'showOverlay'],
+                    },
+                    RUNTIME_ERROR: {
+                        target: 'displayRuntimeError',
+                        actions: ['setMessages', 'showOverlay'],
+                    },
+                },
+            },
+            displayBuildError: {
+                on: {
+                    DISMISS: {
+                        target: 'hidden',
+                        actions: ['dismissMessages', 'hideOverlay'],
+                    },
+                    BUILD_ERROR: {
+                        target: 'displayBuildError',
+                        actions: ['appendMessages', 'showOverlay'],
+                    },
+                },
+            },
+            displayRuntimeError: {
+                on: {
+                    DISMISS: {
+                        target: 'hidden',
+                        actions: ['dismissMessages', 'hideOverlay'],
+                    },
+                    RUNTIME_ERROR: {
+                        target: 'displayRuntimeError',
+                        actions: ['appendMessages', 'showOverlay'],
+                    },
+                    BUILD_ERROR: {
+                        target: 'displayBuildError',
+                        actions: ['setMessages', 'showOverlay'],
+                    },
+                },
+            },
+        },
+    }, {
+        actions: {
+            dismissMessages: function () {
+                return {
+                    messages: [],
+                    level: 'error',
+                    messageSource: 'build',
+                };
+            },
+            appendMessages: function (context, event) {
+                return {
+                    messages: context.messages.concat(event.messages),
+                    level: event.level || context.level,
+                    messageSource: event.type === 'RUNTIME_ERROR' ? 'runtime' : 'build',
+                };
+            },
+            setMessages: function (context, event) {
+                return {
+                    messages: event.messages,
+                    level: event.level || context.level,
+                    messageSource: event.type === 'RUNTIME_ERROR' ? 'runtime' : 'build',
+                };
+            },
+            hideOverlay: hideOverlay,
+            showOverlay: showOverlay,
+        },
+    });
+};
+var parseErrorToStacks = function (error) {
+    if (!error || !(error instanceof Error)) {
+        throw new Error('parseErrorToStacks expects Error object');
+    }
+    if (typeof error.stack === 'string') {
+        return error.stack
+            .split('\n')
+            .filter(function (stack) { return stack !== "Error: ".concat(error.message); });
+    }
+};
+var listenToRuntimeError = function (callback) {
+    window.addEventListener('error', callback);
+    return function cleanup() {
+        window.removeEventListener('error', callback);
+    };
+};
+var listenToUnhandledRejection = function (callback) {
+    window.addEventListener('unhandledrejection', callback);
+    return function cleanup() {
+        window.removeEventListener('unhandledrejection', callback);
+    };
+};
+// Styles are inspired by `react-error-overlay`
+var msgStyles = {
+    error: {
+        backgroundColor: 'rgba(206, 17, 38, 0.1)',
+        color: '#fccfcf',
+    },
+    warning: {
+        backgroundColor: 'rgba(251, 245, 180, 0.1)',
+        color: '#fbf5b4',
+    },
+};
+var iframeStyle = {
+    position: 'fixed',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+    width: '100vw',
+    height: '100vh',
+    border: 'none',
+    'z-index': 9999999999,
+};
+var containerStyle = {
+    position: 'fixed',
+    boxSizing: 'border-box',
+    left: '0px',
+    top: '0px',
+    right: '0px',
+    bottom: '0px',
+    width: '100vw',
+    height: '100vh',
+    fontSize: 'large',
+    padding: '2rem 2rem 4rem 2rem',
+    lineHeight: '1.2',
+    whiteSpace: 'pre-wrap',
+    overflow: 'auto',
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    color: 'white',
+};
+var headerStyle = {
+    color: '#e83b46',
+    fontSize: '2em',
+    whiteSpace: 'pre-wrap',
+    fontFamily: 'sans-serif',
+    margin: '0 2rem 2rem 0',
+    flex: '0 0 auto',
+    maxHeight: '50%',
+    overflow: 'auto',
+};
+var dismissButtonStyle = {
+    color: '#ffffff',
+    lineHeight: '1rem',
+    fontSize: '1.5rem',
+    padding: '1rem',
+    cursor: 'pointer',
+    position: 'absolute',
+    right: '0px',
+    top: '0px',
+    backgroundColor: 'transparent',
+    border: 'none',
+};
+var msgTypeStyle = {
+    color: '#e83b46',
+    fontSize: '1.2em',
+    marginBottom: '1rem',
+    fontFamily: 'sans-serif',
+};
+var msgTextStyle = {
+    lineHeight: '1.5',
+    fontSize: '1rem',
+    fontFamily: 'Menlo, Consolas, monospace',
+};
+// ANSI HTML
+var colors = {
+    reset: ['transparent', 'transparent'],
+    black: '181818',
+    red: 'E36049',
+    green: 'B3CB74',
+    yellow: 'FFD080',
+    blue: '7CAFC2',
+    magenta: '7FACCA',
+    cyan: 'C3C2EF',
+    lightgrey: 'EBE7E3',
+    darkgrey: '6D7891',
+};
+ansiHTML.setColors(colors);
+var formatProblem = function (type, item) {
+    var header = type === 'warning' ? 'WARNING' : 'ERROR';
+    var body = '';
+    if (typeof item === 'string') {
+        body += item;
+    }
+    else {
+        var file = item.file || '';
+        var moduleName = item.moduleName
+            ? item.moduleName.indexOf('!') !== -1
+                ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ''), " (").concat(item.moduleName, ")")
+                : "".concat(item.moduleName)
+            : '';
+        var loc = item.loc;
+        header += "".concat(moduleName || file
+            ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : '') : file).concat(loc ? " ".concat(loc) : '')
+            : '');
+        body += item.message || '';
+    }
+    if (typeof item !== 'string' && Array.isArray(item.stack)) {
+        item.stack.forEach(function (stack) {
+            if (typeof stack === 'string') {
+                body += "\r\n".concat(stack);
+            }
+        });
+    }
+    return { header: header, body: body };
+};
+var createOverlay = function (options) {
+    var iframeContainerElement;
+    var containerElement;
+    var headerElement;
+    var onLoadQueue = [];
+    var overlayTrustedTypesPolicy;
+    function applyStyle(element, style) {
+        Object.keys(style).forEach(function (prop) {
+            element.style[prop] =
+                style[prop];
+        });
+    }
+    function createContainer(trustedTypesPolicyName) {
+        // Enable Trusted Types if they are available in the current browser.
+        if (window.trustedTypes) {
+            overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || 'webpack-dev-server#overlay', {
+                createHTML: function (value) { return value; },
+            });
+        }
+        iframeContainerElement = document.createElement('iframe');
+        iframeContainerElement.id = 'webpack-dev-server-client-overlay';
+        iframeContainerElement.src = 'about:blank';
+        applyStyle(iframeContainerElement, iframeStyle);
+        iframeContainerElement.onload = function () {
+            var contentElement = (iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.contentDocument).createElement('div');
+            containerElement = (iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.contentDocument).createElement('div');
+            contentElement.id = 'webpack-dev-server-client-overlay-div';
+            applyStyle(contentElement, containerStyle);
+            headerElement = document.createElement('div');
+            headerElement.innerText = 'Compiled with problems:';
+            applyStyle(headerElement, headerStyle);
+            var closeButtonElement = document.createElement('button');
+            applyStyle(closeButtonElement, dismissButtonStyle);
+            closeButtonElement.innerText = '×';
+            closeButtonElement.ariaLabel = 'Dismiss';
+            closeButtonElement.addEventListener('click', function () {
+                // eslint-disable-next-line no-use-before-define
+                overlayService.send({ type: 'DISMISS' });
+            });
+            contentElement.appendChild(headerElement);
+            contentElement.appendChild(closeButtonElement);
+            contentElement.appendChild(containerElement);
+            (iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.contentDocument).body.appendChild(contentElement);
+            onLoadQueue.forEach(function (onLoad) {
+                onLoad(contentElement);
+            });
+            onLoadQueue = [];
+            iframeContainerElement.onload = null;
+        };
+        document.body.appendChild(iframeContainerElement);
+    }
+    function ensureOverlayExists(callback, trustedTypesPolicyName) {
+        if (containerElement) {
+            containerElement.innerHTML = overlayTrustedTypesPolicy
+                ? overlayTrustedTypesPolicy.createHTML('')
+                : '';
+            // Everything is ready, call the callback right away.
+            callback(containerElement);
+            return;
+        }
+        onLoadQueue.push(callback);
+        if (iframeContainerElement) {
+            return;
+        }
+        createContainer(trustedTypesPolicyName);
+    }
+    // Successful compilation.
+    function hide() {
+        if (!iframeContainerElement) {
+            return;
+        }
+        // Clean up and reset internal state.
+        document.body.removeChild(iframeContainerElement);
+        iframeContainerElement = null;
+        containerElement = null;
+    }
+    // Compilation with errors (e.g. syntax error or missing modules).
+    function show(type, messages, trustedTypesPolicyName, messageSource) {
+        ensureOverlayExists(function () {
+            headerElement.innerText =
+                messageSource === 'runtime'
+                    ? 'Uncaught runtime errors:'
+                    : 'Compiled with problems:';
+            messages.forEach(function (message) {
+                var entryElement = document.createElement('div');
+                var msgStyle = type === 'warning' ? msgStyles.warning : msgStyles.error;
+                applyStyle(entryElement, __assign(__assign({}, msgStyle), { padding: '1rem 1rem 1.5rem 1rem' }));
+                var typeElement = document.createElement('div');
+                var _a = formatProblem(type, message), header = _a.header, body = _a.body;
+                typeElement.innerText = header;
+                applyStyle(typeElement, msgTypeStyle);
+                if (typeof message !== 'string' && message.moduleIdentifier) {
+                    applyStyle(typeElement, { cursor: 'pointer' });
+                    // element.dataset not supported in IE
+                    typeElement.setAttribute('data-can-open', 'true');
+                    typeElement.addEventListener('click', function () {
+                        fetch("/webpack-dev-server/open-editor?fileName=".concat(message.moduleIdentifier));
+                    });
+                }
+                // Make it look similar to our terminal.
+                var text = ansiHTML(encode(body));
+                var messageTextNode = document.createElement('div');
+                applyStyle(messageTextNode, msgTextStyle);
+                messageTextNode.innerHTML = overlayTrustedTypesPolicy
+                    ? overlayTrustedTypesPolicy.createHTML(text)
+                    : text;
+                entryElement.appendChild(typeElement);
+                entryElement.appendChild(messageTextNode);
+                containerElement === null || containerElement === void 0 ? void 0 : containerElement.appendChild(entryElement);
+            });
+        }, trustedTypesPolicyName);
+    }
+    var handleEscapeKey;
+    var hideOverlayWithEscCleanup = function () {
+        window.removeEventListener('keydown', handleEscapeKey);
+        hide();
+    };
+    var overlayService = createOverlayMachine({
+        showOverlay: function (_a) {
+            var _b = _a.level, level = _b === void 0 ? 'error' : _b, messages = _a.messages, messageSource = _a.messageSource;
+            return show(level, messages, options.trustedTypesPolicyName, messageSource);
+        },
+        hideOverlay: hideOverlayWithEscCleanup,
+    });
+    /**
+     * ESC key press to dismiss the overlay.
+     */
+    handleEscapeKey = function (event) {
+        if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
+            overlayService.send({ type: 'DISMISS' });
+        }
+    };
+    window.addEventListener('keydown', handleEscapeKey);
+    if (options.catchRuntimeError) {
+        var handleError_1 = function (error, fallbackMessage) {
+            var errorObject = error instanceof Error
+                ? error
+                : // @ts-expect-error error options
+                    new Error(error || fallbackMessage, { cause: error });
+            var shouldDisplay = typeof options.catchRuntimeError === 'function'
+                ? options.catchRuntimeError(errorObject)
+                : true;
+            if (shouldDisplay) {
+                overlayService.send({
+                    type: 'RUNTIME_ERROR',
+                    messages: [
+                        {
+                            message: errorObject.message,
+                            stack: parseErrorToStacks(errorObject),
+                        },
+                    ],
+                });
+            }
+        };
+        listenToRuntimeError(function (errorEvent) {
+            // error property may be empty in older browser like IE
+            var error = errorEvent.error, message = errorEvent.message;
+            if (!error && !message) {
+                return;
+            }
+            // if error stack indicates a React error boundary caught the error, do not show overlay.
+            if (error &&
+                error.stack &&
+                error.stack.includes('invokeGuardedCallbackDev')) {
+                return;
+            }
+            handleError_1(error, message);
+        });
+        listenToUnhandledRejection(function (promiseRejectionEvent) {
+            var reason = promiseRejectionEvent.reason;
+            handleError_1(reason, 'Unknown promise rejection reason');
+        });
+    }
+    return overlayService;
+};
+export { createOverlay, formatProblem };

package/client/progress.js

@@ -0,0 +1,130 @@
+/**
+ * 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));
+}
+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;
+            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.shadowRoot.innerHTML = innerHTML;
+            var 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 () {
+            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;
+                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');
+            element.classList.remove('hidden');
+        };
+        WebpackDevServerProgress.prototype.hide = function () {
+            var _this = this;
+            var shadowRoot = this.shadowRoot;
+            var element = shadowRoot.querySelector('#progress');
+            if (this.type === 'circular') {
+                element.classList.add('disappear');
+                element.addEventListener('animationend', function () {
+                    element.classList.add('hidden');
+                    _this.update(0);
+                }, { once: true });
+            }
+            else if (this.type === 'linear') {
+                element.classList.add('disappear');
+                this.animationTimer = setTimeout(function () {
+                    element.classList.remove('disappear');
+                    element.classList.add('hidden');
+                    element.style.width = '0%';
+                    _this.animationTimer = undefined;
+                }, 800);
+            }
+        };
+        return WebpackDevServerProgress;
+    }(HTMLElement));
+    customElements.define('wds-progress', WebpackDevServerProgress);
+}