@kubb/plugin-client 3.0.0-alpha.15 → 3.0.0-alpha.17

package/src/components/Client.tsx

@@ -3,7 +3,7 @@ import { URLPath } from '@kubb/core/utils'
 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, createFunctionParams } from '@kubb/react'
+import { File, Function, FunctionParams } from '@kubb/react'
 import type { KubbNode } from '@kubb/react/types'
 import type { PluginClient } from '../types.ts'
 
@@ -12,87 +12,107 @@ type Props = {
    * Name of the function
    */
   name: string
-  options: PluginClient['resolvedOptions']
-  typedSchemas: OperationSchemas
+  isExportable?: boolean
+  isIndexable?: boolean
+
+  baseURL: string | undefined
+  dataReturnType: PluginClient['resolvedOptions']['dataReturnType']
+  pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
+  parser: PluginClient['resolvedOptions']['parser'] | undefined
+  typeSchemas: OperationSchemas
+  zodSchemas: OperationSchemas | undefined
   operation: Operation
 }
 
-export function Client({ name, options, typedSchemas, operation }: Props): KubbNode {
-  const contentType = operation.getContentType()
-  const baseURL = options.baseURL
-  const path = new URLPath(operation.path)
-  const isFormData = contentType === 'multipart/form-data'
-  const headers = [
-    contentType !== 'application/json' ? `'Content-Type': '${contentType}'` : undefined,
-    typedSchemas.headerParams?.name ? '...headers' : undefined,
-  ].filter(Boolean)
+type GetParamsProps = {
+  pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
 
-  const params = createFunctionParams({
+function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
+  return FunctionParams.factory({
     pathParams: {
-      mode: options.pathParamsType === 'object' ? 'object' : 'inlineSpread',
-      children: getPathParams(typedSchemas.pathParams, { typed: true }),
+      mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      children: getPathParams(typeSchemas.pathParams, { typed: true }),
     },
-    data: typedSchemas.request?.name
+    data: typeSchemas.request?.name
       ? {
-          type: typedSchemas.request?.name,
-          optional: isOptional(typedSchemas.request?.schema),
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
         }
       : undefined,
-    params: typedSchemas.queryParams?.name
+    params: typeSchemas.queryParams?.name
       ? {
-          type: typedSchemas.queryParams?.name,
-          optional: isOptional(typedSchemas.queryParams?.schema),
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
         }
       : undefined,
-    headers: typedSchemas.headerParams?.name
+    headers: typeSchemas.headerParams?.name
       ? {
-          type: typedSchemas.headerParams?.name,
-          optional: isOptional(typedSchemas.headerParams?.schema),
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
         }
       : undefined,
-    options: {
-      type: 'Partial<Parameters<typeof client>[0]>',
+    config: {
+      type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
       default: '{}',
     },
   })
+}
+
+export function Client({
+  name,
+  isExportable = true,
+  isIndexable = true,
+  typeSchemas,
+  baseURL,
+  dataReturnType,
+  parser,
+  zodSchemas,
+  pathParamsType,
+  operation,
+}: Props): KubbNode {
+  const path = new URLPath(operation.path)
+  const contentType = operation.getContentType()
+  const isFormData = contentType === 'multipart/form-data'
+  const headers = [
+    contentType !== 'application/json' ? `'Content-Type': '${contentType}'` : undefined,
+    typeSchemas.headerParams?.name ? '...headers' : undefined,
+  ].filter(Boolean)
 
-  const clientParams = createFunctionParams({
-    data: {
+  const generics = [
+    typeSchemas.response.name,
+    typeSchemas.errors?.map((item) => item.name).join(' | ') || 'unknown',
+    typeSchemas.request?.name || 'unknown',
+  ].filter(Boolean)
+  const params = getParams({ pathParamsType, typeSchemas })
+  const clientParams = FunctionParams.factory({
+    config: {
       mode: 'object',
       children: {
         method: {
-          type: 'string',
           value: JSON.stringify(operation.method),
         },
         url: {
-          type: 'string',
           value: path.template,
         },
         baseURL: baseURL
           ? {
-              type: 'string',
               value: JSON.stringify(baseURL),
             }
           : undefined,
-        params: typedSchemas.queryParams?.name
+        params: typeSchemas.queryParams?.name ? {} : undefined,
+        data: typeSchemas.request?.name
           ? {
-              type: 'any',
-            }
-          : undefined,
-        data: typedSchemas.request?.name
-          ? {
-              type: 'any',
               value: isFormData ? 'formData' : undefined,
             }
           : undefined,
         headers: headers.length
           ? {
-              type: 'any',
-              value: headers.length ? `{ ${headers.join(', ')}, ...options.headers }` : undefined,
+              value: headers.length ? `{ ${headers.join(', ')}, ...config.headers }` : undefined,
             }
           : undefined,
-        options: {
-          type: 'any',
+        config: {
           mode: 'inlineSpread',
         },
       },
@@ -111,29 +131,29 @@ export function Client({ name, options, typedSchemas, operation }: Props): KubbN
     })
    }
   `
-    : undefined
+    : ''
 
   return (
-    <File.Source name={name} isExportable isIndexable>
+    <File.Source name={name} isExportable={isExportable} isIndexable={isIndexable}>
       <Function
         name={name}
         async
-        export
-        returnType={
-          options.dataReturnType === 'data' ? `ResponseConfig<${typedSchemas.response.name}>["data"]` : `ResponseConfig<${typedSchemas.response.name}>`
-        }
-        params={params}
+        export={isExportable}
+        params={params.toConstructor()}
         JSDoc={{
           comments: getComments(operation),
         }}
       >
-        {formData || ''}
-        <Function.Call
-          name="res"
-          to={<Function name="client" async generics={[typedSchemas.response.name, typedSchemas.request?.name].filter(Boolean)} params={clientParams} />}
-        />
-        <Function.Return>{options.dataReturnType === 'data' ? 'res.data' : 'res'}</Function.Return>
+        {formData}
+        {`const res = await client<${generics.join(', ')}>(${clientParams.toCall()})`}
+        <br />
+        {dataReturnType === 'full' && parser === 'zod' && zodSchemas && `return {...res, data: ${zodSchemas.response.name}.parse(res.data)}`}
+        {dataReturnType === 'data' && parser === 'zod' && zodSchemas && `return ${zodSchemas.response.name}.parse(res.data)`}
+        {dataReturnType === 'full' && parser === 'client' && 'return res'}
+        {dataReturnType === 'data' && parser === 'client' && 'return res.data'}
       </Function>
     </File.Source>
   )
 }
+
+Client.getParams = getParams

package/src/generators/__snapshots__/deletePet.ts

@@ -0,0 +1,17 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description delete a pet
+ * @summary Deletes a pet
+ * @link /pet/:petId
+ */
+export async function deletePet(petId: DeletePetPathParams['petId'], headers?: DeletePetHeaderParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<DeletePetMutationResponse, DeletePet400, unknown>({
+    method: 'delete',
+    url: `/pet/${petId}`,
+    headers: { ...headers, ...config.headers },
+    ...config,
+  })
+  return res.data
+}

package/src/generators/__snapshots__/deletePetObject.ts

@@ -0,0 +1,25 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description delete a pet
+ * @summary Deletes a pet
+ * @link /pet/:petId
+ */
+export async function deletePet(
+  {
+    petId,
+  }: {
+    petId: DeletePetPathParams['petId']
+  },
+  headers?: DeletePetHeaderParams,
+  config: Partial<RequestConfig> = {},
+) {
+  const res = await client<DeletePetMutationResponse, DeletePet400, unknown>({
+    method: 'delete',
+    url: `/pet/${petId}`,
+    headers: { ...headers, ...config.headers },
+    ...config,
+  })
+  return res.data
+}

package/src/generators/__snapshots__/findByTags.ts

@@ -0,0 +1,12 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: 'get', url: `/pet/findByTags`, params, ...config })
+  return res.data
+}

package/src/generators/__snapshots__/findByTagsFull.ts

@@ -0,0 +1,12 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: 'get', url: `/pet/findByTags`, params, ...config })
+  return res
+}

package/src/generators/__snapshots__/findByTagsWithZod.ts

@@ -0,0 +1,12 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: 'get', url: `/pet/findByTags`, params, ...config })
+  return findPetsByTagsQueryResponse.parse(res.data)
+}

package/src/generators/__snapshots__/findByTagsWithZodFull.ts

@@ -0,0 +1,12 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: 'get', url: `/pet/findByTags`, params, ...config })
+  return { ...res, data: findPetsByTagsQueryResponse.parse(res.data) }
+}

package/src/generators/__snapshots__/importPath.ts

@@ -0,0 +1,12 @@
+import client from 'axios'
+import type { RequestConfig } from 'axios'
+
+/**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: 'get', url: `/pet/findByTags`, params, ...config })
+  return res.data
+}

package/src/generators/__snapshots__/operations.ts

@@ -0,0 +1,82 @@
+export const operations = {
+  updatePet: {
+    path: '/pet',
+    method: 'put',
+  },
+  addPet: {
+    path: '/pet',
+    method: 'post',
+  },
+  findPetsByStatus: {
+    path: '/pet/findByStatus',
+    method: 'get',
+  },
+  findPetsByTags: {
+    path: '/pet/findByTags',
+    method: 'get',
+  },
+  getPetById: {
+    path: '/pet/:petId',
+    method: 'get',
+  },
+  updatePetWithForm: {
+    path: '/pet/:petId',
+    method: 'post',
+  },
+  deletePet: {
+    path: '/pet/:petId',
+    method: 'delete',
+  },
+  uploadFile: {
+    path: '/pet/:petId/uploadImage',
+    method: 'post',
+  },
+  getInventory: {
+    path: '/store/inventory',
+    method: 'get',
+  },
+  placeOrder: {
+    path: '/store/order',
+    method: 'post',
+  },
+  placeOrderPatch: {
+    path: '/store/order',
+    method: 'patch',
+  },
+  getOrderById: {
+    path: '/store/order/:orderId',
+    method: 'get',
+  },
+  deleteOrder: {
+    path: '/store/order/:orderId',
+    method: 'delete',
+  },
+  createUser: {
+    path: '/user',
+    method: 'post',
+  },
+  createUsersWithListInput: {
+    path: '/user/createWithList',
+    method: 'post',
+  },
+  loginUser: {
+    path: '/user/login',
+    method: 'get',
+  },
+  logoutUser: {
+    path: '/user/logout',
+    method: 'get',
+  },
+  getUserByName: {
+    path: '/user/:username',
+    method: 'get',
+  },
+  updateUser: {
+    path: '/user/:username',
+    method: 'put',
+  },
+  deleteUser: {
+    path: '/user/:username',
+    method: 'delete',
+  },
+} as const

package/src/generators/__snapshots__/updatePetById.ts

@@ -0,0 +1,15 @@
+import client from '@kubb/plugin-client/client'
+import type { RequestConfig } from '@kubb/plugin-client/client'
+
+/**
+ * @summary Updates a pet in the store with form data
+ * @link /pet/:petId
+ */
+export async function updatePetWithForm(
+  petId: UpdatePetWithFormPathParams['petId'],
+  params?: UpdatePetWithFormQueryParams,
+  config: Partial<RequestConfig> = {},
+) {
+  const res = await client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, unknown>({ method: 'post', url: `/pet/${petId}`, params, ...config })
+  return res.data
+}

package/src/generators/clientGenerator.tsx

@@ -1,45 +1,64 @@
 import { createReactGenerator } from '@kubb/plugin-oas'
 import { useOperationManager } from '@kubb/plugin-oas/hooks'
 import { pluginTsName } from '@kubb/plugin-ts'
+import { pluginZodName } from '@kubb/plugin-zod'
 import { File, useApp } from '@kubb/react'
 import { Client } from '../components/Client'
 import type { PluginClient } from '../types'
 
 export const clientGenerator = createReactGenerator<PluginClient>({
-  name: 'plugin-client',
+  name: 'client',
   Operation({ options, operation }) {
-    const { plugin } = useApp<PluginClient>()
+    const {
+      plugin: { output },
+    } = useApp<PluginClient>()
     const { getSchemas, getName, getFile } = useOperationManager()
 
-    const name = getName(operation, { type: 'function' })
-    const typedSchemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-    const file = getFile(operation)
-    const typedFile = getFile(operation, { pluginKey: [pluginTsName] })
+    const client = {
+      name: getName(operation, { type: 'function' }),
+      file: getFile(operation),
+    }
 
-    if (!options.template) {
-      return null
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
     }
 
-    const Template = options.template || Client
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
 
     return (
-      <File baseName={file.baseName} path={file.path} meta={file.meta}>
-        <File.Import name={'client'} path={options.importPath || '@kubb/plugin-client/client'} />
-        <File.Import name={['ResponseConfig']} path={options.importPath || '@kubb/plugin-client/client'} isTypeOnly />
+      <File baseName={client.file.baseName} path={client.file.path} meta={client.file.meta}>
+        <File.Import name={'client'} path={options.importPath} />
+        <File.Import name={['RequestConfig']} path={options.importPath} isTypeOnly />
+        {options.parser === 'zod' && <File.Import extName={output?.extName} name={[zod.schemas.response.name]} root={client.file.path} path={zod.file.path} />}
         <File.Import
-          extName={plugin.output?.extName}
+          extName={output?.extName}
           name={[
-            typedSchemas.request?.name,
-            typedSchemas.response.name,
-            typedSchemas.pathParams?.name,
-            typedSchemas.queryParams?.name,
-            typedSchemas.headerParams?.name,
+            type.schemas.request?.name,
+            type.schemas.response.name,
+            type.schemas.pathParams?.name,
+            type.schemas.queryParams?.name,
+            type.schemas.headerParams?.name,
+            ...(type.schemas.statusCodes?.map((item) => item.name) || []),
           ].filter(Boolean)}
-          root={file.path}
-          path={typedFile.path}
+          root={client.file.path}
+          path={type.file.path}
           isTypeOnly
         />
-        <Template name={name} options={options} typedSchemas={typedSchemas} operation={operation} />
+
+        <Client
+          name={client.name}
+          baseURL={options.baseURL}
+          dataReturnType={options.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          typeSchemas={type.schemas}
+          operation={operation}
+          parser={options.parser}
+          zodSchemas={zod.schemas}
+        />
       </File>
     )
   },

package/src/generators/operationsGenerator.tsx

@@ -5,7 +5,7 @@ import { Operations } from '../components/Operations'
 import type { PluginClient } from '../types'
 
 export const operationsGenerator = createReactGenerator<PluginClient>({
-  name: 'plugin-client',
+  name: 'client',
   Operations({ operations }) {
     const { pluginManager } = useApp<PluginClient>()
 

package/src/plugin.ts

@@ -5,10 +5,9 @@ import { camelCase } from '@kubb/core/transformers'
 import { renderTemplate } from '@kubb/core/utils'
 import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
 
-import { Client } from './components/index.ts'
-
 import type { Plugin } from '@kubb/core'
 import type { PluginOas as SwaggerPluginOptions } from '@kubb/plugin-oas'
+import { pluginZodName } from '@kubb/plugin-zod'
 import { operationsGenerator } from './generators'
 import { clientGenerator } from './generators/clientGenerator.tsx'
 import type { PluginClient } from './types.ts'
@@ -27,6 +26,7 @@ export const pluginClient = createPlugin<PluginClient>((options) => {
     pathParamsType = 'inline',
     operations = false,
     importPath = '@kubb/plugin-client/client',
+    parser = 'client',
   } = options
 
   const template = group?.output ? group.output : `${output.path}/{{tag}}Controller`
@@ -38,13 +38,13 @@ export const pluginClient = createPlugin<PluginClient>((options) => {
       ...output,
     },
     options: {
+      parser,
       dataReturnType,
       importPath,
-      template: options.template || Client,
       pathParamsType,
       baseURL: undefined,
     },
-    pre: [pluginOasName],
+    pre: [pluginOasName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
     resolvePath(baseName, pathMode, options) {
       const root = path.resolve(this.config.root, this.config.output.path)
       const mode = pathMode ?? FileManager.getMode(path.resolve(root, output.path))

package/src/types.ts

@@ -1,9 +1,7 @@
 import type { Plugin, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
 import type * as KubbFile from '@kubb/fs/types'
 
-import type { HttpMethod } from '@kubb/oas'
 import type { Exclude, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
-import type { Client } from './components/index.ts'
 
 export type Options = {
   output?: {
@@ -73,7 +71,6 @@ export type Options = {
    * @default '@kubb/plugin-client/client'
    */
   importPath?: string
-  template?: typeof Client
   /**
    * ReturnType that needs to be used when calling client().
    *
@@ -94,6 +91,12 @@ export type Options = {
    * @private
    */
   pathParamsType?: 'object' | 'inline'
+  /**
+   * Which parser can be used before returning the data
+   * `'zod'` will use `@kubb/plugin-zod` to parse the data.
+   * @default 'client'
+   */
+  parser?: 'client' | 'zod'
   transformers?: {
     /**
      * Customize the names based on the type that is provided by the plugin.
@@ -104,8 +107,8 @@ export type Options = {
 
 type ResolvedOptions = {
   baseURL: string | undefined
+  parser: NonNullable<Options['parser']>
   importPath: NonNullable<Options['importPath']>
-  template: NonNullable<Options['template']>
   dataReturnType: NonNullable<Options['dataReturnType']>
   pathParamsType: NonNullable<Options['pathParamsType']>
 }