@rspack/plugin-react-refresh 1.0.0-alpha.0 → 1.0.0-alpha.1

package/client/utils/ansi-html.js

@@ -0,0 +1,305 @@
+/* eslint-disable */
+// @ts-nocheck
+/**
+ * The following code is modified based on
+ * https://github.com/mahdyar/ansi-html-community/blob/b86cc3f1fa1d118477877352f0eafe1a70fd20ab/index.js
+ *
+ * Supported:
+ *  - added support for 24-bit RGB colors.
+ *
+ * Apache 2.0 Licensed
+ * Author @Tjatse
+ * https://github.com/mahdyar/ansi-html-community/blob/master/LICENSE
+ */
+"use strict";
+
+module.exports = ansiHTML;
+
+// Reference to https://github.com/sindresorhus/ansi-regex
+var _regANSI =
+  /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/;
+
+var _defColors = {
+  reset: ["fff", "000"], // [FOREGROUND_COLOR, BACKGROUND_COLOR]
+  black: "000",
+  red: "ff0000",
+  green: "209805",
+  yellow: "e8bf03",
+  blue: "0000ff",
+  magenta: "ff00ff",
+  cyan: "00ffee",
+  lightgrey: "f0f0f0",
+  darkgrey: "888"
+};
+var _styles = {
+  30: "black",
+  31: "red",
+  32: "green",
+  33: "yellow",
+  34: "blue",
+  35: "magenta",
+  36: "cyan",
+  37: "lightgrey"
+};
+
+var _colorMode = {
+  2: "rgb"
+};
+
+var _openTags = {
+  1: "font-weight:bold", // bold
+  2: "opacity:0.5", // dim
+  3: "<i>", // italic
+  4: "<u>", // underscore
+  8: "display:none", // hidden
+  9: "<del>", // delete
+  38: function (match) {
+    // color
+    var mode = _colorMode[match[0]];
+    if (mode === "rgb") {
+      var r, g, b;
+      r = match[1];
+      g = match[2];
+      b = match[3];
+      match.advance(4);
+      return "color: rgb(" + r + "," + g + "," + b + ")";
+    }
+  },
+  48: function (match) {
+    // background color
+    var mode = _colorMode[match[0]];
+    if (mode === "rgb") {
+      var r, g, b;
+      r = match[1];
+      g = match[2];
+      b = match[3];
+      match.advance(4);
+      return "background-color: rgb(" + r + "," + g + "," + b + ")";
+    }
+  }
+};
+
+var _openTagToCloseTag = {
+  3: "23",
+  4: "24",
+  9: "29"
+};
+
+var _closeTags = {
+  0: function (ansiCodes) {
+    if (!ansiCodes) return "</span>";
+    if (!ansiCodes.length) return "";
+    var code,
+      ret = "";
+    while ((code = ansiCodes.pop())) {
+      var closeTag = _openTagToCloseTag[code];
+      if (closeTag) {
+        ret += _closeTags[closeTag];
+        continue;
+      }
+      ret += "</span>";
+    }
+    return ret;
+  },
+  23: "</i>", // reset italic
+  24: "</u>", // reset underscore
+  29: "</del>" // reset delete
+};
+
+[21, 22, 27, 28, 39, 49].forEach(function (n) {
+  _closeTags[n] = "</span>";
+});
+
+/**
+ * Normalize ';<seq>' | '<seq>' -> '<seq>'
+ * @param {string | null} seq
+ * @returns {null | string}
+ */
+function normalizeSeq(seq) {
+  if (seq === null || seq === undefined) return null;
+  if (seq.startsWith(";")) {
+    return seq.slice(1);
+  }
+  return seq;
+}
+
+/**
+ * Converts text with ANSI color codes to HTML markup.
+ * @param {String} text
+ * @returns {*}
+ */
+function ansiHTML(text) {
+  // Returns the text if the string has no ANSI escape code.
+  if (!_regANSI.test(text)) {
+    return text;
+  }
+
+  // Cache opened sequence.
+  var ansiCodes = [];
+  // Replace with markup.
+  var ret = text.replace(
+    /\033\[(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?m/g,
+    function (m) {
+      var match = m.match(/(;?\d+)/g).map(normalizeSeq);
+      Object.defineProperty(match, "advance", {
+        value: function (count) {
+          this.splice(0, count);
+        }
+      });
+      var seq,
+        rep = "";
+      while ((seq = match[0])) {
+        match.advance(1);
+        rep += applySeq(seq);
+      }
+      return rep;
+
+      function applySeq(seq) {
+        var other = _openTags[seq];
+        if (
+          other &&
+          (other = typeof other === "function" ? other(match) : other)
+        ) {
+          // If reset signal is encountered, we have to reset everything.
+          var ret = "";
+          if (seq === "0") {
+            ret += _closeTags[seq](ansiCodes);
+          }
+          // If current sequence has been opened, close it.
+          if (!!~ansiCodes.indexOf(seq)) {
+            // eslint-disable-line no-extra-boolean-cast
+            ansiCodes.pop();
+            return "</span>";
+          }
+          // Open tag.
+          ansiCodes.push(seq);
+          return (
+            ret + (other[0] === "<" ? other : '<span style="' + other + ';">')
+          );
+        }
+
+        var ct = _closeTags[seq];
+        if (typeof ct === "function") {
+          return ct(ansiCodes);
+        } else if (ct) {
+          // Pop sequence
+          ansiCodes.pop();
+          return ct;
+        }
+        return "";
+      }
+    }
+  );
+
+  // Make sure tags are closed.
+  var l = ansiCodes.length;
+  l > 0 && (ret += Array(l + 1).join("</span>"));
+
+  return ret;
+}
+
+/**
+ * Customize colors.
+ * @param {Object} colors reference to _defColors
+ */
+ansiHTML.setColors = function (colors) {
+  if (typeof colors !== "object") {
+    throw new Error("`colors` parameter must be an Object.");
+  }
+
+  var _finalColors = {};
+  for (var key in _defColors) {
+    var hex = colors.hasOwnProperty(key) ? colors[key] : null;
+    if (!hex) {
+      _finalColors[key] = _defColors[key];
+      continue;
+    }
+    if ("reset" === key) {
+      if (typeof hex === "string") {
+        hex = [hex];
+      }
+      if (
+        !Array.isArray(hex) ||
+        hex.length === 0 ||
+        hex.some(function (h) {
+          return typeof h !== "string";
+        })
+      ) {
+        throw new Error(
+          "The value of `" +
+          key +
+          "` property must be an Array and each item could only be a hex string, e.g.: FF0000"
+        );
+      }
+      var defHexColor = _defColors[key];
+      if (!hex[0]) {
+        hex[0] = defHexColor[0];
+      }
+      if (hex.length === 1 || !hex[1]) {
+        hex = [hex[0]];
+        hex.push(defHexColor[1]);
+      }
+
+      hex = hex.slice(0, 2);
+    } else if (typeof hex !== "string") {
+      throw new Error(
+        "The value of `" + key + "` property must be a hex string, e.g.: FF0000"
+      );
+    }
+    _finalColors[key] = hex;
+  }
+  _setTags(_finalColors);
+};
+
+/**
+ * Reset colors.
+ */
+ansiHTML.reset = function () {
+  _setTags(_defColors);
+};
+
+/**
+ * Expose tags, including open and close.
+ * @type {Object}
+ */
+ansiHTML.tags = {};
+
+if (Object.defineProperty) {
+  Object.defineProperty(ansiHTML.tags, "open", {
+    get: function () {
+      return _openTags;
+    }
+  });
+  Object.defineProperty(ansiHTML.tags, "close", {
+    get: function () {
+      return _closeTags;
+    }
+  });
+} else {
+  ansiHTML.tags.open = _openTags;
+  ansiHTML.tags.close = _closeTags;
+}
+
+function _setTags(colors) {
+  // reset all
+  _openTags["0"] =
+    "font-weight:normal;opacity:1;color:#" +
+    colors.reset[0] +
+    ";background:#" +
+    colors.reset[1];
+  // inverse
+  _openTags["7"] =
+    "color:#" + colors.reset[1] + ";background:#" + colors.reset[0];
+  // dark grey
+  _openTags["90"] = "color:#" + colors.darkgrey;
+
+  for (var code in _styles) {
+    var color = _styles[code];
+    var oriColor = colors[color] || "000";
+    _openTags[code] = "color:#" + oriColor;
+    code = parseInt(code);
+    _openTags[(code + 10).toString()] = "background:#" + oriColor;
+  }
+}
+
+ansiHTML.reset();

package/client/utils/errorEventHandlers.js

@@ -0,0 +1,102 @@
+/**
+ * @callback EventCallback
+ * @param {string | Error | null} context
+ * @returns {void}
+ */
+/**
+ * @callback EventHandler
+ * @param {Event} event
+ * @returns {void}
+ */
+
+/**
+ * A function that creates an event handler for the `error` event.
+ * @param {EventCallback} callback A function called to handle the error context.
+ * @returns {EventHandler} A handler for the `error` event.
+ */
+function createErrorHandler(callback) {
+  return function errorHandler(event) {
+    if (!event || !event.error) {
+      return callback(null);
+    }
+    if (event.error instanceof Error) {
+      return callback(event.error);
+    }
+    // A non-error was thrown, we don't have a trace. :(
+    // Look in your browser's devtools for more information
+    return callback(new Error(event.error));
+  };
+}
+
+/**
+ * A function that creates an event handler for the `unhandledrejection` event.
+ * @param {EventCallback} callback A function called to handle the error context.
+ * @returns {EventHandler} A handler for the `unhandledrejection` event.
+ */
+function createRejectionHandler(callback) {
+  return function rejectionHandler(event) {
+    if (!event || !event.reason) {
+      return callback(new Error('Unknown'));
+    }
+    if (event.reason instanceof Error) {
+      return callback(event.reason);
+    }
+    // A non-error was rejected, we don't have a trace :(
+    // Look in your browser's devtools for more information
+    return callback(new Error(event.reason));
+  };
+}
+
+/**
+ * Creates a handler that registers an EventListener on window for a valid type
+ * and calls a callback when the event fires.
+ * @param {string} eventType A valid DOM event type.
+ * @param {function(EventCallback): EventHandler} createHandler A function that creates an event handler.
+ * @returns {register} A function that registers the EventListener given a callback.
+ */
+function createWindowEventHandler(eventType, createHandler) {
+  /**
+   * @type {EventHandler | null} A cached event handler function.
+   */
+  let eventHandler = null;
+
+  /**
+   * Unregisters an EventListener if it has been registered.
+   * @returns {void}
+   */
+  function unregister() {
+    if (eventHandler === null) {
+      return;
+    }
+    window.removeEventListener(eventType, eventHandler);
+    eventHandler = null;
+  }
+
+  /**
+   * Registers an EventListener if it hasn't been registered.
+   * @param {EventCallback} callback A function called after the event handler to handle its context.
+   * @returns {unregister | void} A function to unregister the registered EventListener if registration is performed.
+   */
+  function register(callback) {
+    if (eventHandler !== null) {
+      return;
+    }
+    eventHandler = createHandler(callback);
+    window.addEventListener(eventType, eventHandler);
+
+    return unregister;
+  }
+
+  return register;
+}
+
+const handleError = createWindowEventHandler('error', createErrorHandler);
+const handleUnhandledRejection = createWindowEventHandler(
+  'unhandledrejection',
+  createRejectionHandler
+);
+
+module.exports = {
+  handleError: handleError,
+  handleUnhandledRejection: handleUnhandledRejection,
+};

package/client/utils/formatWebpackErrors.js

@@ -0,0 +1,96 @@
+/**
+ * @typedef {Object} WebpackErrorObj
+ * @property {string} moduleIdentifier
+ * @property {string} moduleName
+ * @property {string} message
+ */
+
+const friendlySyntaxErrorLabel = 'Syntax error:';
+
+/**
+ * Checks if the error message is for a syntax error.
+ * @param {string} message The raw Webpack error message.
+ * @returns {boolean} Whether the error message is for a syntax error.
+ */
+function isLikelyASyntaxError(message) {
+  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
+}
+
+/**
+ * Cleans up Webpack error messages.
+ *
+ * This implementation is based on the one from [create-react-app](https://github.com/facebook/create-react-app/blob/edc671eeea6b7d26ac3f1eb2050e50f75cf9ad5d/packages/react-dev-utils/formatWebpackMessages.js).
+ * @param {string} message The raw Webpack error message.
+ * @returns {string} The formatted Webpack error message.
+ */
+function formatMessage(message) {
+  let lines = message.split('\n');
+
+  // Strip Webpack-added headers off errors/warnings
+  // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
+  lines = lines.filter(function (line) {
+    return !/Module [A-z ]+\(from/.test(line);
+  });
+
+  // Remove leading newline
+  if (lines.length > 2 && lines[1].trim() === '') {
+    lines.splice(1, 1);
+  }
+
+  // Remove duplicated newlines
+  lines = lines.filter(function (line, index, arr) {
+    return index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim();
+  });
+
+  // Clean up the file name
+  lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1');
+
+  // Cleans up verbose "module not found" messages for files and packages.
+  if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
+    lines = [
+      lines[0],
+      lines[1]
+        .replace('Error: ', '')
+        .replace('Module not found: Cannot find file:', 'Cannot find file:'),
+    ];
+  }
+
+  message = lines.join('\n');
+
+  // Clean up syntax errors
+  message = message.replace('SyntaxError:', friendlySyntaxErrorLabel);
+
+  // Internal stacks are generally useless, so we strip them -
+  // except the stacks containing `webpack:`,
+  // because they're normally from user code generated by webpack.
+  message = message.replace(/^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm, ''); // at ... ...:x:y
+  message = message.replace(/^\s*at\s((?!webpack:).)*<anonymous>[\s)]*(\n|$)/gm, ''); // at ... <anonymous>
+  message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, ''); // at <anonymous>
+
+  return message.trim();
+}
+
+/**
+ * Formats Webpack error messages into a more readable format.
+ * @param {Array<string | WebpackErrorObj>} errors An array of Webpack error messages.
+ * @returns {string[]} The formatted Webpack error messages.
+ */
+function formatWebpackErrors(errors) {
+  let formattedErrors = errors.map(function (errorObjOrMessage) {
+    // Webpack 5 compilation errors are in the form of descriptor objects,
+    // so we have to join pieces to get the format we want.
+    if (typeof errorObjOrMessage === 'object') {
+      return formatMessage([errorObjOrMessage.moduleName, errorObjOrMessage.message].join('\n'));
+    }
+    // Webpack 4 compilation errors are strings
+    return formatMessage(errorObjOrMessage);
+  });
+
+  if (formattedErrors.some(isLikelyASyntaxError)) {
+    // If there are any syntax errors, show just them.
+    formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
+  }
+  return formattedErrors;
+}
+
+module.exports = formatWebpackErrors;

package/client/utils/retry.js

@@ -0,0 +1,23 @@
+function runWithRetry(callback, maxRetries) {
+  function executeWithRetryAndTimeout(currentCount) {
+    try {
+      if (currentCount > maxRetries - 1) {
+        console.warn('[React Refresh] Failed to set up the socket connection.');
+        return;
+      }
+
+      callback();
+    } catch (err) {
+      setTimeout(
+        function () {
+          executeWithRetryAndTimeout(currentCount + 1);
+        },
+        Math.pow(10, currentCount)
+      );
+    }
+  }
+
+  executeWithRetryAndTimeout(0);
+}
+
+module.exports = runWithRetry;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Compiler } from "@rspack/core";
-import { type PluginOptions } from "./options";
+import { type NormalizedPluginOptions, type PluginOptions } from "./options";
 export type { PluginOptions };
 /**
  * @typedef {Object} Options
@@ -7,7 +7,7 @@ export type { PluginOptions };
  * @property {(string | RegExp | (string | RegExp)[] | null)=} exclude excluded resourcePath for loader
  */
 declare class ReactRefreshRspackPlugin {
-    options: PluginOptions;
+    options: NormalizedPluginOptions;
     static deprecated_runtimePaths: string[];
     constructor(options?: PluginOptions);
     apply(compiler: Compiler): void;

package/dist/index.js

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 const path_1 = __importDefault(require("path"));
 const options_1 = require("./options");
+const getAdditionalEntries_1 = require("./utils/getAdditionalEntries");
+const getSocketIntegration_1 = __importDefault(require("./utils/getSocketIntegration"));
 const reactRefreshPath = require.resolve("../client/reactRefresh.js");
 const reactRefreshEntryPath = require.resolve("../client/reactRefreshEntry.js");
 const refreshUtilsPath = require.resolve("../client/refreshUtils.js");
@@ -36,9 +38,20 @@ class ReactRefreshRspackPlugin {
             !this.options.forceEnable) {
             return;
         }
-        new compiler.webpack.EntryPlugin(compiler.context, reactRefreshEntryPath, {
-            name: undefined
-        }).apply(compiler);
+        const addEntries = (0, getAdditionalEntries_1.getAdditionalEntries)({
+            devServer: compiler.options.devServer,
+            options: this.options
+        });
+        addEntries.prependEntries.forEach(entry => {
+            new compiler.webpack.EntryPlugin(compiler.context, entry, {
+                name: undefined
+            }).apply(compiler);
+        });
+        addEntries.overlayEntries.forEach(entry => {
+            new compiler.webpack.EntryPlugin(compiler.context, entry, {
+                name: undefined
+            }).apply(compiler);
+        });
         new compiler.webpack.ProvidePlugin({
             $ReactRefreshRuntime$: reactRefreshPath
         }).apply(compiler);
@@ -55,7 +68,24 @@ class ReactRefreshRspackPlugin {
                 compiler.options.output.uniqueName ||
                 compiler.options.output.library))
         };
+        const providedModules = {
+            __react_refresh_utils__: refreshUtilsPath
+        };
+        if (this.options.overlay === false) {
+            // Stub errorOverlay module so their calls can be erased
+            definedModules.__react_refresh_error_overlay__ = false;
+            definedModules.__react_refresh_socket__ = false;
+        }
+        else {
+            if (this.options.overlay.module) {
+                providedModules.__react_refresh_error_overlay__ = require.resolve(this.options.overlay.module);
+            }
+            if (this.options.overlay.sockIntegration) {
+                providedModules.__react_refresh_socket__ = (0, getSocketIntegration_1.default)(this.options.overlay.sockIntegration);
+            }
+        }
         new compiler.webpack.DefinePlugin(definedModules).apply(compiler);
+        new compiler.webpack.ProvidePlugin(providedModules).apply(compiler);
         const refreshPath = path_1.default.dirname(require.resolve("react-refresh"));
         compiler.options.resolve.alias = {
             "react-refresh": refreshPath,

package/dist/options.d.ts

@@ -1,7 +1,22 @@
+import type { IntegrationType } from "./utils/getSocketIntegration";
+interface OverlayOptions {
+    entry: string;
+    module: string;
+    sockIntegration: IntegrationType;
+    sockHost?: string;
+    sockPath?: string;
+    sockPort?: string;
+    sockProtocol?: string;
+}
 export type PluginOptions = {
     include?: string | RegExp | (string | RegExp)[] | null;
     exclude?: string | RegExp | (string | RegExp)[] | null;
     library?: string;
     forceEnable?: boolean;
+    overlay?: boolean | OverlayOptions;
 };
-export declare function normalizeOptions(options: PluginOptions): PluginOptions;
+export interface NormalizedPluginOptions extends Required<PluginOptions> {
+    overlay: false | OverlayOptions;
+}
+export declare function normalizeOptions(options: PluginOptions): NormalizedPluginOptions;
+export {};

package/dist/options.js

@@ -9,11 +9,30 @@ const d = (object, property, defaultValue) => {
     }
     return object[property];
 };
+const normalizeOverlay = (options) => {
+    const defaultOverlay = {
+        entry: require.resolve("../client/errorOverlayEntry.js"),
+        module: require.resolve("../client/overlay/index.js"),
+        sockIntegration: "wds"
+    };
+    if (!options) {
+        return false;
+    }
+    if (typeof options === "undefined" || options === true) {
+        return defaultOverlay;
+    }
+    options.entry = options.entry ?? defaultOverlay.entry;
+    options.module = options.module ?? defaultOverlay.module;
+    options.sockIntegration =
+        options.sockIntegration ?? defaultOverlay.sockIntegration;
+    return options;
+};
 function normalizeOptions(options) {
     d(options, "exclude", /node_modules/i);
     d(options, "include", /\.([cm]js|[jt]sx?|flow)$/i);
     d(options, "library");
     d(options, "forceEnable", false);
+    options.overlay = normalizeOverlay(options.overlay);
     return options;
 }
 exports.normalizeOptions = normalizeOptions;

package/dist/sockets/WDSSocket.d.ts

@@ -0,0 +1,10 @@
+declare global {
+    var __webpack_dev_server_client__: any;
+}
+/**
+ * Initializes a socket server for HMR for webpack-dev-server.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
+ * @param {string} [resourceQuery] Webpack's `__resourceQuery` string.
+ * @returns {void}
+ */
+export declare function init(messageHandler: (...args: any[]) => void, resourceQuery: string): void;