fix: remove unsafe ref access during render

.eslintignore.react-compiler

@@ -6,6 +6,7 @@
 **/static/*
 **/coverage/*
 **/lib/*
+**/__tests__/*
 **/node_modules/*
 **/dist/*
 *.json
@@ -28,3 +29,4 @@ scripts/*
 test/*
 **/__workshop__/*
 packages/sanity/playwright-ct/**
+**/@sanity/cli/templates/**

.gitignore

@@ -83,3 +83,6 @@ yalc.lock
 ## Documentation Report
 scripts/docs-report.md
 
+# Temporary data collected by Million Lint
+**/.million/store.json
+dev/test-studio/.react-compiler-bailout-report.json

.npmrc

@@ -13,3 +13,6 @@ public-hoist-pattern[]=prettier-plugin-packagejson
 
 prefer-workspace-packages = true
 link-workspace-packages = deep
+
+; Used so that the Million Lint instrumentation to `packages/sanity` and ``packages/sanity/vision` done in the test studio works, without having to add the dependency everywhere
+public-hoist-pattern[]=@million/lint

dev/test-next-studio/turbo.json

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

dev/test-studio/package.json

@@ -65,6 +65,7 @@
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "@million/lint": "^1.0.14",
     "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
     "chokidar": "^3.6.0",
     "vite": "^5.4.11"

dev/test-studio/sanity.cli.ts

@@ -3,6 +3,20 @@ import path from 'node:path'
 import {defineCliConfig} from 'sanity/cli'
 import {type UserConfig} from 'vite'
 
+const millionLintEnabled = process.env.REACT_MILLION_LINT === 'true'
+const millionInclude: string[] = []
+try {
+  if (millionLintEnabled) {
+    for (const filePath of require('./.react-compiler-bailout-report.json')) {
+      millionInclude.push(`**/${filePath}`)
+    }
+  }
+} catch (err) {
+  throw new Error('Failed to read lint report, did you run `pnpm report:react-compiler-bailout`?', {
+    cause: err,
+  })
+}
+
 export default defineCliConfig({
   api: {
     projectId: 'ppsg7ml5',
@@ -13,12 +27,34 @@ 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'},
+  reactCompiler: millionLintEnabled
+    ? {
+        target: '18',
+        sources: (filename) => {
+          if (filename.includes('node_modules')) {
+            return false
+          }
+          return millionInclude.every(
+            (pattern) => !filename.endsWith(`/${pattern.split('**/')[1]}`),
+          )
+        },
+      }
+    : {target: '18'},
   vite(viteConfig: UserConfig): UserConfig {
     const reactProductionProfiling = process.env.REACT_PRODUCTION_PROFILING === 'true'
 
     return {
       ...viteConfig,
+      plugins: millionLintEnabled
+        ? [
+            require('@million/lint').vite({
+              filter: {
+                include: millionInclude,
+              },
+            }),
+            ...(viteConfig.plugins || []),
+          ]
+        : viteConfig.plugins,
       optimizeDeps: {
         ...viteConfig.optimizeDeps,
         include: ['react/jsx-runtime'],

dev/test-studio/turbo.json

@@ -3,7 +3,7 @@
   "extends": ["//"],
   "tasks": {
     "build": {
-      "env": ["REACT_PRODUCTION_PROFILING"],
+      "env": ["REACT_PRODUCTION_PROFILING", "REACT_MILLION_LINT"],
       "outputs": [".sanity/**", "dist/**", "workshop/scopes.js"]
     },
     "start": {

package.json

@@ -17,7 +17,8 @@
     "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 79 .",
+    "check:react-compiler": "eslint --cache --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 77 .",
+    "report:react-compiler-bailout": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [error,{__unstable_donotuse_reportAllBailouts:true}]' --ignore-path .eslintignore.react-compiler -f ./scripts/reactCompilerBailouts.cjs . || true",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",
@@ -41,6 +42,8 @@
     "dev:test-studio": "pnpm --filter sanity-test-studio dev",
     "dev:test-create-studio": "pnpm --filter test-create-integration-studio dev",
     "dev:test-studio-production-profiling": "REACT_PRODUCTION_PROFILING=true turbo run start --filter=sanity-test-studio",
+    "dev:million-lint": "pnpm report:react-compiler-bailout && pnpm dev:test-studio-million-lint",
+    "dev:test-studio-million-lint": "REACT_MILLION_LINT=true pnpm --filter sanity-test-studio dev",
     "dev:next-studio": "pnpm --filter sanity-test-next-studio dev",
     "dev:turbo-studio": "pnpm dev:next-studio --turbo",
     "docs:report": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReport",

packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx

@@ -80,6 +80,7 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
       inspectors: inspectorsResolver,
     },
   } = useSource()
+  const telemetry = useTelemetry()
   const presenceStore = usePresenceStore()
   const paneRouter = usePaneRouter()
   const setPaneParams = paneRouter.setParams
@@ -297,14 +298,15 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
   const patchRef = useRef<(event: PatchEvent) => void>(() => {
     throw new Error('Nope')
   })
-
-  patchRef.current = (event: PatchEvent) => {
-    // when creating a new draft
-    if (!editState.draft && !editState.published) {
-      telemetry.log(CreatedDraft)
+  useEffect(() => {
+    patchRef.current = (event: PatchEvent) => {
+      // when creating a new draft
+      if (!editState.draft && !editState.published) {
+        telemetry.log(CreatedDraft)
+      }
+      patch.execute(toMutationPatches(event.patches), initialValue.value)
     }
-    patch.execute(toMutationPatches(event.patches), initialValue.value)
-  }
+  }, [editState.draft, editState.published, initialValue.value, patch, telemetry])
 
   const handleChange = useCallback((event: PatchEvent) => patchRef.current(event), [])
 
@@ -411,8 +413,6 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
     [inspectOpen, params, setPaneParams],
   )
 
-  const telemetry = useTelemetry()
-
   const handleMenuAction = useCallback(
     (item: PaneMenuItem) => {
       if (item.action === 'production-preview' && previewUrl) {
@@ -581,7 +581,9 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
   }, [documentId, documentType, schemaType, handleChange, setDocumentMeta])
 
   const formStateRef = useRef(formState)
-  formStateRef.current = formState
+  useEffect(() => {
+    formStateRef.current = formState
+  }, [formState])
 
   const setOpenPath = useCallback(
     (path: Path) => {