From 3b5beedf66eeca032b77443340a4b1e09cbca87f Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Tue, 29 Oct 2024 15:13:49 +0100 Subject: [PATCH] fix: use react compiler --- .eslintrc.js | 2 +- .github/workflows/main.yml | 2 +- .storybook/main.ts | 4 +- package.config.ts | 18 +++++++++ package.json | 3 +- pnpm-lock.yaml | 18 ++++----- src/core/components/menu/useMenuController.ts | 39 +++++++++---------- 7 files changed, 52 insertions(+), 34 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 491976d9e..ab8d19e0c 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 07b392309..e46a99e75 100644 --- a/.github/workflows/main.yml +++ b/.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] diff --git a/.storybook/main.ts b/.storybook/main.ts index 9dba041a7..adf3a670b 100644 --- a/.storybook/main.ts +++ b/.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(), ], diff --git a/package.config.ts b/package.config.ts index 5f9bb0b2f..2f62aff20 100644 --- a/package.config.ts +++ b/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() + } + }, + }, + }, }) diff --git a/package.json b/package.json index 4de771d33..1df5ea049 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 476c463fd..ac0ee35b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: framer-motion: specifier: 11.0.8 version: 11.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-compiler-runtime: + specifier: 19.0.0-beta-6fc168f-20241025 + version: 19.0.0-beta-6fc168f-20241025(react@18.3.1) react-refractor: specifier: ^2.2.0 version: 2.2.0(react@18.3.1) @@ -65,7 +68,7 @@ importers: version: 5.0.0(semantic-release@24.0.0(typescript@5.5.3)) '@sanity/ui-workshop': specifier: ^2.0.16 - version: 2.0.16(@sanity/icons@3.4.0(react@18.3.1))(@sanity/ui@2.8.11(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(@types/node@20.12.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.30.3) + version: 2.0.16(@sanity/icons@3.4.0(react@18.3.1))(@sanity/ui@2.8.12(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(@types/node@20.12.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.30.3) '@storybook/addon-a11y': specifier: ^8.3.6 version: 8.3.6(storybook@8.3.6) @@ -225,9 +228,6 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 - react-compiler-runtime: - specifier: beta - version: 19.0.0-beta-6fc168f-20241025(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -1967,8 +1967,8 @@ packages: react-dom: ^18 styled-components: ^5.2 || ^6 - '@sanity/ui@2.8.11': - resolution: {integrity: sha512-5PAWadS6bXBnV+dADChQATcrHNlsuKZa67PxdPxSO3v3TDVzm4GXYSpSvEz9GuOKCotyK17vze8WSCEVuY7OYg==} + '@sanity/ui@2.8.12': + resolution: {integrity: sha512-SnmHh1kQavLqoGnZB37KoWkMQWDyhJWfT6Aa3BJtPqY8RN59eXc9tnZXpjGyDIsjqqhdq/r4aHQlZgHBW9g3uA==} engines: {node: '>=14.0.0'} peerDependencies: react: ^18 @@ -9603,10 +9603,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@sanity/ui-workshop@2.0.16(@sanity/icons@3.4.0(react@18.3.1))(@sanity/ui@2.8.11(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(@types/node@20.12.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.30.3)': + '@sanity/ui-workshop@2.0.16(@sanity/icons@3.4.0(react@18.3.1))(@sanity/ui@2.8.12(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(@types/node@20.12.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.30.3)': dependencies: '@sanity/icons': 3.4.0(react@18.3.1) - '@sanity/ui': 2.8.11(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) + '@sanity/ui': 2.8.12(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) '@vitejs/plugin-react': 4.3.3(vite@5.4.2(@types/node@20.12.7)(terser@5.30.3)) axe-core: 4.10.2 cac: 6.7.14 @@ -9637,7 +9637,7 @@ snapshots: - supports-color - terser - '@sanity/ui@2.8.11(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))': + '@sanity/ui@2.8.12(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@sanity/color': 3.0.6 diff --git a/src/core/components/menu/useMenuController.ts b/src/core/components/menu/useMenuController.ts index dd4abbbcb..92d446030 100644 --- a/src/core/components/menu/useMenuController.ts +++ b/src/core/components/menu/useMenuController.ts @@ -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) => { @@ -170,7 +167,7 @@ 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, @@ -178,7 +175,7 @@ export function useMenuController(props: { // between two menu items or a menu divider. setActiveIndex(-2) rootElementRef.current?.focus() - }, [rootElementRef, setActiveIndex]) + } // Set focus on the currently active element useEffect(() => {