@kubb/plugin-client 5.0.0-alpha.9 → 5.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +17 -10
- package/README.md +4 -4
- package/dist/clients/axios.cjs +2 -2
- package/dist/clients/axios.cjs.map +1 -1
- package/dist/clients/axios.d.ts +4 -4
- package/dist/clients/axios.js +1 -1
- package/dist/clients/axios.js.map +1 -1
- package/dist/clients/fetch.cjs +1 -1
- package/dist/clients/fetch.cjs.map +1 -1
- package/dist/clients/fetch.d.ts +2 -2
- package/dist/clients/fetch.js +1 -1
- package/dist/clients/fetch.js.map +1 -1
- package/dist/index.cjs +1739 -97
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +324 -4
- package/dist/index.js +1725 -95
- package/dist/index.js.map +1 -1
- package/dist/templates/clients/axios.source.cjs +1 -1
- package/dist/templates/clients/axios.source.js +1 -1
- package/dist/templates/clients/fetch.source.cjs +1 -1
- package/dist/templates/clients/fetch.source.js +1 -1
- package/extension.yaml +776 -0
- package/package.json +67 -84
- package/src/clients/axios.ts +5 -1
- package/src/clients/fetch.ts +5 -1
- package/src/components/ClassClient.tsx +45 -142
- package/src/components/Client.tsx +90 -129
- package/src/components/Operations.tsx +10 -10
- package/src/components/StaticClassClient.tsx +44 -138
- package/src/components/Url.tsx +38 -48
- package/src/components/WrapperClient.tsx +3 -3
- package/src/functionParams.ts +118 -0
- package/src/generators/classClientGenerator.tsx +148 -171
- package/src/generators/clientGenerator.tsx +95 -82
- package/src/generators/groupedClientGenerator.tsx +50 -52
- package/src/generators/operationsGenerator.tsx +11 -18
- package/src/generators/staticClassClientGenerator.tsx +178 -183
- package/src/index.ts +9 -2
- package/src/plugin.ts +115 -145
- package/src/resolvers/resolverClient.ts +22 -0
- package/src/types.ts +104 -44
- package/src/utils.ts +180 -0
- package/templates/clients/axios.ts +5 -2
- package/templates/clients/fetch.ts +5 -2
- package/dist/StaticClassClient-By-aMAe4.cjs +0 -677
- package/dist/StaticClassClient-By-aMAe4.cjs.map +0 -1
- package/dist/StaticClassClient-CCn9g9eF.js +0 -636
- package/dist/StaticClassClient-CCn9g9eF.js.map +0 -1
- package/dist/components.cjs +0 -7
- package/dist/components.d.ts +0 -216
- package/dist/components.js +0 -2
- package/dist/generators-BYUJaeZP.js +0 -723
- package/dist/generators-BYUJaeZP.js.map +0 -1
- package/dist/generators-DTxD9FDY.cjs +0 -753
- package/dist/generators-DTxD9FDY.cjs.map +0 -1
- package/dist/generators.cjs +0 -7
- package/dist/generators.d.ts +0 -517
- package/dist/generators.js +0 -2
- package/dist/types-DBQdg-BV.d.ts +0 -169
- package/src/components/index.ts +0 -5
- package/src/generators/index.ts +0 -5
package/extension.yaml
ADDED
|
@@ -0,0 +1,776 @@
|
|
|
1
|
+
$schema: https://kubb.dev/schemas/extension.json
|
|
2
|
+
kind: plugin
|
|
3
|
+
id: plugin-client
|
|
4
|
+
name: Client
|
|
5
|
+
description: Generate type-safe HTTP clients (Axios, Fetch) from OpenAPI specifications for making API requests.
|
|
6
|
+
category: client
|
|
7
|
+
type: official
|
|
8
|
+
npmPackage: "@kubb/plugin-client"
|
|
9
|
+
docsPath: /plugins/plugin-client
|
|
10
|
+
repo: https://github.com/kubb-labs/plugins
|
|
11
|
+
maintainers:
|
|
12
|
+
- name: Stijn Van Hulle
|
|
13
|
+
github: stijnvanhulle
|
|
14
|
+
compatibility:
|
|
15
|
+
kubb: ">=5.0.0"
|
|
16
|
+
node: ">=22"
|
|
17
|
+
tags:
|
|
18
|
+
- api-client
|
|
19
|
+
- axios
|
|
20
|
+
- fetch
|
|
21
|
+
- http-client
|
|
22
|
+
- codegen
|
|
23
|
+
- openapi
|
|
24
|
+
dependencies:
|
|
25
|
+
- plugin-ts
|
|
26
|
+
resources:
|
|
27
|
+
documentation: https://kubb.dev/plugins/plugin-client
|
|
28
|
+
repository: https://github.com/kubb-labs/plugins
|
|
29
|
+
issues: https://github.com/kubb-labs/plugins/issues
|
|
30
|
+
changelog: https://github.com/kubb-labs/plugins/blob/main/packages/plugin-client/CHANGELOG.md
|
|
31
|
+
codesandbox: https://codesandbox.io/p/github/kubb-labs/plugins/main/examples/client
|
|
32
|
+
featured: true
|
|
33
|
+
icon:
|
|
34
|
+
light: https://kubb.dev/feature/axios.svg
|
|
35
|
+
intro: |
|
|
36
|
+
# @kubb/plugin-client
|
|
37
|
+
|
|
38
|
+
Generate API client code for handling API requests.
|
|
39
|
+
|
|
40
|
+
By default, this plugin uses [Axios](https://axios-http.com/docs/intro), but you can add your own client. See [Use of Fetch](https://kubb.dev/plugins/plugin-client#importpath) for an example.
|
|
41
|
+
options:
|
|
42
|
+
- name: output
|
|
43
|
+
type: Output
|
|
44
|
+
required: false
|
|
45
|
+
default: "{ path: 'clients', barrelType: 'named' }"
|
|
46
|
+
description: Specify the export location for the files and define the behavior of the output.
|
|
47
|
+
properties:
|
|
48
|
+
- name: path
|
|
49
|
+
type: string
|
|
50
|
+
required: true
|
|
51
|
+
description: Output directory or file for the generated code, relative to the global `output.path`.
|
|
52
|
+
tip: |
|
|
53
|
+
if `output.path` is a file, `group` cannot be used.
|
|
54
|
+
default: "'clients'"
|
|
55
|
+
- name: barrelType
|
|
56
|
+
type: "'all' | 'named' | 'propagate' | false"
|
|
57
|
+
required: false
|
|
58
|
+
default: "'named'"
|
|
59
|
+
description: Specify what to export and optionally disable barrel-file generation.
|
|
60
|
+
tip: |
|
|
61
|
+
Using `propagate` will prevent a plugin from creating a barrel file, but it will still propagate, allowing [`output.barrelType`](https://kubb.dev/docs/5.x/configuration#output-barreltype) to export the specific function or type.
|
|
62
|
+
examples:
|
|
63
|
+
- name: all
|
|
64
|
+
files:
|
|
65
|
+
- lang: typescript
|
|
66
|
+
code: |
|
|
67
|
+
export * from './gen/petService.ts'
|
|
68
|
+
twoslash: false
|
|
69
|
+
- name: named
|
|
70
|
+
files:
|
|
71
|
+
- lang: typescript
|
|
72
|
+
code: |
|
|
73
|
+
export { PetService } from './gen/petService.ts'
|
|
74
|
+
twoslash: false
|
|
75
|
+
- name: propagate
|
|
76
|
+
files:
|
|
77
|
+
- lang: typescript
|
|
78
|
+
code: ""
|
|
79
|
+
twoslash: false
|
|
80
|
+
- name: "false"
|
|
81
|
+
files:
|
|
82
|
+
- lang: typescript
|
|
83
|
+
code: ""
|
|
84
|
+
twoslash: false
|
|
85
|
+
- name: banner
|
|
86
|
+
type: "string | ((node: RootNode) => string)"
|
|
87
|
+
required: false
|
|
88
|
+
description: Add a banner comment at the top of every generated file. Accepts a static string or a function that receives the `RootNode` and returns a string.
|
|
89
|
+
- name: footer
|
|
90
|
+
type: "string | ((node: RootNode) => string)"
|
|
91
|
+
required: false
|
|
92
|
+
description: Add a footer comment at the end of every generated file. Accepts a static string or a function that receives the `RootNode` and returns a string.
|
|
93
|
+
- name: override
|
|
94
|
+
type: boolean
|
|
95
|
+
required: false
|
|
96
|
+
default: "false"
|
|
97
|
+
description: Whether Kubb overrides existing external files that can be generated if they already exist.
|
|
98
|
+
- name: contentType
|
|
99
|
+
type: "'application/json' | (string & {})"
|
|
100
|
+
required: false
|
|
101
|
+
description: |
|
|
102
|
+
Define which content type to use.
|
|
103
|
+
|
|
104
|
+
By default, Kubb uses the first JSON-valid media type.
|
|
105
|
+
- name: group
|
|
106
|
+
type: Group
|
|
107
|
+
required: false
|
|
108
|
+
description: |
|
|
109
|
+
Grouping combines files in a folder based on a specific `type`.
|
|
110
|
+
examples:
|
|
111
|
+
- name: kubb.config.ts
|
|
112
|
+
files:
|
|
113
|
+
- lang: typescript
|
|
114
|
+
code: |
|
|
115
|
+
group: {
|
|
116
|
+
type: 'tag',
|
|
117
|
+
name({ group }) {
|
|
118
|
+
return `${group}Controller`
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
twoslash: false
|
|
122
|
+
body: |
|
|
123
|
+
With the configuration above, the generator emits:
|
|
124
|
+
|
|
125
|
+
```text
|
|
126
|
+
.
|
|
127
|
+
├── src/
|
|
128
|
+
│ └── petController/
|
|
129
|
+
│ │ ├── addPet.ts
|
|
130
|
+
│ │ └── getPet.ts
|
|
131
|
+
│ └── storeController/
|
|
132
|
+
│ ├── createStore.ts
|
|
133
|
+
│ └── getStoreById.ts
|
|
134
|
+
├── petStore.yaml
|
|
135
|
+
├── kubb.config.ts
|
|
136
|
+
└── package.json
|
|
137
|
+
```
|
|
138
|
+
properties:
|
|
139
|
+
- name: type
|
|
140
|
+
type: "'tag'"
|
|
141
|
+
required: true
|
|
142
|
+
description: Specify the property to group files by. Required when `group` is defined.
|
|
143
|
+
note: |
|
|
144
|
+
`Required: true*` means this is required only when the `group` option is used. The `group` option itself is optional.
|
|
145
|
+
body: |
|
|
146
|
+
- `'tag'`: Uses the first tag from `operation.getTags().at(0)?.name`
|
|
147
|
+
- name: name
|
|
148
|
+
type: "(context: GroupContext) => string"
|
|
149
|
+
required: false
|
|
150
|
+
default: (ctx) => `${ctx.group}Controller`
|
|
151
|
+
description: Return the name of a group based on the group name. Used for the file and identifier generation.
|
|
152
|
+
- name: importPath
|
|
153
|
+
type: string
|
|
154
|
+
required: false
|
|
155
|
+
description: Path to the client used for API calls. Supports both relative and absolute paths.
|
|
156
|
+
details:
|
|
157
|
+
- title: When to use `importPath`
|
|
158
|
+
body: |
|
|
159
|
+
Use `importPath` when you want to:
|
|
160
|
+
|
|
161
|
+
- **Customize the HTTP client**: Provide your own client implementation with custom configurations (e.g., baseURL, headers, interceptors)
|
|
162
|
+
- **Add authentication**: Include authentication tokens or other security mechanisms in your client
|
|
163
|
+
- **Override default behavior**: Replace the default Kubb client with your own implementation
|
|
164
|
+
- title: Default behavior
|
|
165
|
+
body: |
|
|
166
|
+
When `importPath` is not specified:
|
|
167
|
+
|
|
168
|
+
- If `bundle: false` (default): Uses `@kubb/plugin-client/clients/${client}` where client is either `axios` or `fetch`.
|
|
169
|
+
- If `bundle: true`: Bundles the client into `.kubb/fetch.ts`.
|
|
170
|
+
- title: Import structure
|
|
171
|
+
body: "Generated code imports the client as a default import and the runtime types as named type imports:"
|
|
172
|
+
codeBlock:
|
|
173
|
+
lang: typescript
|
|
174
|
+
code: |-
|
|
175
|
+
/**
|
|
176
|
+
* Generated by Kubb (https://kubb.dev/).
|
|
177
|
+
* Do not edit manually.
|
|
178
|
+
*/
|
|
179
|
+
import client from '${client.importPath}'
|
|
180
|
+
import type { RequestConfig, ResponseErrorConfig } from '${client.importPath}'
|
|
181
|
+
// ... rest of generated file
|
|
182
|
+
important: |
|
|
183
|
+
When using `importPath` with query plugins such as `@kubb/plugin-react-query` or `@kubb/plugin-vue-query`, the generated hooks also import a `Client` type alongside `RequestConfig` and `ResponseErrorConfig` from the custom module. Your custom client module **must** export all three types — if any is missing, TypeScript will report an unresolvable import error.
|
|
184
|
+
codeBlock:
|
|
185
|
+
lang: typescript
|
|
186
|
+
title: client.ts
|
|
187
|
+
code: |
|
|
188
|
+
export type RequestConfig<TData = unknown> = {
|
|
189
|
+
url?: string
|
|
190
|
+
method: 'GET' | 'PUT' | 'PATCH' | 'POST' | 'DELETE'
|
|
191
|
+
params?: object
|
|
192
|
+
data?: TData | FormData
|
|
193
|
+
responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
|
|
194
|
+
signal?: AbortSignal
|
|
195
|
+
headers?: HeadersInit
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
export type ResponseConfig<TData = unknown> = {
|
|
199
|
+
data: TData
|
|
200
|
+
status: number
|
|
201
|
+
statusText: string
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
export type ResponseErrorConfig<TError = unknown> = TError
|
|
205
|
+
|
|
206
|
+
// The Client type alias is required when using query plugins
|
|
207
|
+
export type Client = <TData, _TError = unknown, TVariables = unknown>(
|
|
208
|
+
config: RequestConfig<TVariables>
|
|
209
|
+
) => Promise<ResponseConfig<TData>>
|
|
210
|
+
|
|
211
|
+
export const client: Client = async (config) => { /* ... */ }
|
|
212
|
+
export default client
|
|
213
|
+
examples:
|
|
214
|
+
- name: kubb.config.ts
|
|
215
|
+
files:
|
|
216
|
+
- lang: typescript
|
|
217
|
+
code: |
|
|
218
|
+
import { defineConfig } from 'kubb'
|
|
219
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
220
|
+
|
|
221
|
+
export default defineConfig({
|
|
222
|
+
// ...
|
|
223
|
+
plugins: [
|
|
224
|
+
pluginClient({
|
|
225
|
+
importPath: './src/client.ts', // Path to your custom client
|
|
226
|
+
}),
|
|
227
|
+
],
|
|
228
|
+
})
|
|
229
|
+
twoslash: false
|
|
230
|
+
tip: |
|
|
231
|
+
Learn more about defining a custom client [here](https://kubb.dev/plugins/plugin-client#importpath).
|
|
232
|
+
- name: operations
|
|
233
|
+
type: boolean
|
|
234
|
+
required: false
|
|
235
|
+
default: "false"
|
|
236
|
+
description: Create an `operations.ts` file with all operations grouped by methods.
|
|
237
|
+
- name: dataReturnType
|
|
238
|
+
type: "'data' | 'full'"
|
|
239
|
+
required: false
|
|
240
|
+
default: "'data'"
|
|
241
|
+
description: |
|
|
242
|
+
Return type used when calling the client.
|
|
243
|
+
|
|
244
|
+
- `'data'` returns `ResponseConfig['data']`.
|
|
245
|
+
- `'full'` returns the full `ResponseConfig`.
|
|
246
|
+
examples:
|
|
247
|
+
- name: data
|
|
248
|
+
files:
|
|
249
|
+
- lang: typescript
|
|
250
|
+
code: |
|
|
251
|
+
export async function getPetById<TData>(
|
|
252
|
+
petId: GetPetByIdPathParams,
|
|
253
|
+
): Promise<ResponseConfig<TData>['data']> {
|
|
254
|
+
...
|
|
255
|
+
}
|
|
256
|
+
twoslash: false
|
|
257
|
+
- name: full
|
|
258
|
+
files:
|
|
259
|
+
- lang: typescript
|
|
260
|
+
code: |
|
|
261
|
+
export async function getPetById<TData>(
|
|
262
|
+
petId: GetPetByIdPathParams,
|
|
263
|
+
): Promise<ResponseConfig<TData>> {
|
|
264
|
+
...
|
|
265
|
+
}
|
|
266
|
+
twoslash: false
|
|
267
|
+
- name: urlType
|
|
268
|
+
type: "'export' | false"
|
|
269
|
+
required: false
|
|
270
|
+
default: "false"
|
|
271
|
+
description: Export URLs that are used by every operation.
|
|
272
|
+
body: |
|
|
273
|
+
- `'export'` will make them part of your barrel file.
|
|
274
|
+
- `false` will not make them exportable.
|
|
275
|
+
codeBlock:
|
|
276
|
+
lang: typescript
|
|
277
|
+
code: |
|
|
278
|
+
export function getGetPetByIdUrl(petId: GetPetByIdPathParams['petId']) {
|
|
279
|
+
return `/pet/${petId}` as const
|
|
280
|
+
}
|
|
281
|
+
- name: paramsType
|
|
282
|
+
type: "'object' | 'inline'"
|
|
283
|
+
required: false
|
|
284
|
+
default: "'inline'"
|
|
285
|
+
description: Defines how parameters are passed to generated functions. Switch between object-style parameters and inline parameters.
|
|
286
|
+
tip: |
|
|
287
|
+
When `paramsType` is set to `'object'`, `pathParams` will also be set to `'object'`.
|
|
288
|
+
body: |
|
|
289
|
+
- `'object'` returns params and pathParams as an object.
|
|
290
|
+
- `'inline'` returns params as comma-separated params.
|
|
291
|
+
examples:
|
|
292
|
+
- name: object
|
|
293
|
+
files:
|
|
294
|
+
- lang: typescript
|
|
295
|
+
code: |
|
|
296
|
+
export async function deletePet(
|
|
297
|
+
{
|
|
298
|
+
petId,
|
|
299
|
+
headers,
|
|
300
|
+
}: {
|
|
301
|
+
petId: DeletePetPathParams['petId']
|
|
302
|
+
headers?: DeletePetHeaderParams
|
|
303
|
+
},
|
|
304
|
+
config: Partial<RequestConfig> = {},
|
|
305
|
+
) {
|
|
306
|
+
...
|
|
307
|
+
}
|
|
308
|
+
twoslash: false
|
|
309
|
+
- name: inline
|
|
310
|
+
files:
|
|
311
|
+
- lang: typescript
|
|
312
|
+
code: |
|
|
313
|
+
export async function deletePet(
|
|
314
|
+
petId: DeletePetPathParams['petId'],
|
|
315
|
+
headers?: DeletePetHeaderParams,
|
|
316
|
+
config: Partial<RequestConfig> = {}
|
|
317
|
+
){
|
|
318
|
+
...
|
|
319
|
+
}
|
|
320
|
+
twoslash: false
|
|
321
|
+
- name: paramsCasing
|
|
322
|
+
type: "'camelcase'"
|
|
323
|
+
required: false
|
|
324
|
+
description: Transform parameter names to a specific casing format for path, query, and header parameters in generated client code.
|
|
325
|
+
important: |
|
|
326
|
+
When using `paramsCasing`, ensure that `@kubb/plugin-ts` also has the same `paramsCasing` setting. This option automatically maps transformed parameter names back to their original API names in HTTP requests.
|
|
327
|
+
body: |
|
|
328
|
+
- `'camelcase'` transforms parameter names to camelCase.
|
|
329
|
+
examples:
|
|
330
|
+
- name: With paramsCasing camelcase
|
|
331
|
+
files:
|
|
332
|
+
- lang: typescript
|
|
333
|
+
code: |
|
|
334
|
+
// Function parameters use camelCase
|
|
335
|
+
export async function deletePet(
|
|
336
|
+
petId: DeletePetPathParams['petId'], // ✓ camelCase
|
|
337
|
+
headers?: DeletePetHeaderParams,
|
|
338
|
+
config: Partial<RequestConfig> = {}
|
|
339
|
+
) {
|
|
340
|
+
// Automatically maps back to original name for the API
|
|
341
|
+
const pet_id = petId
|
|
342
|
+
|
|
343
|
+
return fetch({
|
|
344
|
+
method: 'DELETE',
|
|
345
|
+
url: `/pet/${pet_id}`, // Uses original API parameter name
|
|
346
|
+
...
|
|
347
|
+
})
|
|
348
|
+
}
|
|
349
|
+
twoslash: false
|
|
350
|
+
- name: Without paramsCasing
|
|
351
|
+
files:
|
|
352
|
+
- lang: typescript
|
|
353
|
+
code: |
|
|
354
|
+
// Parameters use original API naming
|
|
355
|
+
export async function deletePet(
|
|
356
|
+
pet_id: DeletePetPathParams['pet_id'], // Original naming
|
|
357
|
+
headers?: DeletePetHeaderParams,
|
|
358
|
+
config: Partial<RequestConfig> = {}
|
|
359
|
+
) {
|
|
360
|
+
return fetch({
|
|
361
|
+
method: 'DELETE',
|
|
362
|
+
url: `/pet/${pet_id}`,
|
|
363
|
+
...
|
|
364
|
+
})
|
|
365
|
+
}
|
|
366
|
+
twoslash: false
|
|
367
|
+
tip: |
|
|
368
|
+
The client automatically generates mapping code to convert camelCase parameter names back to the original API format. You write code with developer-friendly camelCase names, but HTTP requests use the exact parameter names from your OpenAPI specification.
|
|
369
|
+
- name: pathParamsType
|
|
370
|
+
type: "'object' | 'inline'"
|
|
371
|
+
required: false
|
|
372
|
+
default: "'inline'"
|
|
373
|
+
description: Defines how pathParams are passed to generated functions.
|
|
374
|
+
body: |
|
|
375
|
+
- `'object'` returns pathParams as an object.
|
|
376
|
+
- `'inline'` returns pathParams as comma-separated params.
|
|
377
|
+
examples:
|
|
378
|
+
- name: object
|
|
379
|
+
files:
|
|
380
|
+
- lang: typescript
|
|
381
|
+
code: |
|
|
382
|
+
export async function getPetById(
|
|
383
|
+
{ petId }: GetPetByIdPathParams,
|
|
384
|
+
) {
|
|
385
|
+
...
|
|
386
|
+
}
|
|
387
|
+
twoslash: false
|
|
388
|
+
- name: inline
|
|
389
|
+
files:
|
|
390
|
+
- lang: typescript
|
|
391
|
+
code: |
|
|
392
|
+
export async function getPetById(
|
|
393
|
+
petId: GetPetByIdPathParams,
|
|
394
|
+
) {
|
|
395
|
+
...
|
|
396
|
+
}
|
|
397
|
+
twoslash: false
|
|
398
|
+
- name: parser
|
|
399
|
+
type: "'client' | 'zod'"
|
|
400
|
+
required: false
|
|
401
|
+
default: "'client'"
|
|
402
|
+
description: Parser used before returning data.
|
|
403
|
+
body: |
|
|
404
|
+
- `'zod'` uses `@kubb/plugin-zod` to parse data.
|
|
405
|
+
- `'client'` returns data without parsing.
|
|
406
|
+
- name: client
|
|
407
|
+
type: "'axios' | 'fetch'"
|
|
408
|
+
required: false
|
|
409
|
+
default: "'axios'"
|
|
410
|
+
description: Client used for HTTP calls.
|
|
411
|
+
body: |
|
|
412
|
+
- `'axios'` uses `@kubb/plugin-client/templates/axios` to fetch data.
|
|
413
|
+
- `'fetch'` uses `@kubb/plugin-client/templates/fetch` to fetch data.
|
|
414
|
+
- name: clientType
|
|
415
|
+
type: "'function' | 'class' | 'staticClass'"
|
|
416
|
+
required: false
|
|
417
|
+
default: "'function'"
|
|
418
|
+
description: |
|
|
419
|
+
Defines the client code generation style.
|
|
420
|
+
|
|
421
|
+
- `'function'` generates standalone functions for each operation.
|
|
422
|
+
- `'class'` generates a class with instance methods for each operation.
|
|
423
|
+
- `'staticClass'` generates a class with static methods for each operation. Use this style to call methods like `Pet.getPetById(...)` without instantiating the class.
|
|
424
|
+
warning: |
|
|
425
|
+
When using `clientType: 'class'` or `clientType: 'staticClass'`, these are not compatible with query plugins like `@kubb/plugin-react-query` or `@kubb/plugin-vue-query`. These plugins are designed to work with function-based clients. If you need to use both class-based or static-class clients and query hooks, configure separate `pluginClient` instances: one with `clientType: 'class'` or `clientType: 'staticClass'` for your needs, and another with `clientType: 'function'` (or omit it for the default) that the query plugins will reference.
|
|
426
|
+
examples:
|
|
427
|
+
- name: staticClass
|
|
428
|
+
files:
|
|
429
|
+
- name: kubb.config.ts
|
|
430
|
+
lang: typescript
|
|
431
|
+
code: |
|
|
432
|
+
import { defineConfig } from 'kubb'
|
|
433
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
434
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
435
|
+
|
|
436
|
+
export default defineConfig({
|
|
437
|
+
input: { path: './petStore.yaml' },
|
|
438
|
+
output: { path: './src/gen' },
|
|
439
|
+
plugins: [
|
|
440
|
+
pluginTs(),
|
|
441
|
+
pluginClient({
|
|
442
|
+
output: { path: './clients' },
|
|
443
|
+
clientType: 'staticClass',
|
|
444
|
+
group: { type: 'tag' },
|
|
445
|
+
}),
|
|
446
|
+
],
|
|
447
|
+
})
|
|
448
|
+
twoslash: false
|
|
449
|
+
- name: Pet.ts
|
|
450
|
+
lang: typescript
|
|
451
|
+
code: |
|
|
452
|
+
import fetch from '@kubb/plugin-client/clients/fetch'
|
|
453
|
+
import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from '../../../models/ts/petController/GetPetById.js'
|
|
454
|
+
import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from '../../../models/ts/petController/AddPet.js'
|
|
455
|
+
import type { RequestConfig, ResponseErrorConfig } from '@kubb/plugin-client/clients/fetch'
|
|
456
|
+
|
|
457
|
+
export class Pet {
|
|
458
|
+
static #client: typeof fetch = fetch
|
|
459
|
+
|
|
460
|
+
/**
|
|
461
|
+
* @description Returns a single pet
|
|
462
|
+
* @summary Find pet by ID
|
|
463
|
+
* {@link /pet/:petId}
|
|
464
|
+
*/
|
|
465
|
+
static async getPetById(
|
|
466
|
+
{ petId }: { petId: GetPetByIdPathParams['petId'] },
|
|
467
|
+
config: Partial<RequestConfig> & { client?: typeof fetch } = {}
|
|
468
|
+
) {
|
|
469
|
+
const request = this.#client || fetch
|
|
470
|
+
const { client: _request = this.#client, ...requestConfig } = config
|
|
471
|
+
const res = await request<GetPetByIdQueryResponse, ResponseErrorConfig<GetPetById400 | GetPetById404>, unknown>({
|
|
472
|
+
method: 'GET',
|
|
473
|
+
url: `/pet/${petId}`,
|
|
474
|
+
...requestConfig,
|
|
475
|
+
})
|
|
476
|
+
return res.data
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
twoslash: false
|
|
480
|
+
- name: usage.ts
|
|
481
|
+
lang: typescript
|
|
482
|
+
code: |
|
|
483
|
+
import { Pet } from './gen/clients/Pet'
|
|
484
|
+
|
|
485
|
+
const pet = await Pet.getPetById({ petId: 1 })
|
|
486
|
+
twoslash: false
|
|
487
|
+
- name: class
|
|
488
|
+
files:
|
|
489
|
+
- name: kubb.config.ts
|
|
490
|
+
lang: typescript
|
|
491
|
+
code: |
|
|
492
|
+
import { defineConfig } from 'kubb'
|
|
493
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
494
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
495
|
+
|
|
496
|
+
export default defineConfig({
|
|
497
|
+
input: { path: './petStore.yaml' },
|
|
498
|
+
output: { path: './src/gen' },
|
|
499
|
+
plugins: [
|
|
500
|
+
pluginTs(),
|
|
501
|
+
pluginClient({
|
|
502
|
+
output: { path: './clients' },
|
|
503
|
+
clientType: 'class',
|
|
504
|
+
group: { type: 'tag' },
|
|
505
|
+
}),
|
|
506
|
+
],
|
|
507
|
+
})
|
|
508
|
+
twoslash: false
|
|
509
|
+
- name: Pet.ts
|
|
510
|
+
lang: typescript
|
|
511
|
+
code: |
|
|
512
|
+
import fetch from '@kubb/plugin-client/clients/fetch'
|
|
513
|
+
import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from '../../../models/ts/petController/GetPetById.js'
|
|
514
|
+
import type { RequestConfig, ResponseErrorConfig } from '@kubb/plugin-client/clients/fetch'
|
|
515
|
+
|
|
516
|
+
export class Pet {
|
|
517
|
+
#client: typeof fetch
|
|
518
|
+
|
|
519
|
+
constructor(config: Partial<RequestConfig> & { client?: typeof fetch } = {}) {
|
|
520
|
+
this.#client = config.client || fetch
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
async getPetById(
|
|
524
|
+
{ petId }: { petId: GetPetByIdPathParams['petId'] },
|
|
525
|
+
config: Partial<RequestConfig> & { client?: typeof fetch } = {}
|
|
526
|
+
) {
|
|
527
|
+
const { client: request = this.#client, ...requestConfig } = config
|
|
528
|
+
const res = await request<GetPetByIdQueryResponse, ResponseErrorConfig<GetPetById400 | GetPetById404>, unknown>({
|
|
529
|
+
method: 'GET',
|
|
530
|
+
url: `/pet/${petId}`,
|
|
531
|
+
...requestConfig,
|
|
532
|
+
})
|
|
533
|
+
return res.data
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
twoslash: false
|
|
537
|
+
- name: usage.ts
|
|
538
|
+
lang: typescript
|
|
539
|
+
code: |
|
|
540
|
+
import { Pet } from './gen/clients/Pet'
|
|
541
|
+
|
|
542
|
+
const petClient = new Pet()
|
|
543
|
+
const pet = await petClient.getPetById({ petId: 1 })
|
|
544
|
+
twoslash: false
|
|
545
|
+
- name: wrapper
|
|
546
|
+
type: "{ className: string }"
|
|
547
|
+
required: false
|
|
548
|
+
description: Generate a wrapper class that composes all tag-based client classes into a single entry point.
|
|
549
|
+
properties:
|
|
550
|
+
- name: className
|
|
551
|
+
type: string
|
|
552
|
+
required: true
|
|
553
|
+
description: Name of the generated wrapper class.
|
|
554
|
+
examples:
|
|
555
|
+
- name: wrapper.className
|
|
556
|
+
files:
|
|
557
|
+
- name: kubb.config.ts
|
|
558
|
+
lang: typescript
|
|
559
|
+
code: |
|
|
560
|
+
import { defineConfig } from 'kubb'
|
|
561
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
562
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
563
|
+
|
|
564
|
+
export default defineConfig({
|
|
565
|
+
input: { path: './petStore.yaml' },
|
|
566
|
+
output: { path: './src/gen' },
|
|
567
|
+
plugins: [
|
|
568
|
+
pluginTs(),
|
|
569
|
+
pluginClient({
|
|
570
|
+
output: { path: './clients' },
|
|
571
|
+
clientType: 'class',
|
|
572
|
+
group: { type: 'tag' },
|
|
573
|
+
wrapper: { className: 'PetStoreClient' },
|
|
574
|
+
}),
|
|
575
|
+
],
|
|
576
|
+
})
|
|
577
|
+
twoslash: false
|
|
578
|
+
- name: PetStoreClient.ts
|
|
579
|
+
lang: typescript
|
|
580
|
+
code: |
|
|
581
|
+
import type { Client, RequestConfig } from './.kubb/fetch.js'
|
|
582
|
+
import { Pet } from './petController/Pet.js'
|
|
583
|
+
import { Store } from './storeController/Store.js'
|
|
584
|
+
import { User } from './userController/User.js'
|
|
585
|
+
|
|
586
|
+
export class PetStoreClient {
|
|
587
|
+
readonly pet: Pet
|
|
588
|
+
readonly store: Store
|
|
589
|
+
readonly user: User
|
|
590
|
+
|
|
591
|
+
constructor(config: Partial<RequestConfig> & { client?: Client } = {}) {
|
|
592
|
+
this.pet = new Pet(config)
|
|
593
|
+
this.store = new Store(config)
|
|
594
|
+
this.user = new User(config)
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
twoslash: false
|
|
598
|
+
- name: usage.ts
|
|
599
|
+
lang: typescript
|
|
600
|
+
code: |
|
|
601
|
+
import { PetStoreClient } from './gen/clients/PetStoreClient'
|
|
602
|
+
|
|
603
|
+
const client = new PetStoreClient({ baseURL: 'https://petstore.swagger.io/v2' })
|
|
604
|
+
|
|
605
|
+
const pets = await client.pet.findPetsByTags({ tags: ['available'] })
|
|
606
|
+
const user = await client.user.getUserByName({ username: 'john' })
|
|
607
|
+
twoslash: false
|
|
608
|
+
- name: bundle
|
|
609
|
+
type: boolean
|
|
610
|
+
required: false
|
|
611
|
+
default: "false"
|
|
612
|
+
description: Controls whether the HTTP client runtime is copied into the generated `.kubb` directory.
|
|
613
|
+
body: |
|
|
614
|
+
- `true` adds a `.kubb/fetch.ts` file containing the selected client template (fetch or axios). Generated clients remain self-contained.
|
|
615
|
+
- `false` keeps generated clients slim by importing the shared runtime from `@kubb/plugin-client/clients/{client}`.
|
|
616
|
+
- Override this behavior by providing a custom `client.importPath`.
|
|
617
|
+
- name: baseURL
|
|
618
|
+
type: string
|
|
619
|
+
required: false
|
|
620
|
+
description: Sets a custom base URL for all generated calls. When not set, the base URL is automatically taken from the OAS spec via the adapter (e.g. the `servers[0].url` field).
|
|
621
|
+
- name: include
|
|
622
|
+
type: Array<Include>
|
|
623
|
+
required: false
|
|
624
|
+
description: Array containing include parameters to include tags, operations, methods, paths, or content types.
|
|
625
|
+
codeBlock:
|
|
626
|
+
lang: typescript
|
|
627
|
+
title: Include
|
|
628
|
+
code: |
|
|
629
|
+
export type Include = {
|
|
630
|
+
type: 'tag' | 'operationId' | 'path' | 'method' | 'contentType'
|
|
631
|
+
pattern: string | RegExp
|
|
632
|
+
}
|
|
633
|
+
- name: exclude
|
|
634
|
+
type: Array<Exclude>
|
|
635
|
+
required: false
|
|
636
|
+
description: Array containing exclude parameters to exclude or skip tags, operations, methods, paths, or content types.
|
|
637
|
+
codeBlock:
|
|
638
|
+
lang: typescript
|
|
639
|
+
title: Exclude
|
|
640
|
+
code: |
|
|
641
|
+
export type Exclude = {
|
|
642
|
+
type: 'tag' | 'operationId' | 'path' | 'method' | 'contentType'
|
|
643
|
+
pattern: string | RegExp
|
|
644
|
+
}
|
|
645
|
+
- name: override
|
|
646
|
+
type: Array<Override>
|
|
647
|
+
required: false
|
|
648
|
+
description: Array containing override parameters to override `options` based on tags, operations, methods, paths, or content types.
|
|
649
|
+
codeBlock:
|
|
650
|
+
lang: typescript
|
|
651
|
+
title: Override
|
|
652
|
+
code: |
|
|
653
|
+
export type Override = {
|
|
654
|
+
type: 'tag' | 'operationId' | 'path' | 'method' | 'contentType'
|
|
655
|
+
pattern: string | RegExp
|
|
656
|
+
options: PluginOptions
|
|
657
|
+
}
|
|
658
|
+
- name: generators
|
|
659
|
+
type: Array<Generator<PluginClient>>
|
|
660
|
+
required: false
|
|
661
|
+
experimental: true
|
|
662
|
+
description: |
|
|
663
|
+
Define additional generators next to the built-in generators.
|
|
664
|
+
|
|
665
|
+
See [Generators](https://kubb.dev/docs/5.x/guides/creating-plugins) for more information on how to use generators.
|
|
666
|
+
- name: transformers
|
|
667
|
+
type: Visitor
|
|
668
|
+
required: false
|
|
669
|
+
description: |
|
|
670
|
+
A single AST visitor applied to every node before code is printed. Each method you provide replaces the corresponding built-in one. When a method returns `null` or `undefined`, the preset transformer's result is used as the fallback — so you only need to supply the methods you want to change.
|
|
671
|
+
|
|
672
|
+
Visitor methods receive the node and a context object. Return a modified node to replace it, or return `undefined`/`void` to leave it unchanged.
|
|
673
|
+
examples:
|
|
674
|
+
- name: Strip descriptions before printing
|
|
675
|
+
files:
|
|
676
|
+
- lang: typescript
|
|
677
|
+
code: |
|
|
678
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
679
|
+
|
|
680
|
+
pluginTs({
|
|
681
|
+
transformer: {
|
|
682
|
+
schema(node) {
|
|
683
|
+
return { ...node, description: undefined }
|
|
684
|
+
},
|
|
685
|
+
},
|
|
686
|
+
})
|
|
687
|
+
twoslash: false
|
|
688
|
+
- name: Prefix every operationId
|
|
689
|
+
files:
|
|
690
|
+
- lang: typescript
|
|
691
|
+
code: |
|
|
692
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
693
|
+
|
|
694
|
+
pluginTs({
|
|
695
|
+
transformer: {
|
|
696
|
+
operation(node) {
|
|
697
|
+
return { ...node, operationId: `api_${node.operationId}` }
|
|
698
|
+
},
|
|
699
|
+
},
|
|
700
|
+
})
|
|
701
|
+
twoslash: false
|
|
702
|
+
tip: |
|
|
703
|
+
Use `transformer` to rewrite node properties before printing. For output naming customization, use `resolver` instead.
|
|
704
|
+
- name: resolver
|
|
705
|
+
type: Partial<ResolverClient> & ThisType<ResolverClient>
|
|
706
|
+
required: false
|
|
707
|
+
description: Override individual resolver methods to customize generated names. Any method you omit falls back to the preset resolver. Use `this.default(...)` to call the preset's implementation.
|
|
708
|
+
codeBlock:
|
|
709
|
+
lang: typescript
|
|
710
|
+
code: |
|
|
711
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
712
|
+
|
|
713
|
+
pluginClient({
|
|
714
|
+
resolver: {
|
|
715
|
+
resolveName(name) {
|
|
716
|
+
return `${this.default(name)}Client`
|
|
717
|
+
},
|
|
718
|
+
},
|
|
719
|
+
})
|
|
720
|
+
- name: transformer
|
|
721
|
+
type: Visitor
|
|
722
|
+
required: false
|
|
723
|
+
experimental: true
|
|
724
|
+
description: Apply an AST `Visitor` to transform operation nodes before they are printed.
|
|
725
|
+
codeBlock:
|
|
726
|
+
lang: typescript
|
|
727
|
+
code: |
|
|
728
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
729
|
+
|
|
730
|
+
pluginClient({
|
|
731
|
+
transformer: {
|
|
732
|
+
operation(node) {
|
|
733
|
+
return { ...node, operationId: `api_${node.operationId}` }
|
|
734
|
+
},
|
|
735
|
+
},
|
|
736
|
+
})
|
|
737
|
+
examples:
|
|
738
|
+
- name: kubb.config.ts
|
|
739
|
+
files:
|
|
740
|
+
- lang: typescript
|
|
741
|
+
code: |
|
|
742
|
+
import { defineConfig } from 'kubb'
|
|
743
|
+
import { pluginTs } from '@kubb/plugin-ts'
|
|
744
|
+
import { pluginClient } from '@kubb/plugin-client'
|
|
745
|
+
|
|
746
|
+
export default defineConfig({
|
|
747
|
+
input: { path: './petStore.yaml' },
|
|
748
|
+
output: { path: './src/gen' },
|
|
749
|
+
plugins: [
|
|
750
|
+
pluginTs(),
|
|
751
|
+
pluginClient({
|
|
752
|
+
output: {
|
|
753
|
+
path: './clients/axios',
|
|
754
|
+
barrelType: 'named',
|
|
755
|
+
banner: '/* eslint-disable no-alert, no-console */',
|
|
756
|
+
footer: '',
|
|
757
|
+
},
|
|
758
|
+
group: {
|
|
759
|
+
type: 'tag',
|
|
760
|
+
name: ({ group }) => `${group}Service`,
|
|
761
|
+
},
|
|
762
|
+
resolver: {
|
|
763
|
+
resolveName(name) {
|
|
764
|
+
return `${this.default(name)}Client`
|
|
765
|
+
},
|
|
766
|
+
},
|
|
767
|
+
operations: true,
|
|
768
|
+
parser: 'client',
|
|
769
|
+
exclude: [{ type: 'tag', pattern: 'store' }],
|
|
770
|
+
pathParamsType: 'object',
|
|
771
|
+
dataReturnType: 'full',
|
|
772
|
+
client: 'axios',
|
|
773
|
+
}),
|
|
774
|
+
],
|
|
775
|
+
})
|
|
776
|
+
twoslash: false
|