@kubb/plugin-vue-query 3.0.0-alpha.20

package/src/generators/infiniteQueryGenerator.tsx

@@ -0,0 +1,131 @@
+import transformers from '@kubb/core/transformers'
+import { pluginClientName } from '@kubb/plugin-client'
+import { Client } from '@kubb/plugin-client/components'
+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 { InfiniteQuery, InfiniteQueryOptions, QueryKey } from '../components'
+import type { PluginVueQuery } from '../types'
+
+export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
+  name: 'vue-infinite-query',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginVueQuery>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+    const isQuery = typeof options.query === 'boolean' ? options.query : !!options.query.methods?.some((method) => operation.method === method)
+    const isInfinite = isQuery && !!options.infinite
+
+    const query = {
+      name: getName(operation, { type: 'function', prefix: 'use', suffix: 'infinite' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use', suffix: 'infinite' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    const queryOptions = {
+      name: transformers.camelCase(`${operation.getOperationId()} InfiniteQueryOptions`),
+    }
+
+    const queryKey = {
+      name: transformers.camelCase(`${operation.getOperationId()} InfiniteQueryKey`),
+      typeName: transformers.pascalCase(`${operation.getOperationId()} InfiniteQueryKey`),
+    }
+
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      //todo remove type?
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
+    }
+
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
+
+    if (!isQuery || !isInfinite || typeof options.query === 'boolean' || typeof options.infinite === 'boolean') {
+      return null
+    }
+
+    return (
+      <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
+        {options.parser === 'zod' && <File.Import extName={output?.extName} name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
+        <File.Import name={['useInfiniteQuery', 'infiniteQueryOptions']} path={options.query.importPath} />
+        <File.Import
+          name={['QueryKey', 'WithRequired', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryReturnType']}
+          path={options.query.importPath}
+          isTypeOnly
+        />
+        <File.Import name={['unref']} path="vue" />
+        <File.Import name={['MaybeRef']} path="vue" isTypeOnly />
+        <File.Import name={'client'} path={options.client.importPath} />
+        <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
+        {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
+        <File.Import
+          extName={output?.extName}
+          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={query.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+
+        <QueryKey
+          name={queryKey.name}
+          typeName={queryKey.typeName}
+          operation={operation}
+          pathParamsType={options.pathParamsType}
+          typeSchemas={type.schemas}
+          keysFn={options.query.key}
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <InfiniteQueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          dataReturnType={options.client.dataReturnType}
+          cursorParam={options.infinite.cursorParam}
+          initialPageParam={options.infinite.initialPageParam}
+          queryParam={options.infinite.queryParam}
+        />
+        <InfiniteQuery
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/mutationGenerator.tsx

@@ -0,0 +1,96 @@
+import { pluginClientName } from '@kubb/plugin-client'
+import { Client } from '@kubb/plugin-client/components'
+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 { Mutation } from '../components'
+import type { PluginVueQuery } from '../types'
+
+export const mutationGenerator = createReactGenerator<PluginVueQuery>({
+  name: 'vue-query',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginVueQuery>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+
+    const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
+    const isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
+
+    const mutation = {
+      name: getName(operation, { type: 'function', prefix: 'use' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use' }),
+    }
+
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      //todo remove type?
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
+    }
+
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    if (!isMutation || typeof options.mutation === 'boolean') {
+      return null
+    }
+
+    return (
+      <File baseName={mutation.file.baseName} path={mutation.file.path} meta={mutation.file.meta} banner={output?.banner} footer={output?.footer}>
+        {options.parser === 'zod' && (
+          <File.Import extName={output?.extName} name={[zod.schemas.response.name]} root={mutation.file.path} path={zod.file.path} />
+        )}
+        <File.Import name={['useMutation']} path={options.mutation.importPath} />
+        <File.Import name={['UseMutationOptions']} path={options.mutation.importPath} isTypeOnly />
+        <File.Import name={'client'} path={options.client.importPath} />
+        <File.Import name={['RequestConfig', 'ResponseConfig']} path={options.client.importPath} isTypeOnly />
+        <File.Import
+          extName={output?.extName}
+          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={mutation.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <Mutation
+          name={mutation.name}
+          clientName={client.name}
+          typeName={mutation.typeName}
+          typeSchemas={type.schemas}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/queryGenerator.tsx

@@ -0,0 +1,124 @@
+import transformers from '@kubb/core/transformers'
+import { pluginClientName } from '@kubb/plugin-client'
+import { Client } from '@kubb/plugin-client/components'
+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 { Query, QueryKey, QueryOptions } from '../components'
+import type { PluginVueQuery } from '../types'
+
+export const queryGenerator = createReactGenerator<PluginVueQuery>({
+  name: 'vue-query',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginVueQuery>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+
+    const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
+    const isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
+
+    const query = {
+      name: getName(operation, { type: 'function', prefix: 'use' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    const queryOptions = {
+      name: transformers.camelCase(`${operation.getOperationId()} QueryOptions`),
+    }
+
+    const queryKey = {
+      name: transformers.camelCase(`${operation.getOperationId()} QueryKey`),
+      typeName: transformers.pascalCase(`${operation.getOperationId()} QueryKey`),
+    }
+
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      //todo remove type?
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
+    }
+
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
+
+    if (!isQuery || typeof options.query === 'boolean') {
+      return null
+    }
+
+    return (
+      <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
+        {options.parser === 'zod' && <File.Import extName={output?.extName} name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
+        <File.Import name={['useQuery', 'queryOptions']} path={options.query.importPath} />
+        <File.Import name={['QueryKey', 'WithRequired', 'QueryObserverOptions', 'UseQueryReturnType']} path={options.query.importPath} isTypeOnly />
+        <File.Import name={['unref']} path="vue" />
+        <File.Import name={['MaybeRef']} path="vue" isTypeOnly />
+        <File.Import name={'client'} path={options.client.importPath} />
+        <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
+        {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
+        <File.Import
+          extName={output?.extName}
+          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={query.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+
+        <QueryKey
+          name={queryKey.name}
+          typeName={queryKey.typeName}
+          operation={operation}
+          pathParamsType={options.pathParamsType}
+          typeSchemas={type.schemas}
+          keysFn={options.query.key}
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+        />
+        <Query
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/index.ts

@@ -0,0 +1,2 @@
+export { pluginVueQuery, pluginVueQueryName } from './plugin.ts'
+export type { PluginVueQuery } from './types.ts'

package/src/plugin.ts

@@ -0,0 +1,152 @@
+import path from 'node:path'
+
+import { FileManager, PluginManager, createPlugin } from '@kubb/core'
+import { camelCase, pascalCase } from '@kubb/core/transformers'
+import { renderTemplate } from '@kubb/core/utils'
+import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
+
+import { pluginTsName } from '@kubb/plugin-ts'
+import { pluginZodName } from '@kubb/plugin-zod'
+
+import type { Plugin } from '@kubb/core'
+import type { PluginOas } from '@kubb/plugin-oas'
+import { infiniteQueryGenerator, mutationGenerator, queryGenerator } from './generators'
+import type { PluginVueQuery } from './types.ts'
+
+export const pluginVueQueryName = 'plugin-vue-query' satisfies PluginVueQuery['name']
+
+export const pluginVueQuery = createPlugin<PluginVueQuery>((options) => {
+  const {
+    output = { path: 'hooks' },
+    group,
+    exclude = [],
+    include,
+    override = [],
+    parser = 'client',
+    infinite,
+    transformers = {},
+    pathParamsType = 'inline',
+    mutation = {},
+    query = {},
+  } = options
+  const template = group?.output ? group.output : `${output.path}/{{tag}}Controller`
+
+  return {
+    name: pluginVueQueryName,
+    options: {
+      output: {
+        exportType: 'barrelNamed',
+        ...output,
+      },
+      baseURL: undefined,
+      client: {
+        importPath: '@kubb/plugin-client/client',
+        dataReturnType: 'data',
+        pathParamsType: 'inline',
+        ...options.client,
+      },
+      infinite: infinite
+        ? {
+            queryParam: 'id',
+            initialPageParam: 0,
+            cursorParam: undefined,
+            ...infinite,
+          }
+        : false,
+      query: {
+        key: (key: unknown[]) => key,
+        methods: ['get'],
+        importPath: '@tanstack/vue-query',
+        ...query,
+      },
+      mutation: {
+        methods: ['post', 'put', 'patch', 'delete'],
+        importPath: '@tanstack/vue-query',
+        ...mutation,
+      },
+      pathParamsType,
+      parser,
+    },
+    pre: [pluginOasName, pluginTsName, 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))
+
+      if (mode === 'single') {
+        /**
+         * when output is a file then we will always append to the same file(output file), see fileManager.addOrAppend
+         * Other plugins then need to call addOrAppend instead of just add from the fileManager class
+         */
+        return path.resolve(root, output.path)
+      }
+
+      if (options?.tag && group?.type === 'tag') {
+        const tag = camelCase(options.tag)
+
+        return path.resolve(root, renderTemplate(template, { tag }), baseName)
+      }
+
+      return path.resolve(root, output.path, baseName)
+    },
+    resolveName(name, type) {
+      let resolvedName = camelCase(name)
+
+      if (type === 'file' || type === 'function') {
+        resolvedName = camelCase(name, {
+          isFile: type === 'file',
+        })
+      }
+      if (type === 'type') {
+        resolvedName = pascalCase(name)
+      }
+
+      if (type) {
+        return transformers?.name?.(resolvedName, type) || resolvedName
+      }
+
+      return resolvedName
+    },
+    async buildStart() {
+      const [swaggerPlugin]: [Plugin<PluginOas>] = PluginManager.getDependedPlugins<PluginOas>(this.plugins, [pluginOasName])
+
+      const oas = await swaggerPlugin.context.getOas()
+      const root = path.resolve(this.config.root, this.config.output.path)
+      const mode = FileManager.getMode(path.resolve(root, output.path))
+      const baseURL = await swaggerPlugin.context.getBaseURL()
+
+      const operationGenerator = new OperationGenerator(
+        {
+          ...this.plugin.options,
+          baseURL,
+        },
+        {
+          oas,
+          pluginManager: this.pluginManager,
+          plugin: this.plugin,
+          contentType: swaggerPlugin.context.contentType,
+          exclude,
+          include,
+          override,
+          mode,
+        },
+      )
+
+      const files = await operationGenerator.build(queryGenerator, infiniteQueryGenerator, mutationGenerator)
+      await this.addFile(...files)
+
+      if (this.config.output.exportType) {
+        const barrelFiles = await this.fileManager.getBarrelFiles({
+          root,
+          output,
+          files: this.fileManager.files,
+          meta: {
+            pluginKey: this.plugin.key,
+          },
+          logger: this.logger,
+        })
+
+        await this.addFile(...barrelFiles)
+      }
+    },
+  }
+})

package/src/types.ts

@@ -0,0 +1,179 @@
+import type { Output, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
+
+import type { HttpMethod } from '@kubb/oas'
+import type { Exclude, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
+
+type Query = {
+  /**
+   * Customize the queryKey, here you can specify a suffix.
+   */
+  key: (key: unknown[]) => unknown[]
+  /**
+   * Define which HttpMethods can be used for queries
+   * @default ['get']
+   */
+  methods: Array<HttpMethod>
+  /**
+   * Path to the useQuery that will be used to do the useQuery functionality.
+   * It will be used as `import { useQuery } from '${importPath}'`.
+   * It allows both relative and absolute path.
+   * the path will be applied as is, so relative path should be based on the file being generated.
+   * @default '@tanstack/react-query'
+   */
+  importPath?: string
+}
+
+type Mutation = {
+  /**
+   * Define which HttpMethods can be used for mutations
+   * @default ['post', 'put', 'delete']
+   */
+  methods: Array<HttpMethod>
+  /**
+   * Path to the useQuery that will be used to do the useQuery functionality.
+   * It will be used as `import { useQuery } from '${importPath}'`.
+   * It allows both relative and absolute path.
+   * the path will be applied as is, so relative path should be based on the file being generated.
+   * @default '@tanstack/react-query'
+   */
+  importPath?: string
+}
+
+export type Infinite = {
+  /**
+   * Specify the params key used for `pageParam`.
+   * Used inside `useInfiniteQuery`, `createInfiniteQueries`, `createInfiniteQuery`
+   * @default `'id'`
+   */
+  queryParam: string
+  /**
+   * Which field of the data will be used, set it to undefined when no cursor is known.
+   */
+  cursorParam?: string | undefined
+  /**
+   * The initial value, the value of the first page.
+   * @default `0`
+   */
+  initialPageParam: unknown
+}
+
+export type Options = {
+  /**
+   * @default 'hooks'
+   */
+  output?: Output
+  /**
+   * Group the @tanstack/query hooks based on the provided name.
+   */
+  group?: {
+    /**
+     * Tag will group based on the operation tag inside the Swagger file
+     */
+    type: 'tag'
+    /**
+     * Relative path to save the grouped @tanstack/query hooks.
+     *
+     * `{{tag}}` will be replaced by the current tagName.
+     * @example `${output}/{{tag}}Controller` => `hooks/PetController`
+     * @default `${output}/{{tag}}Controller`
+     */
+    output?: string
+    /**
+     * Name to be used for the `export * as {{exportAs}} from './`
+     * @default `"{{tag}}Hooks"`
+     */
+    exportAs?: string
+  }
+
+  client?: {
+    /**
+     * Path to the client that will be used to do the API calls.
+     * It will be used as `import client from '${client.importPath}'`.
+     * It allows both relative and absolute path.
+     * the path will be applied as is, so relative path should be based on the file being generated.
+     * @default '@kubb/plugin-client/client'
+     */
+    importPath?: string
+    /**
+     * ReturnType that needs to be used when calling client().
+     *
+     * `Data` will return ResponseConfig[data].
+     *
+     * `Full` will return ResponseConfig.
+     * @default `'data'`
+     * @private
+     */
+    dataReturnType?: 'data' | 'full'
+  }
+  /**
+   * ReturnType that needs to be used when calling client().
+   *
+   * `Data` will return ResponseConfig[data].
+   *
+   * `Full` will return ResponseConfig.
+   * @default `'data'`
+   * @private
+   */
+
+  /**
+   * Array containing exclude parameters to exclude/skip tags/operations/methods/paths.
+   */
+  exclude?: Array<Exclude>
+  /**
+   * Array containing include parameters to include tags/operations/methods/paths.
+   */
+  include?: Array<Include>
+  /**
+   * Array containing override parameters to override `options` based on tags/operations/methods/paths.
+   */
+  override?: Array<Override<ResolvedOptions>>
+  /**
+   * How to pass your pathParams.
+   *
+   * `object` will return the pathParams as an object.
+   *
+   * `inline` will return the pathParams as comma separated params.
+   * @default `'inline'`
+   * @private
+   */
+  pathParamsType?: 'object' | 'inline'
+  /**
+   * When set, an infiniteQuery hooks will be added.
+   */
+  infinite?: Partial<Infinite> | false
+  /**
+   * Override some useQuery behaviours.
+   */
+  query?: Partial<Query> | false
+  /**
+   * Override some useMutation behaviours.
+   */
+  mutation?: Mutation | false
+  /**
+   * Which parser can be used before returning the data to `@tanstack/query`.
+   * `'zod'` will use `@kubb/plugin-zod` to parse the data.
+   */
+  parser?: 'client' | 'zod'
+  transformers?: {
+    /**
+     * Customize the names based on the type that is provided by the plugin.
+     */
+    name?: (name: ResolveNameParams['name'], type?: ResolveNameParams['type']) => string
+  }
+}
+
+type ResolvedOptions = {
+  output: Output
+  baseURL: string | undefined
+  client: Required<NonNullable<PluginVueQuery['options']['client']>>
+  parser: Required<NonNullable<Options['parser']>>
+  pathParamsType: NonNullable<Options['pathParamsType']>
+  /**
+   * Only used of infinite
+   */
+  infinite: NonNullable<Infinite> | false
+  query: NonNullable<Required<Query>> | false
+  mutation: NonNullable<Required<Mutation>> | false
+}
+
+export type PluginVueQuery = PluginFactoryOptions<'plugin-vue-query', Options, ResolvedOptions, never, ResolvePathOptions>