@rspack/plugin-react-refresh 1.6.2 → 2.0.0-beta.0

package/client/overlay/components/RuntimeErrorFooter.js

@@ -1,93 +0,0 @@
-const Spacer = require('./Spacer.js');
-const theme = require('../theme.js');
-
-/**
- * @typedef {Object} RuntimeErrorFooterProps
- * @property {string} [initialFocus]
- * @property {boolean} multiple
- * @property {function(MouseEvent): void} onClickCloseButton
- * @property {function(MouseEvent): void} onClickNextButton
- * @property {function(MouseEvent): void} onClickPrevButton
- */
-
-/**
- * A fixed footer that handles pagination of runtime errors.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {RuntimeErrorFooterProps} props
- * @returns {void}
- */
-function RuntimeErrorFooter(document, root, props) {
-  const footer = document.createElement('div');
-  footer.style.backgroundColor = '#' + theme.dimgrey;
-  footer.style.bottom = '0';
-  footer.style.boxShadow = '0 -1px 4px rgba(0, 0, 0, 0.3)';
-  footer.style.height = '2.5rem';
-  footer.style.left = '0';
-  footer.style.right = '0';
-  footer.style.lineHeight = '2.5rem';
-  footer.style.paddingBottom = '0';
-  footer.style.paddingBottom = 'env(safe-area-inset-bottom)';
-  footer.style.position = 'fixed';
-  footer.style.textAlign = 'center';
-  footer.style.zIndex = '2';
-
-  const BUTTON_CONFIGS = {
-    prev: {
-      id: 'prev',
-      label: '◀ Prev',
-      onClick: props.onClickPrevButton,
-    },
-    close: {
-      id: 'close',
-      label: '× Close',
-      onClick: props.onClickCloseButton,
-    },
-    next: {
-      id: 'next',
-      label: 'Next ▶',
-      onClick: props.onClickNextButton,
-    },
-  };
-
-  let buttons = [BUTTON_CONFIGS.close];
-  if (props.multiple) {
-    buttons = [BUTTON_CONFIGS.prev, BUTTON_CONFIGS.close, BUTTON_CONFIGS.next];
-  }
-
-  /** @type {HTMLButtonElement | undefined} */
-  let initialFocusButton;
-  for (let i = 0; i < buttons.length; i += 1) {
-    const buttonConfig = buttons[i];
-
-    const button = document.createElement('button');
-    button.id = buttonConfig.id;
-    button.innerHTML = buttonConfig.label;
-    button.tabIndex = 1;
-    button.style.backgroundColor = '#' + theme.dimgrey;
-    button.style.border = 'none';
-    button.style.color = '#' + theme.white;
-    button.style.cursor = 'pointer';
-    button.style.fontSize = 'inherit';
-    button.style.height = '100%';
-    button.style.padding = '0.5rem 0.75rem';
-    button.style.width = (100 / buttons.length).toString(10) + '%';
-    button.addEventListener('click', buttonConfig.onClick);
-
-    if (buttonConfig.id === props.initialFocus) {
-      initialFocusButton = button;
-    }
-
-    footer.appendChild(button);
-  }
-
-  root.appendChild(footer);
-
-  Spacer(document, root, { space: '2.5rem' });
-
-  if (initialFocusButton) {
-    initialFocusButton.focus();
-  }
-}
-
-module.exports = RuntimeErrorFooter;

package/client/overlay/components/RuntimeErrorHeader.js

@@ -1,38 +0,0 @@
-const Spacer = require('./Spacer.js');
-const theme = require('../theme.js');
-
-/**
- * @typedef {Object} RuntimeErrorHeaderProps
- * @property {number} currentErrorIndex
- * @property {number} totalErrors
- */
-
-/**
- * A fixed header that shows the total runtime error count.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {RuntimeErrorHeaderProps} props
- * @returns {void}
- */
-function RuntimeErrorHeader(document, root, props) {
-  const header = document.createElement('div');
-  header.innerText =
-    'Error ' + (props.currentErrorIndex + 1) + ' of ' + props.totalErrors;
-  header.style.backgroundColor = '#' + theme.red;
-  header.style.color = '#' + theme.white;
-  header.style.fontWeight = '500';
-  header.style.height = '2.5rem';
-  header.style.left = '0';
-  header.style.lineHeight = '2.5rem';
-  header.style.position = 'fixed';
-  header.style.textAlign = 'center';
-  header.style.top = '0';
-  header.style.width = '100vw';
-  header.style.zIndex = '2';
-
-  root.appendChild(header);
-
-  Spacer(document, root, { space: '2.5rem' });
-}
-
-module.exports = RuntimeErrorHeader;

package/client/overlay/components/RuntimeErrorStack.js

@@ -1,80 +0,0 @@
-const ErrorStackParser = require('error-stack-parser');
-const theme = require('../theme.js');
-const utils = require('../utils.js');
-
-/**
- * @typedef {Object} RuntimeErrorStackProps
- * @property {Error} error
- */
-
-/**
- * A formatter that turns runtime error stacks into highlighted HTML stacks.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {RuntimeErrorStackProps} props
- * @returns {void}
- */
-function RuntimeErrorStack(document, root, props) {
-  const stackTitle = document.createElement('h4');
-  stackTitle.innerText = 'Call Stack';
-  stackTitle.style.color = '#' + theme.white;
-  stackTitle.style.fontSize = '1.0625rem';
-  stackTitle.style.fontWeight = '500';
-  stackTitle.style.lineHeight = '1.3';
-  stackTitle.style.margin = '0 0 0.5rem';
-
-  const stackContainer = document.createElement('div');
-  stackContainer.style.fontSize = '0.8125rem';
-  stackContainer.style.lineHeight = '1.3';
-  stackContainer.style.whiteSpace = 'pre-wrap';
-
-  let errorStacks;
-  try {
-    errorStacks = ErrorStackParser.parse(props.error);
-  } catch (e) {
-    errorStacks = [];
-    stackContainer.innerHTML = 'No stack trace is available for this error!';
-  }
-
-  for (let i = 0; i < Math.min(errorStacks.length, 10); i += 1) {
-    const currentStack = errorStacks[i];
-
-    const functionName = document.createElement('code');
-    functionName.innerHTML =
-      '&emsp;' + currentStack.functionName || '(anonymous function)';
-    functionName.style.color = '#' + theme.yellow;
-    functionName.style.fontFamily = [
-      '"Operator Mono SSm"',
-      '"Operator Mono"',
-      '"Fira Code Retina"',
-      '"Fira Code"',
-      '"FiraCode-Retina"',
-      '"Andale Mono"',
-      '"Lucida Console"',
-      'Menlo',
-      'Consolas',
-      'Monaco',
-      'monospace',
-    ].join(', ');
-
-    const fileName = document.createElement('div');
-    fileName.innerHTML =
-      '&emsp;&emsp;' +
-      utils.formatFilename(currentStack.fileName) +
-      ':' +
-      currentStack.lineNumber +
-      ':' +
-      currentStack.columnNumber;
-    fileName.style.color = '#' + theme.white;
-    fileName.style.fontSize = '0.6875rem';
-    fileName.style.marginBottom = '0.25rem';
-
-    stackContainer.appendChild(functionName);
-    stackContainer.appendChild(fileName);
-  }
-
-  root.appendChild(stackTitle);
-  root.appendChild(stackContainer);
-}
-
-module.exports = RuntimeErrorStack;

package/client/overlay/components/Spacer.js

@@ -1,19 +0,0 @@
-/**
- * @typedef {Object} SpacerProps
- * @property {string} space
- */
-
-/**
- * An empty element to add spacing manually.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {SpacerProps} props
- * @returns {void}
- */
-function Spacer(document, root, props) {
-  const spacer = document.createElement('div');
-  spacer.style.paddingBottom = props.space;
-  root.appendChild(spacer);
-}
-
-module.exports = Spacer;

package/client/overlay/containers/CompileErrorContainer.js

@@ -1,25 +0,0 @@
-const CompileErrorTrace = require('../components/CompileErrorTrace.js');
-const PageHeader = require('../components/PageHeader.js');
-const Spacer = require('../components/Spacer.js');
-
-/**
- * @typedef {Object} CompileErrorContainerProps
- * @property {string} errorMessage
- */
-
-/**
- * A container to render Webpack compilation error messages with source trace.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {CompileErrorContainerProps} props
- * @returns {void}
- */
-function CompileErrorContainer(document, root, props) {
-  PageHeader(document, root, {
-    title: 'Failed to compile.',
-  });
-  CompileErrorTrace(document, root, { errorMessage: props.errorMessage });
-  Spacer(document, root, { space: '1rem' });
-}
-
-module.exports = CompileErrorContainer;

package/client/overlay/containers/RuntimeErrorContainer.js

@@ -1,29 +0,0 @@
-const PageHeader = require('../components/PageHeader.js');
-const RuntimeErrorStack = require('../components/RuntimeErrorStack.js');
-const Spacer = require('../components/Spacer.js');
-
-/**
- * @typedef {Object} RuntimeErrorContainerProps
- * @property {Error} currentError
- */
-
-/**
- * A container to render runtime error messages with stack trace.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {RuntimeErrorContainerProps} props
- * @returns {void}
- */
-function RuntimeErrorContainer(document, root, props) {
-  PageHeader(document, root, {
-    message: props.currentError.message,
-    title: props.currentError.name,
-    topOffset: '2.5rem',
-  });
-  RuntimeErrorStack(document, root, {
-    error: props.currentError,
-  });
-  Spacer(document, root, { space: '1rem' });
-}
-
-module.exports = RuntimeErrorContainer;

package/client/overlay/index.js

@@ -1,351 +0,0 @@
-const RuntimeErrorFooter = require('./components/RuntimeErrorFooter.js');
-const RuntimeErrorHeader = require('./components/RuntimeErrorHeader.js');
-const CompileErrorContainer = require('./containers/CompileErrorContainer.js');
-const RuntimeErrorContainer = require('./containers/RuntimeErrorContainer.js');
-const theme = require('./theme.js');
-const utils = require('./utils.js');
-
-/**
- * @callback RenderFn
- * @returns {void}
- */
-
-/* ===== Cached elements for DOM manipulations ===== */
-/**
- * The iframe that contains the overlay.
- * @type {HTMLIFrameElement}
- */
-let iframeRoot = null;
-/**
- * The document object from the iframe root, used to create and render elements.
- * @type {Document}
- */
-let rootDocument = null;
-/**
- * The root div elements will attach to.
- * @type {HTMLDivElement}
- */
-let root = null;
-/**
- * A Cached function to allow deferred render.
- * @type {RenderFn | null}
- */
-let scheduledRenderFn = null;
-
-/* ===== Overlay State ===== */
-/**
- * The latest error message from Webpack compilation.
- * @type {string}
- */
-let currentCompileErrorMessage = '';
-/**
- * Index of the error currently shown by the overlay.
- * @type {number}
- */
-let currentRuntimeErrorIndex = 0;
-/**
- * The latest runtime error objects.
- * @type {Error[]}
- */
-let currentRuntimeErrors = [];
-/**
- * The render mode the overlay is currently in.
- * @type {'compileError' | 'runtimeError' | null}
- */
-let currentMode = null;
-
-/**
- * @typedef {Object} IframeProps
- * @property {function(): void} onIframeLoad
- */
-
-/**
- * Creates the main `iframe` the overlay will attach to.
- * Accepts a callback to be ran after iframe is initialized.
- * @param {Document} document
- * @param {HTMLElement} root
- * @param {IframeProps} props
- * @returns {HTMLIFrameElement}
- */
-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 = '100%';
-  iframe.style.left = '0';
-  iframe.style.minHeight = '100vh';
-  iframe.style.minHeight = '-webkit-fill-available';
-  iframe.style.position = 'fixed';
-  iframe.style.top = '0';
-  iframe.style.width = '100vw';
-  iframe.style.zIndex = '2147483647';
-  iframe.addEventListener('load', function onLoad() {
-    // Reset margin of iframe body
-    iframe.contentDocument.body.style.margin = '0';
-    props.onIframeLoad();
-  });
-
-  // We skip mounting and returns as we need to ensure
-  // the load event is fired after we setup the global variable
-  return iframe;
-}
-
-/**
- * Creates the main `div` element for the overlay to render.
- * @param {Document} document
- * @param {HTMLElement} root
- * @returns {HTMLDivElement}
- */
-function OverlayRoot(document, root) {
-  const div = document.createElement('div');
-  div.id = 'react-refresh-overlay-error';
-
-  // Style the contents container
-  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 = '100%';
-  div.style.lineHeight = '1.3';
-  div.style.overflow = 'auto';
-  div.style.padding = '1rem 1.5rem 0';
-  div.style.paddingTop = 'max(1rem, env(safe-area-inset-top))';
-  div.style.paddingRight = 'max(1.5rem, env(safe-area-inset-right))';
-  div.style.paddingBottom = 'env(safe-area-inset-bottom)';
-  div.style.paddingLeft = 'max(1.5rem, env(safe-area-inset-left))';
-  div.style.width = '100vw';
-
-  root.appendChild(div);
-  return div;
-}
-
-/**
- * Ensures the iframe root and the overlay root are both initialized before render.
- * If check fails, render will be deferred until both roots are initialized.
- * @param {RenderFn} renderFn A function that triggers a DOM render.
- * @returns {void}
- */
-function ensureRootExists(renderFn) {
-  if (root) {
-    // Overlay root is ready, we can render right away.
-    renderFn();
-    return;
-  }
-
-  // Creating an iframe may be asynchronous so we'll defer render.
-  // In case of multiple calls, function from the last call will be used.
-  scheduledRenderFn = renderFn;
-
-  if (iframeRoot) {
-    // Iframe is already ready, it will fire the load event.
-    return;
-  }
-
-  // Create the iframe root, and, the overlay root inside it when it is ready.
-  iframeRoot = IframeRoot(document, document.body, {
-    onIframeLoad: function onIframeLoad() {
-      rootDocument = iframeRoot.contentDocument;
-      root = OverlayRoot(rootDocument, rootDocument.body);
-      scheduledRenderFn();
-    },
-  });
-
-  // We have to mount here to ensure `iframeRoot` is set when `onIframeLoad` fires.
-  // This is because onIframeLoad() will be called synchronously
-  // or asynchronously depending on the browser.
-  document.body.appendChild(iframeRoot);
-}
-
-/**
- * Creates the main `div` element for the overlay to render.
- * @returns {void}
- */
-function render() {
-  ensureRootExists(function () {
-    const currentFocus = rootDocument.activeElement;
-    let currentFocusId;
-    if (currentFocus.localName === 'button' && currentFocus.id) {
-      currentFocusId = currentFocus.id;
-    }
-
-    utils.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);
-        },
-      });
-    }
-  });
-}
-
-/**
- * Destroys the state of the overlay.
- * @returns {void}
- */
-function cleanup() {
-  // Clean up and reset all internal state.
-  try {
-    document.body.removeChild(iframeRoot);
-  } catch (e) {
-    // In case user render react app directly to body， will trigger `NotFoundError` when recovery from an Error
-    // https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild#exceptions
-  }
-  scheduledRenderFn = null;
-  root = null;
-  iframeRoot = null;
-}
-
-/**
- * Clears Webpack compilation errors and dismisses the compile error overlay.
- * @returns {void}
- */
-function clearCompileError() {
-  if (!root || currentMode !== 'compileError') {
-    return;
-  }
-
-  currentCompileErrorMessage = '';
-  currentMode = null;
-  cleanup();
-}
-
-/**
- * Clears runtime error records and dismisses the runtime error overlay.
- * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
- * @returns {void}
- */
-function clearRuntimeErrors(dismissOverlay) {
-  if (!root || currentMode !== 'runtimeError') {
-    return;
-  }
-
-  currentRuntimeErrorIndex = 0;
-  currentRuntimeErrors = [];
-
-  if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
-    currentMode = null;
-    cleanup();
-  }
-}
-
-/**
- * Shows the compile error overlay with the specific Webpack error message.
- * @param {string} message
- * @returns {void}
- */
-function showCompileError(message) {
-  if (!message) {
-    return;
-  }
-
-  currentCompileErrorMessage = message;
-
-  render();
-}
-
-/**
- * Shows the runtime error overlay with the specific error records.
- * @param {Error[]} errors
- * @returns {void}
- */
-function showRuntimeErrors(errors) {
-  if (!errors || !errors.length) {
-    return;
-  }
-
-  currentRuntimeErrors = errors;
-
-  render();
-}
-
-/**
- * The debounced version of `showRuntimeErrors` to prevent frequent renders
- * due to rapid firing listeners.
- * @param {Error[]} errors
- * @returns {void}
- */
-const debouncedShowRuntimeErrors = utils.debounce(showRuntimeErrors, 30);
-
-/**
- * Detects if an error is a Webpack compilation error.
- * @param {Error} error The error of interest.
- * @returns {boolean} If the error is a Webpack compilation error.
- */
-function isWebpackCompileError(error) {
-  return (
-    /Module [A-z ]+\(from/.test(error.message) ||
-    /Cannot find module/.test(error.message)
-  );
-}
-
-/**
- * Handles runtime error contexts captured with EventListeners.
- * Integrates with a runtime error overlay.
- * @param {Error} error A valid error object.
- * @returns {void}
- */
-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,
-});

package/client/overlay/theme.js

@@ -1,39 +0,0 @@
-/**
- * @typedef {Object} Theme
- * @property {string[]} reset
- * @property {string} black
- * @property {string} red
- * @property {string} green
- * @property {string} yellow
- * @property {string} blue
- * @property {string} magenta
- * @property {string} cyan
- * @property {string} white
- * @property {string} lightgrey
- * @property {string} darkgrey
- * @property {string} grey
- * @property {string} dimgrey
- */
-
-/**
- * @type {Theme} theme
- * A collection of colors to be used by the overlay.
- * Partially adopted from Tomorrow Night Bright.
- */
-const theme = {
-  reset: ['transparent', 'transparent'],
-  black: '000000',
-  red: 'D34F56',
-  green: 'B9C954',
-  yellow: 'E6C452',
-  blue: '7CA7D8',
-  magenta: 'C299D6',
-  cyan: '73BFB1',
-  white: 'FFFFFF',
-  lightgrey: 'C7C7C7',
-  darkgrey: 'A9A9A9',
-  grey: '474747',
-  dimgrey: '343434',
-};
-
-module.exports = theme;