feat: add React Compiler

.depcheckrc.json

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

.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/page-building-studio/package.json

@@ -13,7 +13,9 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "react": "^18.2.0",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "sanity": "workspace:*",

dev/page-building-studio/sanity.cli.ts

@@ -5,4 +5,5 @@ export default defineCliConfig({
     projectId: 'ppsg7ml5',
     dataset: 'page-building',
   },
+  reactCompiler: {target: '18'},
 })

dev/starter-studio/package.json

@@ -12,7 +12,9 @@
     "start": "../.bin/sanity start --port 3337"
   },
   "dependencies": {
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "react": "^18.3.1",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
     "react-dom": "^18.3.1",
     "sanity": "workspace:*",
     "styled-components": "^6.1.0"

dev/starter-studio/sanity.cli.ts

@@ -5,4 +5,5 @@ export default defineCliConfig({
     projectId: 'ppsg7ml5',
     dataset: 'test',
   },
+  reactCompiler: {target: '18'},
 })

dev/studio-e2e-testing/package.json

@@ -19,7 +19,9 @@
     "@sanity/icons": "^3.4.0",
     "@sanity/ui": "^2.8.23",
     "@sanity/vision": "3.64.1",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "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/studio-e2e-testing/sanity.cli.ts

@@ -9,6 +9,7 @@ export default defineCliConfig({
     projectId: process.env.SANITY_E2E_PROJECT_ID,
     dataset: process.env.SANITY_E2E_DATASET,
   },
+  reactCompiler: {target: '18'},
   vite: {
     define: {
       'process.env.SANITY_E2E_PROJECT_ID': JSON.stringify(process.env.SANITY_E2E_PROJECT_ID),

dev/test-next-studio/next.config.mjs

@@ -2,9 +2,7 @@ function requireResolve(id) {
   return import.meta.resolve(id).replace('file://', '')
 }
 
-const reactCompiler = process.env.REACT_COMPILER === 'true'
 const reactProductionProfiling = process.env.REACT_PRODUCTION_PROFILING === 'true'
-const productionBrowserSourceMaps = reactCompiler || reactProductionProfiling
 
 // eslint-disable-next-line tsdoc/syntax
 /** @type {import('next').NextConfig} */
@@ -86,10 +84,10 @@ const config = {
   },
   // Makes it much easier to see which component got memoized by the react compiler
   // when testing on https://test-next-studio.sanity.build
-  productionBrowserSourceMaps,
+  productionBrowserSourceMaps: reactProductionProfiling,
   reactProductionProfiling,
   experimental: {
-    reactCompiler,
+    reactCompiler: true,
     turbo: {
       resolveAlias: {
         '@sanity/block-tools': '@sanity/block-tools/src/index.ts',

dev/test-next-studio/package.json

@@ -12,11 +12,11 @@
   },
   "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-dom": "rc",
+    "react-is": "rc",
     "sanity": "workspace:*",
     "sanity-test-studio": "workspace:*",
     "styled-components": "^6.1.12",

dev/test-next-studio/turbo.json

@@ -3,7 +3,7 @@
   "extends": ["//"],
   "tasks": {
     "build": {
-      "env": ["REACT_COMPILER", "REACT_PRODUCTION_PROFILING"],
+      "env": ["REACT_PRODUCTION_PROFILING"],
       "outputs": [".next/**", "!.next/cache/**", "out/**"],
       "dependsOn": ["^build"]
     },

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/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

@@ -41,7 +41,6 @@
     "dev:test-studio": "pnpm --filter sanity-test-studio dev",
     "dev:test-studio-production-profiling": "REACT_PRODUCTION_PROFILING=true turbo run start --filter=sanity-test-studio",
     "dev:next-studio": "pnpm --filter sanity-test-next-studio dev",
-    "dev:compiled-studio": "REACT_COMPILER=true pnpm dev:next-studio",
     "dev:turbo-studio": "pnpm dev:next-studio --turbo",
     "docs:report": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReport",
     "docs:report:cleanup": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReportCleanup",
@@ -142,7 +141,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/@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: '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:*",
@@ -84,6 +85,7 @@
     "@sanity/types": "workspace:*",
     "@sanity/util": "workspace:*",
     "@types/lodash": "^4.17.7",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "react": "^18.3.1",
     "sanity": "workspace:*",
     "styled-components": "^6.1.13"

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,7 +189,7 @@
     "@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",
@@ -238,6 +238,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",
@@ -299,6 +300,7 @@
     "@types/tar-fs": "^2.0.1",
     "@vitejs/plugin-react": "^4.3.3",
     "@vvo/tzdb": "6.137.0",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "blob-polyfill": "^9.0.20240710",
     "date-fns-tz": "2.0.1",
     "react": "^18.3.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