···5555Filters work only with the [experimental parser](#parser) which is currently an opt-in feature.
5656:::
57575858-If you work with large specifications and want to generate output from their subset, set `input.include` to a regular expression string matching against resource references.
5858+If you work with large specifications and want to generate output from their subset, you can use regular expressions to select the relevant definitions. Set `input.include` to match resource references to be included or `input.exclude` to match resource references to be excluded. When both regular expressions match the same definition, `input.exclude` takes precedence over `input.include`.
59596060-```js
6060+::: code-group
6161+6262+```js [include]
6163export default {
6264 client: '@hey-api/client-fetch',
6365 experimentalParser: true, // [!code ++]
6466 input: {
6767+ // match only the schema named `foo` and `GET` operation for the `/api/v1/foo` path // [!code ++]
6568 include: '^(#/components/schemas/foo|#/paths/api/v1/foo/get)$', // [!code ++]
6669 path: 'path/to/openapi.json',
6770 },
···6972};
7073```
71747272-The configuration above will process only the schema named `foo` and `GET` operation for the `/api/v1/foo` path.
7575+```js [exclude]
7676+export default {
7777+ client: '@hey-api/client-fetch',
7878+ experimentalParser: true, // [!code ++]
7979+ input: {
8080+ // match everything except for the schema named `foo` and `GET` operation for the `/api/v1/foo` path // [!code ++]
8181+ exclude: '^(#/components/schemas/foo|#/paths/api/v1/foo/get)$', // [!code ++]
8282+ path: 'path/to/openapi.json',
8383+ },
8484+ output: 'src/client',
8585+};
8686+```
8787+8888+:::
73897490## Output
7591
+4
docs/openapi-ts/output.md
···388388389389Client package files are located in the `client` folder. This folder will include different files depending on which client you're using. This folder isn't generated by default. If you want to bundle client packages into your output, read the [Bundling](/openapi-ts/clients/fetch#bundling) section.
390390391391+## Plugins
392392+393393+The default output generated by Hey API plugins already allows you to build robust clients. However, you might be working with third-party packages and wishing to automate more of your boilerplate. The [Plugins](/openapi-ts/plugins) page covers this topic and more.
394394+391395<!--@include: ../examples.md-->
392396<!--@include: ../sponsorship.md-->
+164
docs/openapi-ts/plugins.md
···11+---
22+title: Plugins
33+description: Learn about and discover available plugins.
44+---
55+66+# Plugins
77+88+Every generated file in your output is created by a plugin. You already learned about the default plugins in [Output](/openapi-ts/output). This page contains all native plugins and shows you how to create your own.
99+1010+## Hey API
1111+1212+Apart from being responsible for the default output, Hey API plugins are the foundation for other plugins. Instead of creating their own primitives, other plugins can reuse the artifacts from Hey API plugins. This results in smaller output and a better user experience.
1313+1414+- `@hey-api/schemas` - export OpenAPI definitions as JavaScript objects
1515+- `@hey-api/services` - robust and polished SDKs
1616+- `@hey-api/transformers` - response data transformer functions
1717+- `@hey-api/types` - TypeScript interfaces and enums
1818+1919+## Third Party
2020+2121+These plugins help reduce boilerplate associated with third-party dependencies. Hey API natively supports the most popular packages. Please open an issue on [GitHub](https://github.com/hey-api/openapi-ts/issues) if you'd like us to support your favorite package.
2222+2323+- [`fastify`](/openapi-ts/fastify) - TypeScript interface for Fastify route handlers
2424+- [`@tanstack/angular-query-experimental`](/openapi-ts/tanstack-query) - TanStack Query functions and query keys
2525+- [`@tanstack/react-query`](/openapi-ts/tanstack-query) - TanStack Query functions and query keys
2626+- [`@tanstack/solid-query`](/openapi-ts/tanstack-query) - TanStack Query functions and query keys
2727+- [`@tanstack/svelte-query`](/openapi-ts/tanstack-query) - TanStack Query functions and query keys
2828+- [`@tanstack/vue-query`](/openapi-ts/tanstack-query) - TanStack Query functions and query keys
2929+- [`zod`](/openapi-ts/zod) - Zod schemas to validate your data
3030+3131+## Community
3232+3333+Featured community plugins.
3434+3535+- [add plugin](https://github.com/hey-api/openapi-ts/pulls)
3636+3737+## Custom
3838+3939+::: warning
4040+Plugins API is in development. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
4141+:::
4242+4343+If the existing plugins do not handle your use case or you're working with proprietary packages, you might want to create your own plugin.
4444+4545+### Configuration
4646+4747+We recommend following the design pattern of the native plugins. First, create a `my-plugin` folder for your plugin files. Inside, create a barrel file `index.ts` exporting the plugin's API.
4848+4949+::: code-group
5050+5151+```ts [index.ts]
5252+export { defaultConfig, defineConfig } from './config';
5353+export type { Config } from './types';
5454+```
5555+5656+:::
5757+5858+`index.ts` references 2 files, so we need to create them. `types.d.ts` contains the TypeScript interface for your plugin's options. It must have the `name` and `output` fields, everything else will become your plugin's configuration options.
5959+6060+::: code-group
6161+6262+```ts [types.d.ts]
6363+export interface Config {
6464+ /**
6565+ * Plugin name. Must be unique.
6666+ */
6767+ name: 'my-plugin';
6868+ /**
6969+ * Name of the generated file.
7070+ * @default 'my-plugin'
7171+ */
7272+ output?: string;
7373+ /**
7474+ * A custom option for your plugin.
7575+ */
7676+ myOption?: boolean;
7777+}
7878+```
7979+8080+:::
8181+8282+`config.ts` contains the runtime configuration for your plugin. It must implement the `Config` interface from `types.d.ts` and additional plugin metadata defined in the `PluginConfig` interface.
8383+8484+::: code-group
8585+8686+```ts [config.ts]
8787+import type { DefineConfig, PluginConfig } from '@hey-api/openapi-ts/plugins';
8888+8989+import { handler } from './plugin';
9090+import type { Config } from './types';
9191+9292+export const defaultConfig: PluginConfig<Config> = {
9393+ _dependencies: ['@hey-api/types'],
9494+ _handler: handler,
9595+ _handlerLegacy: () => {},
9696+ name: 'my-plugin',
9797+ output: 'my-plugin',
9898+};
9999+100100+/**
101101+ * Type helper for `my-plugin` plugin, returns {@link PluginConfig} object
102102+ */
103103+export const defineConfig: DefineConfig<Config> = (config) => ({
104104+ ...defaultConfig,
105105+ ...config,
106106+});
107107+```
108108+109109+:::
110110+111111+In the `config.ts` above, we define a `my-plugin` plugin which will generate a `my-plugin.gen.ts` output file. We also demonstrate declaring `@hey-api/types` as a dependency for our plugin, so we can safely import artifacts from `types.gen.ts`.
112112+113113+Lastly, we define the `_handler` method which will be responsible for generating our custom output. We just need to create the remaining `plugin.ts` file.
114114+115115+::: code-group
116116+117117+```ts [plugin.ts]
118118+import type { PluginHandler } from '@hey-api/openapi-ts/plugins';
119119+120120+import type { Config } from './types';
121121+122122+export const handler: PluginHandler<Config> = ({ context, plugin }) => {
123123+ // create a file for our output
124124+ const file = context.createFile({
125125+ id: plugin.name,
126126+ path: plugin.output,
127127+ });
128128+129129+ context.subscribe('before', () => {
130130+ // do something before parsing the input
131131+ });
132132+133133+ context.subscribe('operation', ({ operation }) => {
134134+ // do something with the operation model
135135+ });
136136+137137+ context.subscribe('schema', ({ operation }) => {
138138+ // do something with the schema model
139139+ });
140140+141141+ context.subscribe('after', () => {
142142+ // do something after parsing the input
143143+ });
144144+};
145145+```
146146+147147+:::
148148+149149+And that's it! We can now register our plugin in the Hey API configuration.
150150+151151+```js
152152+import { defineConfig } from './src/my-plugin';
153153+154154+export default {
155155+ client: '@hey-api/client-fetch',
156156+ input: 'path/to/openapi.json',
157157+ output: 'src/client',
158158+ plugins: [
159159+ defineConfig({
160160+ myOption: true,
161161+ }),
162162+ ],
163163+};
164164+```
+1-1
docs/openapi-ts/transformers.md
···4646};
4747```
48484949-This will generate types that use `Date` instead of `string` and appropriate transformers. Note that third party date packages are not supported at the moment.
4949+This will generate types that use `Date` instead of `string` and appropriate transformers. Note that third-party date packages are not supported at the moment.
50505151## Example
5252
+43
docs/openapi-ts/zod.md
···1010:::
11111212[Zod](https://zod.dev/) is a TypeScript-first schema validation library with static type inference.
1313+1414+<button class="buttonLink" @click="(event) => embedProject('hey-api-client-fetch-plugin-zod-example')(event)">
1515+Live demo
1616+</button>
1717+1818+## Features
1919+2020+- seamless integration with `@hey-api/openapi-ts` ecosystem
2121+- Zod schemas for requests, responses, and reusable components
2222+2323+## Installation
2424+2525+::: warning
2626+Zod plugin works only with the [experimental parser](/openapi-ts/configuration#parser) which is currently an opt-in feature.
2727+:::
2828+2929+Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Zod plugin.
3030+3131+```js
3232+export default {
3333+ client: '@hey-api/client-fetch',
3434+ experimentalParser: true, // [!code ++]
3535+ input: 'path/to/openapi.json',
3636+ output: 'src/client',
3737+ plugins: [
3838+ // ...other plugins
3939+ 'zod', // [!code ++]
4040+ ],
4141+};
4242+```
4343+4444+You can now generate Zod artifacts. 🎉
4545+4646+## Output
4747+4848+The Zod plugin will generate the following artifacts, depending on the input specification.
4949+5050+## Schemas
5151+5252+More information will be provided as we finalize the plugin.
5353+5454+<!--@include: ../examples.md-->
5555+<!--@include: ../sponsorship.md-->
···8282 | Record<string, unknown>
8383 | {
8484 /**
8585+ * Prevent parts matching the regular expression from being processed.
8686+ * You can select both operations and components by reference within
8787+ * the bundled input. In case of conflicts, `exclude` takes precedence
8888+ * over `include`.
8989+ *
9090+ * @example
9191+ * operation: '^#/paths/api/v1/foo/get$'
9292+ * schema: '^#/components/schemas/Foo$'
9393+ */
9494+ exclude?: string;
9595+ /**
8596 * Process only parts matching the regular expression. You can select both
8686- * operations and components by reference within the bundled input.
9797+ * operations and components by reference within the bundled input. In
9898+ * case of conflicts, `exclude` takes precedence over `include`.
8799 *
88100 * @example
89101 * operation: '^#/paths/api/v1/foo/get$'