@rsbuild/plugin-react 0.0.10 → 0.0.11

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { DefaultRsbuildPlugin } from '@rsbuild/shared';
-export declare const pluginReact: () => DefaultRsbuildPlugin;
+import type { RsbuildPlugin } from '@rsbuild/core';
+export declare const pluginReact: () => RsbuildPlugin;

package/dist/index.js

@@ -29,7 +29,9 @@ const pluginReact = () => ({
   name: "plugin-react",
   pre: ["plugin-swc"],
   setup(api) {
-    (0, import_react.applyBasicReactSupport)(api);
+    if (api.context.bundlerType === "rspack") {
+      (0, import_react.applyBasicReactSupport)(api);
+    }
     (0, import_antd.applyAntdSupport)(api);
     (0, import_arco.applyArcoSupport)(api);
     (0, import_splitChunks.applySplitChunksRule)(api);

package/dist/react.d.ts

@@ -1,2 +1,2 @@
-import { type SharedRsbuildPluginAPI } from '@rsbuild/shared';
-export declare const applyBasicReactSupport: (api: SharedRsbuildPluginAPI) => void;
+import type { RsbuildPluginAPI } from '@rsbuild/core/rspack-provider';
+export declare const applyBasicReactSupport: (api: RsbuildPluginAPI) => void;

package/dist/react.js

@@ -32,7 +32,42 @@ __export(react_exports, {
 });
 module.exports = __toCommonJS(react_exports);
 var import_shared = require("@rsbuild/shared");
-const applyRspack = (api) => {
+function getReactRefreshEntry(compiler) {
+  var _a, _b, _c, _d, _e;
+  const hot = (_b = (_a = compiler.options.devServer) == null ? void 0 : _a.hot) != null ? _b : true;
+  const refresh = (_e = (_d = (_c = compiler.options.builtins) == null ? void 0 : _c.react) == null ? void 0 : _d.refresh) != null ? _e : true;
+  if (hot && refresh) {
+    const reactRefreshEntryPath = require.resolve("@rspack/plugin-react-refresh/react-refresh-entry");
+    return reactRefreshEntryPath;
+  }
+  return null;
+}
+const setupCompiler = (compiler) => {
+  if (!(0, import_shared.isClientCompiler)(compiler)) {
+    return;
+  }
+  const reactRefreshEntry = getReactRefreshEntry(compiler);
+  if (!reactRefreshEntry) {
+    return;
+  }
+  for (const key in compiler.options.entry) {
+    compiler.options.entry[key].import = [
+      reactRefreshEntry,
+      ...compiler.options.entry[key].import || []
+    ];
+  }
+};
+const applyBasicReactSupport = (api) => {
+  api.onAfterCreateCompiler(({ compiler: multiCompiler }) => {
+    if ((0, import_shared.isProd)()) {
+      return;
+    }
+    if (multiCompiler.compilers) {
+      multiCompiler.compilers.forEach(setupCompiler);
+    } else {
+      setupCompiler(multiCompiler);
+    }
+  });
   api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
     const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
@@ -60,69 +95,13 @@ const applyRspack = (api) => {
       return;
     }
     const { default: ReactRefreshRspackPlugin } = await Promise.resolve().then(() => __toESM(require(
+      // TODO https://github.com/web-infra-dev/rspack/issues/4471
       // @ts-expect-error
       "@rspack/plugin-react-refresh"
     )));
     chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin);
   });
 };
-const applyWebpack = (api) => {
-  api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig }) => {
-    const babelConfig = {
-      tools: {
-        babel(_, { addPresets, addPlugins }) {
-          const isNewJsx = (0, import_shared.isBeyondReact17)(api.context.rootPath);
-          const presetReactOptions = {
-            development: !(0, import_shared.isProd)(),
-            // Will use the native built-in instead of trying to polyfill
-            useBuiltIns: true,
-            useSpread: false,
-            runtime: isNewJsx ? "automatic" : "classic"
-          };
-          addPresets([
-            [require.resolve("@babel/preset-react"), presetReactOptions]
-          ]);
-          if ((0, import_shared.isProd)()) {
-            addPlugins([
-              [
-                require.resolve("babel-plugin-transform-react-remove-prop-types"),
-                { removeImport: true }
-              ]
-            ]);
-          }
-        }
-      }
-    };
-    return mergeRsbuildConfig(babelConfig, config);
-  });
-  api.modifyWebpackChain(async (chain, utils) => {
-    const config = api.getNormalizedConfig();
-    if (!(0, import_shared.isUsingHMR)(config, utils)) {
-      return;
-    }
-    const { CHAIN_ID } = utils;
-    const { default: ReactFastRefreshPlugin } = await Promise.resolve().then(() => __toESM(require("@pmmmwh/react-refresh-webpack-plugin")));
-    const useTsLoader = Boolean(config.tools.tsLoader);
-    const rule = useTsLoader ? chain.module.rule(CHAIN_ID.RULE.TS) : chain.module.rule(CHAIN_ID.RULE.JS);
-    rule.use(CHAIN_ID.USE.BABEL).tap((options) => ({
-      ...options,
-      plugins: [
-        ...options.plugins || [],
-        [require.resolve("react-refresh/babel"), { skipEnvCheck: true }]
-      ]
-    }));
-    chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactFastRefreshPlugin, [
-      {
-        overlay: false,
-        exclude: [/node_modules/]
-      }
-    ]);
-  });
-};
-const applyBasicReactSupport = (api) => {
-  const { bundlerType } = api.context;
-  bundlerType === "rspack" ? applyRspack(api) : applyWebpack(api);
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   applyBasicReactSupport

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-react",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "React plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -20,18 +20,14 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@babel/preset-react": "^7.22.15",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@rspack/plugin-react-refresh": "0.3.8",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "@rsbuild/shared": "0.0.10"
+    "@rsbuild/shared": "0.0.11"
   },
   "devDependencies": {
     "@types/node": "^16",
     "typescript": "^5",
-    "@rsbuild/core": "0.0.10",
-    "@rsbuild/test-helper": "0.0.10",
-    "@rsbuild/webpack": "0.0.9"
+    "@rsbuild/core": "0.0.11",
+    "@rsbuild/test-helper": "0.0.11"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",