chore: setup CI check for react compiler errors (#6730)

.eslintrc.cjs

@@ -30,6 +30,7 @@ const config = {
     '@typescript-eslint',
     'prettier',
     'react',
+    'react-compiler',
     'tsdoc',
     'unicorn',
   ],
@@ -68,6 +69,8 @@ const config = {
         additionalHooks: '(useMemoObservable|useObservableCallback|useAsync)',
       },
     ],
+    // Set react-compiler to `error` once existing issues are fixed
+    'react-compiler/react-compiler': 'warn',
     'react/no-unescaped-entities': 'off',
     'i18next/no-literal-string': ['error'],
     '@sanity/i18n/no-attribute-string-literals': [

.github/workflows/are-we-compiled-yet.yml

@@ -0,0 +1,51 @@
+name: Check if the React Compiler are able to optimize everything
+
+on:
+  # Build on pushes branches that have a PR (including drafts)
+  pull_request:
+  # Build on commits pushed to branches without a PR if it's in the allowlist
+  push:
+    branches: [next]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache node modules
+        id: cache-node-modules
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            v1-${{ runner.os }}-pnpm-store-${{ env.cache-name }}-
+            v1-${{ runner.os }}-pnpm-store-
+            v1-${{ runner.os }}-
+
+      - name: Install project dependencies
+        run: pnpm install
+
+      - name: Lint with the React Compiler ESLint plugin
+        run: pnpm check:react-compiler

dev/test-next-studio/next.config.mjs

@@ -72,7 +72,11 @@ const config = {
     }
     return config
   },
+  // Makes it much easier to see which component got memoized by the react compiler
+  // when testing on https://test-next-studio.sanity.build
+  productionBrowserSourceMaps: true,
   experimental: {
+    reactCompiler: true,
     turbo: {
       resolveAlias: {
         '@sanity/block-tools': '@sanity/block-tools/src/index.ts',
@@ -94,6 +98,7 @@ const config = {
         '@sanity/util': '@sanity/util/src/_exports/index.ts',
         '@sanity/vision': '@sanity/vision/src/index.ts',
         'sanity/_internal': 'sanity/src/_exports/_internal.ts',
+        'sanity/_singletons': 'sanity/src/_exports/_singletons.ts',
         'sanity/cli': 'sanity/src/_exports/cli.ts',
         'sanity/desk': 'sanity/src/_exports/desk.ts',
         'sanity/presentation': 'sanity/src/_exports/presentation.ts',

dev/test-next-studio/package.json

@@ -12,12 +12,13 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "next": "14.3.0-canary.64",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
+    "next": "14.3.0-canary.73",
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508",
     "sanity": "workspace:*",
     "sanity-test-studio": "workspace:*",
-    "styled-components": "^6.1.8",
+    "styled-components": "^6.1.11",
     "typescript": "5.4.5"
   }
 }

dev/test-studio/package.json

@@ -64,7 +64,7 @@
     "sanity": "workspace:*",
     "sanity-plugin-hotspot-array": "^2.0.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^6.1.0",
+    "styled-components": "^6.1.11",
     "three": "^0.164.0",
     "three-stdlib": "^2.24.2"
   },

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-exhaustive-deps": "run-s check:lint -- --quiet --rule 'react-hooks/exhaustive-deps: [error, {additionalHooks: \"(useAsync|useMemoObservable|useObservableCallback)\"}]'",
+    "check:react-exhaustive-deps": "turbo run lint --continue -- --quiet --rule 'react-hooks/exhaustive-deps: [error, {additionalHooks: \"(useAsync|useMemoObservable|useObservableCallback)\"}]'",
+    "check:react-compiler": "turbo run lint --continue -- --quiet --rule 'react-compiler/react-compiler: [error]'",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",
@@ -135,6 +136,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
@@ -169,6 +171,12 @@
   },
   "packageManager": "pnpm@8.15.8",
   "pnpm": {
+    "peerDependencyRules": {
+      "allowAny": [
+        "react",
+        "react-dom"
+      ]
+    },
     "overrides": {
       "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
       "@typescript-eslint/parser": "$@typescript-eslint/parser"

packages/@repo/shared-modules.bundle/package.json

@@ -12,6 +12,6 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.11"
   }
 }

packages/@sanity/cli/package.json

@@ -59,7 +59,7 @@
     "@babel/traverse": "^7.23.5",
     "@sanity/client": "^6.18.2",
     "@sanity/codegen": "3.43.0",
-    "@sanity/telemetry": "^0.7.6",
+    "@sanity/telemetry": "^0.7.7",
     "@sanity/util": "3.43.0",
     "chalk": "^4.1.2",
     "debug": "^4.3.4",

packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-nested-callbacks */
 import {type PortableTextBlock} from '@sanity/types'
 import {debounce, isEqual} from 'lodash'
-import {useCallback, useMemo, useRef} from 'react'
+import {useMemo, useRef} from 'react'
 import {type Descendant, Editor, type Node, Text, Transforms} from 'slate'
 import {useSlate} from 'slate-react'
 
@@ -50,24 +50,21 @@ export function useSyncValue(
   const slateEditor = useSlate()
   const updateValueFunctionRef = useRef<(value: PortableTextBlock[] | undefined) => void>()
 
-  const updateFromCurrentValue = useCallback(() => {
-    const currentValue = CURRENT_VALUE.get(portableTextEditor)
-    if (previousValue.current === currentValue) {
-      debug('Value is the same object as previous, not need to sync')
-      return
-    }
-    if (updateValueFunctionRef.current && currentValue) {
-      debug('Updating the value debounced')
-      updateValueFunctionRef.current(currentValue)
+  const updateValueDebounced = useMemo(() => {
+    const updateFromCurrentValue = () => {
+      const currentValue = CURRENT_VALUE.get(portableTextEditor)
+      if (previousValue.current === currentValue) {
+        debug('Value is the same object as previous, not need to sync')
+        return
+      }
+      if (updateValueFunctionRef.current && currentValue) {
+        debug('Updating the value debounced')
+        updateValueFunctionRef.current(currentValue)
+      }
     }
+    return debounce(updateFromCurrentValue, 1000, {trailing: true, leading: false})
   }, [portableTextEditor])
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const updateValueDebounced = useCallback(
-    debounce(updateFromCurrentValue, 1000, {trailing: true, leading: false}),
-    [updateFromCurrentValue],
-  )
-
   return useMemo(() => {
     const updateFunction = (value: PortableTextBlock[] | undefined) => {
       CURRENT_VALUE.set(portableTextEditor, value)

packages/sanity/package.json

@@ -164,7 +164,7 @@
     "@sanity/portable-text-editor": "3.43.0",
     "@sanity/presentation": "1.15.8",
     "@sanity/schema": "3.43.0",
-    "@sanity/telemetry": "^0.7.6",
+    "@sanity/telemetry": "^0.7.7",
     "@sanity/types": "3.43.0",
     "@sanity/ui": "^2.1.11",
     "@sanity/util": "3.43.0",