@kubb/plugin-vue-query 5.0.0-beta.3 → 5.0.0-beta.31

package/src/generators/queryGenerator.tsx

@@ -1,20 +1,27 @@
 import path from 'node:path'
+import { operationFileEntry, resolveOperationTypeNames } from '@internals/shared'
+import { resolveZodSchemaNames } from '@internals/tanstack-query'
 import { ast, defineGenerator } from '@kubb/core'
 import { Client, pluginClientName } from '@kubb/plugin-client'
 import { pluginTsName } from '@kubb/plugin-ts'
 import { pluginZodName } from '@kubb/plugin-zod'
-import { File, jsxRenderer } from '@kubb/renderer-jsx'
+import { File, jsxRendererSync } from '@kubb/renderer-jsx'
 import { difference } from 'remeda'
 import { Query, QueryKey, QueryOptions } from '../components'
 import type { PluginVueQuery } from '../types'
-import { transformName } from '../utils.ts'
 
+/**
+ * Built-in generator for `useQuery` composables. Emits one `useFooQuery`
+ * composable per GET operation (configurable via `query.methods`) plus the
+ * matching `fooQueryKey` / `fooQueryOptions` helpers.
+ */
 export const queryGenerator = defineGenerator<PluginVueQuery>({
   name: 'vue-query',
-  renderer: jsxRenderer,
+  renderer: jsxRendererSync,
   operation(node, ctx) {
-    const { adapter, config, driver, resolver, root } = ctx
-    const { output, query, mutation, paramsCasing, paramsType, pathParamsType, parser, client: clientOptions, group, transformers } = ctx.options
+    if (!ast.isHttpOperationNode(node)) return null
+    const { config, driver, resolver, root } = ctx
+    const { output, query, mutation, paramsCasing, paramsType, pathParamsType, parser, client: clientOptions, group } = ctx.options
 
     const pluginTs = driver.getPlugin(pluginTsName)
     if (!pluginTs) return null
@@ -30,64 +37,50 @@ export const queryGenerator = defineGenerator<PluginVueQuery>({
 
     const importPath = query ? query.importPath : '@tanstack/vue-query'
 
-    const baseName = resolver.resolveName(node.operationId)
-    const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
-    const queryName = transformName(`use${capitalize(baseName)}`, 'function', transformers)
-    const queryOptionsName = transformName(`${baseName}QueryOptions`, 'function', transformers)
-    const queryKeyName = transformName(`${baseName}QueryKey`, 'const', transformers)
-    const queryKeyTypeName = transformName(`${capitalize(baseName)}QueryKey`, 'type', transformers)
-    const clientName = transformName(baseName, 'function', transformers)
+    const queryName = resolver.resolveQueryName(node)
+    const queryOptionsName = resolver.resolveQueryOptionsName(node)
+    const queryKeyName = resolver.resolveQueryKeyName(node)
+    const queryKeyTypeName = resolver.resolveQueryKeyTypeName(node)
+    const clientName = resolver.resolveClientName(node)
 
     const meta = {
-      file: resolver.resolveFile({ name: queryName, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path }, { root, output, group }),
-      fileTs: tsResolver.resolveFile(
-        { name: node.operationId, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path },
-        { root, output: pluginTs.options?.output ?? output, group: pluginTs.options?.group },
-      ),
+      file: resolver.resolveFile(operationFileEntry(node, queryName), { root, output, group: group ?? undefined }),
+      fileTs: tsResolver.resolveFile(operationFileEntry(node, node.operationId), {
+        root,
+        output: pluginTs.options?.output ?? output,
+        group: pluginTs.options?.group ?? undefined,
+      }),
     }
 
-    const casedParams = ast.caseParams(node.parameters, paramsCasing)
-    const pathParams = casedParams.filter((p) => p.in === 'path')
-    const queryParams = casedParams.filter((p) => p.in === 'query')
-    const headerParams = casedParams.filter((p) => p.in === 'header')
-
-    const importedTypeNames = [
-      node.requestBody?.content?.[0]?.schema ? tsResolver.resolveDataName(node) : undefined,
-      tsResolver.resolveResponseName(node),
-      ...pathParams.map((p) => tsResolver.resolvePathParamsName(node, p)),
-      ...queryParams.map((p) => tsResolver.resolveQueryParamsName(node, p)),
-      ...headerParams.map((p) => tsResolver.resolveHeaderParamsName(node, p)),
-      ...node.responses.map((res) => tsResolver.resolveResponseStatusName(node, res.statusCode)),
-    ].filter((name): name is string => !!name && name !== queryKeyTypeName)
-
-    const pluginZod = parser === 'zod' ? driver.getPlugin(pluginZodName) : undefined
-    const zodResolver = pluginZod ? driver.getResolver(pluginZodName) : undefined
+    const importedTypeNames = resolveOperationTypeNames(node, tsResolver, {
+      paramsCasing,
+      exclude: [queryKeyTypeName],
+      order: 'body-response-first',
+    })
+
+    const pluginZod = parser === 'zod' ? driver.getPlugin(pluginZodName) : null
+    const zodResolver = pluginZod ? driver.getResolver(pluginZodName) : null
     const fileZod = zodResolver
-      ? zodResolver.resolveFile(
-          { name: node.operationId, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path },
-          { root, output: pluginZod?.options?.output ?? output, group: pluginZod?.options?.group },
-        )
-      : undefined
-    const zodSchemaNames =
-      zodResolver && parser === 'zod'
-        ? [zodResolver.resolveResponseName?.(node), node.requestBody?.content?.[0]?.schema ? zodResolver.resolveDataName?.(node) : undefined].filter(Boolean)
-        : []
+      ? zodResolver.resolveFile(operationFileEntry(node, node.operationId), {
+          root,
+          output: pluginZod?.options?.output ?? output,
+          group: pluginZod?.options?.group ?? undefined,
+        })
+      : null
+    const zodSchemaNames = resolveZodSchemaNames(node, zodResolver)
 
     const clientPlugin = driver.getPlugin(pluginClientName)
     const hasClientPlugin = clientPlugin?.name === pluginClientName
     const shouldUseClientPlugin = hasClientPlugin && clientOptions.clientType !== 'class'
-    const clientResolver = shouldUseClientPlugin ? driver.getResolver(pluginClientName) : undefined
+    const clientResolver = shouldUseClientPlugin ? driver.getResolver(pluginClientName) : null
 
     const clientFile = shouldUseClientPlugin
-      ? clientResolver?.resolveFile(
-          { name: node.operationId, extname: '.ts', tag: node.tags[0] ?? 'default', path: node.path },
-          {
-            root,
-            output: clientPlugin?.options?.output ?? output,
-            group: clientPlugin?.options?.group,
-          },
-        )
-      : undefined
+      ? clientResolver?.resolveFile(operationFileEntry(node, node.operationId), {
+          root,
+          output: clientPlugin?.options?.output ?? output,
+          group: clientPlugin?.options?.group ?? undefined,
+        })
+      : null
 
     const resolvedClientName = shouldUseClientPlugin ? (clientResolver?.resolveName(node.operationId) ?? clientName) : clientName
 
@@ -96,29 +89,27 @@ export const queryGenerator = defineGenerator<PluginVueQuery>({
         baseName={meta.file.baseName}
         path={meta.file.path}
         meta={meta.file.meta}
-        banner={resolver.resolveBanner(adapter.inputNode, { output, config })}
-        footer={resolver.resolveFooter(adapter.inputNode, { output, config })}
+        banner={resolver.resolveBanner(ctx.meta, { output, config, file: { path: meta.file.path, baseName: meta.file.baseName } })}
+        footer={resolver.resolveFooter(ctx.meta, { output, config, file: { path: meta.file.path, baseName: meta.file.baseName } })}
       >
-        {parser === 'zod' && fileZod && zodSchemaNames.length > 0 && (
-          <File.Import name={zodSchemaNames as string[]} root={meta.file.path} path={fileZod.path} />
-        )}
+        {fileZod && zodSchemaNames.length > 0 && <File.Import name={zodSchemaNames} root={meta.file.path} path={fileZod.path} />}
         {clientOptions.importPath ? (
           <>
-            {!shouldUseClientPlugin && <File.Import name={'fetch'} path={clientOptions.importPath} />}
+            {!shouldUseClientPlugin && <File.Import name={'client'} path={clientOptions.importPath} />}
             <File.Import name={['Client', 'RequestConfig', 'ResponseErrorConfig']} path={clientOptions.importPath} isTypeOnly />
             {clientOptions.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={clientOptions.importPath} isTypeOnly />}
           </>
         ) : (
           <>
-            {!shouldUseClientPlugin && <File.Import name={['fetch']} root={meta.file.path} path={path.resolve(root, '.kubb/fetch.ts')} />}
+            {!shouldUseClientPlugin && <File.Import name={['client']} root={meta.file.path} path={path.resolve(root, '.kubb/client.ts')} />}
             <File.Import
               name={['Client', 'RequestConfig', 'ResponseErrorConfig']}
               root={meta.file.path}
-              path={path.resolve(root, '.kubb/fetch.ts')}
+              path={path.resolve(root, '.kubb/client.ts')}
               isTypeOnly
             />
             {clientOptions.dataReturnType === 'full' && (
-              <File.Import name={['ResponseConfig']} root={meta.file.path} path={path.resolve(root, '.kubb/fetch.ts')} isTypeOnly />
+              <File.Import name={['ResponseConfig']} root={meta.file.path} path={path.resolve(root, '.kubb/client.ts')} isTypeOnly />
             )}
           </>
         )}

package/src/plugin.ts

@@ -1,20 +1,48 @@
 import path from 'node:path'
-import { camelCase } from '@internals/utils'
-import { ast, definePlugin, type Group } from '@kubb/core'
+import { createGroupConfig } from '@internals/shared'
+import { ast, definePlugin } from '@kubb/core'
 import { pluginClientName } from '@kubb/plugin-client'
 import { source as axiosClientSource } from '@kubb/plugin-client/templates/clients/axios.source'
 import { source as fetchClientSource } from '@kubb/plugin-client/templates/clients/fetch.source'
 import { source as configSource } from '@kubb/plugin-client/templates/config.source'
 import { pluginTsName } from '@kubb/plugin-ts'
 import { pluginZodName } from '@kubb/plugin-zod'
-import { MutationKey } from './components/MutationKey.tsx'
-import { QueryKey } from './components/QueryKey.tsx'
+import { mutationKeyTransformer } from '@internals/tanstack-query'
+import { queryKeyTransformer } from '@internals/tanstack-query'
 import { infiniteQueryGenerator, mutationGenerator, queryGenerator } from './generators'
 import { resolverVueQuery } from './resolvers/resolverVueQuery.ts'
 import type { PluginVueQuery } from './types.ts'
 
+/**
+ * Canonical plugin name for `@kubb/plugin-vue-query`. Used for driver lookups
+ * and cross-plugin dependency references.
+ */
 export const pluginVueQueryName = 'plugin-vue-query' satisfies PluginVueQuery['name']
 
+/**
+ * Generates one TanStack Query composable per OpenAPI operation for Vue's
+ * Composition API. Queries become `useFooQuery` (and optionally
+ * `useFooInfiniteQuery`); mutations become `useFooMutation`. Each composable
+ * is fully typed end to end.
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'kubb'
+ * import { pluginTs } from '@kubb/plugin-ts'
+ * import { pluginVueQuery } from '@kubb/plugin-vue-query'
+ *
+ * export default defineConfig({
+ *   input: { path: './petStore.yaml' },
+ *   output: { path: './src/gen' },
+ *   plugins: [
+ *     pluginTs(),
+ *     pluginVueQuery({
+ *       output: { path: './hooks' },
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
 export const pluginVueQuery = definePlugin<PluginVueQuery>((options) => {
   const {
     output = { path: 'hooks', barrelType: 'named' },
@@ -22,15 +50,14 @@ export const pluginVueQuery = definePlugin<PluginVueQuery>((options) => {
     exclude = [],
     include,
     override = [],
-    parser = 'client',
+    parser = false,
     infinite = false,
-    transformers = {},
     paramsType = 'inline',
     pathParamsType = paramsType === 'object' ? 'object' : options.pathParamsType || 'inline',
     mutation = {},
     query = {},
-    mutationKey = MutationKey.getTransformer,
-    queryKey = QueryKey.getTransformer,
+    mutationKey = mutationKeyTransformer,
+    queryKey = queryKeyTransformer,
     paramsCasing,
     client,
     resolver: userResolver,
@@ -41,33 +68,22 @@ export const pluginVueQuery = definePlugin<PluginVueQuery>((options) => {
   const clientName = client?.client ?? 'axios'
   const clientImportPath = client?.importPath ?? (!client?.bundle ? `@kubb/plugin-client/clients/${clientName}` : undefined)
 
-  const selectedGenerators = options.generators ?? [queryGenerator, infiniteQueryGenerator, mutationGenerator].filter(Boolean)
+  const selectedGenerators =
+    options.generators ??
+    [queryGenerator, infiniteQueryGenerator, mutationGenerator].filter((generator): generator is NonNullable<typeof generator> => Boolean(generator))
 
-  const groupConfig = group
-    ? ({
-        ...group,
-        name: group.name
-          ? group.name
-          : (ctx: { group: string }) => {
-              if (group.type === 'path') {
-                return `${ctx.group.split('/')[1]}`
-              }
-              return `${camelCase(ctx.group)}Controller`
-            },
-      } satisfies Group)
-    : undefined
+  const groupConfig = createGroupConfig(group, { suffix: 'Controller', honorName: true })
 
   return {
     name: pluginVueQueryName,
     options,
-    dependencies: [pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
+    dependencies: [pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter((dependency): dependency is string => Boolean(dependency)),
     hooks: {
       'kubb:plugin:setup'(ctx) {
         const resolver = userResolver ? { ...resolverVueQuery, ...userResolver } : resolverVueQuery
 
         ctx.setOptions({
           output,
-          transformers,
           client: {
             bundle: client?.bundle,
             baseURL: client?.baseURL,
@@ -99,9 +115,9 @@ export const pluginVueQuery = definePlugin<PluginVueQuery>((options) => {
             ? {
                 queryParam: 'id',
                 initialPageParam: 0,
-                cursorParam: undefined,
-                nextParam: undefined,
-                previousParam: undefined,
+                cursorParam: null,
+                nextParam: null,
+                previousParam: null,
                 ...infinite,
               }
             : false,
@@ -132,11 +148,11 @@ export const pluginVueQuery = definePlugin<PluginVueQuery>((options) => {
 
         if (client?.bundle && !hasClientPlugin && !clientImportPath) {
           ctx.injectFile({
-            baseName: 'fetch.ts',
-            path: path.resolve(root, '.kubb/fetch.ts'),
+            baseName: 'client.ts',
+            path: path.resolve(root, '.kubb/client.ts'),
             sources: [
               ast.createSource({
-                name: 'fetch',
+                name: 'client',
                 nodes: [ast.createText(clientName === 'fetch' ? fetchClientSource : axiosClientSource)],
                 isExportable: true,
                 isIndexable: true,

package/src/resolvers/resolverVueQuery.ts

@@ -2,18 +2,75 @@ import { camelCase } from '@internals/utils'
 import { defineResolver } from '@kubb/core'
 import type { PluginVueQuery } from '../types.ts'
 
+function capitalize(name: string): string {
+  return `${name.charAt(0).toUpperCase()}${name.slice(1)}`
+}
+
 /**
- * Naming convention resolver for Vue Query plugin.
+ * Default resolver used by `@kubb/plugin-vue-query`. Decides the names and
+ * file paths for every generated TanStack Query composable (`useFooQuery`,
+ * `useFooMutation`, `useFooInfiniteQuery`) and its companion helpers.
+ *
+ * Functions and files use camelCase; composables get the `use` prefix.
+ *
+ * @example Resolve composable and helper names
+ * ```ts
+ * import { resolverVueQuery } from '@kubb/plugin-vue-query'
  *
- * Provides default naming helpers using camelCase for functions and file paths.
+ * resolverVueQuery.resolveQueryName(operationNode)       // 'useGetPetById'
+ * resolverVueQuery.resolveQueryKeyName(operationNode)    // 'getPetByIdQueryKey'
+ * resolverVueQuery.resolveQueryOptionsName(operationNode) // 'getPetByIdQueryOptions'
+ * ```
  */
-export const resolverVueQuery = defineResolver<PluginVueQuery>((ctx) => ({
+export const resolverVueQuery = defineResolver<PluginVueQuery>(() => ({
   name: 'default',
   pluginName: 'plugin-vue-query',
   default(name, type) {
     return camelCase(name, { isFile: type === 'file' })
   },
   resolveName(name) {
-    return ctx.default(name, 'function')
+    return this.default(name, 'function')
+  },
+  resolvePathName(name, type) {
+    return this.default(name, type)
+  },
+  resolveQueryName(node) {
+    return `use${capitalize(this.resolveName(node.operationId))}`
+  },
+  resolveInfiniteQueryName(node) {
+    return `use${capitalize(this.resolveName(node.operationId))}Infinite`
+  },
+  resolveMutationName(node) {
+    return `use${capitalize(this.resolveName(node.operationId))}`
+  },
+  resolveQueryOptionsName(node) {
+    return `${this.resolveName(node.operationId)}QueryOptions`
+  },
+  resolveInfiniteQueryOptionsName(node) {
+    return `${this.resolveName(node.operationId)}InfiniteQueryOptions`
+  },
+  resolveQueryKeyName(node) {
+    return `${this.resolveName(node.operationId)}QueryKey`
+  },
+  resolveInfiniteQueryKeyName(node) {
+    return `${this.resolveName(node.operationId)}InfiniteQueryKey`
+  },
+  resolveMutationKeyName(node) {
+    return `${this.resolveName(node.operationId)}MutationKey`
+  },
+  resolveQueryKeyTypeName(node) {
+    return `${capitalize(this.resolveName(node.operationId))}QueryKey`
+  },
+  resolveInfiniteQueryKeyTypeName(node) {
+    return `${capitalize(this.resolveName(node.operationId))}InfiniteQueryKey`
+  },
+  resolveMutationTypeName(node) {
+    return capitalize(this.resolveName(node.operationId))
+  },
+  resolveClientName(node) {
+    return this.resolveName(node.operationId)
+  },
+  resolveInfiniteClientName(node) {
+    return `${this.resolveName(node.operationId)}Infinite`
   },
 }))