fix: Use of @kubb/react as importSource for jsx(React 17, React 18,…

… React 19 could be used next to Kubb)
kubb-labs · Dec 15, 2024 · 17011c8 · 17011c8
1 parent b2cee6a
commit 17011c8
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 26 deletions.
diff --git a/.changeset/lucky-shrimps-explain.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<PluginClient>({
   name: 'client-operation',

diff --git 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<PluginClient>({
   name: 'client',

diff --git 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
@@ -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<CosmiconfigResult> {

diff --git 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
@@ -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