overlay.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. 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; }
  2. 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; }
  3. 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; }
  4. function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
  5. 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); }
  6. // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
  7. // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
  8. import ansiHTML from "ansi-html-community";
  9. import { encode } from "html-entities";
  10. import { listenToRuntimeError, parseErrorToStacks } from "./overlay/runtime-error.js";
  11. import createOverlayMachine from "./overlay/state-machine.js";
  12. import { containerStyle, dismissButtonStyle, headerStyle, iframeStyle, msgStyles, msgTextStyle, msgTypeStyle } from "./overlay/styles.js";
  13. var colors = {
  14. reset: ["transparent", "transparent"],
  15. black: "181818",
  16. red: "E36049",
  17. green: "B3CB74",
  18. yellow: "FFD080",
  19. blue: "7CAFC2",
  20. magenta: "7FACCA",
  21. cyan: "C3C2EF",
  22. lightgrey: "EBE7E3",
  23. darkgrey: "6D7891"
  24. };
  25. ansiHTML.setColors(colors);
  26. /**
  27. * @param {string} type
  28. * @param {string | { file?: string, moduleName?: string, loc?: string, message?: string; stack?: string[] }} item
  29. * @returns {{ header: string, body: string }}
  30. */
  31. function formatProblem(type, item) {
  32. var header = type === "warning" ? "WARNING" : "ERROR";
  33. var body = "";
  34. if (typeof item === "string") {
  35. body += item;
  36. } else {
  37. var file = item.file || "";
  38. // eslint-disable-next-line no-nested-ternary
  39. var moduleName = item.moduleName ? item.moduleName.indexOf("!") !== -1 ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ""), " (").concat(item.moduleName, ")") : "".concat(item.moduleName) : "";
  40. var loc = item.loc;
  41. header += "".concat(moduleName || file ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : "") : file).concat(loc ? " ".concat(loc) : "") : "");
  42. body += item.message || "";
  43. }
  44. if (Array.isArray(item.stack)) {
  45. item.stack.forEach(function (stack) {
  46. if (typeof stack === "string") {
  47. body += "\r\n".concat(stack);
  48. }
  49. });
  50. }
  51. return {
  52. header: header,
  53. body: body
  54. };
  55. }
  56. /**
  57. * @typedef {Object} CreateOverlayOptions
  58. * @property {string | null} trustedTypesPolicyName
  59. * @property {boolean} [catchRuntimeError]
  60. */
  61. /**
  62. *
  63. * @param {CreateOverlayOptions} options
  64. */
  65. var createOverlay = function createOverlay(options) {
  66. /** @type {HTMLIFrameElement | null | undefined} */
  67. var iframeContainerElement;
  68. /** @type {HTMLDivElement | null | undefined} */
  69. var containerElement;
  70. /** @type {Array<(element: HTMLDivElement) => void>} */
  71. var onLoadQueue = [];
  72. /** @type {TrustedTypePolicy | undefined} */
  73. var overlayTrustedTypesPolicy;
  74. /**
  75. *
  76. * @param {HTMLElement} element
  77. * @param {CSSStyleDeclaration} style
  78. */
  79. function applyStyle(element, style) {
  80. Object.keys(style).forEach(function (prop) {
  81. element.style[prop] = style[prop];
  82. });
  83. }
  84. /**
  85. * @param {string | null} trustedTypesPolicyName
  86. */
  87. function createContainer(trustedTypesPolicyName) {
  88. // Enable Trusted Types if they are available in the current browser.
  89. if (window.trustedTypes) {
  90. overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || "webpack-dev-server#overlay", {
  91. createHTML: function createHTML(value) {
  92. return value;
  93. }
  94. });
  95. }
  96. iframeContainerElement = document.createElement("iframe");
  97. iframeContainerElement.id = "webpack-dev-server-client-overlay";
  98. iframeContainerElement.src = "about:blank";
  99. applyStyle(iframeContainerElement, iframeStyle);
  100. iframeContainerElement.onload = function () {
  101. var contentElement = /** @type {Document} */
  102. /** @type {HTMLIFrameElement} */
  103. iframeContainerElement.contentDocument.createElement("div");
  104. containerElement = /** @type {Document} */
  105. /** @type {HTMLIFrameElement} */
  106. iframeContainerElement.contentDocument.createElement("div");
  107. contentElement.id = "webpack-dev-server-client-overlay-div";
  108. applyStyle(contentElement, containerStyle);
  109. var headerElement = document.createElement("div");
  110. headerElement.innerText = "Compiled with problems:";
  111. applyStyle(headerElement, headerStyle);
  112. var closeButtonElement = document.createElement("button");
  113. applyStyle(closeButtonElement, dismissButtonStyle);
  114. closeButtonElement.innerText = "×";
  115. closeButtonElement.ariaLabel = "Dismiss";
  116. closeButtonElement.addEventListener("click", function () {
  117. // eslint-disable-next-line no-use-before-define
  118. overlayService.send({
  119. type: "DISMISS"
  120. });
  121. });
  122. contentElement.appendChild(headerElement);
  123. contentElement.appendChild(closeButtonElement);
  124. contentElement.appendChild(containerElement);
  125. /** @type {Document} */
  126. /** @type {HTMLIFrameElement} */
  127. iframeContainerElement.contentDocument.body.appendChild(contentElement);
  128. onLoadQueue.forEach(function (onLoad) {
  129. onLoad( /** @type {HTMLDivElement} */contentElement);
  130. });
  131. onLoadQueue = [];
  132. /** @type {HTMLIFrameElement} */
  133. iframeContainerElement.onload = null;
  134. };
  135. document.body.appendChild(iframeContainerElement);
  136. }
  137. /**
  138. * @param {(element: HTMLDivElement) => void} callback
  139. * @param {string | null} trustedTypesPolicyName
  140. */
  141. function ensureOverlayExists(callback, trustedTypesPolicyName) {
  142. if (containerElement) {
  143. containerElement.innerHTML = "";
  144. // Everything is ready, call the callback right away.
  145. callback(containerElement);
  146. return;
  147. }
  148. onLoadQueue.push(callback);
  149. if (iframeContainerElement) {
  150. return;
  151. }
  152. createContainer(trustedTypesPolicyName);
  153. }
  154. // Successful compilation.
  155. function hide() {
  156. if (!iframeContainerElement) {
  157. return;
  158. }
  159. // Clean up and reset internal state.
  160. document.body.removeChild(iframeContainerElement);
  161. iframeContainerElement = null;
  162. containerElement = null;
  163. }
  164. // Compilation with errors (e.g. syntax error or missing modules).
  165. /**
  166. * @param {string} type
  167. * @param {Array<string | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
  168. * @param {string | null} trustedTypesPolicyName
  169. */
  170. function show(type, messages, trustedTypesPolicyName) {
  171. ensureOverlayExists(function () {
  172. messages.forEach(function (message) {
  173. var entryElement = document.createElement("div");
  174. var msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error;
  175. applyStyle(entryElement, _objectSpread(_objectSpread({}, msgStyle), {}, {
  176. padding: "1rem 1rem 1.5rem 1rem"
  177. }));
  178. var typeElement = document.createElement("div");
  179. var _formatProblem = formatProblem(type, message),
  180. header = _formatProblem.header,
  181. body = _formatProblem.body;
  182. typeElement.innerText = header;
  183. applyStyle(typeElement, msgTypeStyle);
  184. if (message.moduleIdentifier) {
  185. applyStyle(typeElement, {
  186. cursor: "pointer"
  187. });
  188. // element.dataset not supported in IE
  189. typeElement.setAttribute("data-can-open", true);
  190. typeElement.addEventListener("click", function () {
  191. fetch("/webpack-dev-server/open-editor?fileName=".concat(message.moduleIdentifier));
  192. });
  193. }
  194. // Make it look similar to our terminal.
  195. var text = ansiHTML(encode(body));
  196. var messageTextNode = document.createElement("div");
  197. applyStyle(messageTextNode, msgTextStyle);
  198. messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) : text;
  199. entryElement.appendChild(typeElement);
  200. entryElement.appendChild(messageTextNode);
  201. /** @type {HTMLDivElement} */
  202. containerElement.appendChild(entryElement);
  203. });
  204. }, trustedTypesPolicyName);
  205. }
  206. var overlayService = createOverlayMachine({
  207. showOverlay: function showOverlay(_ref) {
  208. var _ref$level = _ref.level,
  209. level = _ref$level === void 0 ? "error" : _ref$level,
  210. messages = _ref.messages;
  211. return show(level, messages, options.trustedTypesPolicyName);
  212. },
  213. hideOverlay: hide
  214. });
  215. if (options.catchRuntimeError) {
  216. listenToRuntimeError(function (errorEvent) {
  217. // error property may be empty in older browser like IE
  218. var error = errorEvent.error,
  219. message = errorEvent.message;
  220. if (!error && !message) {
  221. return;
  222. }
  223. var errorObject = error instanceof Error ? error : new Error(error || message);
  224. overlayService.send({
  225. type: "RUNTIME_ERROR",
  226. messages: [{
  227. message: errorObject.message,
  228. stack: parseErrorToStacks(errorObject)
  229. }]
  230. });
  231. });
  232. }
  233. return overlayService;
  234. };
  235. export { formatProblem, createOverlay };