feat: allow to override the default react-refresh-loader

Thank you for working on the React implementation for Rspack, we are excited to use it in our company stack. Yet, we have faced a challenge regarding the React Fast Refresh instrumentation.
The problem is that, along with React jsx, we use a custom in-house rendering runtime with `/** @jsxImportSource custom-jsx */` pragma.

Unfortunately, while Fast Refresh does work for the React components, for such custom runtime components the HMR is completely broken. As a workaround, engineers disable RFR and fall back to HMR. I want to improve the experience for the product teams and found out that I can write my own react-refresh loader, which is 99% the same as `builtin:react-refresh-loader` but can handle the case with a custom jsx runtime.

This seems to work just fine. And now we are missing a way to override the default builtin:react-refresh-loader.

Hence, this PR adds a plugin option that allows specifying a custom react-refresh loader for those who want to have a more advanced RFR implementation

Author: n0th1ng-else

README.md

@@ -227,6 +227,21 @@ new ReactRefreshPlugin({
 });
 ```
 
+### reactRefreshLoader
+
+- Type: `string`
+- Default: `builtin:react-refresh-loader`
+
+Be default, the plugin uses `builtin:react-refresh-loader` loader implementation [from Rspack](https://github.com/web-infra-dev/rspack/tree/main/crates/rspack_loader_react_refresh) in order ot inject
+the React Refresh utilities into each module. `reactRefreshLoader` option allows to specify the loader, that implements 
+custom React Refresh instrumentation if needed.
+
+```js
+new ReactRefreshPlugin({
+    reactRefreshLoader: 'my-advanced-react-refresh-loader',
+});
+```
+
 ## Credits
 
 Thanks to the [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) created by [@pmmmwh](https://github.com/pmmmwh), which inspires implement this plugin.

src/index.ts

@@ -42,8 +42,6 @@ class ReactRefreshRspackPlugin {
     return getRefreshRuntimePaths();
   }
 
-  static loader = 'builtin:react-refresh-loader';
-
   constructor(options: PluginOptions = {}) {
     this.options = normalizeOptions(options);
   }
@@ -104,7 +102,7 @@ class ReactRefreshRspackPlugin {
           // React Refresh should not be injected for asset modules as they are static resources
           not: ['url'],
         },
-        use: ReactRefreshRspackPlugin.loader,
+        use: this.options.reactRefreshLoader,
       });
     }
 

src/options.ts

@@ -85,6 +85,11 @@ export type PluginOptions = {
    * @default false
    */
   reloadOnRuntimeErrors?: boolean;
+  /**
+   * Allows to specify custom react-refresh loader
+   * @default "builtin:react-refresh-loader"
+   */
+  reactRefreshLoader?: string;
 };
 
 export interface NormalizedPluginOptions extends Required<PluginOptions> {
@@ -135,6 +140,7 @@ export function normalizeOptions(
   d(options, 'injectLoader', true);
   d(options, 'injectEntry', true);
   d(options, 'reloadOnRuntimeErrors', false);
+  d(options, 'reactRefreshLoader', 'builtin:react-refresh-loader');
   options.overlay = normalizeOverlay(options.overlay);
   return options as NormalizedPluginOptions;
 }

test/exports.spec.mts

@@ -1,6 +1,15 @@
 import DefaultExport, { ReactRefreshRspackPlugin } from '../exports/index.mjs';
 
 test('should allow to import from the package', () => {
-  expect(DefaultExport.loader).toBeTruthy();
+  const instance = new ReactRefreshRspackPlugin();
+  expect(instance.options.reactRefreshLoader).toBeTruthy();
+});
+
+test('should allow the default import from the package', () => {
+  const instance = new DefaultExport();
+  expect(instance.options.reactRefreshLoader).toBeTruthy();
+});
+
+test('default import picks the same plugin class', () => {
   expect(DefaultExport).toEqual(ReactRefreshRspackPlugin);
 });

test/exports.spec.ts

@@ -1,5 +1,6 @@
 const DefaultExport = require('../exports/index.cjs');
 
 test('should allow to require from the package', () => {
-  expect(DefaultExport.loader).toBeTruthy();
+  const instance = new DefaultExport();
+  expect(instance.options.reactRefreshLoader).toBeTruthy();
 });

test/fixtures/loader/index.js

@@ -0,0 +1 @@
+require('foo');

test/fixtures/loader/loader.js

@@ -0,0 +1,8 @@
+module.exports = function customLoader(source, sourceMap) {
+  const callback = this.async();
+
+  const injected = `/** TEST_LOADER */`;
+  const result = `${source}\n${injected}`;
+
+  callback(null, result, sourceMap);
+};