@kubb/plugin-swr 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/components/Mutation.tsx

@@ -1,252 +1,118 @@
-import transformers from '@kubb/core/transformers'
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { 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 { URLPath } from '@kubb/core/utils'
+import { File, Function, FunctionParams } from '@kubb/react'
 
-import { SchemaType } from './SchemaType.tsx'
-
-import type { HttpMethod } from '@kubb/oas'
+import { type Operation, isOptional } from '@kubb/oas'
+import { Client } from '@kubb/plugin-client/components'
+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 { MutationKey } from './MutationKey.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
-  }
-  client: {
-    method: HttpMethod
-    generics: string
-    withQueryParams: boolean
-    withPathParams: boolean
-    withData: boolean
-    withHeaders: boolean
-    path: URLPath
-  }
-  dataReturnType: NonNullable<PluginSwr['options']['dataReturnType']>
-}
-
-function Template({ name, generics, returnType, params, JSDoc, client, hook, dataReturnType }: TemplateProps): ReactNode {
-  const clientOptions = [
-    `method: "${client.method}"`,
-    'url',
-    client.withQueryParams ? 'params' : undefined,
-    client.withData ? 'data' : undefined,
-    client.withHeaders ? 'headers: { ...headers, ...clientOptions.headers }' : undefined,
-    '...clientOptions',
-  ].filter(Boolean)
-
-  const resolvedClientOptions = `${transformers.createIndent(4)}${clientOptions.join(`,\n${transformers.createIndent(4)}`)}`
-  if (client.withQueryParams) {
-    return (
-      <File.Source name={name} isExportable isIndexable>
-        <Function export name={name} generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
-          {`
-         const { mutation: mutationOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
-
-         const url = ${client.path.template} as const
-         return ${hook.name}<${hook.generics}>(
-          shouldFetch ? [url, params]: null,
-          async (_url${client.withData ? ', { arg: data }' : ''}) => {
-            const res = await client<${client.generics}>({
-              ${resolvedClientOptions}
-            })
-
-            return ${dataReturnType === 'data' ? 'res.data' : 'res'}
-          },
-          mutationOptions
-        )
-      `}
-        </Function>
-      </File.Source>
-    )
-  }
-
-  return (
-    <File.Source name={name} isExportable isIndexable>
-      <Function export name={name} generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
-        {`
-       const { mutation: mutationOptions, client: clientOptions = {}, shouldFetch = true } = options ?? {}
-
-       const url = ${client.path.template} as const
-       return ${hook.name}<${hook.generics}>(
-        shouldFetch ? url : null,
-        async (_url${client.withData ? ', { arg: data }' : ''}) => {
-          const res = await client<${client.generics}>({
-            ${resolvedClientOptions}
-          })
-
-          return ${dataReturnType === 'data' ? 'res.data' : 'res'}
-        },
-        mutationOptions
-      )
-    `}
-      </Function>
-    </File.Source>
-  )
+  typeName: string
+  clientName: string
+  mutationKeyName: string
+  mutationKeyTypeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  dataReturnType: PluginSwr['resolvedOptions']['client']['dataReturnType']
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
 }
 
-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>
+type GetParamsProps = {
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginSwr['resolvedOptions']['client']['dataReturnType']
+  typeSchemas: OperationSchemas
+  mutationKeyTypeName: string
 }
 
-export function Mutation({ factory, Template = defaultTemplates.default }: Props): ReactNode {
-  const {
-    plugin: {
-      options: { dataReturnType },
-    },
-  } = useApp<PluginSwr>()
-  const { getSchemas, getName } = useOperationManager()
-  const operation = useOperation()
-
-  const name = getName(operation, { type: 'function' })
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-
-  const params = new FunctionParams()
-  const client = {
-    method: operation.method,
-    path: new URLPath(operation.path),
-    generics: [`${factory.name}["data"]`, `${factory.name}["error"]`, schemas.request?.name ? `${factory.name}["request"]` : ''].filter(Boolean).join(', '),
-    withQueryParams: !!schemas.queryParams?.name,
-    withData: !!schemas.request?.name,
-    withPathParams: !!schemas.pathParams?.name,
-    withHeaders: !!schemas.headerParams?.name,
-  }
-
-  const resultGenerics = [`${factory.name}["response"]`, `${factory.name}["error"]`]
+function getParams({ pathParamsType, dataReturnType, typeSchemas, mutationKeyTypeName }: GetParamsProps) {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
 
-  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: `{
-        mutation?: SWRMutationConfiguration<${resultGenerics.join(', ')}>,
-        client?: ${factory.name}['client']['parameters'],
-        shouldFetch?: boolean,
-      }`,
+    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: `
+{
+  mutation?: Parameters<typeof useSWRMutation<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', mutationKeyTypeName, typeSchemas.request?.name].join(', ')}>>[2],
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'},
+  shouldFetch?: boolean,
+}
+`,
       default: '{}',
     },
-  ])
-
-  const hook = {
-    name: 'useSWRMutation',
-    generics: [...resultGenerics, client.withQueryParams ? '[typeof url, typeof params] | null' : 'typeof url | null'].join(', '),
-  }
-
-  return (
-    <Template
-      name={name}
-      JSDoc={{ comments: getComments(operation) }}
-      client={client}
-      hook={hook}
-      params={params.toString()}
-      returnType={`SWRMutationResponse<${resultGenerics.join(', ')}>`}
-      dataReturnType={dataReturnType}
-    />
-  )
+  })
 }
 
-type FileProps = {
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  templates?: typeof defaultTemplates
-}
-
-Mutation.File = function ({ templates = defaultTemplates }: FileProps): ReactNode {
-  const {
-    plugin: {
-      options: {
-        extName,
-        client: { importPath },
-      },
-    },
-  } = useApp<PluginSwr>()
+export function Mutation({ name, clientName, mutationKeyName, mutationKeyTypeName, pathParamsType, dataReturnType, typeSchemas, operation }: Props): ReactNode {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const generics = [
+    TData,
+    typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error',
+    `${mutationKeyTypeName} | null`,
+    typeSchemas.request?.name,
+  ].filter(Boolean)
 
-  const { getSchemas, getFile, getName } = useOperationManager()
-  const operation = useOperation()
+  const mutationKeyParams = MutationKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
 
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const file = getFile(operation)
-  const fileType = getFile(operation, { pluginKey: [pluginTsName] })
-  const factoryName = getName(operation, { type: 'type' })
+  const params = getParams({
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
+    mutationKeyTypeName,
+  })
 
-  const Template = templates.default
-  const factory = {
-    name: factoryName,
-  }
+  const clientParams = Client.getParams({
+    typeSchemas,
+    pathParamsType,
+  })
 
   return (
-    <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
-      <File.Import name="useSWRMutation" path="swr/mutation" />
-      <File.Import name={['SWRMutationConfiguration', 'SWRMutationResponse']} path="swr/mutation" isTypeOnly />
-      <File.Import name={'client'} path={importPath} />
-      <File.Import name={['ResponseConfig']} path={importPath} isTypeOnly />
-      <File.Import
-        name={[
-          schemas.request?.name,
-          schemas.response.name,
-          schemas.pathParams?.name,
-          schemas.queryParams?.name,
-          schemas.headerParams?.name,
-          ...(schemas.errors?.map((error) => error.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 { mutation: mutationOptions, client: config = {}, shouldFetch = true } = options ?? {}
+        const mutationKey = ${mutationKeyName}(${mutationKeyParams.toCall()})
 
-      <SchemaType factory={factory} />
-      <Mutation Template={Template} factory={factory} />
-    </File>
+        return useSWRMutation<${generics}>(
+          shouldFetch ? mutationKey : null,
+          async (_url${typeSchemas.request?.name ? ', { arg: data }' : ''}) => {
+            return ${clientName}(${clientParams.toCall()})
+          },
+          mutationOptions
+        )
+    `}
+      </Function>
+    </File.Source>
   )
 }
-
-Mutation.templates = defaultTemplates

package/src/components/MutationKey.tsx

@@ -0,0 +1,48 @@
+import { URLPath } from '@kubb/core/utils'
+import { File, Function, FunctionParams, Type } from '@kubb/react'
+
+import type { Operation } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { ReactNode } from 'react'
+import type { PluginSwr } from '../types'
+
+type Props = {
+  name: string
+  typeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  keysFn: ((keys: unknown[]) => unknown[]) | undefined
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginSwr['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({}: GetParamsProps) {
+  return FunctionParams.factory({})
+}
+
+export function MutationKey({ name, typeSchemas, pathParamsType, operation, typeName, keysFn = (name) => name }: Props): ReactNode {
+  const path = new URLPath(operation.path)
+  const params = getParams({ pathParamsType, typeSchemas })
+  const keys = [JSON.stringify({ url: path.path })].filter(Boolean)
+
+  return (
+    <>
+      <File.Source name={name} isExportable isIndexable>
+        <Function.Arrow name={name} export params={params.toConstructor()} singleLine>
+          {`[${keysFn(keys).join(', ')}] as const`}
+        </Function.Arrow>
+      </File.Source>
+      <File.Source name={typeName} isExportable isIndexable isTypeOnly>
+        <Type name={typeName} export>
+          {`ReturnType<typeof ${name}>`}
+        </Type>
+      </File.Source>
+    </>
+  )
+}
+
+MutationKey.getParams = getParams