feat: add tanstack presets for React and Vue, including configuration, parser, and integration tests; update CLI to support new presets

Author: hairyf

packages/core/src/cli/init.ts

@@ -9,13 +9,15 @@ const logger = consola.withTag('genapi:init')
 
 const CONFIG = {
   presets: {
-    axios: { deps: ['axios'], schema: false },
-    fetch: { deps: [], schema: true },
-    ky: { deps: ['ky'], schema: false },
-    got: { deps: ['got'], schema: false },
-    ofetch: { deps: ['ofetch'], schema: true },
-    uni: { deps: ['@uni-helper/uni-network'], schema: false },
-  } as Record<string, { deps: string[], schema: boolean }>,
+    axios: { deps: ['axios'], schema: false, supportsJs: true },
+    fetch: { deps: [], schema: true, supportsJs: true },
+    ky: { deps: ['ky'], schema: false, supportsJs: true },
+    got: { deps: ['got'], schema: false, supportsJs: true },
+    ofetch: { deps: ['ofetch'], schema: true, supportsJs: true },
+    reactQuery: { deps: ['@tanstack/react-query'], schema: false, supportsJs: false },
+    uni: { deps: ['@uni-helper/uni-network'], schema: false, supportsJs: true },
+    vueQuery: { deps: ['@tanstack/vue-query'], schema: false, supportsJs: false },
+  } as Record<string, { deps: string[], schema: boolean, supportsJs?: boolean }>,
 }
 
 async function mandate<T>(promise: Promise<any>): Promise<T> {
@@ -35,18 +37,19 @@ export async function initCommand() {
     options: Object.keys(CONFIG.presets).map(v => ({ value: v, label: v })),
   }))
 
+  const presetConfig = CONFIG.presets[preset]
   const mode = await mandate<('ts' | 'js' | 'schema')>(select({
     message: 'Select mode:',
     options: [
       { value: 'ts', label: 'TS' },
-      { value: 'js', label: 'JS' },
-      ...(CONFIG.presets[preset].schema ? [{ value: 'schema', label: 'Schema' }] : []),
+      ...(presetConfig.supportsJs !== false ? [{ value: 'js', label: 'JS' }] : []),
+      ...(presetConfig.schema ? [{ value: 'schema', label: 'Schema' }] : []),
     ],
   }))
 
   const isTS = mode !== 'js'
   const fileName = `genapi.config.${isTS ? 'ts' : 'js'}`
-  const presetValue = `${preset}.${mode}`
+  const presetValue = presetConfig.supportsJs === false ? preset : `${preset}.${mode}`
   const content = isTS
     ? `import { defineConfig } from '@genapi/core'
 import { ${preset} } from '@genapi/presets'

packages/presets/package.json

@@ -27,7 +27,9 @@
     "./swag-ky-js": "./src/ky/js/index.ts",
     "./swag-ky-ts": "./src/ky/ts/index.ts",
     "./swag-ofetch-js": "./src/ofetch/js/index.ts",
-    "./swag-ofetch-ts": "./src/ofetch/ts/index.ts"
+    "./swag-ofetch-ts": "./src/ofetch/ts/index.ts",
+    "./react-query": "./src/react-query/index.ts",
+    "./vue-query": "./src/vue-query/index.ts"
   },
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -86,6 +88,14 @@
       "./swag-ofetch-ts": {
         "types": "./dist/ofetch/ts/index.d.mts",
         "default": "./dist/ofetch/ts/index.mjs"
+      },
+      "./reactQuery": {
+        "types": "./dist/react-query/index.d.mts",
+        "default": "./dist/react-query/index.mjs"
+      },
+      "./vueQuery": {
+        "types": "./dist/vue-query/index.d.mts",
+        "default": "./dist/vue-query/index.mjs"
       }
     }
   },

packages/presets/src/index.ts

@@ -3,6 +3,7 @@ import * as fetch from './fetch'
 import * as got from './got'
 import * as ky from './ky'
 import * as ofetch from './ofetch'
+import * as tanstackQuery from './tanstack'
 import * as uni from './uni'
 
 export {
@@ -11,11 +12,12 @@ export {
   got,
   ky,
   ofetch,
+  tanstackQuery,
   uni,
 }
 
 /**
- * Preset pipelines by HTTP client: axios, fetch, ky, got, ofetch, uni.
+ * Preset pipelines by HTTP client: axios, fetch, ky, got, ofetch, react-query, vue-query, uni.
  * Each key has `.ts` and `.js` (e.g. `presets.axios.ts`, `presets.axios.js`).
  */
 export default {
@@ -24,5 +26,6 @@ export default {
   got,
   ky,
   ofetch,
+  tanstackQuery,
   uni,
 }

packages/presets/src/tanstack/index.ts

@@ -0,0 +1,2 @@
+export { default as react } from './react'
+export { default as vue } from './vue'

packages/presets/src/tanstack/react/config/index.ts

@@ -0,0 +1,16 @@
+import type { ApiPipeline } from '@genapi/shared'
+import { config as _config } from '@genapi/pipeline'
+
+export function config(userConfig: ApiPipeline.Config): ApiPipeline.ConfigRead {
+  userConfig.meta = userConfig.meta || {}
+  userConfig.meta.import = userConfig.meta.import || {}
+
+  const configRead = _config(userConfig)
+
+  configRead.graphs.imports.push({
+    names: ['useQuery', 'useMutation'],
+    value: '@tanstack/react-query',
+  })
+
+  return configRead
+}

packages/presets/src/tanstack/react/index.ts

@@ -0,0 +1,26 @@
+import type { ApiPipeline } from '@genapi/shared'
+import pipeline, { compiler, dest, generate, original } from '@genapi/pipeline'
+
+import { config } from './config'
+import { parser } from './parser'
+
+function openapiPipeline(userConfig: ApiPipeline.Config) {
+  const process = pipeline(
+    userConfig => config(userConfig),
+    configRead => original(configRead),
+    configRead => parser(configRead),
+    configRead => compiler(configRead),
+    configRead => generate(configRead),
+    configRead => dest(configRead),
+  )
+  return process(userConfig)
+}
+export { compiler, config, dest, generate, original, parser }
+
+openapiPipeline.config = config
+openapiPipeline.original = original
+openapiPipeline.parser = parser
+openapiPipeline.compiler = compiler
+openapiPipeline.generate = generate
+openapiPipeline.dest = dest
+export default openapiPipeline

packages/presets/src/tanstack/react/parser/index.ts

@@ -0,0 +1,90 @@
+import {
+  createParser,
+  parseMethodMetadata,
+  parseMethodParameters,
+  transformBodyStringify,
+  transformFetchBody,
+  transformHeaderOptions,
+  transformParameters,
+  transformQueryParams,
+  transformUrlSyntax,
+} from '@genapi/parser'
+
+function hookName(fetcherName: string) {
+  return `use${fetcherName.charAt(0).toUpperCase()}${fetcherName.slice(1)}`
+}
+
+export const parser = createParser((config, { configRead, functions, interfaces }) => {
+  const { parameters, interfaces: attachInters, options } = parseMethodParameters(config)
+  let { name, description, url, responseType, body } = parseMethodMetadata(config)
+
+  interfaces.push(...attachInters)
+  const fetcherParams = [...parameters]
+  fetcherParams.push({
+    name: 'config',
+    type: 'RequestInit',
+    required: false,
+  })
+
+  if (config.method.toLowerCase() !== 'get')
+    options.unshift(['method', `"${config.method}"`])
+
+  transformHeaderOptions('body', { options, parameters })
+
+  options.push(['...', 'config'])
+
+  const { spaceResponseType } = transformParameters(parameters, {
+    syntax: 'typescript',
+    configRead,
+    description,
+    interfaces,
+    responseType,
+  })
+
+  transformBodyStringify('body', { options, parameters })
+  url = transformQueryParams('query', { body, options, url })
+  url = transformUrlSyntax(url, { baseURL: configRead.config.meta?.baseURL })
+  const fetchBody = transformFetchBody(url, options, spaceResponseType)
+
+  // 1. Fetcher function (same as fetch preset)
+  functions.push({
+    export: true,
+    async: true,
+    name,
+    description,
+    parameters: fetcherParams,
+    body: [
+      ...body,
+      ...fetchBody,
+    ],
+  })
+
+  // 2. Query/Mutation hook
+  const isRead = ['get', 'head'].includes(config.method.toLowerCase())
+  const hook = hookName(name)
+  const paramNames = fetcherParams.map(p => p.name).join(', ')
+
+  if (isRead) {
+    const queryKeyItems = `'${name}', ${paramNames}`
+    functions.push({
+      export: true,
+      name: hook,
+      description: description ? [...(Array.isArray(description) ? description : [description]), `@wraps ${name}`] : [`@wraps ${name}`],
+      parameters: fetcherParams,
+      body: [
+        `return useQuery({ queryKey: [${queryKeyItems}], queryFn: () => ${name}(${paramNames}) })`,
+      ],
+    })
+  }
+  else {
+    functions.push({
+      export: true,
+      name: hook,
+      description: description ? [...(Array.isArray(description) ? description : [description]), `@wraps ${name}`] : [`@wraps ${name}`],
+      parameters: [],
+      body: [
+        `return useMutation({ mutationFn: ${name} })`,
+      ],
+    })
+  }
+})

packages/presets/src/tanstack/vue/config/index.ts

@@ -0,0 +1,16 @@
+import type { ApiPipeline } from '@genapi/shared'
+import { config as _config } from '@genapi/pipeline'
+
+export function config(userConfig: ApiPipeline.Config): ApiPipeline.ConfigRead {
+  userConfig.meta = userConfig.meta || {}
+  userConfig.meta.import = userConfig.meta.import || {}
+
+  const configRead = _config(userConfig)
+
+  configRead.graphs.imports.push({
+    names: ['useQuery', 'useMutation'],
+    value: '@tanstack/vue-query',
+  })
+
+  return configRead
+}

packages/presets/src/tanstack/vue/index.ts

@@ -0,0 +1,26 @@
+import type { ApiPipeline } from '@genapi/shared'
+import pipeline, { compiler, dest, generate, original } from '@genapi/pipeline'
+
+import { config } from './config'
+import { parser } from './parser'
+
+function openapiPipeline(userConfig: ApiPipeline.Config) {
+  const process = pipeline(
+    userConfig => config(userConfig),
+    configRead => original(configRead),
+    configRead => parser(configRead),
+    configRead => compiler(configRead),
+    configRead => generate(configRead),
+    configRead => dest(configRead),
+  )
+  return process(userConfig)
+}
+export { compiler, config, dest, generate, original, parser }
+
+openapiPipeline.config = config
+openapiPipeline.original = original
+openapiPipeline.parser = parser
+openapiPipeline.compiler = compiler
+openapiPipeline.generate = generate
+openapiPipeline.dest = dest
+export default openapiPipeline

packages/presets/src/tanstack/vue/parser/index.ts

@@ -0,0 +1,88 @@
+import {
+  createParser,
+  parseMethodMetadata,
+  parseMethodParameters,
+  transformBodyStringify,
+  transformFetchBody,
+  transformHeaderOptions,
+  transformParameters,
+  transformQueryParams,
+  transformUrlSyntax,
+} from '@genapi/parser'
+
+function hookName(fetcherName: string) {
+  return `use${fetcherName.charAt(0).toUpperCase()}${fetcherName.slice(1)}`
+}
+
+export const parser = createParser((config, { configRead, functions, interfaces }) => {
+  const { parameters, interfaces: attachInters, options } = parseMethodParameters(config)
+  let { name, description, url, responseType, body } = parseMethodMetadata(config)
+
+  interfaces.push(...attachInters)
+  const fetcherParams = [...parameters]
+  fetcherParams.push({
+    name: 'config',
+    type: 'RequestInit',
+    required: false,
+  })
+
+  if (config.method.toLowerCase() !== 'get')
+    options.unshift(['method', `"${config.method}"`])
+
+  transformHeaderOptions('body', { options, parameters })
+
+  options.push(['...', 'config'])
+
+  const { spaceResponseType } = transformParameters(parameters, {
+    syntax: 'typescript',
+    configRead,
+    description,
+    interfaces,
+    responseType,
+  })
+
+  transformBodyStringify('body', { options, parameters })
+  url = transformQueryParams('query', { body, options, url })
+  url = transformUrlSyntax(url, { baseURL: configRead.config.meta?.baseURL })
+  const fetchBody = transformFetchBody(url, options, spaceResponseType)
+
+  functions.push({
+    export: true,
+    async: true,
+    name,
+    description,
+    parameters: fetcherParams,
+    body: [
+      ...body,
+      ...fetchBody,
+    ],
+  })
+
+  const isRead = ['get', 'head'].includes(config.method.toLowerCase())
+  const hook = hookName(name)
+  const paramNames = fetcherParams.map(p => p.name).join(', ')
+
+  if (isRead) {
+    const queryKeyItems = `'${name}', ${paramNames}`
+    functions.push({
+      export: true,
+      name: hook,
+      description: description ? [...(Array.isArray(description) ? description : [description]), `@wraps ${name}`] : [`@wraps ${name}`],
+      parameters: fetcherParams,
+      body: [
+        `return useQuery({ queryKey: [${queryKeyItems}], queryFn: () => ${name}(${paramNames}) })`,
+      ],
+    })
+  }
+  else {
+    functions.push({
+      export: true,
+      name: hook,
+      description: description ? [...(Array.isArray(description) ? description : [description]), `@wraps ${name}`] : [`@wraps ${name}`],
+      parameters: [],
+      body: [
+        `return useMutation({ mutationFn: ${name} })`,
+      ],
+    })
+  }
+})