fix: resolve typings for react 18 and react 19

docs/package.json

@@ -45,13 +45,13 @@
     "@kubb/react": "workspace:*",
     "@mermaid-js/mermaid-cli": "^11.4.2",
     "@types/node": "^20.17.10",
-    "@types/react": "^18.3.16",
+    "@types/react": "catalog:",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
+    "react": "catalog:",
     "unplugin-kubb": "workspace:^",
-    "vite": "^5.4.11"
+    "vite": "^6.0.3"
   },
-  "packageManager": "pnpm@9.12.0",
+  "packageManager": "pnpm@9.15.0",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.15.0"

e2e/package.json

@@ -38,7 +38,7 @@
     "@tanstack/vue-query": "^5.62.7",
     "axios": "^1.7.9",
     "msw": "^2.6.8",
-    "react": "^18.3.1",
+    "react": "catalog:",
     "solid-js": "^1.9.3",
     "svelte": "^3.59.2",
     "swr": "^2.2.5",

examples/react-query/package.json

@@ -32,12 +32,12 @@
     "@tanstack/react-query": "^5.62.7",
     "@tanstack/react-query-devtools": "^5.62.7",
     "axios": "^1.7.9",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
     "react-dom": "^19.0.0",
     "unplugin-kubb": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^19.0.1",
+    "@types/react": "^18.3.16",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "msw": "^1.3.5",

examples/react-query/src/App.tsx

@@ -5,7 +5,7 @@ import type { FindPetsByStatusQueryParamsStatusEnum } from './gen/models'
 
 const queryClient = new QueryClient()
 
-function Pets(): JSX.Element {
+function Pets() {
   const [status, setStatus] = useState<FindPetsByStatusQueryParamsStatusEnum>('available')
   const { data: pets, queryKey } = useFindPetsByStatusHook({ status }, { query: { enabled: true } })
   const { data } = useUpdatePetWithFormHook(2)
@@ -105,7 +105,7 @@ function Pets(): JSX.Element {
   )
 }
 
-export function App(): JSX.Element {
+export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Pets />

package.json

@@ -66,7 +66,7 @@
     "vite-tsconfig-paths": "5.1.0",
     "vitest": "^2.1.8"
   },
-  "packageManager": "pnpm@9.12.0",
+  "packageManager": "pnpm@9.15.0",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.15.0"

packages/plugin-redoc/src/redoc.tsx

@@ -43,7 +43,7 @@ export async function getPageHTML(api: OasTypes.OASDocument, { title, disableGoo
 
   const App = Redoc as any
 
-  const html = renderToString(sheet.collectStyles(<App store={store} />))
+  const html = renderToString(sheet.collectStyles(<App {...{ store }} />))
   const state = await store.toJS()
   const css = sheet.getStyleTags()
 

packages/react/package.json

@@ -87,17 +87,17 @@
     "@kubb/parser-ts": "workspace:*",
     "execa": "^9.5.2",
     "natural-orderby": "^4.0.0",
-    "react": "^18.3.1",
+    "react": "catalog:react18",
     "react-devtools-core": "^5.3.2",
-    "react-reconciler": "^0.29.2",
+    "react-reconciler": "catalog:react18",
     "signal-exit": "^4.1.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "@types/react-reconciler": "^0.28.9",
+    "@types/react": "catalog:react18",
+    "@types/react-reconciler": "catalog:react18",
     "@types/signal-exit": "^3.0.4",
     "@types/ws": "^8.5.13",
     "tsup": "catalog:",

packages/react/src/ReactTemplate.tsx

@@ -67,6 +67,9 @@ export class ReactTemplate<TMeta extends Record<string, unknown> = Record<string
         if (data.match(/React will try to recreat/gi)) {
           return
         }
+        if (data.match(/Each child in a list should have a unique/gi)) {
+          return
+        }
         if (data.match(/The above error occurred in the <KubbErrorBoundary/gi)) {
           return
         }

packages/react/src/components/App.tsx

@@ -24,7 +24,7 @@ type Props = {
   readonly children?: KubbNode
 }
 
-export function App({ plugin, pluginManager, mode, children }: Props): KubbNode {
+export function App({ plugin, pluginManager, mode, children }: Props) {
   const { exit } = useContext(RootContext)
 
   return <AppContext.Provider value={{ exit, plugin, pluginManager, mode }}>{children}</AppContext.Provider>

packages/react/src/components/Const.tsx

@@ -2,9 +2,10 @@ import { createJSDocBlockText } from '@kubb/core/transformers'
 
 import { Text } from './Text.tsx'
 
-import type { JSDoc, KubbNode } from '../types.ts'
+import type { JSDoc, Key, KubbNode } from '../types.ts'
 
 type Props = {
+  key?: Key
   /**
    * Name of the const
    */
@@ -28,7 +29,7 @@ type Props = {
   children?: KubbNode
 }
 
-export function Const({ name, export: canExport, type, JSDoc, asConst, children }: Props): KubbNode {
+export function Const({ name, export: canExport, type, JSDoc, asConst, children }: Props) {
   return (
     <>
       {JSDoc?.comments && (

packages/react/src/components/File.tsx

@@ -2,7 +2,7 @@ import { createContext } from 'react'
 
 import type { FileMetaBase } from '@kubb/core'
 import type * as KubbFile from '@kubb/fs/types'
-import type { KubbNode } from '../types.ts'
+import type { Key, KubbNode } from '../types.ts'
 
 export type FileContextProps<TMeta extends FileMetaBase = FileMetaBase> = {
   /**
@@ -43,6 +43,7 @@ type BasePropsWithoutBaseName = {
 type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName
 
 type Props<TMeta extends FileMetaBase = FileMetaBase> = BaseProps & {
+  key?: Key
   /**
    * This will call fileManager.add instead of fileManager.addOrAppend, adding the source when the files already exists.
    * This will also ignore the combinefiles utils
@@ -55,9 +56,9 @@ type Props<TMeta extends FileMetaBase = FileMetaBase> = BaseProps & {
   children?: KubbNode
 }
 
-export function File<TMeta extends FileMetaBase = FileMetaBase>({ children, ...rest }: Props<TMeta>): KubbNode {
+export function File<TMeta extends FileMetaBase = FileMetaBase>({ children, ...rest }: Props<TMeta>) {
   if (!rest.baseName || !rest.path) {
-    return children
+    return <>{children}</>
   }
 
   return (
@@ -70,10 +71,11 @@ export function File<TMeta extends FileMetaBase = FileMetaBase>({ children, ...r
 File.displayName = 'KubbFile'
 
 type FileSourceProps = Omit<KubbFile.Source, 'value'> & {
+  key?: Key
   children?: KubbNode
 }
 
-function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: FileSourceProps): KubbNode {
+function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: FileSourceProps) {
   return (
     <kubb-source name={name} isTypeOnly={isTypeOnly} isExportable={isExportable} isIndexable={isIndexable}>
       {children}
@@ -83,17 +85,17 @@ function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: F
 
 FileSource.displayName = 'KubbFileSource'
 
-type FileExportProps = KubbFile.Export
+type FileExportProps = KubbFile.Export & { key?: Key }
 
-function FileExport({ name, path, isTypeOnly, asAlias }: FileExportProps): KubbNode {
+function FileExport({ name, path, isTypeOnly, asAlias }: FileExportProps) {
   return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly || false} asAlias={asAlias} />
 }
 
 FileExport.displayName = 'KubbFileExport'
 
-type FileImportProps = KubbFile.Import
+type FileImportProps = KubbFile.Import & { key?: Key }
 
-function FileImport({ name, root, path, isTypeOnly, isNameSpace }: FileImportProps): KubbNode {
+function FileImport({ name, root, path, isTypeOnly, isNameSpace }: FileImportProps) {
   return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly || false} />
 }
 

packages/react/src/components/Function.tsx

@@ -2,9 +2,10 @@ import { createJSDocBlockText } from '@kubb/core/transformers'
 
 import { Text } from './Text.tsx'
 
-import type { JSDoc, KubbNode } from '../types.ts'
+import type { JSDoc, Key, KubbNode } from '../types.ts'
 
 type Props = {
+  key?: Key
   /**
    * Name of the function.
    */
@@ -38,7 +39,7 @@ type Props = {
   children?: KubbNode
 }
 
-export function Function({ name, export: canExport, async, generics, params, returnType, JSDoc, children }: Props): KubbNode {
+export function Function({ name, export: canExport, async, generics, params, returnType, JSDoc, children }: Props) {
   return (
     <>
       {JSDoc?.comments && (
@@ -94,7 +95,7 @@ type ArrowFunctionProps = Props & {
   singleLine?: boolean
 }
 
-function ArrowFunction({ name, export: canExport, async, generics, params, returnType, JSDoc, singleLine, children }: ArrowFunctionProps): KubbNode {
+function ArrowFunction({ name, export: canExport, async, generics, params, returnType, JSDoc, singleLine, children }: ArrowFunctionProps) {
   return (
     <>
       {JSDoc?.comments && (

packages/react/src/components/Root.tsx

@@ -13,7 +13,7 @@ type ErrorBoundaryProps<Meta extends Record<string, unknown> = Record<string, un
 class ErrorBoundary extends Component<{
   onError: ErrorBoundaryProps['onError']
   logger?: Logger
-  children: KubbNode
+  children?: KubbNode
 }> {
   state = { hasError: false }
 
@@ -63,7 +63,7 @@ type RootProps<Meta extends Record<string, unknown> = Record<string, unknown>> =
   readonly children?: KubbNode
 }
 
-export function Root<Meta extends Record<string, unknown> = Record<string, unknown>>({ onError, onExit, logger, meta, children }: RootProps<Meta>): KubbNode {
+export function Root<Meta extends Record<string, unknown> = Record<string, unknown>>({ onError, onExit, logger, meta, children }: RootProps<Meta>) {
   try {
     return (
       <ErrorBoundary

packages/react/src/components/Text.tsx

@@ -1,8 +1,10 @@
 import { useIndent } from '../hooks/useIndent.ts'
 
-import type { KubbNode } from '../types.ts'
+import React from 'react'
+import type { Key, KubbNode } from '../types.ts'
 
 type Props = {
+  key?: Key
   /**
    * Change the indent.
    * @default 0
@@ -11,7 +13,7 @@ type Props = {
   children?: KubbNode
 }
 
-export function Text({ indentSize = 0, children }: Props): KubbNode {
+export function Text({ indentSize = 0, children }: Props) {
   const indentBefore = useIndent({ size: indentSize })
   const indentChildren = useIndent({ size: 2, children })
 
@@ -33,7 +35,7 @@ type SpaceProps = {
 
 Text.displayName = 'KubbText'
 
-export function Space({ size = 1 }: SpaceProps): KubbNode {
+export function Space({ size = 1 }: SpaceProps) {
   const indentBefore = useIndent({ size })
 
   return <kubb-text>{indentBefore}</kubb-text>

packages/react/src/components/Type.tsx

@@ -2,9 +2,10 @@ import { createJSDocBlockText } from '@kubb/core/transformers'
 
 import { Text } from './Text.tsx'
 
-import type { JSDoc, KubbNode } from '../types.ts'
+import type { JSDoc, Key, KubbNode } from '../types.ts'
 
 type Props = {
+  key?: Key
   /**
    * Name of the type, this needs to start with a capital letter.
    */
@@ -20,7 +21,7 @@ type Props = {
   children?: KubbNode
 }
 
-export function Type({ name, export: canExport, JSDoc, children }: Props): KubbNode {
+export function Type({ name, export: canExport, JSDoc, children }: Props) {
   if (name.charAt(0).toUpperCase() !== name.charAt(0)) {
     throw new Error('Name should start with a capital letter(see TypeScript types)')
   }

packages/react/src/globals.ts

@@ -0,0 +1,52 @@
+import type * as KubbFile from '@kubb/fs/types'
+import type React from 'react'
+import type { KubbNode } from './types.ts'
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kubb-text': {
+        children?: KubbNode
+      }
+      'kubb-file': {
+        id?: string
+        children?: KubbNode
+        baseName: string
+        path: string
+        override?: boolean
+        meta?: KubbFile.File['meta']
+      }
+      'kubb-source': KubbFile.Source & {
+        children?: KubbNode
+      }
+      'kubb-import': KubbFile.Import
+      'kubb-export': KubbFile.Export
+      br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>
+    }
+  }
+}
+
+// @ts-ignore
+declare module '@kubb/react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kubb-text': {
+        children?: KubbNode
+      }
+      'kubb-file': {
+        id?: string
+        children?: KubbNode
+        baseName: string
+        path: string
+        override?: boolean
+        meta?: KubbFile.File['meta']
+      }
+      'kubb-source': KubbFile.Source & {
+        children?: KubbNode
+      }
+      'kubb-import': KubbFile.Import
+      'kubb-export': KubbFile.Export
+      br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>
+    }
+  }
+}

packages/react/src/hooks/useIndent.ts

@@ -10,7 +10,7 @@ type Props = {
   children?: KubbNode
 }
 
-export function useIndent({ size, children }: Props): KubbNode {
+export function useIndent({ size, children }: Props) {
   let indentWithChildren: KubbNode
 
   if (!children) {

packages/react/src/index.ts

@@ -1,3 +1,5 @@
+import './globals.ts'
+
 export { createRoot, createRoot as createRootServer } from './createRoot.ts'
 export { File } from './components/File.tsx'
 export { Function } from './components/Function.tsx'