feat: add react compiler support

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": "beta"
   }
 }

dev/studio-e2e-testing/package.json

@@ -20,6 +20,7 @@
     "@sanity/ui": "^2.8.10",
     "@sanity/vision": "3.62.2",
     "react": "^18.3.1",
+    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "sanity": "workspace:*",
     "sanity-plugin-media": "^2.3.1",

dev/test-next-studio/package.json

@@ -12,9 +12,10 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "babel-plugin-react-compiler": "0.0.0-experimental-de2cfda-20240912",
+    "babel-plugin-react-compiler": "beta",
     "next": "15.0.1",
     "react": "19.0.0-rc-a7d1240c-20240731",
+    "react-compiler-runtime": "beta",
     "react-dom": "19.0.0-rc-a7d1240c-20240731",
     "react-is": "19.0.0-rc-a7d1240c-20240731",
     "sanity": "workspace:*",

dev/test-studio/package.json

@@ -51,6 +51,7 @@
     "lodash": "^4.17.21",
     "qs": "^6.10.2",
     "react": "^18.3.1",
+    "react-compiler-runtime": "beta",
     "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": "beta",
     "chokidar": "^3.6.0",
     "vite": "^4.5.5"
   }

package.json

@@ -17,7 +17,7 @@
     "check:deps": "pnpm --recursive --parallel exec depcheck",
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 7 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 80 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",
@@ -112,11 +112,11 @@
     "@sanity/eslint-config-i18n": "1.0.0",
     "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/mutate": "^0.10.1",
-    "@sanity/pkg-utils": "6.11.4",
+    "@sanity/pkg-utils": "6.11.7",
     "@sanity/prettier-config": "^1.0.2",
     "@sanity/test": "0.0.1-alpha.1",
     "@sanity/tsdoc": "1.0.113",
-    "@sanity/ui": "^2.8.10",
+    "@sanity/ui": "2.9.0-canary.6",
     "@sanity/uuid": "^3.0.2",
     "@types/glob": "^7.2.0",
     "@types/lodash": "^4.17.7",
@@ -143,7 +143,7 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-plugin-react-compiler": "beta",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tsdoc": "^0.3.0",
@@ -190,7 +190,8 @@
       "@npmcli/arborist": "^7.5.4",
       "@sanity/ui@2": "$@sanity/ui",
       "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
-      "@typescript-eslint/parser": "$@typescript-eslint/parser"
+      "@typescript-eslint/parser": "$@typescript-eslint/parser",
+      "react-rx": "4.0.1-canary.1"
     }
   },
   "isSanityMonorepo": true

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-6fc168f-20241025"
   },
   "devDependencies": {
     "@repo/package.config": "workspace:*",

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": "beta",
     "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-6fc168f-20241025",
     "react-copy-to-clipboard": "^5.0.4",
     "react-fast-compare": "^3.2.0",
     "react-focus-lock": "^2.8.1",
@@ -275,7 +277,7 @@
     "@repo/test-config": "workspace:*",
     "@sanity/codegen": "3.62.2",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/pkg-utils": "6.11.4",
+    "@sanity/pkg-utils": "6.11.7",
     "@sanity/tsdoc": "1.0.113",
     "@sanity/ui-workshop": "^1.2.11",
     "@sentry/types": "^8.12.0",
@@ -299,7 +301,7 @@
     "@types/rimraf": "^3.0.2",
     "@types/semver": "^6.2.3",
     "@types/tar-fs": "^2.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "@vvo/tzdb": "6.137.0",
     "blob-polyfill": "^9.0.20240710",
     "date-fns-tz": "2.0.1",

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

@@ -104,7 +104,9 @@ export async function getViteConfig(options: ViteOptions): Promise<InlineConfig>
     configFile: false,
     mode,
     plugins: [
-      viteReact(),
+      viteReact({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
       sanityFaviconsPlugin({defaultFaviconsPath, customFaviconsPath, staticUrlPath: staticPath}),
       sanityDotWorkaroundPlugin(),
       sanityRuntimeRewritePlugin(),

perf/efps/package.json

@@ -22,14 +22,16 @@
     "@types/react-dom": "^18.3.0",
     "@types/serve-handler": "^6.1.4",
     "@types/yargs": "^17.0.7",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "babel-plugin-react-compiler": "beta",
     "chalk": "^4.1.2",
     "cli-table3": "^0.6.5",
     "dotenv": "^16.0.3",
     "globby": "^10.0.0",
     "ora": "^8.0.1",
     "playwright": "^1.46.1",
     "react": "^18.3.1",
+    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "sanity": "workspace:*",

perf/efps/runTest.ts

@@ -54,7 +54,12 @@ export async function runTest({
   await vite.build({
     appType: 'spa',
     build: {outDir, sourcemap: true},
-    plugins: [{...sourcemaps(), enforce: 'pre'}, react()],
+    plugins: [
+      {...sourcemaps(), enforce: 'pre'},
+      react({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     resolve: {alias},
     logLevel: 'silent',
   })