@kubb/plugin-react-query 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/components/QueryKey.tsx

@@ -1,200 +1,73 @@
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { Function, Type, useApp } from '@kubb/react'
-import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getASTParams } from '@kubb/plugin-oas/utils'
+import { URLPath } from '@kubb/core/utils'
+import { getPathParams } from '@kubb/plugin-oas/utils'
+import { File, Function, FunctionParams, Type } from '@kubb/react'
 
-import { isRequired } from '@kubb/oas'
+import { type Operation, isOptional } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
 import type { ReactNode } from 'react'
 import type { PluginReactQuery } from '../types'
-import { pluginTsName } from '@kubb/plugin-ts'
 
-type TemplateProps = {
-  /**
-   * Name of the function
-   */
+type Props = {
   name: string
-  /**
-   * TypeName of the function in PascalCase
-   */
   typeName: 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[]
-  }
-  keys?: string
-}
-
-function Template({ name, typeName, params, generics, returnType, JSDoc, keys }: TemplateProps): ReactNode {
-  return (
-    <>
-      <Function.Arrow name={name} export generics={generics} params={params} returnType={returnType} singleLine JSDoc={JSDoc}>
-        {`[${keys}] as const`}
-      </Function.Arrow>
-
-      <Type name={typeName} export>
-        {`ReturnType<typeof ${name}>`}
-      </Type>
-    </>
-  )
-}
-
-type FrameworkProps = TemplateProps & {
-  context: {
-    factory: {
-      name: string
-    }
-  }
+  typeSchemas: OperationSchemas
+  operation: Operation
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  keysFn: ((keys: unknown[]) => unknown[]) | undefined
 }
 
-const defaultTemplates = {
-  get react() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get solid() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get svelte() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get vue() {
-    return function ({ context, ...rest }: FrameworkProps): ReactNode {
-      const { factory } = context
-
-      const {
-        plugin: {
-          options: { pathParamsType, query },
-        },
-      } = useApp<PluginReactQuery>()
-      const { getSchemas } = useOperationManager()
-      const operation = useOperation()
-
-      const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-      const path = new URLPath(operation.path)
-      const params = new FunctionParams()
-      const withQueryParams = !!schemas.queryParams?.name
-      const withRequest = !!schemas.request?.name
-
-      params.add([
-        ...(pathParamsType === 'object'
-          ? [
-              getASTParams(schemas.pathParams, {
-                typed: true,
-                override: (item) => ({
-                  ...item,
-                  type: `MaybeRef<${item.type}>`,
-                }),
-              }),
-            ]
-          : getASTParams(schemas.pathParams, {
-              typed: true,
-              override: (item) => ({
-                ...item,
-                type: `MaybeRef<${item.type}>`,
-              }),
-            })),
-        {
-          name: 'params',
-          type: `MaybeRef<${`${factory.name}["queryParams"]`}>`,
-          enabled: withQueryParams,
-          required: isRequired(schemas.queryParams?.schema),
-        },
-        {
-          name: 'request',
-          type: `MaybeRef<${`${factory.name}["request"]`}>`,
-          enabled: withRequest,
-          required: isRequired(schemas.request?.schema),
-        },
-      ])
-
-      const keys = [
-        path.toObject({
-          type: 'path',
-          stringify: true,
-          replacer: (pathParam) => `unref(${pathParam})`,
-        }),
-        withQueryParams ? '...(params ? [params] : [])' : undefined,
-        withRequest ? '...(request ? [request] : [])' : undefined,
-      ].filter(Boolean)
-
-      return <Template {...rest} params={params.toString()} keys={keys.join(', ')} />
-    }
-  },
-} as const
-
-type Props = {
-  name: string
-  typeName: string
-  keysFn: (keys: unknown[]) => unknown[]
-  factory: {
-    name: string
-  }
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  Template?: React.ComponentType<FrameworkProps>
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
 }
 
-export function QueryKey({ name, typeName, factory, keysFn, Template = defaultTemplates.react }: Props): ReactNode {
-  const {
-    plugin: {
-      options: { pathParamsType },
+function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
+  return FunctionParams.factory({
+    pathParams: {
+      mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      children: getPathParams(typeSchemas.pathParams, { typed: true }),
     },
-  } = useApp<PluginReactQuery>()
-  const { getSchemas } = useOperationManager()
-  const operation = useOperation()
+    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,
+  })
+}
 
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
+export function QueryKey({ name, typeSchemas, pathParamsType, operation, typeName, keysFn = (name) => name }: Props): ReactNode {
   const path = new URLPath(operation.path)
-  const params = new FunctionParams()
-  const withQueryParams = !!schemas.queryParams?.name
-  const withRequest = !!schemas.request?.name
-
-  params.add([
-    ...(pathParamsType === 'object' ? [getASTParams(schemas.pathParams, { typed: true })] : getASTParams(schemas.pathParams, { typed: true })),
-    {
-      name: 'params',
-      type: `${factory.name}["queryParams"]`,
-      enabled: withQueryParams,
-      required: isRequired(schemas.queryParams?.schema),
-    },
-    {
-      name: 'data',
-      type: `${factory.name}["request"]`,
-      enabled: withRequest,
-      required: isRequired(schemas.request?.schema),
-    },
-  ])
-
+  const params = getParams({ pathParamsType, typeSchemas })
   const keys = [
     path.toObject({
       type: 'path',
       stringify: true,
     }),
-    withQueryParams ? '...(params ? [params] : [])' : undefined,
-    withRequest ? '...(data ? [data] : [])' : undefined,
+    typeSchemas.queryParams?.name ? '...(params ? [params] : [])' : undefined,
+    typeSchemas.request?.name ? '...(data ? [data] : [])' : undefined,
   ].filter(Boolean)
 
-  return <Template typeName={typeName} name={name} params={params.toString()} keys={keysFn(keys).join(', ')} context={{ factory }} />
+  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>
+    </>
+  )
 }
 
-QueryKey.templates = defaultTemplates
+QueryKey.getParams = getParams