123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
- const RuntimeErrorFooter = require('./components/RuntimeErrorFooter');
- const RuntimeErrorHeader = require('./components/RuntimeErrorHeader');
- const CompileErrorContainer = require('./containers/CompileErrorContainer');
- const RuntimeErrorContainer = require('./containers/RuntimeErrorContainer');
- const theme = require('./theme');
- const debounce = require('./utils/debounce');
- const removeAllChildren = require('./utils/removeAllChildren');
- let iframeRoot = null;
- let rootDocument = null;
- let root = null;
- let scheduledRenderFn = null;
- let currentCompileErrorMessage = '';
- let currentRuntimeErrorIndex = 0;
- let currentRuntimeErrors = [];
- let currentMode = null;
- function IframeRoot(document, root, props) {
- const iframe = document.createElement('iframe');
- iframe.id = 'react-refresh-overlay';
- iframe.src = 'about:blank';
- iframe.style.border = 'none';
- iframe.style.height = '100vh';
- iframe.style.left = '0';
- iframe.style.position = 'fixed';
- iframe.style.top = '0';
- iframe.style.width = '100vw';
- iframe.style.zIndex = '2147483647';
- iframe.addEventListener('load', function onLoad() {
-
- iframe.contentDocument.body.style.margin = '0';
- props.onIframeLoad();
- });
-
-
- return iframe;
- }
- function OverlayRoot(document, root) {
- const div = document.createElement('div');
- div.id = 'react-refresh-overlay-error';
-
- div.style.backgroundColor = '#' + theme.grey;
- div.style.boxSizing = 'border-box';
- div.style.color = '#' + theme.white;
- div.style.fontFamily = [
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- '"Helvetica Neue"',
- 'Helvetica',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- 'Segoe UI Symbol',
- ].join(', ');
- div.style.fontSize = '0.875rem';
- div.style.height = '100vh';
- div.style.lineHeight = '1.3';
- div.style.overflow = 'auto';
- div.style.padding = '1rem 1.5rem 0';
- div.style.width = '100vw';
- root.appendChild(div);
- return div;
- }
- function ensureRootExists(renderFn) {
- if (root) {
-
- renderFn();
- return;
- }
-
-
- scheduledRenderFn = renderFn;
- if (iframeRoot) {
-
- return;
- }
-
- iframeRoot = IframeRoot(document, document.body, {
- onIframeLoad: function onIframeLoad() {
- rootDocument = iframeRoot.contentDocument;
- root = OverlayRoot(rootDocument, rootDocument.body);
- scheduledRenderFn();
- },
- });
-
-
-
- document.body.appendChild(iframeRoot);
- }
- function render() {
- ensureRootExists(function () {
- const currentFocus = rootDocument.activeElement;
- let currentFocusId;
- if (currentFocus.localName === 'button' && currentFocus.id) {
- currentFocusId = currentFocus.id;
- }
- removeAllChildren(root);
- if (currentCompileErrorMessage) {
- currentMode = 'compileError';
- CompileErrorContainer(rootDocument, root, {
- errorMessage: currentCompileErrorMessage,
- });
- } else if (currentRuntimeErrors.length) {
- currentMode = 'runtimeError';
- RuntimeErrorHeader(rootDocument, root, {
- currentErrorIndex: currentRuntimeErrorIndex,
- totalErrors: currentRuntimeErrors.length,
- });
- RuntimeErrorContainer(rootDocument, root, {
- currentError: currentRuntimeErrors[currentRuntimeErrorIndex],
- });
- RuntimeErrorFooter(rootDocument, root, {
- initialFocus: currentFocusId,
- multiple: currentRuntimeErrors.length > 1,
- onClickCloseButton: function onClose() {
- clearRuntimeErrors();
- },
- onClickNextButton: function onNext() {
- if (currentRuntimeErrorIndex === currentRuntimeErrors.length - 1) {
- return;
- }
- currentRuntimeErrorIndex += 1;
- ensureRootExists(render);
- },
- onClickPrevButton: function onPrev() {
- if (currentRuntimeErrorIndex === 0) {
- return;
- }
- currentRuntimeErrorIndex -= 1;
- ensureRootExists(render);
- },
- });
- }
- });
- }
- function cleanup() {
-
- document.body.removeChild(iframeRoot);
- scheduledRenderFn = null;
- root = null;
- iframeRoot = null;
- }
- function clearCompileError() {
- if (!root || currentMode !== 'compileError') {
- return;
- }
- currentCompileErrorMessage = '';
- currentMode = null;
- cleanup();
- }
- function clearRuntimeErrors(dismissOverlay) {
- if (!root || currentMode !== 'runtimeError') {
- return;
- }
- currentRuntimeErrorIndex = 0;
- currentRuntimeErrors = [];
- if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
- currentMode = null;
- cleanup();
- }
- }
- function showCompileError(message) {
- if (!message) {
- return;
- }
- currentCompileErrorMessage = message;
- render();
- }
- function showRuntimeErrors(errors) {
- if (!errors || !errors.length) {
- return;
- }
- currentRuntimeErrors = errors;
- render();
- }
- const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
- function isWebpackCompileError(error) {
- return /Module [A-z ]+\(from/.test(error.message) || /Cannot find module/.test(error.message);
- }
- function handleRuntimeError(error) {
- if (error && !isWebpackCompileError(error) && currentRuntimeErrors.indexOf(error) === -1) {
- currentRuntimeErrors = currentRuntimeErrors.concat(error);
- }
- debouncedShowRuntimeErrors(currentRuntimeErrors);
- }
- module.exports = Object.freeze({
- clearCompileError: clearCompileError,
- clearRuntimeErrors: clearRuntimeErrors,
- handleRuntimeError: handleRuntimeError,
- showCompileError: showCompileError,
- showRuntimeErrors: showRuntimeErrors,
- });
|