feat: use @rsbuild/plugin-babel

Author: upupming

.changeset/plenty-baboons-tan.md

@@ -1,15 +1,28 @@
 ---
 "@lynx-js/react-rsbuild-plugin": patch
-"@lynx-js/react-alias-rsbuild-plugin": patch
 ---
 
-Support [React Compiler](https://react.dev/learn/react-compiler) for ReactLynx, enable it by set `experimental_enableReactCompiler` to `true` in `lynx.config.js`:
+Add `react-compiler-runtime` to `resolve.dedupe`.
+
+With this change you can setup [React Compiler](https://react.dev/learn/react-compiler) for ReactLynx by `pluginBabel`:
 
 ```js
+import { pluginBabel } from '@rsbuild/plugin-babel';
+
 export default defineConfig({
   plugins: [
-    pluginReactLynx({
-      experimental_enableReactCompiler: true,
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift([
+          'babel-plugin-react-compiler',
+          // See https://react.dev/reference/react-compiler/configuration for config
+          {
+            // ReactLynx only supports target to version 17
+            target: '17',
+          },
+        ]);
+      },
     }),
   ],
 });

.changeset/sour-weeks-wait.md

@@ -1,3 +1,5 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+
 import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
 import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 import { defineConfig } from '@lynx-js/rspeedy';
@@ -6,8 +8,19 @@ const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
 
 export default defineConfig({
   plugins: [
-    pluginReactLynx({
-      experimental_enableReactCompiler: true,
+    pluginReactLynx(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift([
+          'babel-plugin-react-compiler',
+          // See https://react.dev/reference/react-compiler/configuration for config
+          {
+            // ReactLynx only supports target to version 17
+            target: '17',
+          },
+        ]);
+      },
     }),
     pluginQRCode({
       schema(url) {

examples/react-compiler/lynx.config.ts

@@ -12,14 +12,11 @@
     "react-compiler-runtime": "0.0.0-experimental-0566679-20250709"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/plugin-syntax-jsx": "^7.27.1",
-    "@babel/plugin-syntax-typescript": "^7.27.1",
     "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
     "@lynx-js/react-rsbuild-plugin": "workspace:*",
     "@lynx-js/rspeedy": "workspace:*",
     "@lynx-js/types": "3.4.11",
-    "@swc/react-compiler": "^1.13.1",
+    "@rsbuild/plugin-babel": "^1.0.6",
     "@types/react": "^18.3.25",
     "babel-plugin-react-compiler": "0.0.0-experimental-0566679-20250709"
   }

examples/react-compiler/package.json

@@ -79,11 +79,11 @@ export function render(
     container: lynxTestingEnv.mainThread.elementTree.root,
     unmount: cleanup,
     rerender: (rerenderUi) => {
-      act(() => {});
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
       // folks can use all the same utilities we return in the first place that are bound to
       // the container
       render(rerenderUi, {
+        queries,
         wrapper: WrapperComponent,
         enableMainThread,
         enableBackgroundThread,

packages/react/testing-library/src/pure.jsx

@@ -86,18 +86,16 @@ export const createVitestConfig = async (options) => {
   ];
 
   function transformReactCompilerPlugin() {
-    let rootContext, compilerDeps, isReactCompilerRequired, babel;
+    let rootContext, compilerDeps, babel;
 
     function resolveCompilerDeps(rootContext) {
       const missingBabelPackages = [];
       const [
-        swcReactCompilerPath,
         babelPath,
         babelPluginReactCompilerPath,
         babelPluginSyntaxJsxPath,
         babelPluginSyntaxTypescriptPath,
       ] = [
-        '@swc/react-compiler',
         '@babel/core',
         'babel-plugin-react-compiler',
         '@babel/plugin-syntax-jsx',
@@ -123,7 +121,6 @@ export const createVitestConfig = async (options) => {
       }
 
       return {
-        swcReactCompilerPath,
         babelPath,
         babelPluginReactCompilerPath,
         babelPluginSyntaxJsxPath,
@@ -159,47 +156,43 @@ export const createVitestConfig = async (options) => {
         config.test.alias.push(...reactCompilerRuntimeAlias);
 
         compilerDeps = resolveCompilerDeps(rootContext);
-        const { swcReactCompilerPath, babelPath } = compilerDeps;
-        isReactCompilerRequired = require(swcReactCompilerPath).isReactCompilerRequired;
+        const { babelPath } = compilerDeps;
         babel = require(babelPath);
       },
       async transform(sourceText, sourcePath) {
         if (/\.(?:jsx|tsx)$/.test(sourcePath)) {
-          const needReactCompiler = await isReactCompilerRequired(Buffer.from(sourceText));
-          if (needReactCompiler) {
-            const { babelPluginReactCompilerPath, babelPluginSyntaxJsxPath, babelPluginSyntaxTypescriptPath } =
-              compilerDeps;
-            const isTSX = sourcePath.endsWith('.tsx');
+          const { babelPluginReactCompilerPath, babelPluginSyntaxJsxPath, babelPluginSyntaxTypescriptPath } =
+            compilerDeps;
+          const isTSX = sourcePath.endsWith('.tsx');
 
-            try {
-              const result = babel.transformSync(sourceText, {
-                plugins: [
-                  // We use '17' to make `babel-plugin-react-compiler` compiles our code
-                  // to use `react-compiler-runtime` instead of `react/compiler-runtime`
-                  // for the `useMemoCache` hook
-                  [babelPluginReactCompilerPath, { target: '17' }],
-                  babelPluginSyntaxJsxPath,
-                  isTSX ? [babelPluginSyntaxTypescriptPath, { isTSX: true }] : null,
-                ].filter(Boolean),
-                filename: sourcePath,
-                ast: false,
-                sourceMaps: true,
-              });
-              if (result?.code != null && result?.map != null) {
-                return {
-                  code: result.code,
-                  map: result.map,
-                };
-              } else {
-                this.error(
-                  `babel-plugin-react-compiler transform failed for ${sourcePath}: ${
-                    result ? 'missing code or map' : 'no result'
-                  }`,
-                );
-              }
-            } catch (e) {
-              this.error(e);
+          try {
+            const result = babel.transformSync(sourceText, {
+              plugins: [
+                // We use '17' to make `babel-plugin-react-compiler` compiles our code
+                // to use `react-compiler-runtime` instead of `react/compiler-runtime`
+                // for the `useMemoCache` hook
+                [babelPluginReactCompilerPath, { target: '17' }],
+                babelPluginSyntaxJsxPath,
+                isTSX ? [babelPluginSyntaxTypescriptPath, { isTSX: true }] : null,
+              ].filter(Boolean),
+              filename: sourcePath,
+              ast: false,
+              sourceMaps: true,
+            });
+            if (result?.code != null && result?.map != null) {
+              return {
+                code: result.code,
+                map: result.map,
+              };
+            } else {
+              this.error(
+                `babel-plugin-react-compiler transform failed for ${sourcePath}: ${
+                  result ? 'missing code or map' : 'no result'
+                }`,
+              );
             }
+          } catch (e) {
+            this.error(e);
           }
         }
 

packages/react/testing-library/src/vitest.config.js

@@ -15,8 +15,6 @@ export function createLazyResolver(directory: string, conditionNames: string[]):
 //
 // @public (undocumented)
 export interface Options {
-    // (undocumented)
-    experimental_enableReactCompiler?: boolean | undefined;
     // (undocumented)
     LAYERS: {
         MAIN_THREAD: string;

packages/rspeedy/plugin-react-alias/etc/react-alias-rsbuild-plugin.api.md

@@ -17,15 +17,12 @@ export interface Options {
   }
 
   rootPath?: string | undefined
-
-  experimental_enableReactCompiler?: boolean | undefined
 }
 
 const S_PLUGIN_REACT_ALIAS = Symbol.for('@lynx-js/plugin-react-alias')
 
 export function pluginReactAlias(options: Options): RsbuildPlugin {
-  const { LAYERS, lazy, rootPath, experimental_enableReactCompiler = false } =
-    options ?? {}
+  const { LAYERS, lazy, rootPath } = options ?? {}
 
   return {
     name: 'lynx:react-alias',
@@ -171,14 +168,6 @@ export function pluginReactAlias(options: Options): RsbuildPlugin {
             '@lynx-js/react$',
             reactLepus.background,
           )
-        if (experimental_enableReactCompiler) {
-          chain.resolve.alias.set(
-            'react-compiler-runtime$',
-            require.resolve('react-compiler-runtime', {
-              paths: [api.context.rootPath],
-            }),
-          )
-        }
 
         if (reactCompat) {
           chain

packages/rspeedy/plugin-react-alias/src/index.ts

@@ -66,7 +66,6 @@ export interface PluginReactLynxOptions {
     enableRemoveCSSScope?: boolean | undefined;
     enableSSR?: boolean;
     engineVersion?: string;
-    experimental_enableReactCompiler?: boolean;
     // @alpha
     experimental_isLazyBundle?: boolean;
     extractStr?: Partial<ExtractStrConfig> | boolean;

packages/rspeedy/plugin-react/etc/react-rsbuild-plugin.api.md

@@ -28,7 +28,6 @@ import { applyEntry } from './entry.js'
 import { applyGenerator } from './generator.js'
 import { applyLazy } from './lazy.js'
 import { applyLoaders } from './loaders.js'
-import { applyReactCompiler } from './reactCompiler.js'
 import { applyRefresh } from './refresh.js'
 import { applySplitChunksRule } from './splitChunks.js'
 import { applySWC } from './swc.js'
@@ -264,13 +263,6 @@ export interface PluginReactLynxOptions {
    * @alpha
    */
   experimental_isLazyBundle?: boolean
-
-  /**
-   * Enable React Compiler for this build.
-   *
-   * {@link https://react.dev/learn/react-compiler}
-   */
-  experimental_enableReactCompiler?: boolean
 }
 
 /**
@@ -318,7 +310,6 @@ export function pluginReactLynx(
     extractStr: false,
 
     experimental_isLazyBundle: false,
-    experimental_enableReactCompiler: false,
   }
   const resolvedOptions = Object.assign(defaultOptions, userOptions, {
     // Use `engineVersion` to override the default values
@@ -329,8 +320,6 @@ export function pluginReactLynx(
   return [
     pluginReactAlias({
       lazy: resolvedOptions.experimental_isLazyBundle,
-      experimental_enableReactCompiler:
-        resolvedOptions.experimental_enableReactCompiler,
       LAYERS,
     }),
     {
@@ -378,15 +367,18 @@ export function pluginReactLynx(
             },
           }, config)
 
+          config = mergeRsbuildConfig({
+            resolve: {
+              dedupe: ['react-compiler-runtime'],
+            },
+          }, config)
+
           return config
         })
 
         if (resolvedOptions.experimental_isLazyBundle) {
           applyLazy(api)
         }
-        if (resolvedOptions.experimental_enableReactCompiler) {
-          applyReactCompiler(api)
-        }
 
         const rspeedyAPIs = api.useExposed<ExposedAPI>(
           Symbol.for('rspeedy.api'),