From 7d0abf2e70cb4d5eca17dcd1d359b2a4a49d7342 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 +- .storybook/main.ts | 41 +++++++++++-------- package.config.ts | 3 ++ package.json | 1 + pnpm-lock.yaml | 18 ++++---- .../conditionalWrapper/conditionalWrapper.tsx | 12 +++--- 6 files changed, 43 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/.storybook/main.ts b/.storybook/main.ts index 9dba041a7..8bc467733 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,35 +1,40 @@ -import type {StorybookConfig} from '@storybook/react-vite' -import viteReact from '@vitejs/plugin-react' -import {mergeConfig} from 'vite' -import tsconfigPaths from 'vite-tsconfig-paths' +import type { StorybookConfig } from "@storybook/react-vite"; +import viteReact from "@vitejs/plugin-react"; +import { mergeConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; const config: StorybookConfig = { - stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: [ + "../stories/**/*.mdx", + "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)", + ], addons: [ - '@storybook/addon-a11y', - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-storysource', - '@storybook/addon-themes', - '@storybook/addon-mdx-gfm', + "@storybook/addon-a11y", + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + "@storybook/addon-storysource", + "@storybook/addon-themes", + "@storybook/addon-mdx-gfm", ], framework: { - name: '@storybook/react-vite', + name: "@storybook/react-vite", options: {}, }, docs: { - autodocs: 'tag', + autodocs: "tag", }, viteFinal(config) { return mergeConfig(config, { plugins: [ viteReact({ - babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]}, + babel: { + plugins: [["babel-plugin-react-compiler", { target: "18" }]], + }, }), tsconfigPaths(), ], - }) + }); }, -} -export default config +}; +export default config; diff --git a/package.config.ts b/package.config.ts index 5f9bb0b2f..23d1d1883 100644 --- a/package.config.ts +++ b/package.config.ts @@ -14,4 +14,7 @@ export default defineConfig({ noImplicitBrowsersList: 'off', }, tsconfig: 'tsconfig.dist.json', + babel: {reactCompiler: true}, + // @ts-expect-error - add `target` to `pkg-utils` types + reactCompilerOptions: {target: '18'}, }) diff --git a/package.json b/package.json index 4de771d33..0c86a1cfe 100644 --- a/package.json +++ b/package.json @@ -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/utils/conditionalWrapper/conditionalWrapper.tsx b/src/core/utils/conditionalWrapper/conditionalWrapper.tsx index 7ff0afc3c..0ec51e131 100644 --- a/src/core/utils/conditionalWrapper/conditionalWrapper.tsx +++ b/src/core/utils/conditionalWrapper/conditionalWrapper.tsx @@ -7,15 +7,15 @@ export function ConditionalWrapper({ condition, wrapper, }: { - children: React.ReactNode - condition: boolean - wrapper: (children: React.ReactNode) => React.ReactNode + children: React.ReactNode; + condition: boolean; + wrapper: (children: React.ReactNode) => React.ReactNode; }): React.ReactNode { if (!condition) { - return children + return children; } - return wrapper(children) + return wrapper(children); } -ConditionalWrapper.displayName = 'ConditionalWrapper' +ConditionalWrapper.displayName = "ConditionalWrapper";