diff --git a/.changeset/lucky-shrimps-explain.md b/.changeset/lucky-shrimps-explain.md new file mode 100644 index 000000000..243a85ca5 --- /dev/null +++ b/.changeset/lucky-shrimps-explain.md @@ -0,0 +1,6 @@ +--- +"@kubb/react": patch +"@kubb/cli": patch +--- + +Use of `@kubb/react` as importSource for jsx(React 17, React 18, React 19 could be used next to Kubb) diff --git a/docs/changelog.md b/docs/changelog.md index acf88b681..10888f10c 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -4,8 +4,12 @@ title: Changelog # Changelog +## 3.3.3 +- [`react`](/helpers/react/): Use of `@kubb/react` as importSource for jsx(React 17, React 18, React 19 could be used next to Kubb) +- [`cli`](/helpers/cli/): Use of `@kubb/react` as importSource for jsx(React 17, React 18, React 19 could be used next to Kubb) + ## 3.3.2 -- [`react/`](/helpers/react/): Support `div` and other basic elements to be returned by `@kubb/react` +- [`react`](/helpers/react/): Support `div` and other basic elements to be returned by `@kubb/react` ## 3.3.1 - [`plugin-zod`](/plugins/plugin-zod): Use of `tozod` util to create schema based on a type diff --git a/docs/helpers/react/components/index.md b/docs/helpers/react/components/index.md index c85fc6d19..79bc119bb 100644 --- a/docs/helpers/react/components/index.md +++ b/docs/helpers/react/components/index.md @@ -48,4 +48,11 @@ yarn add -D @kubb/react } ``` +### import `@kubb/react` instead of `react` +```typescript +import React from 'react' // [!code --] +import React from '@kubb/react' // [!code ++] + +``` + ::: diff --git a/examples/advanced/package.json b/examples/advanced/package.json index 3510d4904..2f78697c7 100644 --- a/examples/advanced/package.json +++ b/examples/advanced/package.json @@ -45,7 +45,8 @@ "@tanstack/vue-query": "^5.62.7", "axios": "^1.7.9", "msw": "^2.6.8", - "react": "^18.3.1", + "@types/react": "^19.0.1", + "react": "^19.0.0", "solid-js": "^1.9.3", "svelte": "^3.59.2", "swr": "^2.2.5", diff --git a/examples/client/package.json b/examples/client/package.json index 5e000067d..3a16c7446 100644 --- a/examples/client/package.json +++ b/examples/client/package.json @@ -30,8 +30,8 @@ }, "devDependencies": { "@kubb/config-ts": "workspace:*", - "@types/react": "^18.3.16", - "react": "^18.3.1", + "@types/react": "^19.0.1", + "react": "^19.0.0", "tsup": "^8.3.5", "typescript": "^5.7.2" }, diff --git a/examples/client/src/generators/clientOperationReactGenerator.tsx b/examples/client/src/generators/clientOperationReactGenerator.tsx index fec0537a4..9baf2ab6a 100644 --- a/examples/client/src/generators/clientOperationReactGenerator.tsx +++ b/examples/client/src/generators/clientOperationReactGenerator.tsx @@ -3,7 +3,6 @@ import type { PluginClient } from '@kubb/plugin-client' import { createReactGenerator } from '@kubb/plugin-oas' import { useOperationManager } from '@kubb/plugin-oas/hooks' import { File } from '@kubb/react' -import React from 'react' export const clientOperationReactGenerator = createReactGenerator({ name: 'client-operation', diff --git a/examples/client/src/generators/clientStaticGenerator.tsx b/examples/client/src/generators/clientStaticGenerator.tsx index d5001b21f..87602f2d5 100644 --- a/examples/client/src/generators/clientStaticGenerator.tsx +++ b/examples/client/src/generators/clientStaticGenerator.tsx @@ -5,7 +5,6 @@ import { createReactGenerator } from '@kubb/plugin-oas' import { useOperationManager } from '@kubb/plugin-oas/hooks' import { pluginTsName } from '@kubb/plugin-ts' import { File, useApp } from '@kubb/react' -import React from 'react' export const clientStaticGenerator = createReactGenerator({ name: 'client', diff --git a/examples/generators/package.json b/examples/generators/package.json index b58ca2e3f..5c49fce2b 100644 --- a/examples/generators/package.json +++ b/examples/generators/package.json @@ -30,8 +30,8 @@ }, "devDependencies": { "@kubb/config-ts": "workspace:*", - "@types/react": "^18.3.16", - "react": "^18.3.1", + "@types/react": "^19.0.1", + "react": "^19.0.0", "tsup": "^8.3.5", "typescript": "^5.7.2" }, diff --git a/packages/cli/src/utils/getCosmiConfig.ts b/packages/cli/src/utils/getCosmiConfig.ts index 62e3eff28..1cc3c0fd4 100644 --- a/packages/cli/src/utils/getCosmiConfig.ts +++ b/packages/cli/src/utils/getCosmiConfig.ts @@ -10,11 +10,17 @@ export type CosmiconfigResult = { } const tsLoader = async (configFile: string) => { - const jiti = createJiti(import.meta.url, { jsx: true }) + const jiti = createJiti(import.meta.url, { + jsx: { + runtime: 'automatic', + importSource: '@kubb/react', + }, + sourceMaps: true, + }) - const mod: any = await jiti.import(configFile) + const mod = await jiti.import(configFile, { default: true }) - return mod?.default ?? mod + return mod } export async function getCosmiConfig(moduleName: string, config?: string): Promise { diff --git a/packages/plugin-ts/src/components/OasType.tsx b/packages/plugin-ts/src/components/OasType.tsx index 4d7626750..7e1a2c2af 100644 --- a/packages/plugin-ts/src/components/OasType.tsx +++ b/packages/plugin-ts/src/components/OasType.tsx @@ -1,7 +1,6 @@ import { File, Type } from '@kubb/react' import type { OasTypes } from '@kubb/oas' -import type { KubbNode } from '@kubb/react/types' type Props = { /** diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index a941f7ca2..10a4d6af8 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,6 +1,6 @@ import './globals.ts' -export { createRoot, createRoot as createRootServer } from './createRoot.ts' +export { createRoot } from './createRoot.ts' export { File } from './components/File.tsx' export { Function } from './components/Function.tsx' export { Text } from './components/Text.tsx' @@ -12,4 +12,4 @@ export { useApp } from './hooks/useApp.ts' export { useLifecycle } from './hooks/useLifecycle.tsx' export { createFunctionParams, FunctionParams } from './utils/getFunctionParams.ts' -export { createContext, useContext } from 'react' +export { createContext, createElement, useContext } from 'react' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa68c4b4c..0d9d893dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -315,7 +315,7 @@ importers: version: 5.62.7 '@tanstack/react-query': specifier: ^5.62.7 - version: 5.62.7(react@18.3.1) + version: 5.62.7(react@19.0.0) '@tanstack/solid-query': specifier: ^5.62.7 version: 5.62.7(solid-js@1.9.3) @@ -325,6 +325,9 @@ importers: '@tanstack/vue-query': specifier: ^5.62.7 version: 5.62.7(vue@3.5.13(typescript@5.7.2)) + '@types/react': + specifier: ^19.0.1 + version: 19.0.1 axios: specifier: ^1.7.9 version: 1.7.9 @@ -332,8 +335,8 @@ importers: specifier: ^2.6.8 version: 2.6.8(@types/node@20.17.10)(typescript@5.7.2) react: - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^19.0.0 + version: 19.0.0 solid-js: specifier: ^1.9.3 version: 1.9.3 @@ -342,7 +345,7 @@ importers: version: 3.59.2 swr: specifier: ^2.2.5 - version: 2.2.5(react@18.3.1) + version: 2.2.5(react@19.0.0) vue: specifier: ^3.5.13 version: 3.5.13(typescript@5.7.2) @@ -388,11 +391,11 @@ importers: specifier: workspace:* version: link:../../packages/config-ts '@types/react': - specifier: ^18.3.16 - version: 18.3.16 + specifier: ^19.0.1 + version: 19.0.1 react: - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^19.0.0 + version: 19.0.0 tsup: specifier: ^8.3.5 version: 8.3.5(@microsoft/api-extractor@7.48.1(@types/node@20.17.10))(jiti@2.4.1)(postcss@8.4.49)(typescript@5.7.2)(yaml@2.6.1) @@ -502,11 +505,11 @@ importers: specifier: workspace:* version: link:../../packages/config-ts '@types/react': - specifier: ^18.3.16 - version: 18.3.16 + specifier: ^19.0.1 + version: 19.0.1 react: - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^19.0.0 + version: 19.0.0 tsup: specifier: ^8.3.5 version: 8.3.5(@microsoft/api-extractor@7.48.1(@types/node@20.17.10))(jiti@2.4.1)(postcss@8.4.49)(typescript@5.7.2)(yaml@2.6.1) @@ -3257,6 +3260,9 @@ packages: '@types/react@18.3.16': resolution: {integrity: sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw==} + '@types/react@19.0.1': + resolution: {integrity: sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==} + '@types/sax@1.2.7': resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} @@ -6384,6 +6390,10 @@ packages: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} + react@19.0.0: + resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} + engines: {node: '>=0.10.0'} + read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} @@ -9020,6 +9030,11 @@ snapshots: '@tanstack/query-core': 5.62.7 react: 18.3.1 + '@tanstack/react-query@5.62.7(react@19.0.0)': + dependencies: + '@tanstack/query-core': 5.62.7 + react: 19.0.0 + '@tanstack/solid-query@5.62.7(solid-js@1.9.3)': dependencies: '@tanstack/query-core': 5.62.7 @@ -9323,6 +9338,10 @@ snapshots: '@types/prop-types': 15.7.14 csstype: 3.1.3 + '@types/react@19.0.1': + dependencies: + csstype: 3.1.3 + '@types/sax@1.2.7': dependencies: '@types/node': 20.17.10 @@ -12954,6 +12973,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + react@19.0.0: {} + read-cache@1.0.0: dependencies: pify: 2.3.0 @@ -13580,6 +13601,12 @@ snapshots: react: 18.3.1 use-sync-external-store: 1.4.0(react@18.3.1) + swr@2.2.5(react@19.0.0): + dependencies: + client-only: 0.0.1 + react: 19.0.0 + use-sync-external-store: 1.4.0(react@19.0.0) + tabbable@6.2.0: {} tailwindcss@3.4.16(ts-node@10.9.2(@types/node@20.17.10)(typescript@5.7.2)): @@ -14052,6 +14079,10 @@ snapshots: dependencies: react: 18.3.1 + use-sync-external-store@1.4.0(react@19.0.0): + dependencies: + react: 19.0.0 + util-deprecate@1.0.2: {} util@0.12.5: