feat(create-tsdown): add react-compiler template (#604)

elecmonkey · autofix-ci[bot] · sxzz · web-flow · commit 45229b1e984d · 2025-11-17T05:02:06.000Z
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
Co-authored-by: Kevin Deng &lt;sxzz@sxzz.moe&gt;
diff --git a/docs/recipes/react-support.md b/docs/recipes/react-support.md
@@ -10,6 +10,12 @@ For the fastest way to get started, use the React component starter template. Th
 npx create-tsdown@latest -t react
 ```
 
+To use React Compiler, you can quickly set up a project with the dedicated template:
+
+```bash
+npx create-tsdown@latest -t react-compiler
+```
+
 ## Minimal Example
 
 To configure `tsdown` for a React library, you can just use a standard `tsdown.config.ts`:
@@ -64,3 +70,32 @@ export default defineConfig({
 ```
 
 :::
+
+## Enabling React Compiler
+
+React Compiler is an innovative build-time tool that automatically optimizes your React applications. React recommends that library authors use React Compiler to precompile their code for improved performance.
+
+Currently, React Compiler is available only as a Babel plugin. To get started, you can either scaffold the `react-compiler` template as shown above, or integrate it manually:
+
+```bash
+pnpm add -D @rollup/plugin-babel babel-plugin-react-compiler
+```
+
+```ts [tsdown.config.ts]
+import pluginBabel from '@rollup/plugin-babel'
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      babelHelpers: 'bundled',
+      parserOpts: {
+        sourceType: 'module',
+        plugins: ['jsx', 'typescript'],
+      },
+      plugins: ['babel-plugin-react-compiler'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+  ],
+})
+```
diff --git a/docs/zh-CN/recipes/react-support.md b/docs/zh-CN/recipes/react-support.md
@@ -1,18 +1,24 @@
 # React 支持
 
-`tsdown` 为构建 React 组件库提供了一流的支持。由于 [Rolldown](https://rolldown.rs/) 原生支持打包 JSX/TSX 文件，你无需任何额外的插件即可开始使用。
+`tsdown` 为构建 React 组件库提供一流支持。由于 [Rolldown](https://rolldown.rs/) 原生支持打包 JSX/TSX 文件，开始使用时无需任何额外插件。
 
-## 快速开始
+## 快速上手
 
-最快的入门方式是使用 React 组件启动模板。这个启动项目已经为 React 库开发进行了预配置，因此你可以直接专注于构建组件。
+最快的入门方式是使用 React 组件起步模板。该项目已为 React 库开发预先配置好，让您可以立即专注于组件开发。
 
 ```bash
 npx create-tsdown@latest -t react
 ```
 
-## 最小示例
+如果需要使用 React Compiler，可以使用专用模板快速搭建项目：
 
-要为 React 库配置 `tsdown`，你只需使用标准的 `tsdown.config.ts`：
+```bash
+npx create-tsdown@latest -t react-compiler
+```
+
+## 最简示例
+
+为 React 组件库配置 `tsdown` 时，直接使用标准的 `tsdown.config.ts` 即可：
 
 ```ts [tsdown.config.ts]
 import { defineConfig } from 'tsdown'
@@ -24,7 +30,7 @@ export default defineConfig({
 })
 ```
 
-创建你的典型 React 组件：
+创建一个典型的 React 组件：
 
 ```tsx [MyButton.tsx]
 import React from 'react'
@@ -38,20 +44,20 @@ export const MyButton: React.FC<MyButtonProps> = ({ type }) => {
 }
 ```
 
-然后在入口文件中导入它：
+并在入口文件中导出它：
 
 ```ts [index.ts]
 export { MyButton } from './MyButton'
 ```
 
 ::: warning
 
-在 `tsdown` 中有两种转换 JSX/TSX 文件的方式：
+在 `tsdown` 中有两种 JSX/TSX 转换方式：
 
-- **经典模式（classic）**
-- **自动模式（automatic）**（默认）
+- **classic（经典）**
+- **automatic（自动，默认）**
 
-如果你需要使用经典 JSX 转换，可以在配置文件中配置 Rolldown 的 [`inputOptions.jsx`](https://rolldown.rs/reference/config-options#jsx) 选项：
+如果需要使用经典 JSX 转换方式，可在配置文件中设置 Rolldown 的 [`inputOptions.jsx`](https://rolldown.rs/reference/config-options#jsx) 选项：
 
 ```ts [tsdown.config.ts]
 import { defineConfig } from 'tsdown'
@@ -64,3 +70,32 @@ export default defineConfig({
 ```
 
 :::
+
+## 启用 React Compiler
+
+React Compiler 是一种创新的构建期优化工具，可自动优化 React 应用。React 推荐库作者使用 React Compiler 预编译代码以获得更佳性能。
+
+目前，React Compiler 仅作为 Babel 插件提供。您可以像上文所示脚手架 `react-compiler` 模板，或手动集成：
+
+```bash
+pnpm add -D @rollup/plugin-babel babel-plugin-react-compiler
+```
+
+```ts [tsdown.config.ts]
+import pluginBabel from '@rollup/plugin-babel'
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      babelHelpers: 'bundled',
+      parserOpts: {
+        sourceType: 'module',
+        plugins: ['jsx', 'typescript'],
+      },
+      plugins: ['babel-plugin-react-compiler'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+  ],
+})
+```
diff --git a/packages/create-tsdown/src/index.ts b/packages/create-tsdown/src/index.ts
@@ -17,6 +17,7 @@ export const templateOptions = [
   { value: 'minimal', label: 'Minimal' },
   { value: 'vue', label: 'Vue' },
   { value: 'react', label: 'React' },
+  { value: 'react-compiler', label: 'React with React Compiler' },
   { value: 'solid', label: 'Solid' },
   { value: 'svelte', label: 'Svelte' },
 ] as const
