webpack-dev-server 4.11.1 → 4.13.0

package/client/overlay/fsm.js

@@ -0,0 +1,64 @@
+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); }
+/**
+ * @typedef {Object} StateDefinitions
+ * @property {{[event: string]: { target: string; actions?: Array<string> }}} [on]
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {{[state: string]: StateDefinitions}} states
+ * @property {object} context;
+ * @property {string} initial
+ */
+
+/**
+ * @typedef {Object} Implementation
+ * @property {{[actionName: string]: (ctx: object, event: any) => object}} actions
+ */
+
+/**
+ * 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.
+ *
+ * @param {Options} options
+ * @param {Implementation} implementation
+ */
+function createMachine(_ref, _ref2) {
+  var states = _ref.states,
+    context = _ref.context,
+    initial = _ref.initial;
+  var actions = _ref2.actions;
+  var currentState = initial;
+  var currentContext = context;
+  return {
+    send: function send(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 = _objectSpread(_objectSpread({}, currentContext), nextContextValue);
+            }
+          });
+        }
+      }
+    }
+  };
+}
+export default createMachine;

package/client/overlay/runtime-error.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * @param {Error} error
+ */
+function parseErrorToStacks(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);
+    });
+  }
+}
+
+/**
+ * @callback ErrorCallback
+ * @param {ErrorEvent} error
+ * @returns {void}
+ */
+
+/**
+ * @param {ErrorCallback} callback
+ */
+function listenToRuntimeError(callback) {
+  window.addEventListener("error", callback);
+  return function cleanup() {
+    window.removeEventListener("error", callback);
+  };
+}
+export { listenToRuntimeError, parseErrorToStacks };

package/client/overlay/state-machine.js

@@ -0,0 +1,95 @@
+import createMachine from "./fsm.js";
+
+/**
+ * @typedef {Object} ShowOverlayData
+ * @property {'warning' | 'error'} level
+ * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ */
+
+/**
+ * @typedef {Object} CreateOverlayMachineOptions
+ * @property {(data: ShowOverlayData) => void} showOverlay
+ * @property {() => void} hideOverlay
+ */
+
+/**
+ * @param {CreateOverlayMachineOptions} options
+ */
+var createOverlayMachine = function createOverlayMachine(options) {
+  var hideOverlay = options.hideOverlay,
+    showOverlay = options.showOverlay;
+  var overlayMachine = createMachine({
+    initial: "hidden",
+    context: {
+      level: "error",
+      messages: []
+    },
+    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 dismissMessages() {
+        return {
+          messages: [],
+          level: "error"
+        };
+      },
+      appendMessages: function appendMessages(context, event) {
+        return {
+          messages: context.messages.concat(event.messages),
+          level: event.level || context.level
+        };
+      },
+      setMessages: function setMessages(context, event) {
+        return {
+          messages: event.messages,
+          level: event.level || context.level
+        };
+      },
+      hideOverlay: hideOverlay,
+      showOverlay: showOverlay
+    }
+  });
+  return overlayMachine;
+};
+export default createOverlayMachine;

package/client/overlay/styles.js

@@ -0,0 +1,74 @@
+// 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: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: "100vw",
+  height: "100vh",
+  border: "none",
+  "z-index": 9999999999
+};
+var containerStyle = {
+  position: "fixed",
+  boxSizing: "border-box",
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  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: 0,
+  top: 0,
+  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"
+};
+export { msgStyles, iframeStyle, containerStyle, headerStyle, dismissButtonStyle, msgTypeStyle, msgTextStyle };

package/client/overlay.js

@@ -1,7 +1,16 @@
+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); }
 // 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 "ansi-html-community";
 import { encode } from "html-entities";
+import { listenToRuntimeError, parseErrorToStacks } from "./overlay/runtime-error.js";
+import createOverlayMachine from "./overlay/state-machine.js";
+import { containerStyle, dismissButtonStyle, headerStyle, iframeStyle, msgStyles, msgTextStyle, msgTypeStyle } from "./overlay/styles.js";
 var colors = {
   reset: ["transparent", "transparent"],
   black: "181818",
@@ -14,201 +23,227 @@ var colors = {
   lightgrey: "EBE7E3",
   darkgrey: "6D7891"
 };
-/** @type {HTMLIFrameElement | null | undefined} */
-
-var iframeContainerElement;
-/** @type {HTMLDivElement | null | undefined} */
-
-var containerElement;
-/** @type {Array<(element: HTMLDivElement) => void>} */
-
-var onLoadQueue = [];
-/** @type {TrustedTypePolicy | undefined} */
-
-var overlayTrustedTypesPolicy;
 ansiHTML.setColors(colors);
-/**
- * @param {string | null} trustedTypesPolicyName
- */
-
-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 createHTML(value) {
-        return value;
-      }
-    });
-  }
-
-  iframeContainerElement = document.createElement("iframe");
-  iframeContainerElement.id = "webpack-dev-server-client-overlay";
-  iframeContainerElement.src = "about:blank";
-  iframeContainerElement.style.position = "fixed";
-  iframeContainerElement.style.left = 0;
-  iframeContainerElement.style.top = 0;
-  iframeContainerElement.style.right = 0;
-  iframeContainerElement.style.bottom = 0;
-  iframeContainerElement.style.width = "100vw";
-  iframeContainerElement.style.height = "100vh";
-  iframeContainerElement.style.border = "none";
-  iframeContainerElement.style.zIndex = 9999999999;
-
-  iframeContainerElement.onload = function () {
-    containerElement =
-    /** @type {Document} */
-
-    /** @type {HTMLIFrameElement} */
-    iframeContainerElement.contentDocument.createElement("div");
-    containerElement.id = "webpack-dev-server-client-overlay-div";
-    containerElement.style.position = "fixed";
-    containerElement.style.boxSizing = "border-box";
-    containerElement.style.left = 0;
-    containerElement.style.top = 0;
-    containerElement.style.right = 0;
-    containerElement.style.bottom = 0;
-    containerElement.style.width = "100vw";
-    containerElement.style.height = "100vh";
-    containerElement.style.backgroundColor = "rgba(0, 0, 0, 0.85)";
-    containerElement.style.color = "#E8E8E8";
-    containerElement.style.fontFamily = "Menlo, Consolas, monospace";
-    containerElement.style.fontSize = "large";
-    containerElement.style.padding = "2rem";
-    containerElement.style.lineHeight = "1.2";
-    containerElement.style.whiteSpace = "pre-wrap";
-    containerElement.style.overflow = "auto";
-    var headerElement = document.createElement("span");
-    headerElement.innerText = "Compiled with problems:";
-    var closeButtonElement = document.createElement("button");
-    closeButtonElement.innerText = "X";
-    closeButtonElement.style.background = "transparent";
-    closeButtonElement.style.border = "none";
-    closeButtonElement.style.fontSize = "20px";
-    closeButtonElement.style.fontWeight = "bold";
-    closeButtonElement.style.color = "white";
-    closeButtonElement.style.cursor = "pointer";
-    closeButtonElement.style.cssFloat = "right"; // @ts-ignore
-
-    closeButtonElement.style.styleFloat = "right";
-    closeButtonElement.addEventListener("click", function () {
-      hide();
-    });
-    containerElement.appendChild(headerElement);
-    containerElement.appendChild(closeButtonElement);
-    containerElement.appendChild(document.createElement("br"));
-    containerElement.appendChild(document.createElement("br"));
-    /** @type {Document} */
-
-    /** @type {HTMLIFrameElement} */
-    iframeContainerElement.contentDocument.body.appendChild(containerElement);
-    onLoadQueue.forEach(function (onLoad) {
-      onLoad(
-      /** @type {HTMLDivElement} */
-      containerElement);
-    });
-    onLoadQueue = [];
-    /** @type {HTMLIFrameElement} */
-
-    iframeContainerElement.onload = null;
-  };
-
-  document.body.appendChild(iframeContainerElement);
-}
-/**
- * @param {(element: HTMLDivElement) => void} callback
- * @param {string | null} trustedTypesPolicyName
- */
-
-
-function ensureOverlayExists(callback, trustedTypesPolicyName) {
-  if (containerElement) {
-    // 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;
-}
 /**
  * @param {string} type
- * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string }} item
+ * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string; stack?: string[] }} item
  * @returns {{ header: string, body: string }}
  */
-
-
 function formatProblem(type, item) {
   var header = type === "warning" ? "WARNING" : "ERROR";
   var body = "";
-
   if (typeof item === "string") {
     body += item;
   } else {
-    var file = item.file || ""; // eslint-disable-next-line no-nested-ternary
-
+    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)) {
+    item.stack.forEach(function (stack) {
+      if (typeof stack === "string") {
+        body += "\r\n".concat(stack);
+      }
+    });
+  }
   return {
     header: header,
     body: body
   };
-} // Compilation with errors (e.g. syntax error or missing modules).
+}
 
 /**
- * @param {string} type
- * @param {Array<string  | { file?: string, moduleName?: string, loc?: string, message?: string }>} messages
- * @param {string | null} trustedTypesPolicyName
+ * @typedef {Object} CreateOverlayOptions
+ * @property {string | null} trustedTypesPolicyName
+ * @property {boolean} [catchRuntimeError]
  */
 
+/**
+ *
+ * @param {CreateOverlayOptions} options
+ */
+var createOverlay = function createOverlay(options) {
+  /** @type {HTMLIFrameElement | null | undefined} */
+  var iframeContainerElement;
+  /** @type {HTMLDivElement | null | undefined} */
+  var containerElement;
+  /** @type {Array<(element: HTMLDivElement) => void>} */
+  var onLoadQueue = [];
+  /** @type {TrustedTypePolicy | undefined} */
+  var overlayTrustedTypesPolicy;
+
+  /**
+   *
+   * @param {HTMLElement} element
+   * @param {CSSStyleDeclaration} style
+   */
+  function applyStyle(element, style) {
+    Object.keys(style).forEach(function (prop) {
+      element.style[prop] = style[prop];
+    });
+  }
 
-function show(type, messages, trustedTypesPolicyName) {
-  ensureOverlayExists(function () {
-    messages.forEach(function (message) {
-      var entryElement = document.createElement("div");
-      var typeElement = document.createElement("span");
+  /**
+   * @param {string | null} trustedTypesPolicyName
+   */
+  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 createHTML(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 = /** @type {Document} */
+      /** @type {HTMLIFrameElement} */
+      iframeContainerElement.contentDocument.createElement("div");
+      containerElement = /** @type {Document} */
+      /** @type {HTMLIFrameElement} */
+      iframeContainerElement.contentDocument.createElement("div");
+      contentElement.id = "webpack-dev-server-client-overlay-div";
+      applyStyle(contentElement, containerStyle);
+      var 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);
+
+      /** @type {Document} */
+      /** @type {HTMLIFrameElement} */
+      iframeContainerElement.contentDocument.body.appendChild(contentElement);
+      onLoadQueue.forEach(function (onLoad) {
+        onLoad( /** @type {HTMLDivElement} */contentElement);
+      });
+      onLoadQueue = [];
+
+      /** @type {HTMLIFrameElement} */
+      iframeContainerElement.onload = null;
+    };
+    document.body.appendChild(iframeContainerElement);
+  }
 
-      var _formatProblem = formatProblem(type, message),
-          header = _formatProblem.header,
-          body = _formatProblem.body;
+  /**
+   * @param {(element: HTMLDivElement) => void} callback
+   * @param {string | null} trustedTypesPolicyName
+   */
+  function ensureOverlayExists(callback, trustedTypesPolicyName) {
+    if (containerElement) {
+      containerElement.innerHTML = "";
+      // Everything is ready, call the callback right away.
+      callback(containerElement);
+      return;
+    }
+    onLoadQueue.push(callback);
+    if (iframeContainerElement) {
+      return;
+    }
+    createContainer(trustedTypesPolicyName);
+  }
 
-      typeElement.innerText = header;
-      typeElement.style.color = "#".concat(colors.red); // Make it look similar to our terminal.
+  // Successful compilation.
+  function hide() {
+    if (!iframeContainerElement) {
+      return;
+    }
 
-      var text = ansiHTML(encode(body));
-      var messageTextNode = document.createElement("div");
-      messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) : text;
-      entryElement.appendChild(typeElement);
-      entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(messageTextNode);
-      entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(document.createElement("br"));
-      /** @type {HTMLDivElement} */
+    // Clean up and reset internal state.
+    document.body.removeChild(iframeContainerElement);
+    iframeContainerElement = null;
+    containerElement = null;
+  }
 
-      containerElement.appendChild(entryElement);
+  // 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
+   */
+  function show(type, messages, trustedTypesPolicyName) {
+    ensureOverlayExists(function () {
+      messages.forEach(function (message) {
+        var entryElement = document.createElement("div");
+        var msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error;
+        applyStyle(entryElement, _objectSpread(_objectSpread({}, msgStyle), {}, {
+          padding: "1rem 1rem 1.5rem 1rem"
+        }));
+        var typeElement = document.createElement("div");
+        var _formatProblem = formatProblem(type, message),
+          header = _formatProblem.header,
+          body = _formatProblem.body;
+        typeElement.innerText = header;
+        applyStyle(typeElement, msgTypeStyle);
+        if (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);
+
+        /** @type {HTMLDivElement} */
+        containerElement.appendChild(entryElement);
+      });
+    }, trustedTypesPolicyName);
+  }
+  var overlayService = createOverlayMachine({
+    showOverlay: function showOverlay(_ref) {
+      var _ref$level = _ref.level,
+        level = _ref$level === void 0 ? "error" : _ref$level,
+        messages = _ref.messages;
+      return show(level, messages, options.trustedTypesPolicyName);
+    },
+    hideOverlay: hide
+  });
+  if (options.catchRuntimeError) {
+    listenToRuntimeError(function (errorEvent) {
+      // error property may be empty in older browser like IE
+      var error = errorEvent.error,
+        message = errorEvent.message;
+      if (!error && !message) {
+        return;
+      }
+      var errorObject = error instanceof Error ? error : new Error(error || message);
+      overlayService.send({
+        type: "RUNTIME_ERROR",
+        messages: [{
+          message: errorObject.message,
+          stack: parseErrorToStacks(errorObject)
+        }]
+      });
     });
-  }, trustedTypesPolicyName);
-}
-
-export { formatProblem, show, hide };
+  }
+  return overlayService;
+};
+export { formatProblem, createOverlay };