fix(plugin-react): allow configuring tools.swc to override react ru…

…ntime (#3449)
web-infra-dev · Sep 11, 2024 · 3d445bc · 3d445bc
1 parent a9995ac
commit 3d445bc
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 465 deletions.
diff --git a/packages/compat/webpack/tests/__snapshots__/webpackConfig.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/webpackConfig.test.ts.snap
@@ -8,9 +8,6 @@ exports[`webpackConfig > should allow to append and prepend plugins 1`] = `
     },
   },
   RsbuildCorePlugin {},
-  HotModuleReplacementPlugin {
-    "options": {},
-  },
   MiniCssExtractPlugin {
     "_sortedModulesCache": WeakMap {},
     "options": {

diff --git a/packages/core/src/plugins/basic.ts b/packages/core/src/plugins/basic.ts
@@ -17,7 +17,7 @@ export const pluginBasic = (): RsbuildPlugin => ({
 
   setup(api) {
     api.modifyBundlerChain(
-      (chain, { env, isProd, target, bundler, environment, CHAIN_ID }) => {
+      (chain, { env, isDev, target, bundler, environment, CHAIN_ID }) => {
         const { config } = environment;
 
         chain.name(environment.name);
@@ -46,7 +46,7 @@ export const pluginBasic = (): RsbuildPlugin => ({
           },
         });
 
-        const usingHMR = !isProd && config.dev.hmr && target === 'web';
+        const usingHMR = isDev && config.dev.hmr && target === 'web';
 
         if (usingHMR) {
           chain

diff --git a/packages/plugin-react/src/react.ts b/packages/plugin-react/src/react.ts
@@ -1,69 +1,53 @@
 import path from 'node:path';
 import type {
-  ChainIdentifier,
+  EnvironmentConfig,
   RsbuildConfig,
   RsbuildPluginAPI,
   Rspack,
-  RspackChain,
 } from '@rsbuild/core';
 import type { PluginReactOptions } from '.';
 
-const modifySwcLoaderOptions = ({
-  chain,
-  CHAIN_ID,
-  modifier,
-}: {
-  chain: RspackChain;
-  CHAIN_ID: ChainIdentifier;
-  modifier: (config: Rspack.SwcLoaderOptions) => Rspack.SwcLoaderOptions;
-}) => {
-  const ruleIds = [CHAIN_ID.RULE.JS, CHAIN_ID.RULE.JS_DATA_URI];
-
-  for (const ruleId of ruleIds) {
-    if (chain.module.rules.has(ruleId)) {
-      const rule = chain.module.rule(ruleId);
-      if (rule.uses.has(CHAIN_ID.USE.SWC)) {
-        rule.use(CHAIN_ID.USE.SWC).tap(modifier);
-      }
-    }
-  }
-};
-
 export const applyBasicReactSupport = (
   api: RsbuildPluginAPI,
   options: PluginReactOptions,
 ): void => {
   const REACT_REFRESH_PATH = require.resolve('react-refresh');
 
-  api.modifyBundlerChain(
-    async (chain, { CHAIN_ID, environment, isDev, isProd, target }) => {
-      const { config } = environment;
-      const usingHMR = !isProd && config.dev.hmr && target === 'web';
-      const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = {
-        development: isDev,
-        refresh: usingHMR,
-        runtime: 'automatic',
-        ...options.swcReactOptions,
-      };
+  api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
+    const isDev = userConfig.mode === 'development';
 
-      modifySwcLoaderOptions({
-        chain,
-        CHAIN_ID,
-        modifier: (opts) => {
-          opts.jsc ||= {};
-          opts.jsc.transform ||= {};
-          opts.jsc.transform.react = reactOptions;
-          opts.jsc.parser = {
-            ...opts.jsc.parser,
-            syntax: 'typescript',
-            // enable supports for React JSX/TSX compilation
-            tsx: true,
-          };
+    const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = {
+      development: isDev,
+      refresh:
+        isDev && userConfig.dev.hmr && userConfig.output.target === 'web',
+      runtime: 'automatic',
+      ...options.swcReactOptions,
+    };
 
-          return opts;
+    const extraConfig: EnvironmentConfig = {
+      tools: {
+        swc: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              // enable supports for JSX/TSX compilation
+              tsx: true,
+            },
+            transform: {
+              react: reactOptions,
+            },
+          },
         },
-      });
+      },
+    };
 
+    return mergeEnvironmentConfig(extraConfig, userConfig);
+  });
+
+  api.modifyBundlerChain(
+    async (chain, { CHAIN_ID, environment, isDev, target }) => {
+      const { config } = environment;
+      const usingHMR = isDev && config.dev.hmr && target === 'web';
       if (!usingHMR) {
         return;
       }