feat: add react compiler support

.depcheckrc.json

@@ -4,6 +4,7 @@
     "@sanity/eslint-config-studio",
     "dotenv-flow",
     "esbuild",
-    "esbuild-register"
+    "esbuild-register",
+    "react-compiler-runtime"
   ]
 }

.github/workflows/react-compiler.yml

@@ -0,0 +1,48 @@
+name: Maintain React Compiler
+
+on:
+  schedule:
+    - cron: "10 12 * * 1" # Runs at 12:10 PM UTC every Monday, which is 3 hours after the React Compiler release: https://github.com/facebook/react/blob/989af12f72080c17db03ead91d99b6394a215564/.github/workflows/compiler_prereleases_weekly.yml#L5-L6
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  run:
+    name: Should React Compiler dependencies be updated? 🤔
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version: lts/*
+      - run: pnpm -r up --ignore-scripts react-compiler-runtime@beta babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+      - uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.ECOSPARK_APP_ID }}
+          private-key: ${{ secrets.ECOSPARK_APP_PRIVATE_KEY }}
+      - id: check-changes
+        run: |
+          if git diff --name-only | grep -q 'package.json'; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+      - if: steps.check-changes.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7
+        with:
+          body: I ran `pnpm -r up react-compiler-runtime@beta babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta` 🧑‍💻
+          branch: actions/react-compiler
+          commit-message: "fix(deps): update react compiler dependencies 🤖 ✨"
+          labels: 🤖 bot
+          sign-commits: true
+          title: "fix(deps): update React Compiler dependencies 🤖 ✨"
+          token: ${{ steps.generate-token.outputs.token }}

dev/embedded-studio/vite.config.ts

@@ -3,5 +3,5 @@ import {defineConfig} from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react({babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]}})],
 })

dev/page-building-studio/.depcheckrc.json

@@ -0,0 +1,7 @@
+{
+  "ignores": [
+    "react-compiler-runtime",
+    "babel-plugin-react-compiler",
+    "@sanity/eslint-config-studio"
+  ]
+}

dev/page-building-studio/package.json

@@ -18,5 +18,8 @@
     "react-icons": "^5.2.1",
     "sanity": "workspace:*",
     "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110"
   }
 }

dev/studio-e2e-testing/package.json

@@ -20,6 +20,7 @@
     "@sanity/ui": "^2.8.23",
     "@sanity/vision": "3.64.1",
     "react": "^18.3.1",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
     "react-dom": "^18.3.1",
     "sanity": "workspace:*",
     "sanity-plugin-media": "^2.3.1",

dev/test-next-studio/.depcheckrc.json

@@ -1,3 +1,9 @@
 {
-  "ignores": ["@sanity/vision", "typescript", "react-is"]
+  "ignores": [
+    "@sanity/vision",
+    "typescript",
+    "react-is",
+    "react-compiler-runtime",
+    "babel-plugin-react-compiler"
+  ]
 }

dev/test-next-studio/package.json

@@ -12,11 +12,12 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "babel-plugin-react-compiler": "beta",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "next": "15.0.3",
-    "react": "19.0.0-rc-a7d1240c-20240731",
-    "react-dom": "19.0.0-rc-a7d1240c-20240731",
-    "react-is": "19.0.0-rc-a7d1240c-20240731",
+    "react": "rc",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-dom": "rc",
+    "react-is": "rc",
     "sanity": "workspace:*",
     "sanity-test-studio": "workspace:*",
     "styled-components": "^6.1.12",

dev/test-studio/.depcheckignore.json

@@ -7,6 +7,7 @@
     "@sanity/preview-url-secret",
     "@sanity/react-loader",
     "@sanity/visual-editing",
-    "@vercel/stega"
+    "@vercel/stega",
+    "babel-plugin-react-compiler"
   ]
 }

dev/test-studio/.depcheckrc.json

@@ -0,0 +1,3 @@
+{
+  "ignores": ["babel-plugin-react-compiler", "react-compiler-runtime"]
+}

dev/test-studio/package.json

@@ -51,6 +51,7 @@
     "lodash": "^4.17.21",
     "qs": "^6.10.2",
     "react": "^18.3.1",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
     "react-dom": "^18.3.1",
     "react-refractor": "^2.1.6",
     "refractor": "^3.6.0",
@@ -62,6 +63,7 @@
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "chokidar": "^3.6.0",
     "vite": "^4.5.5"
   }

dev/test-studio/sanity.cli.ts

@@ -13,6 +13,7 @@ export default defineCliConfig({
   // A) `SANITY_STUDIO_REACT_STRICT_MODE=false pnpm dev`
   // B) creating a `.env` file locally that sets the same env variable as above
   reactStrictMode: true,
+  reactCompiler: {target: '18'},
   vite(viteConfig: UserConfig): UserConfig {
     const reactProductionProfiling = process.env.REACT_PRODUCTION_PROFILING === 'true'
 

package.json

@@ -142,7 +142,7 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tsdoc": "^0.3.0",

packages/@repo/package.bundle/src/package.bundle.ts

@@ -12,7 +12,10 @@ export const defaultConfig: UserConfig = {
     'process.env.NODE_ENV': '"production"',
     'process.env': {},
   },
-  plugins: [react(), tsconfigPaths()],
+  plugins: [
+    react({babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]}}),
+    tsconfigPaths(),
+  ],
   build: {
     emptyOutDir: true,
     sourcemap: true,

packages/@sanity/cli/src/types.ts

@@ -286,6 +286,30 @@ export interface GraphQLAPIConfig {
   filterSuffix?: string
 }
 
+/**
+ * Until these types are on npm: https://github.com/facebook/react/blob/0bc30748730063e561d87a24a4617526fdd38349/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L39-L122
+ * @beta
+ */
+export interface ReactCompilerConfig {
+  /**
+   * @see https://react.dev/learn/react-compiler#existing-projects
+   */
+  sources?: Array<string> | ((filename: string) => boolean) | null
+
+  /**
+   * The minimum major version of React that the compiler should emit code for. If the target is 19
+   * or higher, the compiler emits direct imports of React runtime APIs needed by the compiler. On
+   * versions prior to 19, an extra runtime package react-compiler-runtime is necessary to provide
+   * a userspace approximation of runtime APIs.
+   * @see https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18
+   */
+  target: '17' | '18' | '19'
+
+  panicThreshold?: 'ALL_ERRORS' | 'CRITICAL_ERRORS' | 'NONE'
+
+  compilationMode?: 'infer' | 'syntax' | 'annotation' | 'all'
+}
+
 export interface CliConfig {
   api?: CliApiConfig
 
@@ -301,6 +325,13 @@ export interface CliConfig {
    */
   reactStrictMode?: boolean
 
+  /**
+   * The React Compiler is currently in beta, and is disabled by default.
+   * @see https://react.dev/learn/react-compiler
+   * @beta
+   */
+  reactCompiler?: ReactCompilerConfig
+
   server?: {
     hostname?: string
     port?: number

packages/@sanity/types/vitest.config.mts

@@ -2,5 +2,5 @@ import {defineConfig} from '@repo/test-config/vitest'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react({babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]}})],
 })

packages/@sanity/vision/.depcheckrc.json

@@ -12,6 +12,7 @@
     "@sanity/codegen",
     "@sanity/schema",
     "@sanity/block-tools",
-    "vite"
+    "vite",
+    "react-compiler-runtime"
   ]
 }

packages/@sanity/vision/package.config.ts

@@ -1,4 +1,9 @@
 import baseConfig from '@repo/package.config'
 import {defineConfig} from '@sanity/pkg-utils'
 
-export default defineConfig({...baseConfig, external: ['sanity']})
+export default defineConfig({
+  ...baseConfig,
+  external: ['sanity'],
+  babel: {reactCompiler: true},
+  reactCompilerOptions: {target: '18'},
+})

packages/@sanity/vision/package.json

@@ -69,7 +69,8 @@
     "json-2-csv": "^5.5.1",
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
-    "quick-lru": "^5.1.1"
+    "quick-lru": "^5.1.1",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110"
   },
   "devDependencies": {
     "@repo/package.config": "workspace:*",

packages/sanity/.depcheckrc.json

@@ -6,6 +6,7 @@
     "sanity",
     "@sanity/codegen",
     "@types/react",
-    "eslint-plugin-boundaries"
+    "eslint-plugin-boundaries",
+    "react-compiler-runtime"
   ]
 }

packages/sanity/package.config.ts

@@ -56,4 +56,7 @@ export default defineConfig({
       'ae-missing-release-tag': 'error',
     },
   },
+
+  babel: {reactCompiler: true},
+  reactCompilerOptions: {target: '18'},
 })

packages/sanity/package.json

@@ -189,10 +189,11 @@
     "@types/speakingurl": "^13.0.3",
     "@types/tar-stream": "^3.1.3",
     "@types/use-sync-external-store": "^0.0.6",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "archiver": "^7.0.0",
     "arrify": "^1.0.1",
     "async-mutex": "^0.4.1",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
     "classnames": "^2.2.5",
@@ -238,6 +239,7 @@
     "pretty-ms": "^7.0.1",
     "quick-lru": "^5.1.1",
     "raf": "^3.4.1",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
     "react-copy-to-clipboard": "^5.0.4",
     "react-fast-compare": "^3.2.0",
     "react-focus-lock": "^2.8.1",

packages/sanity/src/_internal/cli/actions/build/buildAction.ts

@@ -176,6 +176,8 @@ export default async function buildSanityStudio(
       minify: Boolean(flags.minify),
       vite: cliConfig && 'vite' in cliConfig ? cliConfig.vite : undefined,
       importMap,
+      reactCompiler:
+        cliConfig && 'reactCompiler' in cliConfig ? cliConfig.reactCompiler : undefined,
     })
 
     trace.log({

packages/sanity/src/_internal/cli/actions/dev/devAction.ts

@@ -76,5 +76,6 @@ function getDevServerConfig({
     ...baseConfig,
     staticPath: path.join(workDir, 'static'),
     reactStrictMode,
+    reactCompiler: cliConfig && 'reactCompiler' in cliConfig ? cliConfig.reactCompiler : undefined,
   }
 }

packages/sanity/src/_internal/cli/server/buildStaticFiles.ts

@@ -2,7 +2,7 @@ import {constants as fsConstants} from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
-import {type UserViteConfig} from '@sanity/cli'
+import {type ReactCompilerConfig, type UserViteConfig} from '@sanity/cli'
 import readPkgUp from 'read-pkg-up'
 import {build} from 'vite'
 
@@ -34,6 +34,7 @@ export interface StaticBuildOptions {
   importMap?: {imports?: Record<string, string>}
 
   vite?: UserViteConfig
+  reactCompiler: ReactCompilerConfig | undefined
 }
 
 export async function buildStaticFiles(
@@ -47,6 +48,7 @@ export async function buildStaticFiles(
     basePath,
     vite: extendViteConfig,
     importMap,
+    reactCompiler,
   } = options
 
   debug('Writing Sanity runtime files')
@@ -62,6 +64,7 @@ export async function buildStaticFiles(
     sourceMap,
     mode,
     importMap,
+    reactCompiler,
   })
 
   // Extend Vite configuration with user-provided config

packages/sanity/src/_internal/cli/server/devServer.ts

@@ -1,4 +1,4 @@
-import {type UserViteConfig} from '@sanity/cli'
+import {type ReactCompilerConfig, type UserViteConfig} from '@sanity/cli'
 import chalk from 'chalk'
 import {createServer} from 'vite'
 
@@ -16,6 +16,7 @@ export interface DevServerOptions {
   projectName?: string
 
   reactStrictMode: boolean
+  reactCompiler: ReactCompilerConfig | undefined
   vite?: UserViteConfig
 }
 
@@ -24,7 +25,15 @@ export interface DevServer {
 }
 
 export async function startDevServer(options: DevServerOptions): Promise<DevServer> {
-  const {cwd, httpPort, httpHost, basePath, reactStrictMode, vite: extendViteConfig} = options
+  const {
+    cwd,
+    httpPort,
+    httpHost,
+    basePath,
+    reactStrictMode,
+    vite: extendViteConfig,
+    reactCompiler,
+  } = options
 
   const startTime = Date.now()
   debug('Writing Sanity runtime files')
@@ -37,6 +46,7 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
     mode: 'development',
     server: {port: httpPort, host: httpHost},
     cwd,
+    reactCompiler,
   })
 
   // Extend Vite configuration with user-provided config