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, listenToUnhandledRejection, 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", red: "E36049", green: "B3CB74", yellow: "FFD080", blue: "7CAFC2", magenta: "7FACCA", cyan: "C3C2EF", lightgrey: "EBE7E3", darkgrey: "6D7891" }; ansiHTML.setColors(colors); /** * @param {string} type * @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 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 }; } /** * @typedef {Object} CreateOverlayOptions * @property {string | null} trustedTypesPolicyName * @property {boolean | (error: Error) => void} [catchRuntimeError] */ /** * * @param {CreateOverlayOptions} options */ var createOverlay = function createOverlay(options) { /** @type {HTMLIFrameElement | null | undefined} */ var iframeContainerElement; /** @type {HTMLDivElement | null | undefined} */ var containerElement; /** @type {HTMLDivElement | null | undefined} */ var headerElement; /** @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]; }); } /** * @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); 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); } /** * @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); } // 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). /** * @param {string} type * @param {Array} messages * @param {string | null} trustedTypesPolicyName * @param {'build' | 'runtime'} messageSource */ 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, _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, messageSource = _ref.messageSource; return show(level, messages, options.trustedTypesPolicyName, messageSource); }, hideOverlay: hide }); if (options.catchRuntimeError) { /** * @param {Error | undefined} error * @param {string} fallbackMessage */ var handleError = function handleError(error, fallbackMessage) { var errorObject = error instanceof Error ? error : new Error(error || fallbackMessage); 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; } handleError(error, message); }); listenToUnhandledRejection(function (promiseRejectionEvent) { var reason = promiseRejectionEvent.reason; handleError(reason, "Unknown promise rejection reason"); }); } return overlayService; }; export { formatProblem, createOverlay };