@kubb/plugin-swr 3.0.0-alpha.0

package/src/components/Query.tsx

@@ -0,0 +1,290 @@
+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 type { ReactNode } from 'react'
+import type { FileMeta, PluginSwr } from '../types.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[]
+  }
+  hook: {
+    name: string
+    generics?: string
+    queryOptions: string
+  }
+  client: {
+    path: URLPath
+    withQueryParams: boolean
+  }
+}
+
+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
+          }
+         )
+
+         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>>
+}
+
+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' })
+
+  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,
+    },
+    {
+      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,
+      }`,
+      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],
+  })
+
+  const factoryName = getName(operation, { type: 'type' })
+
+  const Template = templates?.query.default || defaultTemplates.default
+  const QueryOptionsTemplate = templates?.queryOptions.default || QueryOptions.templates.default
+  const factory = {
+    name: factoryName,
+  }
+
+  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>
+          <SchemaType factory={factory} />
+          <Query factory={factory} Template={Template} QueryOptionsTemplate={QueryOptionsTemplate} />
+        </File.Source>
+      </File>
+    </Parser>
+  )
+}
+
+Query.templates = defaultTemplates

package/src/components/QueryOptions.tsx

@@ -0,0 +1,197 @@
+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 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
+
+type Props = {
+  factory: {
+    name: string
+  }
+  dataReturnType: NonNullable<PluginSwr['options']['dataReturnType']>
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<TemplateProps>
+}
+
+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']` }])
+
+  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,
+    },
+    {
+      name: 'options',
+      type: `${factory.name}['client']['parameters']`,
+      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,
+  }
+
+  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}
+    />
+  )
+}
+
+QueryOptions.templates = defaultTemplates

package/src/components/SchemaType.tsx

@@ -0,0 +1,59 @@
+import { Type, useApp } from '@kubb/react'
+
+import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
+import type { ReactNode } from 'react'
+import type { PluginSwr } from '../types.ts'
+import { pluginTsName } from '@kubb/plugin-ts'
+
+type Props = {
+  factory: {
+    name: string
+  }
+}
+
+export function SchemaType({ factory }: Props): ReactNode {
+  const {
+    plugin: {
+      options: { dataReturnType },
+    },
+  } = useApp<PluginSwr>()
+  const { getSchemas } = useOperationManager()
+  const operation = useOperation()
+
+  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
+
+  const [TData, TError, TRequest, TPathParams, TQueryParams, THeaderParams, TResponse] = [
+    schemas.response.name,
+    schemas.errors?.map((item) => item.name).join(' | ') || 'never',
+    schemas.request?.name || 'never',
+    schemas.pathParams?.name || 'never',
+    schemas.queryParams?.name || 'never',
+    schemas.headerParams?.name || 'never',
+    schemas.response.name,
+  ]
+
+  const clientType = `${factory.name}Client`
+
+  return (
+    <>
+      <Type name={clientType}>{`typeof client<${TResponse}, ${TError}, ${TRequest}>`}</Type>
+      <Type name={factory.name}>
+        {`
+        {
+          data: ${TData}
+          error: ${TError}
+          request: ${TRequest}
+          pathParams: ${TPathParams}
+          queryParams: ${TQueryParams}
+          headerParams: ${THeaderParams}
+          response: ${dataReturnType === 'data' ? TData : `Awaited<ReturnType<${clientType}>>`}
+          client: {
+            parameters: Partial<Parameters<${clientType}>[0]>
+            return: Awaited<ReturnType<${clientType}>>
+          }
+        }
+        `}
+      </Type>
+    </>
+  )
+}

package/src/components/__snapshots__/Mutation/Pets.ts

@@ -0,0 +1,42 @@
+type CreatePetsClient = typeof client<CreatePetsMutationResponse, never, CreatePetsMutationRequest>
+type CreatePets = {
+  data: CreatePetsMutationResponse
+  error: never
+  request: CreatePetsMutationRequest
+  pathParams: never
+  queryParams: never
+  headerParams: never
+  response: CreatePetsMutationResponse
+  client: {
+    parameters: Partial<Parameters<CreatePetsClient>[0]>
+    return: Awaited<ReturnType<CreatePetsClient>>
+  }
+}
+
+/**
+ * @summary Create a pet
+ * @link /pets
+ */
+export function useCreatePets(options?: {
+  mutation?: SWRMutationConfiguration<CreatePets['response'], CreatePets['error']>
+  client?: CreatePets['client']['parameters']
+  shouldFetch?: boolean
+}): SWRMutationResponse<CreatePets['response'], CreatePets['error']> {
+  const { mutation: mutationOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
+
+  const url = `/pets` as const
+  return useSWRMutation<CreatePets['response'], CreatePets['error'], typeof url | null>(
+    shouldFetch ? url : null,
+    async (_url, { arg: data }) => {
+      const res = await client<CreatePets['data'], CreatePets['error'], CreatePets['request']>({
+        method: 'post',
+        url,
+        data,
+        ...clientOptions,
+      })
+
+      return res.data
+    },
+    mutationOptions,
+  )
+}

package/src/components/__snapshots__/Query/showPetById.ts

@@ -0,0 +1,55 @@
+type ShowPetByIdClient = typeof client<ShowPetByIdQueryResponse, never, never>
+type ShowPetById = {
+  data: ShowPetByIdQueryResponse
+  error: never
+  request: never
+  pathParams: ShowPetByIdPathParams
+  queryParams: never
+  headerParams: never
+  response: ShowPetByIdQueryResponse
+  client: {
+    parameters: Partial<Parameters<ShowPetByIdClient>[0]>
+    return: Awaited<ReturnType<ShowPetByIdClient>>
+  }
+}
+
+export function ShowPetByIdQueryOptions<TData = ShowPetById['response']>(
+  petId: ShowPetByIdPathParams['petId'],
+  testId: ShowPetByIdPathParams['testId'],
+  options: ShowPetById['client']['parameters'] = {},
+): SWRConfiguration<TData, ShowPetById['error']> {
+  return {
+    fetcher: async () => {
+      const res = await client<TData, ShowPetById['error']>({
+        method: 'get',
+        url: `/pets/${petId}`,
+        ...options,
+      })
+
+      return res.data
+    },
+  }
+}
+/**
+ * @summary Info for a specific pet
+ * @link /pets/:petId
+ */
+export function useShowPetById<TData = ShowPetById['response']>(
+  petId: ShowPetByIdPathParams['petId'],
+  testId: ShowPetByIdPathParams['testId'],
+  options?: {
+    query?: SWRConfiguration<TData, ShowPetById['error']>
+    client?: ShowPetById['client']['parameters']
+    shouldFetch?: boolean
+  },
+): SWRResponse<TData, ShowPetById['error']> {
+  const { query: queryOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
+
+  const url = `/pets/${petId}`
+  const query = useSWR<TData, ShowPetById['error'], typeof url | null>(shouldFetch ? url : null, {
+    ...ShowPetByIdQueryOptions<TData>(petId, testId, clientOptions),
+    ...queryOptions,
+  })
+
+  return query
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { Mutation } from './Mutation.tsx'
+export { Query } from './Query.tsx'
+export { QueryOptions } from './QueryOptions.tsx'

package/src/index.ts

@@ -0,0 +1,15 @@
+import { pluginSwr } from './plugin.ts'
+
+export { pluginSwr, pluginSwrName } from './plugin.ts'
+export type { PluginSwr } from './types.ts'
+
+/**
+ * @deprecated Use `import { pluginSwr } from '@kubb/plugin-swr'` instead
+ */
+const definePluginDefault = pluginSwr
+/**
+ * @deprecated Use `import { pluginSwr } from '@kubb/plugin-swr'` instead
+ */
+export const definePlugin = pluginSwr
+
+export default definePluginDefault