feat(create-rsbuild): add React Compiler support for React templates

e2e/cases/create-rsbuild/tools.test.ts

@@ -137,3 +137,49 @@ test('should create project with biome as expected', async () => {
   expect(existsSync(join(dir, 'biome.json'))).toBeTruthy();
   await clean();
 });
+
+test('should create React project with react-compiler as expected', async () => {
+  const { dir, pkgJson, clean } = await createAndValidate(
+    import.meta.dirname,
+    'react',
+    {
+      name: 'test-temp-react-compiler',
+      tools: ['react-compiler'],
+      clean: false,
+    },
+  );
+  expect(pkgJson.devDependencies['@rsbuild/plugin-babel']).toBeTruthy();
+  expect(pkgJson.devDependencies['babel-plugin-react-compiler']).toBeTruthy();
+  expect(pkgJson.dependencies['react-compiler-runtime']).toBeFalsy();
+
+  const configFile = join(dir, 'rsbuild.config.js');
+  expect(existsSync(configFile)).toBeTruthy();
+
+  const configContent = readFileSync(configFile, 'utf-8');
+  expect(configContent.includes('pluginBabel({')).toBeTruthy();
+  expect(configContent.includes("'babel-plugin-react-compiler'")).toBeTruthy();
+  await clean();
+});
+
+test('should ignore react-compiler for non-React projects', async () => {
+  const { dir, pkgJson, clean } = await createAndValidate(
+    import.meta.dirname,
+    'vanilla',
+    {
+      name: 'test-temp-vanilla-react-compiler',
+      tools: ['react-compiler'],
+      clean: false,
+    },
+  );
+  expect(pkgJson.devDependencies['@rsbuild/plugin-babel']).toBeFalsy();
+  expect(pkgJson.devDependencies['babel-plugin-react-compiler']).toBeFalsy();
+  expect(pkgJson.dependencies?.['react-compiler-runtime']).toBeFalsy();
+
+  const configFile = join(dir, 'rsbuild.config.js');
+  expect(existsSync(configFile)).toBeTruthy();
+
+  const configContent = readFileSync(configFile, 'utf-8');
+  expect(configContent.includes('pluginBabel')).toBeFalsy();
+  expect(configContent.includes('react-compiler')).toBeFalsy();
+  await clean();
+});

packages/create-rsbuild/src/index.ts

@@ -133,6 +133,20 @@ create({
         addAgentsMdSearchDirs(toolFolder);
       },
     },
+    {
+      value: 'react-compiler',
+      label: 'React Compiler - optimization',
+      order: 'pre',
+      when: (template) => template === 'react-js' || template === 'react-ts',
+      action: ({ templateName, distFolder }) => {
+        const toolFolder = path.join(root, 'template-react-compiler');
+        copyFolder({
+          from: path.join(toolFolder, templateName),
+          to: distFolder,
+          isMergePackageJson: true,
+        });
+      },
+    },
     {
       value: 'tailwindcss',
       label: 'Tailwind CSS - styling',

packages/create-rsbuild/template-react-compiler/react-js/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@rsbuild/plugin-babel": "^1.1.2",
+    "babel-plugin-react-compiler": "^1.0.0"
+  }
+}

packages/create-rsbuild/template-react-compiler/react-js/rsbuild.config.js

@@ -0,0 +1,17 @@
+// @ts-check
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+// Docs: https://rsbuild.rs/config/
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift('babel-plugin-react-compiler');
+      },
+    }),
+  ],
+});

packages/create-rsbuild/template-react-compiler/react-ts/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@rsbuild/plugin-babel": "^1.1.2",
+    "babel-plugin-react-compiler": "^1.0.0"
+  }
+}

packages/create-rsbuild/template-react-compiler/react-ts/rsbuild.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+// Docs: https://rsbuild.rs/config/
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift('babel-plugin-react-compiler');
+      },
+    }),
+  ],
+});

website/docs/en/guide/start/quick-start.mdx

@@ -89,7 +89,10 @@ When creating an application, you can choose from the following templates provid
 ```
 
 :::tip
-Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to add ESLint or Prettier.
+
+- Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to add ESLint or Prettier.
+- When you select a React template, you can also select [React Compiler](/guide/framework/react#react-compiler) as an optional tool to enable React Compiler support.
+
 :::
 
 ### Current directory
@@ -142,7 +145,7 @@ Templates:
   solid-js, solid-ts, vanilla-js, vanilla-ts
 
 Optional tools:
-  rstest, biome, eslint, prettier, tailwindcss, storybook
+  react-compiler, rstest, biome, eslint, prettier, tailwindcss, storybook
 ```
 
 ## Migrate from existing projects

website/docs/zh/guide/start/quick-start.mdx

@@ -89,7 +89,10 @@ import { PackageManagerTabs } from '@theme';
 ```
 
 :::tip
-Biome 提供与 ESLint 和 Prettier 相似的代码检查和格式化功能。如果你选择了 Biome，通常就不需要再选择 ESLint 或 Prettier 了。
+
+- Biome 提供与 ESLint 和 Prettier 相似的代码检查和格式化功能。如果你选择了 Biome，通常就不需要再选择 ESLint 或 Prettier 了。
+- 如果你选择了 React 模板，还可以额外选择 [React Compiler](/guide/framework/react#react-compiler) 作为可选工具以启用 React Compiler 支持。
+
 :::
 
 ### 当前目录
@@ -142,7 +145,7 @@ Templates:
   solid-js, solid-ts, vanilla-js, vanilla-ts
 
 Optional tools:
-  rstest, biome, eslint, prettier, tailwindcss, storybook
+  react-compiler, rstest, biome, eslint, prettier, tailwindcss, storybook
 ```
 
 ## 从现有项目迁移