feat: 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]

package.config.ts

@@ -15,5 +15,23 @@ export default defineConfig({
   },
   tsconfig: 'tsconfig.dist.json',
   babel: {reactCompiler: true},
-  reactCompilerOptions: {target: '18'},
+  reactCompilerOptions: {
+    target: '18',
+    logger: {
+      logEvent(filename, event) {
+        /* eslint-disable no-console */
+        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.20",
+  "version": "2.9.0-canary.6",
   "keywords": [
     "sanity",
     "ui",

src/core/components/autocomplete/autocomplete.tsx

@@ -17,6 +17,7 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
@@ -184,21 +185,22 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
 
   // Element refs
-  const rootElementRef = useRef<HTMLDivElement | null>(null)
-  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
-  const inputElementRef = useRef<HTMLInputElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [resultsPopoverElement, setResultsPopoverElement] = useState<HTMLDivElement | null>(null)
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
   const valueRef = useRef(value)
   const valuePropRef = useRef(valueProp)
-  const popoverMouseWithinRef = useRef(false)
+  const [popoverMouseWithin, setPopoverMouseWithin] = useState(false)
 
   // Forward ref to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -222,13 +224,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
         // closes the results in certain situations):
         // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithinRef.current) {
+        if (popoverMouseWithin) {
           return
         }
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+          rootElement ? [rootElement] : [],
+          resultsPopoverElement ? [resultsPopoverElement] : [],
         )
 
         let focusInside = false
@@ -244,13 +246,20 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         if (focusInside === false) {
           dispatch({type: 'root/blur'})
-          popoverMouseWithinRef.current = false
+          setPopoverMouseWithin(false)
           if (onQueryChange) onQueryChange(null)
           if (onBlur) onBlur(event)
         }
       }, 0)
     },
-    [onBlur, onQueryChange, relatedElements],
+    [
+      onBlur,
+      onQueryChange,
+      popoverMouseWithin,
+      relatedElements,
+      resultsPopoverElement,
+      rootElement,
+    ],
   )
 
   const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
@@ -269,7 +278,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (v: string) => {
       dispatch({type: 'value/change', value: v})
 
-      popoverMouseWithinRef.current = false
+      setPopoverMouseWithin(false)
 
       if (onSelect) onSelect(v)
 
@@ -278,9 +287,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       if (onChange) onChange(v)
       if (onQueryChange) onQueryChange(null)
 
-      inputElementRef.current?.focus()
+      inputElement?.focus()
     },
-    [onChange, onSelect, onQueryChange],
+    [onSelect, onChange, onQueryChange, inputElement],
   )
 
   const handleRootKeyDown = useCallback(
@@ -324,9 +333,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (event.key === 'Escape') {
         dispatch({type: 'root/escape'})
-        popoverMouseWithinRef.current = false
+        setPopoverMouseWithin(false)
         if (onQueryChange) onQueryChange(null)
-        inputElementRef.current?.focus()
+        inputElement?.focus()
 
         return
       }
@@ -338,12 +347,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         (listEl === target || listEl?.contains(target)) &&
         !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)
       ) {
-        inputElementRef.current?.focus()
+        inputElement?.focus()
 
         return
       }
     },
-    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
+    [activeValue, filteredOptions, filteredOptionsLen, inputElement, onQueryChange],
   )
 
   const handleInputChange = useCallback(
@@ -377,20 +386,20 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
-    popoverMouseWithinRef.current = true
+    setPopoverMouseWithin(true)
   }, [])
 
   const handlePopoverMouseLeave = useCallback(() => {
-    popoverMouseWithinRef.current = false
+    setPopoverMouseWithin(false)
   }, [])
 
   const handleClearButtonClick = useCallback(() => {
     dispatch({type: 'root/clear'})
     valueRef.current = ''
     if (onChange) onChange('')
     if (onQueryChange) onQueryChange(null)
-    inputElementRef.current?.focus()
-  }, [onChange, onQueryChange])
+    inputElement?.focus()
+  }, [inputElement, onChange, onQueryChange])
 
   const handleClearButtonFocus = useCallback(() => {
     dispatch({type: 'input/focus'})
@@ -482,9 +491,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (openButtonProps.onClick) openButtonProps.onClick(event)
 
-      _raf(() => inputElementRef.current?.focus())
+      _raf(() => inputElement?.focus())
     },
-    [openButtonProps, dispatchOpen],
+    [dispatchOpen, openButtonProps, inputElement],
   )
 
   const openButtonNode = useMemo(
@@ -554,7 +563,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={inputElementRef}
+      ref={setInputElement}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}
@@ -566,10 +575,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
       if (event.key === 'Tab') {
-        if (listFocused) inputElementRef.current?.focus()
+        if (listFocused) inputElement?.focus()
       }
     },
-    [listFocused],
+    [inputElement, listFocused],
   )
 
   const content = useMemo(() => {
@@ -635,11 +644,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         {
           content,
           hidden: !expanded,
-          inputElement: inputElementRef.current,
+          inputElement,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        resultsPopoverElementRef,
+        {current: resultsPopoverElement},
       )
     }
 
@@ -661,8 +670,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}
-        ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        ref={setResultsPopoverElement}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -672,9 +681,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     radius,
     renderPopover,
+    resultsPopoverElement,
   ])
 
   return (
@@ -683,7 +694,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
       onKeyDown={handleRootKeyDown}
-      ref={rootElementRef}
+      ref={setRootElement}
     >
       {input}
       {results}

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,13 +1,4 @@
-import {
-  Children,
-  forwardRef,
-  Fragment,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {Children, forwardRef, Fragment, isValidElement, useCallback, useRef, useState} from 'react'
 import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
@@ -39,46 +30,43 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
 
-  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
+  const rawItems = Children.toArray(children).filter(isValidElement)
 
-  const items = useMemo(() => {
-    const len = rawItems.length
+  let items = rawItems
+  const len = rawItems.length
 
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2)
-      const afterLength = Math.floor(maxLength / 2)
+  if (maxLength && rawItems.length > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2)
+    const afterLength = Math.floor(maxLength / 2)
 
-      return [
-        ...rawItems.slice(0, beforeLength - 1),
-        <Popover
-          constrainSize
-          content={
-            <Stack as="ol" overflow="auto" padding={space} space={space}>
-              {rawItems.slice(beforeLength - 1, len - afterLength)}
-            </Stack>
-          }
-          key="button"
-          open={open}
-          placement="top"
-          portal
-          ref={popoverElementRef}
-        >
-          <ExpandButton
-            fontSize={1}
-            mode="bleed"
-            onClick={open ? collapse : expand}
-            padding={1}
-            ref={expandElementRef}
-            selected={open}
-            text="…"
-          />
-        </Popover>,
-        ...rawItems.slice(len - afterLength),
-      ]
-    }
-
-    return rawItems
-  }, [collapse, expand, maxLength, open, rawItems, space])
+    items = [
+      ...rawItems.slice(0, beforeLength - 1),
+      <Popover
+        constrainSize
+        content={
+          <Stack as="ol" overflow="auto" padding={space} space={space}>
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+        key="button"
+        open={open}
+        placement="top"
+        portal
+        ref={popoverElementRef}
+      >
+        <ExpandButton
+          fontSize={1}
+          mode="bleed"
+          onClick={open ? collapse : expand}
+          padding={1}
+          ref={expandElementRef}
+          selected={open}
+          text="…"
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
 
   return (
     <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>