@kubb/plugin-client 5.0.0-alpha.9 → 5.0.0-beta.15

package/package.json

@@ -1,34 +1,60 @@
 {
   "name": "@kubb/plugin-client",
-  "version": "5.0.0-alpha.9",
-  "description": "API client generator plugin for Kubb, creating type-safe HTTP clients (Axios, Fetch) from OpenAPI specifications for making API requests.",
+  "version": "5.0.0-beta.15",
+  "description": "Generate type-safe HTTP clients from your OpenAPI specification. Supports Axios, Fetch, and custom client adapters with full TypeScript inference and zero boilerplate.",
   "keywords": [
     "api-client",
-    "http-client",
-    "sdk-generator",
     "axios",
+    "code-generation",
+    "codegen",
     "fetch",
-    "rest-api",
-    "typescript",
-    "type-safety",
-    "type-safe",
+    "http-client",
+    "kubb",
     "openapi",
     "swagger",
-    "oas",
-    "code-generator",
-    "codegen",
-    "plugins",
-    "kubb"
+    "typescript"
   ],
+  "license": "MIT",
+  "author": "stijnvanhulle",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kubb-labs/kubb.git",
+    "url": "git+https://github.com/kubb-labs/plugins.git",
     "directory": "packages/plugin-client"
   },
-  "license": "MIT",
-  "author": "stijnvanhulle",
-  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "extension.yaml",
+    "*.d.ts",
+    "*.d.cts",
+    "!/**/**.test.**",
+    "!/**/__tests__/**",
+    "!/**/__snapshots__/**"
+  ],
   "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "clients/axios": [
+        "./dist/clients/axios.d.ts"
+      ],
+      "clients/fetch": [
+        "./dist/clients/fetch.d.ts"
+      ],
+      "templates/config.source": [
+        "./dist/templates/config.source.d.ts"
+      ],
+      "templates/clients/axios.source": [
+        "./dist/templates/clients/axios.source.d.ts"
+      ],
+      "templates/clients/fetch.source": [
+        "./dist/templates/clients/fetch.source.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -42,14 +68,6 @@
       "import": "./dist/clients/fetch.js",
       "require": "./dist/clients/fetch.cjs"
     },
-    "./components": {
-      "import": "./dist/components.js",
-      "require": "./dist/components.cjs"
-    },
-    "./generators": {
-      "import": "./dist/generators.js",
-      "require": "./dist/generators.cjs"
-    },
     "./templates/clients/axios.source": {
       "import": "./dist/templates/clients/axios.source.js",
       "require": "./dist/templates/clients/axios.source.cjs"
@@ -64,65 +82,23 @@
     },
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "components": [
-        "./dist/components.d.ts"
-      ],
-      "generators": [
-        "./dist/generators.d.ts"
-      ],
-      "clients/axios": [
-        "./dist/clients/axios.d.ts"
-      ],
-      "clients/fetch": [
-        "./dist/clients/fetch.d.ts"
-      ],
-      "templates/config.source": [
-        "./dist/templates/config.source.d.ts"
-      ],
-      "templates/clients/axios.source": [
-        "./dist/templates/clients/axios.source.d.ts"
-      ],
-      "templates/clients/fetch.source": [
-        "./dist/templates/clients/fetch.source.d.ts"
-      ]
-    }
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
-  "files": [
-    "src",
-    "dist",
-    "templates",
-    "*.d.ts",
-    "*.d.cts",
-    "!/**/**.test.**",
-    "!/**/__tests__/**",
-    "!/**/__snapshots__/**"
-  ],
-  "size-limit": [
-    {
-      "path": "./dist/*.js",
-      "limit": "510 KiB",
-      "gzip": true
-    }
-  ],
   "dependencies": {
-    "@kubb/fabric-core": "0.14.0",
-    "@kubb/react-fabric": "0.14.0",
-    "@kubb/core": "5.0.0-alpha.9",
-    "@kubb/oas": "5.0.0-alpha.9",
-    "@kubb/plugin-oas": "5.0.0-alpha.9",
-    "@kubb/plugin-ts": "5.0.0-alpha.9",
-    "@kubb/plugin-zod": "5.0.0-alpha.9"
+    "@kubb/core": "5.0.0-beta.19",
+    "@kubb/renderer-jsx": "5.0.0-beta.19",
+    "@kubb/plugin-ts": "5.0.0-beta.15",
+    "@kubb/plugin-zod": "5.0.0-beta.15"
   },
   "devDependencies": {
-    "axios": "^1.13.6",
+    "axios": "^1.16.1",
+    "@internals/shared": "0.0.0",
     "@internals/utils": "0.0.0"
   },
   "peerDependencies": {
-    "@kubb/fabric-core": "0.14.0",
-    "@kubb/react-fabric": "0.14.0",
+    "@kubb/renderer-jsx": "5.0.0-beta.19",
     "axios": "^1.7.2"
   },
   "peerDependenciesMeta": {
@@ -130,20 +106,21 @@
       "optional": true
     }
   },
+  "size-limit": [
+    {
+      "path": "./dist/*.js",
+      "limit": "510 KiB",
+      "gzip": true
+    }
+  ],
   "engines": {
     "node": ">=22"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
   "scripts": {
     "build": "tsdown && size-limit",
     "clean": "npx rimraf ./dist",
-    "lint": "bun biome lint .",
-    "lint:fix": "bun biome lint --fix --unsafe .",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
     "release": "pnpm publish --no-git-check",
     "release:canary": "bash ../../.github/canary.sh && node ../../scripts/build.js canary && pnpm publish --no-git-check",
     "start": "tsdown --watch",

package/src/clients/axios.ts

@@ -18,6 +18,7 @@ export type RequestConfig<TData = unknown> = {
   validateStatus?: (status: number) => boolean
   headers?: AxiosRequestConfig['headers']
   paramsSerializer?: AxiosRequestConfig['paramsSerializer']
+  contentType?: string
 }
 
 /**
@@ -32,7 +33,10 @@ export type ResponseConfig<TData = unknown> = {
 
 export type ResponseErrorConfig<TError = unknown> = AxiosError<TError>
 
-export type Client = <TResponseData, _TError = unknown, TRequestData = unknown>(config: RequestConfig<TRequestData>) => Promise<ResponseConfig<TResponseData>>
+export type Client = <TResponseData, _TError = unknown, TRequestData = unknown>(
+  config: RequestConfig<TRequestData>,
+  request?: unknown,
+) => Promise<ResponseConfig<TResponseData>>
 
 let _config: Partial<RequestConfig> = {
   baseURL: typeof AXIOS_BASE !== 'undefined' ? AXIOS_BASE : undefined,
@@ -63,10 +67,21 @@ export const axiosInstance = axios.create(getConfig())
 
 export const client = async <TResponseData, TError = unknown, TRequestData = unknown>(
   config: RequestConfig<TRequestData>,
+  _request?: unknown,
 ): Promise<ResponseConfig<TResponseData>> => {
-  return axiosInstance.request<TResponseData, ResponseConfig<TResponseData>>(mergeConfig(getConfig(), config)).catch((e: AxiosError<TError>) => {
-    throw e
-  })
+  const requestConfig = mergeConfig(getConfig(), config)
+  const { contentType, headers, ...axiosConfig } = requestConfig
+  return axiosInstance
+    .request<TResponseData, ResponseConfig<TResponseData>>({
+      ...axiosConfig,
+      headers: {
+        ...(contentType && contentType !== 'multipart/form-data' ? { 'Content-Type': contentType } : {}),
+        ...headers,
+      },
+    })
+    .catch((e: AxiosError<TError>) => {
+      throw e
+    })
 }
 
 client.getConfig = getConfig

package/src/clients/fetch.ts

@@ -16,6 +16,7 @@ export type RequestConfig<TData = unknown> = {
   signal?: AbortSignal
   headers?: [string, string][] | Record<string, string>
   credentials?: RequestCredentials
+  contentType?: string
 }
 
 /**
@@ -52,10 +53,14 @@ export const mergeConfig = <T extends RequestConfig>(...configs: Array<Partial<T
 
 export type ResponseErrorConfig<TError = unknown> = TError
 
-export type Client = <TResponseData, _TError = unknown, TRequestData = unknown>(config: RequestConfig<TRequestData>) => Promise<ResponseConfig<TResponseData>>
+export type Client = <TResponseData, _TError = unknown, TRequestData = unknown>(
+  config: RequestConfig<TRequestData>,
+  request?: unknown,
+) => Promise<ResponseConfig<TResponseData>>
 
 export const client = async <TResponseData, _TError = unknown, RequestData = unknown>(
   paramsConfig: RequestConfig<RequestData>,
+  _request?: unknown,
 ): Promise<ResponseConfig<TResponseData>> => {
   const normalizedParams = new URLSearchParams()
 
@@ -78,7 +83,10 @@ export const client = async <TResponseData, _TError = unknown, RequestData = unk
     method: config.method?.toUpperCase(),
     body: config.data instanceof FormData ? config.data : JSON.stringify(config.data),
     signal: config.signal,
-    headers: config.headers,
+    headers: {
+      ...(config.contentType && config.contentType !== 'multipart/form-data' ? { 'Content-Type': config.contentType } : {}),
+      ...(Array.isArray(config.headers) ? Object.fromEntries(config.headers) : config.headers),
+    },
   })
 
   const data = [204, 205, 304].includes(response.status) || !response.body ? {} : await response.json()

package/src/components/ClassClient.tsx

@@ -1,40 +1,41 @@
+import { buildOperationComments, getContentTypeInfo, getOperationParameters } from '@internals/shared'
 import { buildJSDoc, URLPath } from '@internals/utils'
-import type { Operation } from '@kubb/oas'
-import type { OperationSchemas } from '@kubb/plugin-oas'
-import { getComments } from '@kubb/plugin-oas/utils'
-import { File, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import type { ast } from '@kubb/core'
+import type { ResolverTs } from '@kubb/plugin-ts'
+import { functionPrinter } from '@kubb/plugin-ts'
+import type { ResolverZod } from '@kubb/plugin-zod'
+import { File } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { PluginClient } from '../types.ts'
+import { buildClassClientParams, buildFormDataLine, buildGenerics, buildHeaders, buildRequestDataLine, buildReturnStatement } from '../utils.ts'
+import { buildClientParamsNode } from './Client.tsx'
 
-import { Client } from './Client.tsx'
+type OperationData = {
+  node: ast.OperationNode
+  name: string
+  tsResolver: ResolverTs
+  zodResolver?: ResolverZod
+}
 
 type Props = {
-  /**
-   * Name of the class
-   */
   name: string
   isExportable?: boolean
   isIndexable?: boolean
-  operations: Array<{
-    operation: Operation
-    name: string
-    typeSchemas: OperationSchemas
-    zodSchemas: OperationSchemas | undefined
-  }>
+  operations: Array<OperationData>
   baseURL: string | undefined
   dataReturnType: PluginClient['resolvedOptions']['dataReturnType']
   paramsCasing: PluginClient['resolvedOptions']['paramsCasing']
   paramsType: PluginClient['resolvedOptions']['pathParamsType']
   pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
   parser: PluginClient['resolvedOptions']['parser'] | undefined
-  children?: FabricReactNode
+  children?: KubbReactNode
 }
 
 type GenerateMethodProps = {
-  operation: Operation
+  node: ast.OperationNode
   name: string
-  typeSchemas: OperationSchemas
-  zodSchemas: OperationSchemas | undefined
+  tsResolver: ResolverTs
+  zodResolver?: ResolverZod
   baseURL: string | undefined
   dataReturnType: PluginClient['resolvedOptions']['dataReturnType']
   parser: PluginClient['resolvedOptions']['parser'] | undefined
@@ -43,115 +44,13 @@ type GenerateMethodProps = {
   pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
 }
 
-function buildHeaders(contentType: string, hasHeaderParams: boolean): Array<string> {
-  return [
-    contentType !== 'application/json' && contentType !== 'multipart/form-data' ? `'Content-Type': '${contentType}'` : undefined,
-    hasHeaderParams ? '...headers' : undefined,
-  ].filter(Boolean) as Array<string>
-}
-
-function buildGenerics(typeSchemas: OperationSchemas): Array<string> {
-  const TError = `ResponseErrorConfig<${typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error'}>`
-  return [typeSchemas.response.name, TError, typeSchemas.request?.name || 'unknown'].filter(Boolean)
-}
-
-function buildClientParams({
-  operation,
-  path,
-  baseURL,
-  typeSchemas,
-  isFormData,
-  headers,
-}: {
-  operation: Operation
-  path: URLPath
-  baseURL: string | undefined
-  typeSchemas: OperationSchemas
-  isFormData: boolean
-  headers: Array<string>
-}) {
-  return FunctionParams.factory({
-    config: {
-      mode: 'object',
-      children: {
-        requestConfig: {
-          mode: 'inlineSpread',
-        },
-        method: {
-          value: JSON.stringify(operation.method.toUpperCase()),
-        },
-        url: {
-          value: path.template,
-        },
-        baseURL: baseURL
-          ? {
-              value: JSON.stringify(baseURL),
-            }
-          : undefined,
-        params: typeSchemas.queryParams?.name ? {} : undefined,
-        data: typeSchemas.request?.name
-          ? {
-              value: isFormData ? 'formData as FormData' : 'requestData',
-            }
-          : undefined,
-        headers: headers.length
-          ? {
-              value: `{ ${headers.join(', ')}, ...requestConfig.headers }`,
-            }
-          : undefined,
-      },
-    },
-  })
-}
-
-function buildRequestDataLine({
-  parser,
-  zodSchemas,
-  typeSchemas,
-}: {
-  parser: PluginClient['resolvedOptions']['parser'] | undefined
-  zodSchemas: OperationSchemas | undefined
-  typeSchemas: OperationSchemas
-}): string {
-  if (parser === 'zod' && zodSchemas?.request?.name) {
-    return `const requestData = ${zodSchemas.request.name}.parse(data)`
-  }
-  if (typeSchemas?.request?.name) {
-    return 'const requestData = data'
-  }
-  return ''
-}
-
-function buildFormDataLine(isFormData: boolean, hasRequest: boolean): string {
-  return isFormData && hasRequest ? 'const formData = buildFormData(requestData)' : ''
-}
-
-function buildReturnStatement({
-  dataReturnType,
-  parser,
-  zodSchemas,
-}: {
-  dataReturnType: PluginClient['resolvedOptions']['dataReturnType']
-  parser: PluginClient['resolvedOptions']['parser'] | undefined
-  zodSchemas: OperationSchemas | undefined
-}): string {
-  if (dataReturnType === 'full' && parser === 'zod' && zodSchemas) {
-    return `return {...res, data: ${zodSchemas.response.name}.parse(res.data)}`
-  }
-  if (dataReturnType === 'data' && parser === 'zod' && zodSchemas) {
-    return `return ${zodSchemas.response.name}.parse(res.data)`
-  }
-  if (dataReturnType === 'full' && parser === 'client') {
-    return 'return res'
-  }
-  return 'return res.data'
-}
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
 
 function generateMethod({
-  operation,
+  node,
   name,
-  typeSchemas,
-  zodSchemas,
+  tsResolver,
+  zodResolver,
   baseURL,
   dataReturnType,
   parser,
@@ -159,21 +58,24 @@ function generateMethod({
   paramsCasing,
   pathParamsType,
 }: GenerateMethodProps): string {
-  const path = new URLPath(operation.path, { casing: paramsCasing })
-  const contentType = operation.getContentType()
-  const isFormData = contentType === 'multipart/form-data'
-  const headers = buildHeaders(contentType, !!typeSchemas.headerParams?.name)
-  const generics = buildGenerics(typeSchemas)
-  const params = ClassClient.getParams({ paramsType, paramsCasing, pathParamsType, typeSchemas, isConfigurable: true })
-  const clientParams = buildClientParams({ operation, path, baseURL, typeSchemas, isFormData, headers })
-  const jsdoc = buildJSDoc(getComments(operation))
-
-  const requestDataLine = buildRequestDataLine({ parser, zodSchemas, typeSchemas })
-  const formDataLine = buildFormDataLine(isFormData, !!typeSchemas?.request?.name)
-  const returnStatement = buildReturnStatement({ dataReturnType, parser, zodSchemas })
+  const path = new URLPath(node.path, { casing: paramsCasing })
+  const { defaultContentType: contentType, isMultipleContentTypes, hasFormData } = getContentTypeInfo(node)
+  const isFormData = !isMultipleContentTypes && contentType === 'multipart/form-data'
+  const { header: headerParams } = getOperationParameters(node)
+  const headerParamsName = headerParams.length > 0 ? tsResolver.resolveHeaderParamsName(node, headerParams[0]!) : undefined
+  const headers = isMultipleContentTypes ? (headerParamsName ? ['...headers'] : []) : buildHeaders(contentType, !!headerParamsName)
+  const generics = buildGenerics(node, tsResolver)
+  const paramsNode = buildClientParamsNode({ paramsType, paramsCasing, pathParamsType, node, tsResolver, isConfigurable: true })
+  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
+  const clientParams = buildClassClientParams({ node, path, baseURL, tsResolver, isFormData, isMultipleContentTypes, hasFormData, headers })
+  const jsdoc = buildJSDoc(buildOperationComments(node, { link: 'urlPath', linkPosition: 'beforeDeprecated', splitLines: true }))
+
+  const requestDataLine = buildRequestDataLine({ parser, node, zodResolver })
+  const formDataLine = buildFormDataLine(isFormData || (isMultipleContentTypes && hasFormData), !!node.requestBody?.content?.[0]?.schema)
+  const returnStatement = buildReturnStatement({ dataReturnType, parser, node, zodResolver })
 
   const methodBody = [
-    'const { client: request = fetch, ...requestConfig } = mergeConfig(this.#config, config)',
+    `const { client: request = fetch, ${isMultipleContentTypes ? `contentType = ${JSON.stringify(contentType)}, ` : ''}...requestConfig } = mergeConfig(this.#config, config)`,
     '',
     requestDataLine,
     formDataLine,
@@ -184,7 +86,7 @@ function generateMethod({
     .map((line) => `    ${line}`)
     .join('\n')
 
-  return `${jsdoc}async ${name}(${params.toConstructor()}) {\n${methodBody}\n  }`
+  return `${jsdoc}async ${name}(${paramsSignature}) {\n${methodBody}\n  }`
 }
 
 export function ClassClient({
@@ -199,13 +101,13 @@ export function ClassClient({
   paramsCasing,
   pathParamsType,
   children,
-}: Props): FabricReactNode {
-  const methods = operations.map(({ operation, name: methodName, typeSchemas, zodSchemas }) =>
+}: Props): KubbReactNode {
+  const methods = operations.map(({ node, name: methodName, tsResolver, zodResolver }) =>
     generateMethod({
-      operation,
+      node,
       name: methodName,
-      typeSchemas,
-      zodSchemas,
+      tsResolver,
+      zodResolver,
       baseURL,
       dataReturnType,
       parser,
@@ -232,4 +134,3 @@ ${methods.join('\n\n')}
     </File.Source>
   )
 }
-ClassClient.getParams = Client.getParams