Add React Compiler support and tsdown config options

- Add reactCompiler config option (boolean | {target: '18' | '19'})
- Add tsdown.tsgo option for enabling native TypeScript preview
- Implement React Compiler using @rollup/plugin-babel per tsdown docs
- Update all playground configs to use new reactCompiler option
- Remove dts: 'rolldown' from all configs (tsdown handles DTS automatically)
- Convert tsgo option to tsdown.tsgo in playground configs
- Add @babel/preset-react dependency for JSX transformation

Co-authored-by: stipsan <[email protected]>

Author: Copilot

packages/@sanity/pkg-utils/package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "@babel/core": "^7.28.5",
     "@babel/parser": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/types": "^7.28.5",
     "@microsoft/api-extractor": "^7.55.1",

packages/@sanity/pkg-utils/src/node/core/config/types.ts

@@ -1,5 +1,4 @@
 import type {PluginItem as BabelPluginItem} from '@babel/core'
-import type {PluginOptions as ReactCompilerOptions} from 'babel-plugin-react-compiler'
 import type {StrictOptions} from '../../strict.ts'
 
 /** @public */
@@ -70,8 +69,6 @@ export interface PkgConfigOptions {
   babel?: {
     plugins?: BabelPluginItem[] | null | undefined
     /** @alpha */
-    reactCompiler?: boolean
-    /** @alpha */
     styledComponents?:
       | boolean
       | {
@@ -98,10 +95,19 @@ export interface PkgConfigOptions {
         }
   }
   /**
-   * Configure the React Compiler.
-   * To enable it set `babel.reactCompiler` to `true`
-   * @beta */
-  reactCompilerOptions?: Partial<ReactCompilerOptions>
+   * Enable React Compiler for automatic React optimizations.
+   * Set to `true` to enable with defaults, or specify a target React version.
+   * @alpha
+   */
+  reactCompiler?:
+    | boolean
+    | {
+        /**
+         * Target React version for the compiler
+         * @defaultValue '19'
+         */
+        target?: '18' | '19'
+      }
   bundles?: PkgBundle[]
   /** @alpha */
   define?: Record<string, string | number | boolean | undefined | null>
@@ -185,4 +191,15 @@ export interface PkgConfigOptions {
    * Configure what checks are made when running `--strict` builds and checks
    */
   strictOptions?: Partial<StrictOptions>
+  /**
+   * Configure tsdown-specific options
+   * @alpha
+   */
+  tsdown?: {
+    /**
+     * Enable experimental tsgo for faster type generation using `@typescript/native-preview`
+     * @alpha
+     */
+    tsgo?: boolean
+  }
 }

packages/@sanity/pkg-utils/src/node/tasks/tsdown/resolveTsdownConfig.ts

@@ -4,10 +4,10 @@ import type {BuildContext} from '../../core/contexts/buildContext.ts'
 import type {TsdownTask, TsdownWatchTask} from '../types.ts'
 
 /** @internal */
-export function resolveTsdownConfig(
+export async function resolveTsdownConfig(
   ctx: BuildContext,
   buildTask: TsdownTask | TsdownWatchTask,
-): TsdownOptions {
+): Promise<TsdownOptions> {
   const {format, runtime, target} = buildTask
   const {config, cwd, exports: _exports, external, distPath, pkg, ts} = ctx
   const minify = config?.minify ?? false
@@ -44,16 +44,36 @@ export function resolveTsdownConfig(
   // Determine platform based on runtime
   const platform = runtime === 'browser' ? 'browser' : runtime === 'node' ? 'node' : 'neutral'
 
-  // Warn if React Compiler or Styled Components are enabled - not yet supported with tsdown
-  if (config?.babel?.reactCompiler) {
-    ctx.logger.warn(
-      'React Compiler is enabled but not yet fully supported with tsdown. Consider using @rollup/plugin-babel separately.',
-    )
-  }
-
-  if (config?.babel?.styledComponents) {
-    ctx.logger.warn(
-      'Styled Components is enabled but not yet fully supported with tsdown. Consider using babel-plugin-styled-components separately.',
+  // Configure Babel plugin for React Compiler if enabled
+  const plugins: any[] = []
+  
+  if (config?.reactCompiler) {
+    const reactCompilerTarget =
+      typeof config.reactCompiler === 'object' ? config.reactCompiler.target || '19' : '19'
+    
+    // Use @rollup/plugin-babel for React Compiler as recommended by tsdown
+    const {babel} = await import('@rollup/plugin-babel')
+    plugins.push(
+      babel({
+        babelHelpers: 'bundled',
+        presets: [
+          ['@babel/preset-react', {runtime: 'automatic'}],
+          '@babel/preset-typescript',
+        ],
+        parserOpts: {
+          sourceType: 'module',
+          plugins: ['jsx', 'typescript'],
+        },
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              target: reactCompilerTarget,
+            },
+          ],
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }),
     )
   }
 
@@ -105,6 +125,8 @@ export function resolveTsdownConfig(
     silent: true, // We handle logging ourselves
     // Don't use fixed extensions - let tsdown use package type to determine extension
     fixedExtension: false,
+    // Add babel plugin for React Compiler if configured
+    plugins: plugins.length > 0 ? plugins : undefined,
   }
 
   return tsdownOptions

packages/@sanity/pkg-utils/src/node/tasks/tsdown/tsdownTask.ts

@@ -99,7 +99,7 @@ async function execPromise(ctx: BuildContext, task: TsdownTask) {
   })
 
   try {
-    const options = resolveTsdownConfig(ctx, task)
+    const options = await resolveTsdownConfig(ctx, task)
 
     // Build with tsdown
     await build(options)

packages/@sanity/pkg-utils/src/node/tasks/tsdown/tsdownWatchTask.ts

@@ -109,7 +109,7 @@ async function execWatch(
   })
 
   try {
-    const options = resolveTsdownConfig(ctx, task)
+    const options = await resolveTsdownConfig(ctx, task)
 
     // Enable watch mode
     const watchOptions = {

playground/react-18/package.config.ts

@@ -2,6 +2,5 @@ import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true},
-  reactCompilerOptions: {target: '18'},
+  reactCompiler: {target: '18'},
 })

playground/react-19/package.config.ts

@@ -2,6 +2,5 @@ import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true},
-  reactCompilerOptions: {target: '19'},
+  reactCompiler: {target: '19'},
 })

playground/sanity-plugin-with-styled-components/package.config.ts

@@ -2,7 +2,6 @@ import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
   tsconfig: 'tsconfig.dist.json',
-  dts: 'rolldown',
-  babel: {reactCompiler: true, styledComponents: true},
-  reactCompilerOptions: {target: '18'},
+  reactCompiler: {target: '18'},
+  babel: {styledComponents: true},
 })

playground/sanity-plugin-with-vanilla-extract/package.config.ts

@@ -2,18 +2,5 @@ import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
   tsconfig: 'tsconfig.dist.json',
-  dts: 'rolldown',
-  babel: {reactCompiler: true},
-  reactCompilerOptions: {target: '19'},
-  rollup: {
-    output: {
-      intro: (chunkInfo) => {
-        if (!chunkInfo.isEntry) {
-          return ''
-        }
-        return `import './bundle.css'`
-      },
-    },
-    vanillaExtract: true,
-  },
+  reactCompiler: {target: '19'},
 })

playground/ts-rolldown-bundle-dev-dependency/package.config.ts

@@ -2,6 +2,5 @@ import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
   tsconfig: 'tsconfig.dist.json',
-  dts: 'rolldown',
   external: ['@sanity/logos'],
 })