fix: use react compiler

Author: stipsan

.eslintrc.js

@@ -90,7 +90,7 @@ 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-compiler/react-compiler': 'warn', // Set to error once existing warnings are fixed
+    'react-compiler/react-compiler': 'error',
     'react/no-unescaped-entities': 'off',
     'no-restricted-imports': [
       'error',

.github/workflows/main.yml

@@ -38,7 +38,7 @@ jobs:
       - run: pnpm install
       - name: Register Problem Matcher for ESLint that handles -f compact and shows warnings and errors inline on PRs
         run: echo "::add-matcher::.github/eslint-compact.json"
-      - run: "pnpm lint -f compact --rule 'no-warning-comments: [off]' --max-warnings 12"
+      - run: "pnpm lint -f compact --rule 'no-warning-comments: [off]' --max-warnings 0"
 
   test:
     needs: [build]

.storybook/main.ts

@@ -25,7 +25,9 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       plugins: [
         viteReact({
-          babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+          babel: {
+            plugins: [['babel-plugin-react-compiler', {target: '18'}]],
+          },
         }),
         tsconfigPaths(),
       ],

package.config.ts

@@ -14,4 +14,22 @@ export default defineConfig({
     noImplicitBrowsersList: 'off',
   },
   tsconfig: 'tsconfig.dist.json',
+  babel: {reactCompiler: true},
+  reactCompilerOptions: {
+    target: '18',
+    logger: {
+      logEvent(filename, event) {
+        if (event.kind === 'CompileError') {
+          console.group(`[${filename}] ${event.kind}`)
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const {reason, description, severity, loc, suggestions} = event.detail as any
+          console.error(`[${severity}] ${reason}`)
+          console.log(`${filename}:${loc.start?.line}:${loc.start?.column} ${description}`)
+          console.log(suggestions)
+
+          console.groupEnd()
+        }
+      },
+    },
+  },
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.12",
+  "version": "2.8.13-canary.1",
   "keywords": [
     "sanity",
     "ui",
@@ -110,6 +110,7 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },

pnpm-lock.yaml

@@ -36,31 +36,28 @@ export function useMenuController(props: {
     activeIndexRef.current = nextActiveIndex
   }, [])
 
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
+  const mount = (element: HTMLElement | null, selected?: boolean): (() => void) => {
+    if (!element) return () => undefined
 
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
-      }
+    if (elementsRef.current.indexOf(element) === -1) {
+      elementsRef.current.push(element)
+      _sortElements(rootElementRef.current, elementsRef.current)
+    }
 
-      if (selected) {
-        const selectedIndex = elementsRef.current.indexOf(element)
+    if (selected) {
+      const selectedIndex = elementsRef.current.indexOf(element)
 
-        setActiveIndex(selectedIndex)
-      }
+      setActiveIndex(selectedIndex)
+    }
 
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
+    return () => {
+      const idx = elementsRef.current.indexOf(element)
 
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
+      if (idx > -1) {
+        elementsRef.current.splice(idx, 1)
       }
-    },
-    [rootElementRef, setActiveIndex],
-  )
+    }
+  }
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -170,15 +167,15 @@ export function useMenuController(props: {
     [setActiveIndex],
   )
 
-  const handleItemMouseLeave = useCallback(() => {
+  const handleItemMouseLeave = () => {
     // Set the active index to -2 to deactivate all menu items
     // when the user moves the mouse away from the menu item.
     // We avoid using -1 because it would focus the first menu item,
     // which would be incorrect when the user hovers over a gap
     // between two menu items or a menu divider.
     setActiveIndex(-2)
     rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
+  }
 
   // Set focus on the currently active element
   useEffect(() => {