Merge pull request #1467 from kubb-labs/react19

React 18 and 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-client/src/clients/fetch.ts

@@ -1,5 +1,5 @@
 /**
- * Subset of AxiosRequestConfig
+ * Subset of FetchRequestConfig
  */
 export type RequestConfig<TData = unknown> = {
   baseURL?: string
@@ -12,7 +12,7 @@ export type RequestConfig<TData = unknown> = {
   headers?: [string, string][] | Record<string, string>
 }
 /**
- * Subset of AxiosResponse
+ * Subset of FetchResponse
  */
 export type ResponseConfig<TData = unknown> = {
   data: TData
@@ -22,7 +22,7 @@ export type ResponseConfig<TData = unknown> = {
 }
 
 export const fetchClient = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<ResponseConfig<TData>> => {
-  const response = await fetch('https://example.org/post', {
+  const response = await fetch(`${config.baseURL}${config.url}`, {
     method: config.method.toUpperCase(),
     body: JSON.stringify(config.data),
     signal: config.signal,

packages/plugin-client/src/components/Client.tsx

@@ -4,7 +4,6 @@ import { type Operation, isOptional } from '@kubb/oas'
 import type { OperationSchemas } from '@kubb/plugin-oas'
 import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
 import { File, Function, FunctionParams } from '@kubb/react'
-import type { KubbNode } from '@kubb/react/types'
 import type { PluginClient } from '../types.ts'
 
 type Props = {
@@ -113,7 +112,7 @@ export function Client({
   paramsCasing,
   pathParamsType,
   operation,
-}: Props): KubbNode {
+}: Props) {
   const path = new URLPath(operation.path, { casing: paramsCasing })
   const contentType = operation.getContentType()
   const isFormData = contentType === 'multipart/form-data'

packages/plugin-faker/src/components/Faker.tsx

@@ -18,7 +18,7 @@ type Props = {
   canOverride: boolean
 }
 
-export function Faker({ tree, description, name, typeName, seed, regexGenerator, canOverride, mapper, dateParser }: Props): KubbNode {
+export function Faker({ tree, description, name, typeName, seed, regexGenerator, canOverride, mapper, dateParser }: Props) {
   const fakerText = parserFaker.joinItems(
     tree
       .map((schema, _index, siblings) =>

packages/plugin-msw/package.json

@@ -96,8 +96,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-oas/package.json

@@ -95,8 +95,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-oas/src/components/Oas.tsx

@@ -28,7 +28,7 @@ type OasContextProps = {
 
 const OasContext = createContext<OasContextProps>({})
 
-export function Oas({ oas, children, operations, generator }: Props): KubbNode {
+export function Oas({ oas, children, operations, generator }: Props) {
   return <OasContext.Provider value={{ oas, generator, operations }}>{children}</OasContext.Provider>
 }
 

packages/plugin-oas/src/components/Operation.tsx

@@ -14,7 +14,7 @@ type OperationContextProps = {
 
 const OperationContext = createContext<OperationContextProps>({})
 
-export function Operation({ operation, children }: Props): KubbNode {
+export function Operation({ operation, children }: Props) {
   return <OperationContext.Provider value={{ operation }}>{children}</OperationContext.Provider>
 }
 

packages/plugin-oas/src/components/Schema.tsx

@@ -1,7 +1,7 @@
 import { createContext } from '@kubb/react'
 
 import type { SchemaObject } from '@kubb/oas'
-import type { KubbNode } from '@kubb/react/types'
+import type { Key, KubbNode } from '@kubb/react/types'
 import type { Schema as SchemaType } from '../SchemaMapper.ts'
 
 export type SchemaContextProps = {
@@ -11,6 +11,7 @@ export type SchemaContextProps = {
 }
 
 type Props = {
+  key?: Key
   name: string
   value?: SchemaObject
   tree?: Array<SchemaType>
@@ -22,7 +23,7 @@ const SchemaContext = createContext<SchemaContextProps>({
   tree: [],
 })
 
-export function Schema({ name, value, tree = [], children }: Props): KubbNode {
+export function Schema({ name, value, tree = [], children }: Props) {
   return <SchemaContext.Provider value={{ name, schema: value, tree }}>{children}</SchemaContext.Provider>
 }
 

packages/plugin-react-query/package.json

@@ -85,8 +85,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-redoc/package.json

@@ -57,16 +57,16 @@
     "@kubb/plugin-oas": "workspace:*",
     "handlebars": "^4.7.8",
     "mobx": "^6.13.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "redoc": "^2.2.0",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-redoc/src/redoc.tsx

@@ -2,9 +2,10 @@ import fs from 'node:fs'
 import path from 'node:path'
 import type { OasTypes } from '@kubb/oas'
 import pkg from 'handlebars'
+import React from 'react'
 import { renderToString } from 'react-dom/server'
-import { ServerStyleSheet } from 'styled-components'
 import redoc from 'redoc'
+import { ServerStyleSheet } from 'styled-components'
 
 type BuildDocsOptions = {
   title?: string
@@ -40,7 +41,9 @@ export async function getPageHTML(api: OasTypes.OASDocument, { title, disableGoo
     error(...args)
   }
 
-  const html = renderToString(sheet.collectStyles(<Redoc store={store} />))
+  const App = Redoc as any
+
+  const html = renderToString(sheet.collectStyles(<App {...{ store }} />))
   const state = await store.toJS()
   const css = sheet.getStyleTags()
 

packages/plugin-solid-query/package.json

@@ -85,8 +85,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-svelte-query/package.json

@@ -85,8 +85,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-swr/package.json

@@ -87,8 +87,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-ts/package.json

@@ -79,8 +79,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-ts/src/components/OasType.tsx

@@ -1,7 +1,7 @@
 import { File, Type } from '@kubb/react'
 
 import type { OasTypes } from '@kubb/oas'
-import type { ReactNode } from 'react'
+import type { KubbNode } from '@kubb/react/types'
 
 type Props = {
   /**
@@ -12,7 +12,7 @@ type Props = {
   api: OasTypes.OASDocument
 }
 
-export function OasType({ name, typeName, api }: Props): ReactNode {
+export function OasType({ name, typeName, api }: Props) {
   return (
     <>
       <File.Source name={name} isExportable isIndexable>

packages/plugin-ts/src/components/Type.tsx

@@ -119,7 +119,8 @@ export function Type({ name, typedName, tree, keysToOmit, optionalType, syntaxTy
   return (
     <Fragment>
       {enums.map(({ name, nameNode, typeName, typeNode }, index) => (
-        <Fragment key={[name, nameNode].join('-')}>
+        // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+        <Fragment>
           {nameNode && (
             <File.Source name={name} isExportable isIndexable>
               {print([nameNode])}

packages/plugin-vue-query/package.json

@@ -85,8 +85,8 @@
   "devDependencies": {
     "@kubb/config-ts": "workspace:*",
     "@kubb/config-tsup": "workspace:*",
-    "@types/react": "^18.3.16",
-    "react": "^18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:"
   },

packages/plugin-zod/src/components/Operations.tsx

@@ -10,7 +10,7 @@ type Props = {
   operations: Array<{ operation: Operation; data: SchemaNames }>
 }
 
-export function Operations({ name, operations }: Props): KubbNode {
+export function Operations({ name, operations }: Props) {
   const operationsJSON = operations.reduce(
     (prev, acc) => {
       prev[`"${acc.operation.getOperationId()}"`] = acc.data

packages/plugin-zod/src/components/Zod.tsx

@@ -17,7 +17,7 @@ type Props = {
   keysToOmit?: string[]
 }
 
-export function Zod({ name, typeName, tree, inferTypeName, mapper, coercion, keysToOmit, description }: Props): KubbNode {
+export function Zod({ name, typeName, tree, inferTypeName, mapper, coercion, keysToOmit, description }: Props) {
   const hasTuple = tree.some((item) => isKeyword(item, schemaKeywords.tuple))
 
   const output = parserZod

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>