@kubb/plugin-client 0.0.0-canary-20241104172400

package/src/components/Client.tsx

@@ -0,0 +1,199 @@
+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, FunctionParams } from '@kubb/react'
+import type { KubbNode } from '@kubb/react/types'
+import type { PluginClient } from '../types.ts'
+
+type Props = {
+  /**
+   * Name of the function
+   */
+  name: string
+  isExportable?: boolean
+  isIndexable?: boolean
+
+  baseURL: string | undefined
+  dataReturnType: PluginClient['resolvedOptions']['dataReturnType']
+  paramsType: PluginClient['resolvedOptions']['pathParamsType']
+  pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
+  parser: PluginClient['resolvedOptions']['parser'] | undefined
+  typeSchemas: OperationSchemas
+  zodSchemas: OperationSchemas | undefined
+  operation: Operation
+}
+
+type GetParamsProps = {
+  paramsType: PluginClient['resolvedOptions']['paramsType']
+  pathParamsType: PluginClient['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({ paramsType, pathParamsType, typeSchemas }: GetParamsProps) {
+  if (paramsType === 'object') {
+    return FunctionParams.factory({
+      data: {
+        mode: 'object',
+        children: {
+          ...getPathParams(typeSchemas.pathParams, { typed: true }),
+          data: typeSchemas.request?.name
+            ? {
+                type: typeSchemas.request?.name,
+                optional: isOptional(typeSchemas.request?.schema),
+              }
+            : undefined,
+          params: typeSchemas.queryParams?.name
+            ? {
+                type: typeSchemas.queryParams?.name,
+                optional: isOptional(typeSchemas.queryParams?.schema),
+              }
+            : undefined,
+          headers: typeSchemas.headerParams?.name
+            ? {
+                type: typeSchemas.headerParams?.name,
+                optional: isOptional(typeSchemas.headerParams?.schema),
+              }
+            : undefined,
+        },
+      },
+      config: {
+        type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
+        default: '{}',
+      },
+    })
+  }
+
+  return FunctionParams.factory({
+    pathParams: typeSchemas.pathParams?.name
+      ? {
+          mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+          children: getPathParams(typeSchemas.pathParams, { typed: true }),
+          type: typeSchemas.pathParams?.name,
+          optional: isOptional(typeSchemas.pathParams?.schema),
+        }
+      : undefined,
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+    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,
+  paramsType,
+  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 generics = [
+    typeSchemas.response.name,
+    typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error',
+    typeSchemas.request?.name || 'unknown',
+  ].filter(Boolean)
+  const params = getParams({ paramsType, pathParamsType, typeSchemas })
+  const clientParams = FunctionParams.factory({
+    config: {
+      mode: 'object',
+      children: {
+        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' : undefined,
+            }
+          : undefined,
+        headers: headers.length
+          ? {
+              value: headers.length ? `{ ${headers.join(', ')}, ...config.headers }` : undefined,
+            }
+          : undefined,
+        config: {
+          mode: 'inlineSpread',
+        },
+      },
+    },
+  })
+
+  const formData = isFormData
+    ? `
+   const formData = new FormData()
+   if(data) {
+    Object.keys(data).forEach((key) => {
+      const value = data[key as keyof typeof data];
+      if (typeof key === "string" && (typeof value === "string" || value instanceof Blob)) {
+        formData.append(key, value);
+      }
+    })
+   }
+  `
+    : ''
+
+  return (
+    <File.Source name={name} isExportable={isExportable} isIndexable={isIndexable}>
+      <Function
+        name={name}
+        async
+        export={isExportable}
+        params={params.toConstructor()}
+        JSDoc={{
+          comments: getComments(operation),
+        }}
+      >
+        {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/components/Operations.tsx

@@ -0,0 +1,28 @@
+import { URLPath } from '@kubb/core/utils'
+import { Const, File } from '@kubb/react'
+
+import type { HttpMethod, Operation } from '@kubb/oas'
+
+type OperationsProps = {
+  name: string
+  operations: Array<Operation>
+}
+
+export function Operations({ name, operations }: OperationsProps) {
+  const operationsObject: Record<string, { path: string; method: HttpMethod }> = {}
+
+  operations.forEach((operation) => {
+    operationsObject[operation.getOperationId()] = {
+      path: new URLPath(operation.path).URL,
+      method: operation.method,
+    }
+  })
+
+  return (
+    <File.Source name={name} isExportable isIndexable>
+      <Const name={name} export asConst>
+        {JSON.stringify(operationsObject, undefined, 2)}
+      </Const>
+    </File.Source>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { Client } from './Client.tsx'
+export { Operations } from './Operations.tsx'

package/src/generators/__snapshots__/deletePet.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-alert, no-console */
+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,13 @@
+/* eslint-disable no-alert, no-console */
+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, 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,13 @@
+/* eslint-disable no-alert, no-console */
+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,13 @@
+/* eslint-disable no-alert, no-console */
+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__/findByTagsObject.ts

@@ -0,0 +1,15 @@
+/* eslint-disable no-alert, no-console */
+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 }: {
+    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__/findByTagsWithZod.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-alert, no-console */
+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,13 @@
+/* eslint-disable no-alert, no-console */
+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,13 @@
+/* eslint-disable no-alert, no-console */
+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,12 @@
+/* eslint-disable no-alert, no-console */
+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

@@ -0,0 +1,67 @@
+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: 'client',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginClient>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+
+    const client = {
+      name: getName(operation, { type: 'function' }),
+      file: getFile(operation),
+    }
+
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
+    }
+
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
+
+    return (
+      <File baseName={client.file.baseName} path={client.file.path} meta={client.file.meta} banner={output?.banner} footer={output?.footer}>
+        <File.Import name={'client'} path={options.importPath} />
+        <File.Import name={['RequestConfig']} path={options.importPath} isTypeOnly />
+        {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={client.file.path} path={zod.file.path} />}
+        <File.Import
+          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={client.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+
+        <Client
+          name={client.name}
+          baseURL={options.baseURL}
+          dataReturnType={options.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          paramsType={options.paramsType}
+          typeSchemas={type.schemas}
+          operation={operation}
+          parser={options.parser}
+          zodSchemas={zod.schemas}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/groupedClientGenerator.tsx

@@ -0,0 +1,70 @@
+import { camelCase } from '@kubb/core/transformers'
+import type * as KubbFile from '@kubb/fs/types'
+import { pluginClientName } from '@kubb/plugin-client'
+import { createReactGenerator } from '@kubb/plugin-oas'
+import { useOperationManager } from '@kubb/plugin-oas/hooks'
+import { File, Function, useApp } from '@kubb/react'
+import type { PluginClient } from '../types'
+
+export const groupedClientGenerator = createReactGenerator<PluginClient>({
+  name: 'groupedClient',
+  Operations({ operations }) {
+    const {
+      pluginManager,
+      plugin: { options },
+    } = useApp<PluginClient>()
+    const { getName, getFile } = useOperationManager()
+
+    const controllers = operations.reduce(
+      (acc, operation) => {
+        if (options.group?.type === 'tag') {
+          const tag = operation.getTags().at(0)?.name
+          const name = tag ? options.group?.name?.({ group: camelCase(tag) }) : undefined
+
+          if (!tag || !name) {
+            return acc
+          }
+
+          const file = pluginManager.getFile({
+            name,
+            extname: '.ts',
+            pluginKey: [pluginClientName],
+            options: { tag },
+          })
+
+          const client = {
+            name: getName(operation, { type: 'function' }),
+            file: getFile(operation),
+          }
+
+          const previousFile = acc.find((item) => item.file.path === file.path)
+
+          if (previousFile) {
+            previousFile.clients.push(client)
+          } else {
+            acc.push({ name, file, clients: [client] })
+          }
+        }
+
+        return acc
+      },
+      [] as Array<{ name: string; file: KubbFile.File; clients: Array<{ name: string; file: KubbFile.File }> }>,
+    )
+
+    return controllers.map(({ name, file, clients }) => {
+      return (
+        <File key={file.path} baseName={file.baseName} path={file.path} meta={file.meta} banner={options.output?.banner} footer={options.output?.footer}>
+          {clients.map((client) => (
+            <File.Import key={client.name} name={[client.name]} root={file.path} path={client.file.path} />
+          ))}
+
+          <File.Source name={name} isExportable isIndexable>
+            <Function export name={name}>
+              {`return { ${clients.map((client) => client.name).join(', ')} }`}
+            </Function>
+          </File.Source>
+        </File>
+      )
+    })
+  },
+})

package/src/generators/index.ts

@@ -0,0 +1,3 @@
+export { clientGenerator } from './clientGenerator.tsx'
+export { operationsGenerator } from './operationsGenerator.tsx'
+export { groupedClientGenerator } from './groupedClientGenerator.tsx'

package/src/generators/operationsGenerator.tsx

@@ -0,0 +1,26 @@
+import { pluginClientName } from '@kubb/plugin-client'
+import { createReactGenerator } from '@kubb/plugin-oas'
+import { File, useApp } from '@kubb/react'
+import { Operations } from '../components/Operations'
+import type { PluginClient } from '../types'
+
+export const operationsGenerator = createReactGenerator<PluginClient>({
+  name: 'client',
+  Operations({ operations }) {
+    const {
+      pluginManager,
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginClient>()
+
+    const name = 'operations'
+    const file = pluginManager.getFile({ name, extname: '.ts', pluginKey: [pluginClientName] })
+
+    return (
+      <File baseName={file.baseName} path={file.path} meta={file.meta} banner={output?.banner} footer={output?.footer}>
+        <Operations name={name} operations={operations} />
+      </File>
+    )
+  },
+})

package/src/index.ts

@@ -0,0 +1,2 @@
+export { pluginClient, pluginClientName } from './plugin.ts'
+export type { PluginClient } from './types.ts'