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',

.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;

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'},
 })

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"
   },

pnpm-lock.yaml

@@ -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";