@rsbuild/plugin-react 0.2.18 → 0.3.1

package/README.md

@@ -4,7 +4,7 @@
 
 # Rsbuild
 
-Unleash the power of Rspack with the out-of-the-box build tool.
+The Rspack-based build tool. It's fast, out-of-the-box and extensible.
 
 ## Documentation
 

package/dist/index.js

@@ -148,66 +148,36 @@ var applySplitChunksRule = (api, options = {
 };
 
 // src/react.ts
+var import_node_path = __toESM(require("path"));
 var import_shared4 = require("@rsbuild/shared");
-function getReactRefreshEntry(compiler) {
-  const hot = compiler.options.devServer?.hot ?? true;
-  const refresh = compiler.options.builtins?.react?.refresh ?? true;
-  if (hot && refresh) {
-    const reactRefreshEntryPath = require.resolve("@rspack/plugin-react-refresh/react-refresh-entry");
-    return reactRefreshEntryPath;
-  }
-  return null;
-}
-var setupCompiler = (compiler) => {
-  if (!(0, import_shared4.isClientCompiler)(compiler)) {
-    return;
-  }
-  const reactRefreshEntry = getReactRefreshEntry(compiler);
-  if (!reactRefreshEntry) {
-    return;
-  }
-  new compiler.webpack.EntryPlugin(compiler.context, reactRefreshEntry, {
-    name: void 0
-  }).apply(compiler);
-};
+var REACT_REFRESH_PATH = require.resolve("react-refresh");
+var REACT_REFRESH_DIR_PATH = import_node_path.default.dirname(REACT_REFRESH_PATH);
 var applyBasicReactSupport = (api, options) => {
-  api.onAfterCreateCompiler(({ compiler: multiCompiler }) => {
-    if ((0, import_shared4.isProd)()) {
-      return;
-    }
-    if (multiCompiler.compilers) {
-      multiCompiler.compilers.forEach(setupCompiler);
-    } else {
-      setupCompiler(multiCompiler);
-    }
-  });
-  api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd3, target }) => {
+  api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
-    const usingHMR = (0, import_shared4.isUsingHMR)(config, { isProd: isProd3, target });
-    const rule = chain.module.rule(CHAIN_ID.RULE.JS);
+    const usingHMR = (0, import_shared4.isUsingHMR)(config, { isProd: isProd2, target });
     const reactOptions = {
-      development: !isProd3,
+      development: !isProd2,
       refresh: usingHMR,
       runtime: "automatic",
       ...options.swcReactOptions
     };
-    rule.use(CHAIN_ID.USE.SWC).tap((options2) => {
-      options2.jsc.transform.react = {
-        ...reactOptions
-      };
-      return options2;
+    (0, import_shared4.modifySwcLoaderOptions)({
+      chain,
+      modifier: (options2) => {
+        return (0, import_shared4.deepmerge)(options2, {
+          jsc: {
+            transform: {
+              react: reactOptions
+            }
+          }
+        });
+      }
     });
-    if (chain.module.rules.has(CHAIN_ID.RULE.JS_DATA_URI)) {
-      chain.module.rule(CHAIN_ID.RULE.JS_DATA_URI).use(CHAIN_ID.USE.SWC).tap((options2) => {
-        options2.jsc.transform.react = {
-          ...reactOptions
-        };
-        return options2;
-      });
-    }
     if (!usingHMR) {
       return;
     }
+    chain.resolve.alias.set("react-refresh", REACT_REFRESH_DIR_PATH);
     const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
     chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin);
   });

package/dist/index.mjs

@@ -134,72 +134,40 @@ var applySplitChunksRule = (api, options = {
 };
 
 // src/react.ts
+import path2 from "path";
 import {
-  isProd as isProd2,
+  deepmerge,
   isUsingHMR,
-  isClientCompiler
+  modifySwcLoaderOptions
 } from "@rsbuild/shared";
-function getReactRefreshEntry(compiler) {
-  const hot = compiler.options.devServer?.hot ?? true;
-  const refresh = compiler.options.builtins?.react?.refresh ?? true;
-  if (hot && refresh) {
-    const reactRefreshEntryPath = __require.resolve(
-      "@rspack/plugin-react-refresh/react-refresh-entry"
-    );
-    return reactRefreshEntryPath;
-  }
-  return null;
-}
-var setupCompiler = (compiler) => {
-  if (!isClientCompiler(compiler)) {
-    return;
-  }
-  const reactRefreshEntry = getReactRefreshEntry(compiler);
-  if (!reactRefreshEntry) {
-    return;
-  }
-  new compiler.webpack.EntryPlugin(compiler.context, reactRefreshEntry, {
-    name: void 0
-  }).apply(compiler);
-};
+var REACT_REFRESH_PATH = __require.resolve("react-refresh");
+var REACT_REFRESH_DIR_PATH = path2.dirname(REACT_REFRESH_PATH);
 var applyBasicReactSupport = (api, options) => {
-  api.onAfterCreateCompiler(({ compiler: multiCompiler }) => {
-    if (isProd2()) {
-      return;
-    }
-    if (multiCompiler.compilers) {
-      multiCompiler.compilers.forEach(setupCompiler);
-    } else {
-      setupCompiler(multiCompiler);
-    }
-  });
-  api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd3, target }) => {
+  api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
-    const usingHMR = isUsingHMR(config, { isProd: isProd3, target });
-    const rule = chain.module.rule(CHAIN_ID.RULE.JS);
+    const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
     const reactOptions = {
-      development: !isProd3,
+      development: !isProd2,
       refresh: usingHMR,
       runtime: "automatic",
       ...options.swcReactOptions
     };
-    rule.use(CHAIN_ID.USE.SWC).tap((options2) => {
-      options2.jsc.transform.react = {
-        ...reactOptions
-      };
-      return options2;
+    modifySwcLoaderOptions({
+      chain,
+      modifier: (options2) => {
+        return deepmerge(options2, {
+          jsc: {
+            transform: {
+              react: reactOptions
+            }
+          }
+        });
+      }
     });
-    if (chain.module.rules.has(CHAIN_ID.RULE.JS_DATA_URI)) {
-      chain.module.rule(CHAIN_ID.RULE.JS_DATA_URI).use(CHAIN_ID.USE.SWC).tap((options2) => {
-        options2.jsc.transform.react = {
-          ...reactOptions
-        };
-        return options2;
-      });
-    }
     if (!usingHMR) {
       return;
     }
+    chain.resolve.alias.set("react-refresh", REACT_REFRESH_DIR_PATH);
     const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
     chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-react",
-  "version": "0.2.18",
+  "version": "0.3.1",
   "description": "React plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -22,15 +22,15 @@
     "dist"
   ],
   "dependencies": {
-    "@rspack/plugin-react-refresh": "0.4.5",
+    "@rspack/plugin-react-refresh": "0.5.0",
     "react-refresh": "^0.14.0",
-    "@rsbuild/shared": "0.2.18"
+    "@rsbuild/shared": "0.3.1"
   },
   "devDependencies": {
     "@types/node": "16.x",
     "typescript": "^5.3.0",
-    "@rsbuild/core": "0.2.18",
-    "@rsbuild/test-helper": "0.2.18"
+    "@rsbuild/core": "0.3.1",
+    "@scripts/test-helper": "1.0.0"
   },
   "publishConfig": {
     "access": "public",