feat: add react compiler support

dev/test-next-studio/package.json

@@ -12,7 +12,7 @@
   },
   "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-dom": "19.0.0-rc-a7d1240c-20240731",

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

@@ -116,7 +116,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/package.config.ts

@@ -56,4 +56,8 @@ export default defineConfig({
       'ae-missing-release-tag': 'error',
     },
   },
+
+  babel: {reactCompiler: true},
+  // @ts-expect-error - add `target` to `pkg-utils` types
+  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",
@@ -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',
   })