refactor: reactRefreshLoader

packages/repack/src/loaders/reactRefreshLoader/index.ts

@@ -0,0 +1,4 @@
+import reactRefreshLoader, { raw } from './reactRefreshLoader.js';
+
+export { raw };
+export default reactRefreshLoader;

packages/repack/src/loaders/reactRefreshCompatLoader/reactRefreshCompatLoader.ts → packages/repack/src/loaders/reactRefreshLoader/reactRefreshLoader.ts

@@ -24,12 +24,13 @@ export const raw = false;
  *
  * Reference implementation: https://github.com/web-infra-dev/rspack/blob/main/crates/rspack_loader_react_refresh/src/lib.rs
  */
-export default function reactRefreshCompatLoader(
+export default function reactRefreshLoader(
   this: LoaderContext,
   originalSource: string,
   sourceMap: any,
   meta: any
 ) {
+  this.cacheable();
   const callback = this.async();
 
   const source = `${originalSource}\n\n${reactRefreshFooter}`;

packages/repack/src/plugins/DevelopmentPlugin.ts

@@ -70,7 +70,7 @@ export class DevelopmentPlugin implements RspackPluginInstance {
         fallback: {
           ...compiler.options.resolveLoader?.fallback,
           'builtin:react-refresh-loader': require.resolve(
-            '../loaders/reactRefreshCompatLoader'
+            '../loaders/reactRefreshLoader'
           ),
         },
       };

website/src/5.x/api/loaders/react-refresh-loader.md

@@ -1 +1,21 @@
-# ReactRefreshCompatLoader
+# ReactRefreshLoader
+
+The `ReactRefreshLoader` is a fallback loader for Webpack that provides React Refresh functionality, mimicking the behavior of Rspack's built-in `builtin:react-refresh-loader`.
+
+## Example
+
+```js title=webpack.config.cjs
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "@callstack/repack/react-refresh-loader",
+        },
+      },
+    ],
+  },
+};
+```