feat: refactor Playground component to support dynamic file generation and update API response handling for improved file management

Author: hairyf

docs/.docs/.data/content/contents.sqlite

@@ -32,6 +32,7 @@
         <div
           class="px-4 py-3 border-b border-[var(--ui-border)] bg-[var(--ui-bg-muted)] flex items-center font-medium text-sm flex-shrink-0">
           <Tabs
+            v-if="tabs.length"
             v-model="activeTab"
             :tabs="tabs"
           />
@@ -100,8 +101,10 @@ const swaggerJson = ref(`{
 
 const selectedPreset = ref('axios')
 const selectedMode = ref('ts')
-const activeTab = ref<'main' | 'type'>('main')
-const generatedCode = ref<{ main?: string; type?: string }>({})
+/** 当前选中的文件名，如 index.ts */
+const activeTab = ref('index.ts')
+/** 接口返回的文件列表，main 为 index.ts，type 为 index.type.ts 等 */
+const generatedFiles = ref<{ filename: string; code: string }[]>([])
 const highlighter = ref<Highlighter | null>(null)
 
 const isTanstackPreset = computed(() => selectedPreset.value === 'tanstackQuery')
@@ -136,23 +139,16 @@ const modeOptions = computed(() => {
   return options
 })
 
-const tabs = computed(() => {
-  const items = [
-    { value: 'main', label: 'index.ts' },
-  ]
-  if (generatedCode.value.type) {
-    items.push({ value: 'type', label: 'index.type.ts' })
-  }
-  return items
-})
+const tabs = computed(() =>
+  generatedFiles.value.map(file => ({
+    value: file.filename,
+    label: file.filename,
+  })),
+)
 
-const activeCode = computed(() => {
-  if (activeTab.value === 'main') {
-    return generatedCode.value.main || ''
-  } else {
-    return generatedCode.value.type || ''
-  }
-})
+const activeCode = computed(() =>
+  generatedFiles.value.find(f => f.filename === activeTab.value)?.code ?? '',
+)
 
 const jsonHighlighted = computed(() => {
   if (!highlighter.value || !swaggerJson.value.trim()) {
@@ -168,7 +164,8 @@ const codeHighlighted = computed(() => {
   if (!highlighter.value || !activeCode.value)
     return ''
   const isTsLike = ['ts', 'react', 'vue'].includes(selectedMode.value)
-  const lang = activeTab.value === 'type' ? 'typescript' : (isTsLike ? 'typescript' : 'javascript')
+  const isTypeFile = activeTab.value.endsWith('.type.ts')
+  const lang = isTypeFile ? 'typescript' : (isTsLike ? 'typescript' : 'javascript')
   return highlighter.value.codeToHtml(activeCode.value, {
     lang,
     theme: theme.value,
@@ -203,7 +200,7 @@ async function generateCode() {
 
   JSON.parse(swaggerJson.value) // validate JSON
 
-  const response = await $fetch<{ main?: string; type?: string; error?: string }>('/api/generate', {
+  const response = await $fetch<{ files?: { filename: string; code: string }[]; error?: string }>('/api/generate', {
     method: 'POST',
     body: {
       swagger: swaggerJson.value,
@@ -212,25 +209,18 @@ async function generateCode() {
     },
   })
 
-  if (response.error) {
+  if (response.error || !response.files?.length) {
     return
   }
 
-  generatedCode.value = {
-    main: response.main || '',
-    type: response.type || '',
-  }
-
-  // If type file exists, show main file by default
-  if (generatedCode.value.main) {
-    activeTab.value = 'main'
-  }
+  generatedFiles.value = response.files
+  activeTab.value = response.files[0].filename
 }
 
 function handleJsonChange() {
   // Auto-generate code
   if (!swaggerJson.value.trim()) {
-    generatedCode.value = {}
+    generatedFiles.value = []
     return
   }
   debouncedGenerateCode()

docs/.docs/components/Playground.vue

@@ -1,4 +1,5 @@
 import type { ApiPipeline } from '@genapi/core'
+import path from 'node:path'
 import { defineConfig } from '@genapi/core'
 import presets from '@genapi/presets'
 import pPipe from 'p-pipe'
@@ -34,22 +35,28 @@ export default defineEventHandler(async (event) => {
     configRead => generate(configRead, { printWidth: 80 }),
   )
 
+  // TanStack Query 需要三文件：main(hooks)、api(apis)、type(types)，且 main 引用 api、api 引用 type
+  const isTanstackQuery = body.preset === 'tanstackQuery'
+  const output: { main: string, type?: string | false, api?: string } = isTanstackQuery
+    ? { main: 'index.ts', type: 'index.type.ts', api: 'index.api.ts' }
+    : {
+        main: 'index.ts',
+        type: body.mode === 'ts' ? 'index.type.ts' : false as const,
+      }
+
   const apiConfig = defineConfig({
     preset: presetPipeline,
     input: { json: body.swagger },
-    output: {
-      main: 'index.ts',
-      type: body.mode === 'ts' ? 'index.type.ts' : false,
-    },
+    output,
   })
 
   const configRead = await runPipeline(apiConfig) as ApiPipeline.ConfigRead
 
-  const mainOutput = configRead.outputs.find(o => o.type === 'request')
-  const typeOutput = configRead.outputs.find(o => o.type === 'typings')
+  // pipeline 的 output.type 为 'main' | 'type' | 其他 key，不是 'request'/'typings'
+  const files = configRead.outputs.map(output => ({
+    filename: path.basename(output.path),
+    code: output.code ?? '',
+  }))
 
-  return {
-    main: mainOutput?.code || '',
-    type: typeOutput?.code || '',
-  }
+  return { files }
 })

docs/.docs/server/api/generate.ts

@@ -13,7 +13,7 @@ export function ensureQueryOutput(userConfig: ApiPipeline.Config) {
     out.api = out.api ?? (typeof out.main === 'string' ? out.main.replace(/index\.(ts|js)$/, 'index.api.$1') : 'src/api/index.api.ts')
 }
 
-/** main import api file (api.xxx reference); api import type file (Types reference) */
+/** main import api file (apis.xxx reference); api import type file (Types reference) */
 export function addApiImportToMain(configRead: ApiPipeline.ConfigRead) {
   const mainOut = configRead.outputs.find(o => o.type === 'main')
   const apiOut = configRead.outputs.find(o => o.type === 'api')
@@ -22,7 +22,7 @@ export function addApiImportToMain(configRead: ApiPipeline.ConfigRead) {
   if (mainOut && apiOut) {
     const rel = path.relative(path.dirname(mainOut.path), apiOut.path).replace(/\.(ts|js)$/, '')
     const value = (rel.startsWith('.') ? rel : `./${rel}`).replace(/\\/g, '/')
-    imports.add('main', { value, namespace: true, name: 'api' })
+    imports.add('main', { value, namespace: true, name: 'apis' })
   }
   if (apiOut && typeOut) {
     const rel = path.relative(path.dirname(apiOut.path), typeOut.path).replace(/\.(ts|js)$/, '')

packages/presets/src/_shared/query/config.ts

@@ -49,7 +49,7 @@ export function createQueryParser() {
     url = transformUrlSyntax(url, { baseURL: configRead.config.meta?.baseURL })
     const fetchBody = transformFetchBody(url, optList, spaceResponseType)
 
-    const fetcherRef = `api.${name}`
+    const fetcherRef = `apis.${name}`
     functions.add('api', {
       export: true,
       async: true,
@@ -67,7 +67,7 @@ export function createQueryParser() {
     const paramNames = fetcherParams.map(p => p.name).join(', ')
 
     if (isRead) {
-      const keyItems = `'${name}', ${paramNames}`
+      const keyItems = `${fetcherRef}.name, ${paramNames}`
       functions.add('main', {
         export: true,
         name: hook,

packages/presets/src/_shared/query/parser.ts

@@ -36,7 +36,7 @@ describe('tanstack/react config', () => {
     expect(main?.path).toMatch(/[\\/]src[\\/]api[\\/]index\.ts$/)
     expect(api?.path).toMatch(/[\\/]src[\\/]api[\\/]index\.api\.ts$/)
     expect(type?.path).toMatch(/[\\/]src[\\/]api[\\/]index\.type\.ts$/)
-    expect(configRead.graphs.scopes.main.imports.some(i => i.name === 'Api')).toBe(true)
+    expect(configRead.graphs.scopes.main.imports.some(i => i.name === 'apis')).toBe(true)
     expect(configRead.graphs.scopes.api?.imports.some(i => i.name === 'Types')).toBe(true)
   })