@rsbuild/plugin-react 0.0.0-next-20231220091832 → 0.0.0-next-20240109045121

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.d.ts

@@ -1,12 +1,31 @@
 import { RsbuildPlugin } from '@rsbuild/core';
+import { SwcReactConfig } from '@rsbuild/shared';
 
 declare const isBeyondReact17: (cwd: string) => Promise<any>;
 
 type SplitReactChunkOptions = {
+    /**
+     * Whether to enable split chunking for React-related dependencies (e.g., react, react-dom, scheduler).
+     *
+     * @default true
+     */
     react?: boolean;
+    /**
+     * Whether to enable split chunking for routing-related dependencies (e.g., react-router, react-router-dom, history).
+     *
+     * @default true
+     */
     router?: boolean;
 };
 type PluginReactOptions = {
+    /**
+     * Configure the behavior of SWC to transform React code,
+     * the same as SWC's [jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact).
+     */
+    swcReactOptions?: SwcReactConfig;
+    /**
+     * Configuration for chunk splitting of React-related dependencies.
+     */
     splitChunks?: SplitReactChunkOptions;
 };
 declare const pluginReact: (options?: PluginReactOptions) => RsbuildPlugin;

package/dist/index.js

@@ -148,68 +148,39 @@ 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;
-  }
-  for (const key in compiler.options.entry) {
-    compiler.options.entry[key].import = [
-      reactRefreshEntry,
-      ...compiler.options.entry[key].import || []
-    ];
-  }
-};
-var applyBasicReactSupport = (api) => {
-  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 }) => {
+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.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
-    const usingHMR = (0, import_shared4.isUsingHMR)(config, { isProd: isProd3, target });
+    const usingHMR = (0, import_shared4.isUsingHMR)(config, { isProd: isProd2, target });
     const rule = chain.module.rule(CHAIN_ID.RULE.JS);
     const reactOptions = {
-      development: !isProd3,
+      development: !isProd2,
       refresh: usingHMR,
-      runtime: "automatic"
+      runtime: "automatic",
+      ...options.swcReactOptions
     };
-    rule.use(CHAIN_ID.USE.SWC).tap((options) => {
-      options.jsc.transform.react = {
+    rule.use(CHAIN_ID.USE.SWC).tap((options2) => {
+      options2.jsc.transform.react = {
         ...reactOptions
       };
-      return options;
+      return options2;
     });
     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((options) => {
-        options.jsc.transform.react = {
+      chain.module.rule(CHAIN_ID.RULE.JS_DATA_URI).use(CHAIN_ID.USE.SWC).tap((options2) => {
+        options2.jsc.transform.react = {
           ...reactOptions
         };
-        return options;
+        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);
   });
@@ -241,7 +212,7 @@ var pluginReact = (options = {}) => ({
   pre: ["rsbuild:swc"],
   setup(api) {
     if (api.context.bundlerType === "rspack") {
-      applyBasicReactSupport(api);
+      applyBasicReactSupport(api, options);
     }
     applyAntdSupport(api);
     applyArcoSupport(api);

package/dist/index.mjs

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.41.0_typescript@5.3.2/node_modules/@modern-js/module-tools/shims/esm.js
+// ../../node_modules/.pnpm/@modern-js+module-tools@2.45.0_typescript@5.3.2/node_modules/@modern-js/module-tools/shims/esm.js
 import { fileURLToPath } from "url";
 import path from "path";
 
@@ -134,70 +134,39 @@ var applySplitChunksRule = (api, options = {
 };
 
 // src/react.ts
-import { isUsingHMR, isClientCompiler, isProd as isProd2 } 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;
-  }
-  for (const key in compiler.options.entry) {
-    compiler.options.entry[key].import = [
-      reactRefreshEntry,
-      ...compiler.options.entry[key].import || []
-    ];
-  }
-};
-var applyBasicReactSupport = (api) => {
-  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 }) => {
+import path2 from "path";
+import { isUsingHMR } from "@rsbuild/shared";
+var REACT_REFRESH_PATH = __require.resolve("react-refresh");
+var REACT_REFRESH_DIR_PATH = path2.dirname(REACT_REFRESH_PATH);
+var applyBasicReactSupport = (api, options) => {
+  api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
-    const usingHMR = isUsingHMR(config, { isProd: isProd3, target });
+    const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
     const rule = chain.module.rule(CHAIN_ID.RULE.JS);
     const reactOptions = {
-      development: !isProd3,
+      development: !isProd2,
       refresh: usingHMR,
-      runtime: "automatic"
+      runtime: "automatic",
+      ...options.swcReactOptions
     };
-    rule.use(CHAIN_ID.USE.SWC).tap((options) => {
-      options.jsc.transform.react = {
+    rule.use(CHAIN_ID.USE.SWC).tap((options2) => {
+      options2.jsc.transform.react = {
         ...reactOptions
       };
-      return options;
+      return options2;
     });
     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((options) => {
-        options.jsc.transform.react = {
+      chain.module.rule(CHAIN_ID.RULE.JS_DATA_URI).use(CHAIN_ID.USE.SWC).tap((options2) => {
+        options2.jsc.transform.react = {
           ...reactOptions
         };
-        return options;
+        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);
   });
@@ -229,7 +198,7 @@ var pluginReact = (options = {}) => ({
   pre: ["rsbuild:swc"],
   setup(api) {
     if (api.context.bundlerType === "rspack") {
-      applyBasicReactSupport(api);
+      applyBasicReactSupport(api, options);
     }
     applyAntdSupport(api);
     applyArcoSupport(api);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-react",
-  "version": "0.0.0-next-20231220091832",
+  "version": "0.0.0-next-20240109045121",
   "description": "React plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -22,15 +22,15 @@
     "dist"
   ],
   "dependencies": {
-    "@rspack/plugin-react-refresh": "0.4.3",
+    "@rspack/plugin-react-refresh": "0.4.5-canary-be59383-20240105051840",
     "react-refresh": "^0.14.0",
-    "@rsbuild/shared": "0.0.0-next-20231220091832"
+    "@rsbuild/shared": "0.0.0-next-20240109045121"
   },
   "devDependencies": {
     "@types/node": "16.x",
     "typescript": "^5.3.0",
-    "@rsbuild/core": "0.0.0-next-20231220091832",
-    "@rsbuild/test-helper": "0.0.0-next-20231220091832"
+    "@rsbuild/core": "0.0.0-next-20240109045121",
+    "@rsbuild/test-helper": "0.0.0-next-20240109045121"
   },
   "publishConfig": {
     "access": "public",