feat: upgrade to react compiler v1

Author: stipsan

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:react/jsx-runtime',
     'eslint:recommended',
     'plugin:prettier/recommended',
@@ -33,7 +34,6 @@ module.exports = {
     'react/prop-types': 'off',
     'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-    'react-hooks/react-compiler': 'error',
     'react/no-unescaped-entities': 'off',
     'simple-import-sort/exports': 'warn',
     'simple-import-sort/imports': 'warn',
@@ -53,6 +53,7 @@ module.exports = {
       },
       extends: [
         'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
         'plugin:react/jsx-runtime',
         'eslint:recommended',
         'plugin:prettier/recommended',

.github/workflows/react-compiler.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           cache: pnpm
           node-version: lts/*
-      - run: pnpm -r up --ignore-scripts react-compiler-runtime@rc babel-plugin-react-compiler@rc eslint-plugin-react-hooks@rc
+      - run: pnpm -r up --ignore-scripts react-compiler-runtime@latest babel-plugin-react-compiler@latest eslint-plugin-react-hooks@latest
       - uses: actions/create-github-app-token@v2
         id: generate-token
         with:
@@ -39,7 +39,7 @@ jobs:
       - if: steps.check-changes.outputs.changed == 'true'
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
         with:
-          body: I ran `pnpm -r up react-compiler-runtime@rc babel-plugin-react-compiler@rc eslint-plugin-react-hooks@rc` 🧑‍💻
+          body: I ran `pnpm -r up react-compiler-runtime@latest babel-plugin-react-compiler@latest eslint-plugin-react-hooks@latest` 🧑‍💻
           branch: actions/react-compiler
           commit-message: "fix(deps): update react compiler dependencies 🤖 ✨"
           labels: 🤖 bot

package.json

@@ -148,7 +148,7 @@
     "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "1.0.0",
     "commitizen": "^4.3.1",
     "commitlint": "^19.8.1",
     "eslint": "^8.57.1",
@@ -157,7 +157,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "6.0.0-rc.1",
+    "eslint-plugin-react-hooks": "7.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",

pnpm-lock.yaml

@@ -8,7 +8,7 @@ import {
 } from '@sanity/ui'
 import {debounce} from 'lodash'
 import {isEqual} from 'lodash'
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {memo, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 import {WorkshopConfig} from './config'
 import {DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE} from './constants'
@@ -137,15 +137,17 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
     const prevMediaIndex = mediaIndexRef.current
 
     if (prevMediaIndex < 2 && mediaIndex >= 2) {
-      setNavigatorExpanded(false)
-      setInspectorExpanded(false)
+      startTransition(() => {
+        setNavigatorExpanded(false)
+        setInspectorExpanded(false)
+      })
     }
 
     mediaIndexRef.current = mediaIndex
   }, [mediaIndex])
 
   useEffect(() => {
-    setNavigatorExpanded(false)
+    startTransition(() => setNavigatorExpanded(false))
   }, [path])
 
   // Cancel debounced functions

src/core/Workshop.tsx

@@ -1,5 +1,5 @@
 import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui'
-import {StrictMode, useEffect, useMemo, useState} from 'react'
+import {startTransition, StrictMode, useEffect, useMemo, useState} from 'react'
 import {createRoot} from 'react-dom/client'
 
 import {WorkshopConfig} from './config'
@@ -29,7 +29,7 @@ function Root(props: {config: WorkshopConfig}) {
   const locationStore = useMemo(() => createLocationStore(), [])
 
   useEffect(() => {
-    setScheme(prefersDark ? 'dark' : 'light')
+    startTransition(() => setScheme(prefersDark ? 'dark' : 'light'))
   }, [prefersDark])
 
   return (

src/core/mount.tsx

@@ -1,5 +1,5 @@
 import {isEqual} from 'lodash'
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {memo, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {useWorkshop} from '../../useWorkshop'
@@ -90,17 +90,19 @@ export const PropsProvider = memo(function PropsProvider(props: {
 
     encodedValueRef.current = encodedValue
 
-    setState((prevState) => {
-      const nextValue = decodeValue(String(encodedValue)) || {}
-      if (isEqual(prevState.value, nextValue)) {
-        return prevState
-      }
-
-      return {
-        ...prevState,
-        value: nextValue,
-      }
-    })
+    startTransition(() =>
+      setState((prevState) => {
+        const nextValue = decodeValue(String(encodedValue)) || {}
+        if (isEqual(prevState.value, nextValue)) {
+          return prevState
+        }
+
+        return {
+          ...prevState,
+          value: nextValue,
+        }
+      }),
+    )
   }, [encodedValue])
 
   return <PropsContext.Provider value={ctx}>{children}</PropsContext.Provider>

src/core/plugins/props/PropsProvider.tsx

@@ -1,6 +1,6 @@
 import {useToast} from '@sanity/ui'
 import axe from 'axe-core'
-import {useEffect, useState} from 'react'
+import {startTransition, useEffect, useState} from 'react'
 
 const IGNORE_VIOLATION_IDS = ['landmark-one-main', 'page-has-heading-one']
 
@@ -17,7 +17,7 @@ export function useAxeResults(props: {
     if (!enabled) return
 
     try {
-      setResults(null)
+      startTransition(() => setResults(null))
 
       axe
         .run()