webpack-dev-server 5.2.2 → 5.2.3

package/client/overlay.js

@@ -9,20 +9,25 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import ansiHTML from "ansi-html-community";
 
+/** @typedef {import("./index").EXPECTED_ANY} EXPECTED_ANY */
+
 /**
- * @type {(input: string, position: number) => string}
+ * @type {(input: string, position: number) => number | undefined}
  */
-var getCodePoint = String.prototype.codePointAt ? function (input, position) {
+// @ts-expect-error
+var getCodePoint = String.prototype.codePointAt ?
+// @ts-expect-error
+function (input, position) {
   return input.codePointAt(position);
 } : function (input, position) {
   return (input.charCodeAt(position) - 0xd800) * 0x400 + input.charCodeAt(position + 1) - 0xdc00 + 0x10000;
 };
 
 /**
- * @param {string} macroText
- * @param {RegExp} macroRegExp
- * @param {(input: string) => string} macroReplacer
- * @returns {string}
+ * @param {string} macroText macro text
+ * @param {RegExp} macroRegExp macro reg exp
+ * @param {(input: string) => string} macroReplacer macro replacer
+ * @returns {string} result
  */
 var replaceUsingRegExp = function replaceUsingRegExp(macroText, macroRegExp, macroReplacer) {
   macroRegExp.lastIndex = 0;
@@ -33,15 +38,14 @@ var replaceUsingRegExp = function replaceUsingRegExp(macroText, macroRegExp, mac
     var replaceLastIndex = 0;
     do {
       if (replaceLastIndex !== replaceMatch.index) {
-        replaceResult += macroText.substring(replaceLastIndex, replaceMatch.index);
+        replaceResult += macroText.slice(replaceLastIndex, replaceMatch.index);
       }
       var replaceInput = replaceMatch[0];
       replaceResult += macroReplacer(replaceInput);
       replaceLastIndex = replaceMatch.index + replaceInput.length;
-      // eslint-disable-next-line no-cond-assign
     } while (replaceMatch = macroRegExp.exec(macroText));
     if (replaceLastIndex !== macroText.length) {
-      replaceResult += macroText.substring(replaceLastIndex);
+      replaceResult += macroText.slice(replaceLastIndex);
     }
   } else {
     replaceResult = macroText;
@@ -58,14 +62,14 @@ var references = {
 
 /**
  * @param {string} text text
- * @returns {string}
+ * @returns {string} encoded text
  */
 function encode(text) {
   if (!text) {
     return "";
   }
   return replaceUsingRegExp(text, /[<>'"&]/g, function (input) {
-    var result = references[input];
+    var result = references[(/** @type {keyof typeof references} */input)];
     if (!result) {
       var code = input.length > 1 ? getCodePoint(input, 0) : input.charCodeAt(0);
       result = "&#".concat(code, ";");
@@ -75,36 +79,43 @@ function encode(text) {
 }
 
 /**
- * @typedef {Object} StateDefinitions
- * @property {{[event: string]: { target: string; actions?: Array<string> }}} [on]
+ * @typedef {object} Context
+ * @property {'warning' | 'error'} level level
+ * @property {(string  | Message)[]} messages messages
+ * @property {'build' | 'runtime'} messageSource message source
  */
 
+/** @typedef {{ type: string } & Record<string, EXPECTED_ANY>} Event */
+
 /**
- * @typedef {Object} Options
- * @property {{[state: string]: StateDefinitions}} states
- * @property {object} context;
- * @property {string} initial
+ * @typedef {object} Options
+ * @property {{ [state: string]: { on: Record<string, { target: string; actions?: Array<string> }> } }} states states
+ * @property {Context} context context
+ * @property {string} initial initial
  */
 
 /**
- * @typedef {Object} Implementation
- * @property {{[actionName: string]: (ctx: object, event: any) => object}} actions
+ * @typedef {object} Implementation
+ * @property {{ [actionName: string]: (ctx: Context, event: Event) => Context | void }} actions actions
+ */
+
+/**
+ * @typedef {{ send: (event: Event) => void }} StateMachine
  */
 
 /**
  * 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 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.
- *
- * @param {Options} options
- * @param {Implementation} implementation
+ * @param {Options} options options
+ * @param {Implementation} implementation implementation
+ * @returns {StateMachine} state machine
  */
 function createMachine(_ref, _ref2) {
   var states = _ref.states,
@@ -134,20 +145,21 @@ function createMachine(_ref, _ref2) {
 }
 
 /**
- * @typedef {Object} ShowOverlayData
- * @property {'warning' | 'error'} level
- * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
- * @property {'build' | 'runtime'} messageSource
+ * @typedef {object} ShowOverlayData
+ * @property {'warning' | 'error'} level level
+ * @property {(string  | Message)[]} messages messages
+ * @property {'build' | 'runtime'} messageSource message source
  */
 
 /**
- * @typedef {Object} CreateOverlayMachineOptions
- * @property {(data: ShowOverlayData) => void} showOverlay
- * @property {() => void} hideOverlay
+ * @typedef {object} CreateOverlayMachineOptions
+ * @property {(data: ShowOverlayData) => void} showOverlay show overlay
+ * @property {() => void} hideOverlay hide overlay
  */
 
 /**
- * @param {CreateOverlayMachineOptions} options
+ * @param {CreateOverlayMachineOptions} options options
+ * @returns {StateMachine} state machine
  */
 var createOverlayMachine = function createOverlayMachine(options) {
   var hideOverlay = options.hideOverlay,
@@ -231,8 +243,8 @@ var createOverlayMachine = function createOverlayMachine(options) {
 };
 
 /**
- *
- * @param {Error} error
+ * @param {Error} error error
+ * @returns {undefined | string[]} stack
  */
 var parseErrorToStacks = function parseErrorToStacks(error) {
   if (!error || !(error instanceof Error)) {
@@ -252,7 +264,8 @@ var parseErrorToStacks = function parseErrorToStacks(error) {
  */
 
 /**
- * @param {ErrorCallback} callback
+ * @param {ErrorCallback} callback callback
+ * @returns {() => void} cleanup
  */
 var listenToRuntimeError = function listenToRuntimeError(callback) {
   window.addEventListener("error", callback);
@@ -268,7 +281,8 @@ var listenToRuntimeError = function listenToRuntimeError(callback) {
  */
 
 /**
- * @param {UnhandledRejectionCallback} callback
+ * @param {UnhandledRejectionCallback} callback callback
+ * @returns {() => void} cleanup
  */
 var listenToUnhandledRejection = function listenToUnhandledRejection(callback) {
   window.addEventListener("unhandledrejection", callback);
@@ -291,10 +305,10 @@ var msgStyles = {
 };
 var iframeStyle = {
   position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
+  top: "0px",
+  left: "0px",
+  right: "0px",
+  bottom: "0px",
   width: "100vw",
   height: "100vh",
   border: "none",
@@ -303,10 +317,10 @@ var iframeStyle = {
 var containerStyle = {
   position: "fixed",
   boxSizing: "border-box",
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
+  left: "0px",
+  top: "0px",
+  right: "0px",
+  bottom: "0px",
   width: "100vw",
   height: "100vh",
   fontSize: "large",
@@ -334,8 +348,8 @@ var dismissButtonStyle = {
   padding: "1rem",
   cursor: "pointer",
   position: "absolute",
-  right: 0,
-  top: 0,
+  right: "0px",
+  top: "0px",
   backgroundColor: "transparent",
   border: "none"
 };
@@ -367,10 +381,12 @@ var colors = {
 };
 ansiHTML.setColors(colors);
 
+/** @typedef {Error & { file?: string, moduleName?: string, moduleIdentifier?: string, loc?: string, message?: string; stack?: string | string[] }} Message */
+
 /**
- * @param {string} type
- * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string; stack?: string[] }} item
- * @returns {{ header: string, body: string }}
+ * @param {string} type type
+ * @param {string | Message} item item
+ * @returns {{ header: string, body: string }} formatted problem
  */
 var formatProblem = function formatProblem(type, item) {
   var header = type === "warning" ? "WARNING" : "ERROR";
@@ -379,13 +395,12 @@ var formatProblem = function formatProblem(type, item) {
     body += item;
   } else {
     var file = item.file || "";
-    // eslint-disable-next-line no-nested-ternary
     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 (Array.isArray(item.stack)) {
+  if (typeof item !== "string" && Array.isArray(item.stack)) {
     item.stack.forEach(function (stack) {
       if (typeof stack === "string") {
         body += "\r\n".concat(stack);
@@ -399,14 +414,14 @@ var formatProblem = function formatProblem(type, item) {
 };
 
 /**
- * @typedef {Object} CreateOverlayOptions
- * @property {string | null} trustedTypesPolicyName
- * @property {boolean | (error: Error) => void} [catchRuntimeError]
+ * @typedef {object} CreateOverlayOptions
+ * @property {(false | string)=} trustedTypesPolicyName trusted types policy name
+ * @property {(boolean | ((error: Error) => void))=} catchRuntimeError runtime error catcher
  */
 
 /**
- *
- * @param {CreateOverlayOptions} options
+ * @param {CreateOverlayOptions} options options
+ * @returns {StateMachine} overlay
  */
 var createOverlay = function createOverlay(options) {
   /** @type {HTMLIFrameElement | null | undefined} */
@@ -417,22 +432,24 @@ var createOverlay = function createOverlay(options) {
   var headerElement;
   /** @type {Array<(element: HTMLDivElement) => void>} */
   var onLoadQueue = [];
-  /** @type {TrustedTypePolicy | undefined} */
+  /** @type {Omit<TrustedTypePolicy, "createScript" | "createScriptURL"> | undefined} */
   var overlayTrustedTypesPolicy;
 
+  /** @typedef {Extract<keyof CSSStyleDeclaration, "string">} CSSStyleDeclarationKeys */
+
   /**
-   *
-   * @param {HTMLElement} element
-   * @param {CSSStyleDeclaration} style
+   * @param {HTMLElement} element element
+   * @param {Partial<CSSStyleDeclaration>} style style
    */
   function applyStyle(element, style) {
     Object.keys(style).forEach(function (prop) {
-      element.style[prop] = style[prop];
+      element.style[(/** @type {CSSStyleDeclarationKeys} */prop)] = /** @type {string} */
+      style[(/** @type {CSSStyleDeclarationKeys} */prop)];
     });
   }
 
   /**
-   * @param {string | null} trustedTypesPolicyName
+   * @param {string | false | undefined} trustedTypesPolicyName trusted types police name
    */
   function createContainer(trustedTypesPolicyName) {
     // Enable Trusted Types if they are available in the current browser.
@@ -488,11 +505,12 @@ var createOverlay = function createOverlay(options) {
   }
 
   /**
-   * @param {(element: HTMLDivElement) => void} callback
-   * @param {string | null} trustedTypesPolicyName
+   * @param {(element: HTMLDivElement) => void} callback callback
+   * @param {string | false | undefined} trustedTypesPolicyName trusted types policy name
    */
   function ensureOverlayExists(callback, trustedTypesPolicyName) {
     if (containerElement) {
+      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/30024
       containerElement.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML("") : "";
       // Everything is ready, call the callback right away.
       callback(containerElement);
@@ -506,6 +524,9 @@ var createOverlay = function createOverlay(options) {
   }
 
   // Successful compilation.
+  /**
+   * @returns {void}
+   */
   function hide() {
     if (!iframeContainerElement) {
       return;
@@ -519,13 +540,14 @@ var createOverlay = function createOverlay(options) {
 
   // Compilation with errors (e.g. syntax error or missing modules).
   /**
-   * @param {string} type
-   * @param {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
-   * @param {string | null} trustedTypesPolicyName
-   * @param {'build' | 'runtime'} messageSource
+   * @param {string} type type
+   * @param {(string | Message)[]} messages messages
+   * @param {undefined | false | string} trustedTypesPolicyName trusted types policy name
+   * @param {'build' | 'runtime'} messageSource message source
    */
   function show(type, messages, trustedTypesPolicyName, messageSource) {
     ensureOverlayExists(function () {
+      /** @type {HTMLDivElement} */
       headerElement.innerText = messageSource === "runtime" ? "Uncaught runtime errors:" : "Compiled with problems:";
       messages.forEach(function (message) {
         var entryElement = document.createElement("div");
@@ -539,12 +561,12 @@ var createOverlay = function createOverlay(options) {
           body = _formatProblem.body;
         typeElement.innerText = header;
         applyStyle(typeElement, msgTypeStyle);
-        if (message.moduleIdentifier) {
+        if (typeof message !== "string" && message.moduleIdentifier) {
           applyStyle(typeElement, {
             cursor: "pointer"
           });
           // element.dataset not supported in IE
-          typeElement.setAttribute("data-can-open", true);
+          typeElement.setAttribute("data-can-open", "true");
           typeElement.addEventListener("click", function () {
             fetch("/webpack-dev-server/open-editor?fileName=".concat(message.moduleIdentifier));
           });
@@ -554,6 +576,8 @@ var createOverlay = function createOverlay(options) {
         var text = ansiHTML(encode(body));
         var messageTextNode = document.createElement("div");
         applyStyle(messageTextNode, msgTextStyle);
+
+        // @ts-expect-error https://github.com/microsoft/TypeScript/issues/30024
         messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) : text;
         entryElement.appendChild(typeElement);
         entryElement.appendChild(messageTextNode);
@@ -563,6 +587,18 @@ var createOverlay = function createOverlay(options) {
       });
     }, trustedTypesPolicyName);
   }
+
+  /** @type {(event: KeyboardEvent) => void} */
+  var handleEscapeKey;
+
+  /**
+   * @returns {void}
+   */
+
+  var hideOverlayWithEscCleanup = function hideOverlayWithEscCleanup() {
+    window.removeEventListener("keydown", handleEscapeKey);
+    hide();
+  };
   var overlayService = createOverlayMachine({
     showOverlay: function showOverlay(_ref3) {
       var _ref3$level = _ref3.level,
@@ -571,15 +607,29 @@ var createOverlay = function createOverlay(options) {
         messageSource = _ref3.messageSource;
       return show(level, messages, options.trustedTypesPolicyName, messageSource);
     },
-    hideOverlay: hide
+    hideOverlay: hideOverlayWithEscCleanup
   });
+  /**
+   * ESC key press to dismiss the overlay.
+   * @param {KeyboardEvent} event Keydown event
+   */
+  handleEscapeKey = function handleEscapeKey(event) {
+    if (event.key === "Escape" || event.key === "Esc" || event.keyCode === 27) {
+      overlayService.send({
+        type: "DISMISS"
+      });
+    }
+  };
+  window.addEventListener("keydown", handleEscapeKey);
   if (options.catchRuntimeError) {
     /**
-     * @param {Error | undefined} error
-     * @param {string} fallbackMessage
+     * @param {Error | undefined} error error
+     * @param {string} fallbackMessage fallback message
      */
     var handleError = function handleError(error, fallbackMessage) {
-      var errorObject = error instanceof Error ? error : new Error(error || fallbackMessage);
+      var errorObject = error instanceof Error ? error : new Error(error || fallbackMessage, {
+        cause: error
+      });
       var shouldDisplay = typeof options.catchRuntimeError === "function" ? options.catchRuntimeError(errorObject) : true;
       if (shouldDisplay) {
         overlayService.send({
@@ -612,4 +662,4 @@ var createOverlay = function createOverlay(options) {
   }
   return overlayService;
 };
-export { formatProblem, createOverlay };
+export { createOverlay, formatProblem };

package/client/progress.js

@@ -17,9 +17,16 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+/**
+ * @returns {boolean} true when custom elements supported, otherwise false
+ */
 export function isProgressSupported() {
-  return "customElements" in self && !!HTMLElement.prototype.attachShadow;
+  return "customElements" in self && Boolean(HTMLElement.prototype.attachShadow);
 }
+
+/**
+ * @returns {void}
+ */
 export function defineProgressElement() {
   var _WebpackDevServerProgress;
   if (customElements.get("wds-progress")) {
@@ -47,13 +54,23 @@ export function defineProgressElement() {
       }
     }, {
       key: "attributeChangedCallback",
-      value: function attributeChangedCallback(name, oldValue, newValue) {
+      value:
+      /**
+       * @param {string} name name
+       * @param {string} oldValue old value
+       * @param {string} newValue new value
+       */
+      function attributeChangedCallback(name, oldValue, newValue) {
         if (name === "progress") {
           _assertClassBrand(_WebpackDevServerProgress_brand, this, _update).call(this, Number(newValue));
         } else if (name === "type") {
           _assertClassBrand(_WebpackDevServerProgress_brand, this, _reset).call(this);
         }
       }
+
+      /**
+       * @param {number} percent percent
+       */
     }], [{
       key: "observedAttributes",
       get: function get() {
@@ -63,30 +80,36 @@ export function defineProgressElement() {
   }(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
   _WebpackDevServerProgress = WebpackDevServerProgress;
   function _reset() {
-    var _this$getAttribute, _Number;
+    var _this$getAttribute;
     clearTimeout(this.animationTimer);
     this.animationTimer = null;
     var typeAttr = (_this$getAttribute = this.getAttribute("type")) === null || _this$getAttribute === void 0 ? void 0 : _this$getAttribute.toLowerCase();
     this.type = typeAttr === "circular" ? "circular" : "linear";
     var innerHTML = this.type === "circular" ? _circularTemplate.call(_WebpackDevServerProgress) : _linearTemplate.call(_WebpackDevServerProgress);
+    /** @type {ShadowRoot} */
     this.shadowRoot.innerHTML = innerHTML;
-    this.initialProgress = (_Number = Number(this.getAttribute("progress"))) !== null && _Number !== void 0 ? _Number : 0;
+    var progressValue = this.getAttribute("progress");
+    this.initialProgress = progressValue ? Number(progressValue) : 0;
     _assertClassBrand(_WebpackDevServerProgress_brand, this, _update).call(this, this.initialProgress);
   }
   function _circularTemplate() {
-    return "\n        <style>\n        :host {\n            width: 200px;\n            height: 200px;\n            position: fixed;\n            right: 5%;\n            top: 5%;\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      ";
+    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      ";
   }
   function _linearTemplate() {
-    return "\n        <style>\n        :host {\n            position: fixed;\n            top: 0;\n            left: 0;\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        ";
+    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        ";
   }
   function _update(percent) {
-    var element = this.shadowRoot.querySelector("#progress");
+    var shadowRoot = /** @type {ShadowRoot} */this.shadowRoot;
+    var element = /** @type {HTMLElement} */
+    shadowRoot.querySelector("#progress");
     if (this.type === "circular") {
-      var path = this.shadowRoot.querySelector("path");
-      var value = this.shadowRoot.querySelector("#percent-value");
+      var path = /** @type {SVGPathElement} */
+      shadowRoot.querySelector("path");
+      var value = /** @type {HTMLElement} */
+      shadowRoot.querySelector("#percent-value");
       var offset = (100 - percent) / 100 * this.maxDashOffset;
-      path.style.strokeDashoffset = offset;
-      value.textContent = percent;
+      path.style.strokeDashoffset = String(offset);
+      value.textContent = String(percent);
     } else {
       element.style.width = "".concat(percent, "%");
     }
@@ -97,12 +120,16 @@ export function defineProgressElement() {
     }
   }
   function _show() {
-    var element = this.shadowRoot.querySelector("#progress");
+    var shadowRoot = /** @type {ShadowRoot} */this.shadowRoot;
+    var element = /** @type {HTMLElement} */
+    shadowRoot.querySelector("#progress");
     element.classList.remove("hidden");
   }
   function _hide() {
     var _this2 = this;
-    var element = this.shadowRoot.querySelector("#progress");
+    var shadowRoot = /** @type {ShadowRoot} */this.shadowRoot;
+    var element = /** @type {HTMLElement} */
+    shadowRoot.querySelector("#progress");
     if (this.type === "circular") {
       element.classList.add("disappear");
       element.addEventListener("animationend", function () {

package/client/socket.js

@@ -3,28 +3,33 @@
 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
-/* eslint-disable camelcase */
-var Client =
-// eslint-disable-next-line no-nested-ternary
-typeof __webpack_dev_server_client__ !== "undefined" ? typeof __webpack_dev_server_client__.default !== "undefined" ? __webpack_dev_server_client__.default : __webpack_dev_server_client__ : WebSocketClient;
-/* eslint-enable camelcase */
+/** @typedef {import("./index.js").EXPECTED_ANY} EXPECTED_ANY */
+/** @typedef {import("./clients/SockJSClient")} SockJSClient */
 
+// this WebsocketClient is here as a default fallback, in case the client is not injected
+/** @type {CommunicationClientConstructor} */
+var Client = typeof __webpack_dev_server_client__ !== "undefined" ? typeof (/** @type {{ default: CommunicationClientConstructor }} */
+__webpack_dev_server_client__.default) !== "undefined" ? /** @type {{ default: CommunicationClientConstructor }} */
+__webpack_dev_server_client__.default : (/** @type {CommunicationClientConstructor} */
+__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
+/** @type {CommunicationClient | null} */
 // eslint-disable-next-line import/no-mutable-exports
 export var client = null;
+
+/** @type {ReturnType<typeof setTimeout> | undefined} */
 var timeout;
 
 /**
- * @param {string} url
- * @param {{ [handler: string]: (data?: any, params?: any) => any }} handlers
- * @param {number} [reconnect]
+ * @param {string} url url
+ * @param {{ [handler: string]: (data?: EXPECTED_ANY, params?: EXPECTED_ANY) => EXPECTED_ANY }} handlers handlers
+ * @param {number=} reconnect count of reconnections
  */
-var socket = function initSocket(url, handlers, reconnect) {
+function socket(url, handlers, reconnect) {
   client = new Client(url);
   client.onOpen(function () {
     retries = 0;
@@ -47,7 +52,6 @@ var socket = function initSocket(url, handlers, reconnect) {
     if (retries < maxRetries) {
       // Exponentially increase timeout to reconnect.
       // Respectfully copied from the package `got`.
-      // eslint-disable-next-line no-restricted-properties
       var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
       retries += 1;
       log.info("Trying to reconnect...");
@@ -58,7 +62,7 @@ var socket = function initSocket(url, handlers, reconnect) {
   });
   client.onMessage(
   /**
-   * @param {any} data
+   * @param {EXPECTED_ANY} data data
    */
   function (data) {
     var message = JSON.parse(data);
@@ -66,5 +70,5 @@ var socket = function initSocket(url, handlers, reconnect) {
       handlers[message.type](message.data, message.params);
     }
   });
-};
+}
 export default socket;

package/client/utils/log.js

@@ -6,7 +6,7 @@ var defaultLevel = "info";
 
 // options new options, merge with old options
 /**
- * @param {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} level
+ * @param {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} level level
  * @returns {void}
  */
 function setLogLevel(level) {

package/client/utils/sendMessage.js

@@ -1,9 +1,11 @@
-/* global __resourceQuery WorkerGlobalScope */
+/* global WorkerGlobalScope */
+
+/** @typedef {import("../index").EXPECTED_ANY} EXPECTED_ANY */
 
 // Send messages to the outside, so plugins can consume it.
 /**
- * @param {string} type
- * @param {any} [data]
+ * @param {string} type type
+ * @param {EXPECTED_ANY=} data data
  */
 function sendMsg(type, data) {
   if (typeof self !== "undefined" && (typeof WorkerGlobalScope === "undefined" || !(self instanceof WorkerGlobalScope))) {