overlay.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. 'use strict'; // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
  2. // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
  3. var ansiHTML = require('ansi-html');
  4. var _require = require('html-entities'),
  5. AllHtmlEntities = _require.AllHtmlEntities;
  6. var entities = new AllHtmlEntities();
  7. var colors = {
  8. reset: ['transparent', 'transparent'],
  9. black: '181818',
  10. red: 'E36049',
  11. green: 'B3CB74',
  12. yellow: 'FFD080',
  13. blue: '7CAFC2',
  14. magenta: '7FACCA',
  15. cyan: 'C3C2EF',
  16. lightgrey: 'EBE7E3',
  17. darkgrey: '6D7891'
  18. };
  19. var overlayIframe = null;
  20. var overlayDiv = null;
  21. var lastOnOverlayDivReady = null;
  22. ansiHTML.setColors(colors);
  23. function createOverlayIframe(onIframeLoad) {
  24. var iframe = document.createElement('iframe');
  25. iframe.id = 'webpack-dev-server-client-overlay';
  26. iframe.src = 'about:blank';
  27. iframe.style.position = 'fixed';
  28. iframe.style.left = 0;
  29. iframe.style.top = 0;
  30. iframe.style.right = 0;
  31. iframe.style.bottom = 0;
  32. iframe.style.width = '100vw';
  33. iframe.style.height = '100vh';
  34. iframe.style.border = 'none';
  35. iframe.style.zIndex = 9999999999;
  36. iframe.onload = onIframeLoad;
  37. return iframe;
  38. }
  39. function addOverlayDivTo(iframe) {
  40. var div = iframe.contentDocument.createElement('div');
  41. div.id = 'webpack-dev-server-client-overlay-div';
  42. div.style.position = 'fixed';
  43. div.style.boxSizing = 'border-box';
  44. div.style.left = 0;
  45. div.style.top = 0;
  46. div.style.right = 0;
  47. div.style.bottom = 0;
  48. div.style.width = '100vw';
  49. div.style.height = '100vh';
  50. div.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
  51. div.style.color = '#E8E8E8';
  52. div.style.fontFamily = 'Menlo, Consolas, monospace';
  53. div.style.fontSize = 'large';
  54. div.style.padding = '2rem';
  55. div.style.lineHeight = '1.2';
  56. div.style.whiteSpace = 'pre-wrap';
  57. div.style.overflow = 'auto';
  58. iframe.contentDocument.body.appendChild(div);
  59. return div;
  60. }
  61. function ensureOverlayDivExists(onOverlayDivReady) {
  62. if (overlayDiv) {
  63. // Everything is ready, call the callback right away.
  64. onOverlayDivReady(overlayDiv);
  65. return;
  66. } // Creating an iframe may be asynchronous so we'll schedule the callback.
  67. // In case of multiple calls, last callback wins.
  68. lastOnOverlayDivReady = onOverlayDivReady;
  69. if (overlayIframe) {
  70. // We've already created it.
  71. return;
  72. } // Create iframe and, when it is ready, a div inside it.
  73. overlayIframe = createOverlayIframe(function () {
  74. overlayDiv = addOverlayDivTo(overlayIframe); // Now we can talk!
  75. lastOnOverlayDivReady(overlayDiv);
  76. }); // Zalgo alert: onIframeLoad() will be called either synchronously
  77. // or asynchronously depending on the browser.
  78. // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
  79. document.body.appendChild(overlayIframe);
  80. } // Successful compilation.
  81. function clear() {
  82. if (!overlayDiv) {
  83. // It is not there in the first place.
  84. return;
  85. } // Clean up and reset internal state.
  86. document.body.removeChild(overlayIframe);
  87. overlayDiv = null;
  88. overlayIframe = null;
  89. lastOnOverlayDivReady = null;
  90. } // Compilation with errors (e.g. syntax error or missing modules).
  91. function showMessage(messages) {
  92. ensureOverlayDivExists(function (div) {
  93. // Make it look similar to our terminal.
  94. div.innerHTML = "<span style=\"color: #".concat(colors.red, "\">Failed to compile.</span><br><br>").concat(ansiHTML(entities.encode(messages[0])));
  95. });
  96. }
  97. module.exports = {
  98. clear: clear,
  99. showMessage: showMessage
  100. };