@rspack/plugin-react-refresh 0.7.6-canary-1a0d77d-20240627143904 → 1.0.0-alpha.1

package/README.md

@@ -1,6 +1,6 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspack-banner-1610-dark.png">
-  <img alt="Rspack Banner" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspack-banner-1610.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://assets.rspack.dev/rspack/rspack-banner-plain-dark.png">
+  <img alt="Rspack Banner" src="https://assets.rspack.dev/rspack/rspack-banner-plain-light.png">
 </picture>
 
 # @rspack/plugin-react-refresh

package/client/errorOverlayEntry.js

@@ -0,0 +1,108 @@
+/* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
+/**
+ * The following code is modified based on
+ * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/client/ErrorOverlayEntry.js
+ *
+ * MIT Licensed
+ * Author Michael Mok
+ * Copyright (c) 2019 Michael Mok
+ * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
+ */
+const events = require('./utils/errorEventHandlers.js');
+const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
+const runWithRetry = require('./utils/retry.js');
+
+// Setup error states
+let isHotReload = false;
+let hasRuntimeErrors = false;
+
+/**
+ * Try dismissing the compile error overlay.
+ * This will also reset runtime error records (if any),
+ * because we have new source to evaluate.
+ * @returns {void}
+ */
+function tryDismissErrorOverlay() {
+  __react_refresh_error_overlay__.clearCompileError();
+  __react_refresh_error_overlay__.clearRuntimeErrors(!hasRuntimeErrors);
+  hasRuntimeErrors = false;
+}
+
+/**
+ * A function called after a compile success signal is received from Webpack.
+ * @returns {void}
+ */
+function handleCompileSuccess() {
+  isHotReload = true;
+
+  if (isHotReload) {
+    tryDismissErrorOverlay();
+  }
+}
+
+/**
+ * A function called after a compile errored signal is received from Webpack.
+ * @param {string[]} errors
+ * @returns {void}
+ */
+function handleCompileErrors(errors) {
+  isHotReload = true;
+
+  const formattedErrors = formatWebpackErrors(errors);
+
+  // Only show the first error
+  __react_refresh_error_overlay__.showCompileError(formattedErrors[0]);
+}
+
+/**
+ * Handles compilation messages from Webpack.
+ * Integrates with a compile error overlay.
+ * @param {*} message A Webpack HMR message sent via WebSockets.
+ * @returns {void}
+ */
+function compileMessageHandler(message) {
+  switch (message.type) {
+    case 'ok':
+    case 'still-ok':
+    case 'warnings': {
+      // TODO: Implement handling for warnings
+      handleCompileSuccess();
+      break;
+    }
+    case 'errors': {
+      handleCompileErrors(message.data);
+      break;
+    }
+    default: {
+      // Do nothing.
+    }
+  }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined') {
+    function setupOverlay() {
+      // Only register if no other overlay have been registered
+      if (!window.__reactRefreshOverlayInjected && __react_refresh_socket__) {
+        // Registers handlers for compile errors with retry -
+        // This is to prevent mismatching injection order causing errors to be thrown
+        runWithRetry(function initSocket() {
+          __react_refresh_socket__.init(compileMessageHandler, __resourceQuery);
+        }, 3);
+        // Registers handlers for runtime errors
+        events.handleError(function handleError(error) {
+          hasRuntimeErrors = true;
+          __react_refresh_error_overlay__.handleRuntimeError(error);
+        });
+        events.handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
+          hasRuntimeErrors = true;
+          __react_refresh_error_overlay__.handleRuntimeError(error);
+        });
+
+        // Mark overlay as injected to prevent double-injection
+        window.__reactRefreshOverlayInjected = true;
+      }
+    };
+    setupOverlay()
+  }
+}

package/client/overlay/components/CompileErrorTrace.js

@@ -0,0 +1,58 @@
+const ansiHTML = require('../../utils/ansi-html.js');
+const entities = require('html-entities');
+const theme = require('../theme.js');
+const utils = require('../utils.js');
+
+ansiHTML.setColors(theme);
+
+/**
+ * @typedef {Object} CompileErrorTraceProps
+ * @property {string} errorMessage
+ */
+
+/**
+ * A formatter that turns Webpack compile error messages into highlighted HTML source traces.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {CompileErrorTraceProps} props
+ * @returns {void}
+ */
+function CompileErrorTrace(document, root, props) {
+  const errorParts = props.errorMessage.split('\n');
+  if (errorParts.length) {
+    if (errorParts[0]) {
+      errorParts[0] = utils.formatFilename(errorParts[0]);
+    }
+
+    const errorMessage = errorParts.splice(1, 1)[0];
+    if (errorMessage) {
+      // Strip filename from the error message
+      errorParts.unshift(errorMessage.replace(/^(.*:)\s.*:(\s.*)$/, '$1$2'));
+    }
+  }
+
+  const stackContainer = document.createElement('pre');
+  stackContainer.innerHTML = entities.decode(
+    ansiHTML(entities.encode(errorParts.join('\n'), { level: 'html5', mode: 'nonAscii' })),
+    { level: 'html5' }
+  );
+  stackContainer.style.fontFamily = [
+    '"Operator Mono SSm"',
+    '"Operator Mono"',
+    '"Fira Code Retina"',
+    '"Fira Code"',
+    '"FiraCode-Retina"',
+    '"Andale Mono"',
+    '"Lucida Console"',
+    'Menlo',
+    'Consolas',
+    'Monaco',
+    'monospace',
+  ].join(', ');
+  stackContainer.style.margin = '0';
+  stackContainer.style.whiteSpace = 'pre-wrap';
+
+  root.appendChild(stackContainer);
+}
+
+module.exports = CompileErrorTrace;

package/client/overlay/components/PageHeader.js

@@ -0,0 +1,58 @@
+const Spacer = require('./Spacer.js');
+const theme = require('../theme.js');
+
+/**
+ * @typedef {Object} PageHeaderProps
+ * @property {string} [message]
+ * @property {string} title
+ * @property {string} [topOffset]
+ */
+
+/**
+ * The header of the overlay.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {PageHeaderProps} props
+ * @returns {void}
+ */
+function PageHeader(document, root, props) {
+  const pageHeaderContainer = document.createElement('div');
+  pageHeaderContainer.style.background = '#' + theme.dimgrey;
+  pageHeaderContainer.style.boxShadow = '0 1px 4px rgba(0, 0, 0, 0.3)';
+  pageHeaderContainer.style.color = '#' + theme.white;
+  pageHeaderContainer.style.left = '0';
+  pageHeaderContainer.style.right = '0';
+  pageHeaderContainer.style.padding = '1rem 1.5rem';
+  pageHeaderContainer.style.paddingLeft = 'max(1.5rem, env(safe-area-inset-left))';
+  pageHeaderContainer.style.paddingRight = 'max(1.5rem, env(safe-area-inset-right))';
+  pageHeaderContainer.style.position = 'fixed';
+  pageHeaderContainer.style.top = props.topOffset || '0';
+
+  const title = document.createElement('h3');
+  title.innerText = props.title;
+  title.style.color = '#' + theme.red;
+  title.style.fontSize = '1.125rem';
+  title.style.lineHeight = '1.3';
+  title.style.margin = '0';
+  pageHeaderContainer.appendChild(title);
+
+  if (props.message) {
+    title.style.margin = '0 0 0.5rem';
+
+    const message = document.createElement('span');
+    message.innerText = props.message;
+    message.style.color = '#' + theme.white;
+    message.style.wordBreak = 'break-word';
+    pageHeaderContainer.appendChild(message);
+  }
+
+  root.appendChild(pageHeaderContainer);
+
+  // This has to run after appending elements to root
+  // because we need to actual mounted height.
+  Spacer(document, root, {
+    space: pageHeaderContainer.offsetHeight.toString(10),
+  });
+}
+
+module.exports = PageHeader;

package/client/overlay/components/RuntimeErrorFooter.js

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,19 @@
+/**
+ * @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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,29 @@
+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;