chore: upgrade to react 19 + react compiler (#279)

* chore: update react to v19 * fix: type issues * chore: add eslint-plugin-react-compiler * chore: add react compiler * chore: set minimum react version to 19
giantnodes · Dec 6, 2024 · 1d39b8f · 1d39b8f
1 parent 94be915
commit 1d39b8f
Show file tree

Hide file tree

Showing 10 changed files with 1,437 additions and 1,044 deletions.
diff --git a/packages/react/eslint.config.mjs b/packages/react/eslint.config.mjs
@@ -4,7 +4,7 @@ import react from '@giantnodes/eslint-config/react'
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: ['dist/**', '.storybook/**'],
+    ignores: ['dist/**', '.storybook/**', '.tsup/**', '.turbo/**'],
   },
   ...base,
   ...react,

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -39,6 +39,9 @@
     "tailwindcss-react-aria-components": "^1.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@giantnodes/eslint-config": "workspace:*",
     "@giantnodes/prettier-config": "workspace:*",
     "@giantnodes/tsconfig": "workspace:*",
@@ -54,7 +57,9 @@
     "@types/react": "catalog:react",
     "@types/react-dom": "catalog:react",
     "autoprefixer": "^10.4.20",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "concurrently": "^9.1.0",
+    "esbuild-plugin-babel": "^0.2.3",
     "jest": "^29.7.0",
     "postcss": "^8.4.49",
     "prop-types": "15.8.1",
@@ -68,8 +73,8 @@
     "vite": "^6.0.3"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
+    "react": ">=19",
+    "react-dom": ">=19",
     "tailwindcss": ">=3"
   },
   "engines": {

diff --git a/packages/react/src/components/select/Select.tsx b/packages/react/src/components/select/Select.tsx
@@ -152,11 +152,11 @@ const Component: ComponentType = React.forwardRef(
         )
       }
 
-      if (!React.isValidElement(icon)) {
+      if (!React.isValidElement<HTMLElement>(icon)) {
         return icon
       }
 
-      return React.cloneElement(icon as React.ReactElement, { className: context.slots.icon() })
+      return React.cloneElement(icon, { className: context.slots.icon() })
     }, [context.slots, icon])
 
     return (

diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
@@ -1,4 +1,5 @@
 import type { Options } from 'tsup'
+import babel from 'esbuild-plugin-babel'
 import { defineConfig } from 'tsup'
 
 const config: Options = {
@@ -12,6 +13,21 @@ const config: Options = {
   target: 'es2022',
   entry: ['src/**/*.ts*', '!src/**/*.stories.*'],
   format: ['cjs', 'esm'],
+  esbuildPlugins: [
+    babel({
+      config: {
+        presets: ['@babel/preset-react', '@babel/preset-typescript'],
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              target: '19',
+            },
+          ],
+        ],
+      },
+    }),
+  ],
 }
 
 export { config }

diff --git a/packages/theme/eslint.config.mjs b/packages/theme/eslint.config.mjs
@@ -4,7 +4,7 @@ import react from '@giantnodes/eslint-config/react'
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: ['dist/**'],
+    ignores: ['dist/**', '.tsup/**', '.turbo/**'],
   },
   ...base,
   ...react,