@kubb/plugin-swr 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/components/Query.tsx

@@ -1,290 +1,112 @@
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { Parser, File, Function, useApp } from '@kubb/react'
-import { pluginTsName } from '@kubb/plugin-ts'
-import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getASTParams, getComments } from '@kubb/plugin-oas/utils'
-import { pluginZodName } from '@kubb/plugin-zod'
-
-import { QueryOptions } from './QueryOptions.tsx'
-import { SchemaType } from './SchemaType.tsx'
+import { URLPath } from '@kubb/core/utils'
+import { File, Function, FunctionParams } from '@kubb/react'
 
+import { type Operation, isOptional } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
 import type { ReactNode } from 'react'
-import type { FileMeta, PluginSwr } from '../types.ts'
+import type { PluginSwr } from '../types.ts'
+import { QueryOptions } from './QueryOptions.tsx'
 
-type TemplateProps = {
+type Props = {
   /**
    * Name of the function
    */
   name: string
-  /**
-   * Parameters/options/props that need to be used
-   */
-  params: string
-  /**
-   * Generics that needs to be added for TypeScript
-   */
-  generics?: string
-  /**
-   * ReturnType(see async for adding Promise type)
-   */
-  returnType?: string
-  /**
-   * Options for JSdocs
-   */
-  JSDoc?: {
-    comments: string[]
-  }
-  hook: {
-    name: string
-    generics?: string
-    queryOptions: string
-  }
-  client: {
-    path: URLPath
-    withQueryParams: boolean
-  }
+  queryOptionsName: string
+  typeSchemas: OperationSchemas
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginSwr['resolvedOptions']['client']['dataReturnType']
+  operation: Operation
 }
 
-function Template({ name, generics, returnType, params, JSDoc, hook, client }: TemplateProps): ReactNode {
-  if (client.withQueryParams) {
-    return (
-      <>
-        <Function name={name} export generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
-          {`
-         const { query: queryOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
-
-         const url = ${client.path.template}
-         const query = ${hook.name}<${hook.generics}>(
-          shouldFetch ? [url, params]: null,
-          {
-            ...${hook.queryOptions},
-            ...queryOptions
-          }
-         )
+type GetParamsProps = {
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginSwr['resolvedOptions']['client']['dataReturnType']
 
-         return query
-         `}
-        </Function>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <Function name={name} export generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
-        {`
-       const { query: queryOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
-
-       const url = ${client.path.template}
-       const query = ${hook.name}<${hook.generics}>(
-        shouldFetch ? url : null,
-        {
-          ...${hook.queryOptions},
-          ...queryOptions
-        }
-       )
-
-       return query
-       `}
-      </Function>
-    </>
-  )
-}
-
-const defaultTemplates = {
-  default: Template,
-} as const
-
-type Props = {
-  factory: {
-    name: string
-  }
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  Template?: React.ComponentType<TemplateProps>
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  QueryOptionsTemplate?: React.ComponentType<React.ComponentProps<typeof QueryOptions.templates.default>>
+  typeSchemas: OperationSchemas
 }
 
-export function Query({ factory, Template = defaultTemplates.default, QueryOptionsTemplate = QueryOptions.templates.default }: Props): ReactNode {
-  const {
-    pluginManager,
-    plugin: {
-      key: pluginKey,
-      options: { dataReturnType },
-    },
-  } = useApp<PluginSwr>()
-
-  const operation = useOperation()
-  const { getSchemas, getName } = useOperationManager()
-
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const zodSchemas = getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' })
-
-  const name = getName(operation, { type: 'function' })
+function getParams({ pathParamsType, dataReturnType, typeSchemas }: GetParamsProps) {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
 
-  const queryOptionsName = pluginManager.resolveName({
-    name: `${factory.name}QueryOptions`,
-    pluginKey,
-  })
-  const generics = new FunctionParams()
-  const params = new FunctionParams()
-  const queryParams = new FunctionParams()
-  const client = {
-    method: operation.method,
-    path: new URLPath(operation.path),
-    withQueryParams: !!schemas.queryParams?.name,
-    withData: !!schemas.request?.name,
-    withPathParams: !!schemas.pathParams?.name,
-    withHeaders: !!schemas.headerParams?.name,
-  }
-
-  const resultGenerics = ['TData', `${factory.name}["error"]`]
-
-  generics.add([{ type: 'TData', default: `${factory.name}["response"]` }])
-
-  const queryOptionsGenerics = ['TData']
-
-  params.add([
-    ...getASTParams(schemas.pathParams, { typed: true }),
-    {
-      name: 'params',
-      type: `${factory.name}['queryParams']`,
-      enabled: client.withQueryParams,
-      required: false,
+  return FunctionParams.factory({
+    pathParams: {
+      mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      children: getPathParams(typeSchemas.pathParams, { typed: true }),
     },
-    {
-      name: 'headers',
-      type: `${factory.name}['headerParams']`,
-      enabled: client.withHeaders,
-      required: false,
-    },
-    {
-      name: 'options',
-      required: false,
-      type: `{
-        query?: SWRConfiguration<${resultGenerics.join(', ')}>,
-        client?: ${factory.name}['client']['parameters'],
-        shouldFetch?: boolean,
-      }`,
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+    options: {
+      type: `
+{
+  query?: SWRConfiguration<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'unknown'].join(', ')}>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'},
+  shouldFetch?: boolean,
+}
+`,
       default: '{}',
     },
-  ])
-
-  queryParams.add([
-    ...getASTParams(schemas.pathParams, { typed: false }),
-    {
-      name: 'params',
-      enabled: client.withQueryParams,
-      required: false,
-    },
-    {
-      name: 'headers',
-      enabled: client.withHeaders,
-      required: false,
-    },
-    {
-      name: 'clientOptions',
-      required: false,
-    },
-  ])
-
-  const hook = {
-    name: 'useSWR',
-    generics: [...resultGenerics, client.withQueryParams ? '[typeof url, typeof params] | null' : 'typeof url | null'].join(', '),
-    queryOptions: `${queryOptionsName}<${queryOptionsGenerics.join(', ')}>(${queryParams.toString()})`,
-  }
-
-  return (
-    <>
-      <QueryOptions factory={factory} Template={QueryOptionsTemplate} dataReturnType={dataReturnType} />
-
-      <Template
-        name={name}
-        generics={generics.toString()}
-        JSDoc={{ comments: getComments(operation) }}
-        client={client}
-        hook={hook}
-        params={params.toString()}
-        returnType={`SWRResponse<${resultGenerics.join(', ')}>`}
-      />
-    </>
-  )
-}
-
-type FileProps = {
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  templates?: {
-    query: typeof defaultTemplates
-    queryOptions: typeof QueryOptions.templates
-  }
+  })
 }
 
-Query.File = function ({ templates }: FileProps): ReactNode {
-  const {
-    pluginManager,
-    plugin: {
-      options: {
-        extName,
-        client: { importPath },
-        parser,
-      },
-    },
-  } = useApp<PluginSwr>()
-  const { getSchemas, getFile, getName } = useOperationManager()
-  const operation = useOperation()
-
-  const file = getFile(operation)
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const zodSchemas = getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' })
-  const fileType = getFile(operation, { pluginKey: [pluginTsName] })
-  const fileZodSchemas = getFile(operation, {
-    pluginKey: [pluginZodName],
+export function Query({ name, typeSchemas, queryOptionsName, operation, dataReturnType, pathParamsType }: Props): ReactNode {
+  const path = new URLPath(operation.path)
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const hookGenerics = [TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'unknown', 'Key']
+  const params = getParams({
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
   })
 
-  const factoryName = getName(operation, { type: 'type' })
+  const queryOptionsParams = QueryOptions.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
 
-  const Template = templates?.query.default || defaultTemplates.default
-  const QueryOptionsTemplate = templates?.queryOptions.default || QueryOptions.templates.default
-  const factory = {
-    name: factoryName,
-  }
+  //fixed name, see Query.getParams and params
+  const swrKey = [path.template, typeSchemas.queryParams?.name ? 'params' : undefined].filter(Boolean)
 
   return (
-    <Parser language="typescript">
-      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
-        {parser === 'zod' && <File.Import extName={extName} name={[zodSchemas.response.name]} root={file.path} path={fileZodSchemas.path} />}
-        <File.Import name="useSWR" path="swr" />
-        <File.Import name={['SWRConfiguration', 'SWRResponse']} path="swr" isTypeOnly />
-        <File.Import name={'client'} path={importPath} />
-        <File.Import name={['ResponseConfig']} path={importPath} isTypeOnly />
-        <File.Import
-          extName={extName}
-          name={[
-            schemas.request?.name,
-            schemas.response.name,
-            schemas.pathParams?.name,
-            schemas.queryParams?.name,
-            schemas.headerParams?.name,
-            ...(schemas.statusCodes?.map((item) => item.name) || []),
-          ].filter(Boolean)}
-          root={file.path}
-          path={fileType.path}
-          isTypeOnly
-        />
+    <File.Source name={name} isExportable isIndexable>
+      <Function
+        name={name}
+        export
+        params={params.toConstructor()}
+        JSDoc={{
+          comments: getComments(operation),
+        }}
+      >
+        {`
+       const { query: queryOptions, client: config = {}, shouldFetch = true } = options ?? {}
 
-        <File.Source>
-          <SchemaType factory={factory} />
-          <Query factory={factory} Template={Template} QueryOptionsTemplate={QueryOptionsTemplate} />
-        </File.Source>
-      </File>
-    </Parser>
+       const swrKey = [${swrKey.join(', ')}] as const
+       return useSWR<${hookGenerics.join(', ')}>(
+        shouldFetch ? swrKey : null,
+        {
+          ...${queryOptionsName}(${queryOptionsParams.toCall()})
+          ...queryOptions
+        }
+       )
+       `}
+      </Function>
+    </File.Source>
   )
 }
-
-Query.templates = defaultTemplates

package/src/components/QueryOptions.tsx

@@ -1,197 +1,76 @@
-import transformers from '@kubb/core/transformers'
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getASTParams } from '@kubb/plugin-oas/utils'
-import { Function, useApp } from '@kubb/react'
-import { pluginZodName } from '@kubb/plugin-zod'
+import { getPathParams } from '@kubb/plugin-oas/utils'
+import { File, Function, FunctionParams } from '@kubb/react'
 
-import type { HttpMethod } from '@kubb/oas'
 import type { ReactNode } from 'react'
 import type { PluginSwr } from '../types.ts'
-import { pluginTsName } from '@kubb/plugin-ts'
 
-type TemplateProps = {
-  /**
-   * Name of the function
-   */
-  name: string
-  /**
-   * Parameters/options/props that need to be used
-   */
-  params: string
-  /**
-   * Generics that needs to be added for TypeScript
-   */
-  generics?: string
-  /**
-   * ReturnType(see async for adding Promise type)
-   */
-  returnType?: string
-  /**
-   * Options for JSdocs
-   */
-  JSDoc?: {
-    comments: string[]
-  }
-  client: {
-    generics: string
-    method: HttpMethod
-    path: URLPath
-    withQueryParams: boolean
-    withPathParams: boolean
-    withData: boolean
-    withHeaders: boolean
-    contentType: string
-  }
-  dataReturnType: NonNullable<PluginSwr['options']['dataReturnType']>
-  parser: string | undefined
-}
-
-function Template({ name, params, generics, returnType, JSDoc, client, dataReturnType, parser }: TemplateProps): ReactNode {
-  const isFormData = client.contentType === 'multipart/form-data'
-  const headers = [
-    client.contentType !== 'application/json' ? `'Content-Type': '${client.contentType}'` : undefined,
-    client.withHeaders ? '...headers' : undefined,
-  ]
-    .filter(Boolean)
-    .join(', ')
-
-  const clientOptions = [
-    `method: "${client.method}"`,
-    `url: ${client.path.template}`,
-    client.withQueryParams ? 'params' : undefined,
-    client.withData && !isFormData ? 'data' : undefined,
-    client.withData && isFormData ? 'data: formData' : undefined,
-    headers.length ? `headers: { ${headers}, ...options.headers }` : undefined,
-    '...options',
-  ].filter(Boolean)
-
-  const resolvedClientOptions = `${transformers.createIndent(4)}${clientOptions.join(`,\n${transformers.createIndent(4)}`)}`
-
-  let returnRes = parser ? `return ${parser}(res.data)` : 'return res.data'
-
-  if (dataReturnType === 'full') {
-    returnRes = parser ? `return {...res, data: ${parser}(res.data)}` : 'return res'
-  }
-
-  const formData = isFormData
-    ? `
-   const formData = new FormData()
-   if(data) {
-    Object.keys(data).forEach((key) => {
-      const value = data[key];
-      if (typeof key === "string" && (typeof value === "string" || value instanceof Blob)) {
-        formData.append(key, value);
-      }
-    })
-   }
-  `
-    : undefined
-
-  return (
-    <Function name={name} export generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
-      {`
-      return {
-        fetcher: async () => {
-          ${formData || ''}
-          const res = await client<${client.generics}>({
-            ${resolvedClientOptions}
-          })
-
-         ${returnRes}
-        },
-      }
-
-       `}
-    </Function>
-  )
-}
-
-const defaultTemplates = {
-  default: Template,
-} as const
+import { isOptional } from '@kubb/oas'
+import { Client } from '@kubb/plugin-client/components'
+import type { OperationSchemas } from '@kubb/plugin-oas'
 
 type Props = {
-  factory: {
-    name: string
-  }
-  dataReturnType: NonNullable<PluginSwr['options']['dataReturnType']>
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  Template?: React.ComponentType<TemplateProps>
+  name: string
+  clientName: string
+  typeSchemas: OperationSchemas
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
 }
 
-export function QueryOptions({ factory, dataReturnType, Template = defaultTemplates.default }: Props): ReactNode {
-  const {
-    pluginManager,
-    plugin: {
-      key: pluginKey,
-      options: { parser },
-    },
-  } = useApp<PluginSwr>()
-  const { getSchemas } = useOperationManager()
-  const operation = useOperation()
-
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const zodSchemas = getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' })
-  const name = pluginManager.resolveName({
-    name: `${factory.name}QueryOptions`,
-    pluginKey,
-  })
-  const contentType = operation.getContentType()
-
-  const generics = new FunctionParams()
-  const params = new FunctionParams()
-
-  const clientGenerics = ['TData', `${factory.name}['error']`]
-  const resultGenerics = ['TData', `${factory.name}['error']`]
-
-  generics.add([{ type: 'TData', default: `${factory.name}['response']` }])
+type GetParamsProps = {
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
 
-  params.add([
-    ...getASTParams(schemas.pathParams, { typed: true }),
-    {
-      name: 'params',
-      type: `${factory.name}['queryParams']`,
-      enabled: !!schemas.queryParams?.name,
-      required: false,
-    },
-    {
-      name: 'headers',
-      type: `${factory.name}['headerParams']`,
-      enabled: !!schemas.headerParams?.name,
-      required: false,
+function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
+  return FunctionParams.factory({
+    pathParams: {
+      mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      children: getPathParams(typeSchemas.pathParams, { typed: true }),
     },
-    {
-      name: 'options',
-      type: `${factory.name}['client']['parameters']`,
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+    config: {
+      type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
       default: '{}',
     },
-  ])
+  })
+}
 
-  const client = {
-    withQueryParams: !!schemas.queryParams?.name,
-    withData: !!schemas.request?.name,
-    withPathParams: !!schemas.pathParams?.name,
-    withHeaders: !!schemas.headerParams?.name,
-    method: operation.method,
-    path: new URLPath(operation.path),
-    generics: clientGenerics.join(', '),
-    contentType,
-  }
+export function QueryOptions({ name, clientName, typeSchemas, pathParamsType }: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const clientParams = Client.getParams({
+    typeSchemas,
+    pathParamsType,
+  })
 
   return (
-    <Template
-      name={name}
-      params={params.toString()}
-      generics={generics.toString()}
-      returnType={`SWRConfiguration<${resultGenerics.join(', ')}>`}
-      client={client}
-      dataReturnType={dataReturnType}
-      parser={parser === 'zod' ? `${zodSchemas.response.name}.parse` : undefined}
-    />
+    <File.Source name={name} isExportable isIndexable>
+      <Function name={name} export params={params.toConstructor()}>
+        {`
+      return {
+        fetcher: async () => {
+          return ${clientName}(${clientParams.toCall()})
+        },
+      }
+      `}
+      </Function>
+    </File.Source>
   )
 }
 
-QueryOptions.templates = defaultTemplates
+QueryOptions.getParams = getParams

package/src/generators/__snapshots__/clientDataReturnTypeFull.ts

@@ -0,0 +1,40 @@
+import client from "@kubb/plugin-client/client";
+import useSWR from "swr";
+import type { RequestConfig, ResponseConfig } from "@kubb/plugin-client/client";
+import type { Key, SWRConfiguration } from "swr";
+
+ /**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+async function findPetsByTags(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+    const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: "get", url: `/pet/findByTags`, params, ...config });
+    return res;
+}
+
+ export function findPetsByTagsQueryOptions(params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+    return {
+        fetcher: async () => {
+            return findPetsByTags(params, config);
+        },
+    };
+}
+
+ /**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export function useFindPetsByTags(params?: FindPetsByTagsQueryParams, options: {
+    query?: SWRConfiguration<ResponseConfig<FindPetsByTagsQueryResponse>, FindPetsByTags400>;
+    client?: Partial<RequestConfig>;
+    shouldFetch?: boolean;
+} = {}) {
+    const { query: queryOptions, client: config = {}, shouldFetch = true } = options ?? {};
+    const swrKey = [`/pet/findByTags`, params] as const;
+    return useSWR<ResponseConfig<FindPetsByTagsQueryResponse>, FindPetsByTags400, Key>(shouldFetch ? swrKey : null, {
+        ...findPetsByTagsQueryOptions(params, config),
+        ...queryOptions
+    });
+}