268 lines
11 KiB
JavaScript
268 lines
11 KiB
JavaScript
|
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<string | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} 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 };
|