@kubb/swagger-ts 2.0.0-beta.1 → 2.0.0-beta.10

package/src/{generators/TypeGenerator.ts → TypeGenerator.ts}

@@ -1,30 +1,27 @@
-import { SchemaGenerator } from '@kubb/core'
+import { Generator } from '@kubb/core'
+import transformers from '@kubb/core/transformers'
 import { getUniqueName } from '@kubb/core/utils'
 import * as factory from '@kubb/parser/factory'
+import { keywordTypeNodes } from '@kubb/parser/factory'
 import { getSchemaFactory, isReference } from '@kubb/swagger/utils'
 
-import { camelCase } from 'change-case'
+import { pluginKey } from './plugin.ts'
 
-import type { PluginContext } from '@kubb/core'
+import type { PluginManager } from '@kubb/core'
 import type { ts } from '@kubb/parser'
-import type { Oas, OasTypes, OpenAPIV3, OpenAPIV3_1, Refs } from '@kubb/swagger'
-import type { Options as CaseOptions } from 'change-case'
+import type { ImportMeta, Oas, OasTypes, OpenAPIV3, OpenAPIV3_1, Refs } from '@kubb/swagger'
+import type { PluginOptions } from './types.ts'
 
 // based on https://github.com/cellular/oazapfts/blob/7ba226ebb15374e8483cc53e7532f1663179a22c/src/codegen/generate.ts#L398
 
-type Options = {
+type Context = {
   oas: Oas
-  usedEnumNames: Record<string, number>
-
-  withJSDocs?: boolean
-  resolveName: PluginContext['resolveName']
-  enumType: 'enum' | 'asConst' | 'asPascalConst'
-  dateType: 'string' | 'date'
-  optionalType: 'questionToken' | 'undefined' | 'questionTokenAndUndefined'
+  pluginManager: PluginManager
 }
 
-export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObject, ts.Node[]> {
+export class TypeGenerator extends Generator<PluginOptions['resolvedOptions'], Context> {
   refs: Refs = {}
+  imports: ImportMeta[] = []
 
   extraNodes: ts.Node[] = []
 
@@ -33,19 +30,6 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
   // Keep track of already used type aliases
   #usedAliasNames: Record<string, number> = {}
 
-  #caseOptions: CaseOptions = {
-    delimiter: '',
-    stripRegexp: /[^A-Z0-9$]/gi,
-  }
-
-  constructor(
-    options: Options,
-  ) {
-    super(options)
-
-    return this
-  }
-
   build({
     schema,
     baseName,
@@ -58,7 +42,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
     keysToOmit?: string[]
   }): ts.Node[] {
     const nodes: ts.Node[] = []
-    const type = this.#getTypeFromSchema(schema, baseName)
+    const type = this.getTypeFromSchema(schema, baseName)
 
     if (!type) {
       return this.extraNodes
@@ -66,7 +50,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
     const node = factory.createTypeAliasDeclaration({
       modifiers: [factory.modifiers.export],
-      name: this.options.resolveName({ name: baseName }) || baseName,
+      name: this.context.pluginManager.resolveName({ name: baseName, pluginKey, type: 'type' }),
       type: keysToOmit?.length ? factory.createOmitDeclaration({ keys: keysToOmit, type, nonNullable: true }) : type,
     })
 
@@ -74,7 +58,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
       nodes.push(
         factory.appendJSDocToNode({
           node,
-          comments: [`@description ${description}`],
+          comments: [`@description ${transformers.trim(description)}`],
         }),
       )
     } else {
@@ -97,7 +81,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
    * Delegates to getBaseTypeFromSchema internally and
    * optionally adds a union with null.
    */
-  #getTypeFromSchema(schema?: OasTypes.SchemaObject, name?: string): ts.TypeNode | null {
+  getTypeFromSchema(schema?: OasTypes.SchemaObject, name?: string): ts.TypeNode | null {
     const type = this.#getBaseTypeFromSchema(schema, name)
 
     if (!type) {
@@ -114,7 +98,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
   /**
    * Recursively creates a type literal with the given props.
    */
-  #getTypeFromProperties(baseSchema?: OasTypes.SchemaObject, baseName?: string) {
+  #getTypeFromProperties(baseSchema?: OasTypes.SchemaObject, baseName?: string): ts.TypeNode | null {
     const { optionalType } = this.options
     const properties = baseSchema?.properties || {}
     const required = baseSchema?.required
@@ -124,39 +108,38 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
       const schema = properties[name] as OasTypes.SchemaObject
 
       const isRequired = Array.isArray(required) ? required.includes(name) : !!required
-      let type = this.#getTypeFromSchema(schema, this.options.resolveName({ name: `${baseName || ''} ${name}` }))
+      let type = this.getTypeFromSchema(schema, this.context.pluginManager.resolveName({ name: `${baseName || ''} ${name}`, pluginKey, type: 'type' }))
 
       if (!type) {
         return null
       }
 
-      if (!isRequired && ['undefined', 'questionTokenAndUndefined'].includes(optionalType)) {
+      if (!isRequired && ['undefined', 'questionTokenAndUndefined'].includes(optionalType as string)) {
         type = factory.createUnionDeclaration({ nodes: [type, factory.keywordTypeNodes.undefined] })
       }
       const propertySignature = factory.createPropertySignature({
-        questionToken: ['questionToken', 'questionTokenAndUndefined'].includes(optionalType) && !isRequired,
+        questionToken: ['questionToken', 'questionTokenAndUndefined'].includes(optionalType as string) && !isRequired,
         name,
         type: type as ts.TypeNode,
         readOnly: schema.readOnly,
       })
-      if (this.options.withJSDocs) {
-        return factory.appendJSDocToNode({
-          node: propertySignature,
-          comments: [
-            schema.description ? `@description ${schema.description}` : undefined,
-            schema.type ? `@type ${schema.type?.toString()}${isRequired ? '' : ' | undefined'} ${schema.format || ''}` : undefined,
-            schema.example ? `@example ${schema.example as string}` : undefined,
-            schema.deprecated ? `@deprecated` : undefined,
-            schema.default !== undefined && typeof schema.default === 'string' ? `@default '${schema.default}'` : undefined,
-            schema.default !== undefined && typeof schema.default !== 'string' ? `@default ${schema.default as string}` : undefined,
-          ].filter(Boolean),
-        })
-      }
+
+      return factory.appendJSDocToNode({
+        node: propertySignature,
+        comments: [
+          schema.description ? `@description ${schema.description}` : undefined,
+          schema.type ? `@type ${schema.type?.toString()}${isRequired ? '' : ' | undefined'} ${schema.format || ''}` : undefined,
+          schema.example ? `@example ${schema.example as string}` : undefined,
+          schema.deprecated ? `@deprecated` : undefined,
+          schema.default !== undefined && typeof schema.default === 'string' ? `@default '${schema.default}'` : undefined,
+          schema.default !== undefined && typeof schema.default !== 'string' ? `@default ${schema.default as string}` : undefined,
+        ].filter(Boolean),
+      })
 
       return propertySignature
     })
     if (additionalProperties) {
-      const type = additionalProperties === true ? factory.keywordTypeNodes.any : this.#getTypeFromSchema(additionalProperties as OasTypes.SchemaObject)
+      const type = additionalProperties === true ? factory.keywordTypeNodes.any : this.getTypeFromSchema(additionalProperties as OasTypes.SchemaObject)
 
       if (type) {
         members.push(factory.createIndexSignature(type))
@@ -177,18 +160,26 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
     }
 
     const originalName = getUniqueName($ref.replace(/.+\//, ''), this.#usedAliasNames)
-    const propertyName = this.options.resolveName({ name: originalName }) || originalName
+    const propertyName = this.context.pluginManager.resolveName({ name: originalName, pluginKey, type: 'type' })
 
     ref = this.refs[$ref] = {
       propertyName,
       originalName,
     }
 
+    const path = this.context.pluginManager.resolvePath({ baseName: propertyName, pluginKey })
+
+    this.imports.push({
+      ref,
+      path: path || '',
+      isTypeOnly: true,
+    })
+
     return factory.createTypeReferenceNode(ref.propertyName, undefined)
   }
 
   #getParsedSchema(schema?: OasTypes.SchemaObject) {
-    const parsedSchema = getSchemaFactory(this.options.oas)(schema)
+    const parsedSchema = getSchemaFactory(this.context.oas)(schema)
     return parsedSchema
   }
 
@@ -218,7 +209,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
         withParentheses: true,
         nodes: schema.oneOf
           .map((item) => {
-            return item && this.#getBaseTypeFromSchema(item as OasTypes.SchemaObject)
+            return item && this.getTypeFromSchema(item as OasTypes.SchemaObject)
           })
           .filter((item) => {
             return item && item !== factory.keywordTypeNodes.any
@@ -227,7 +218,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
       if (schemaWithoutOneOf.properties) {
         return factory.createIntersectionDeclaration({
-          nodes: [this.#getBaseTypeFromSchema(schemaWithoutOneOf, baseName), union].filter(Boolean),
+          nodes: [this.getTypeFromSchema(schemaWithoutOneOf, baseName), union].filter(Boolean),
         })
       }
 
@@ -241,7 +232,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
         withParentheses: true,
         nodes: schema.anyOf
           .map((item) => {
-            return item && this.#getBaseTypeFromSchema(item as OasTypes.SchemaObject)
+            return item && this.getTypeFromSchema(item as OasTypes.SchemaObject)
           })
           .filter((item) => {
             return item && item !== factory.keywordTypeNodes.any
@@ -250,7 +241,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
       if (schemaWithoutAnyOf.properties) {
         return factory.createIntersectionDeclaration({
-          nodes: [this.#getBaseTypeFromSchema(schemaWithoutAnyOf, baseName), union].filter(Boolean),
+          nodes: [this.getTypeFromSchema(schemaWithoutAnyOf, baseName), union].filter(Boolean),
         })
       }
 
@@ -264,7 +255,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
         withParentheses: true,
         nodes: schema.allOf
           .map((item) => {
-            return item && this.#getBaseTypeFromSchema(item as OasTypes.SchemaObject)
+            return item && this.getTypeFromSchema(item as OasTypes.SchemaObject)
           })
           .filter((item) => {
             return item && item !== factory.keywordTypeNodes.any
@@ -273,7 +264,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
       if (schemaWithoutAllOf.properties) {
         return factory.createIntersectionDeclaration({
-          nodes: [this.#getBaseTypeFromSchema(schemaWithoutAllOf, baseName), and].filter(Boolean),
+          nodes: [this.getTypeFromSchema(schemaWithoutAllOf, baseName), and].filter(Boolean),
         })
       }
 
@@ -296,13 +287,13 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
       this.extraNodes.push(
         ...factory.createEnumDeclaration({
-          name: camelCase(enumName, this.#caseOptions),
-          typeName: this.options.resolveName({ name: enumName }),
+          name: transformers.camelCase(enumName),
+          typeName: this.context.pluginManager.resolveName({ name: enumName, pluginKey, type: 'type' }),
           enums,
           type: this.options.enumType,
         }),
       )
-      return factory.createTypeReferenceNode(this.options.resolveName({ name: enumName }), undefined)
+      return factory.createTypeReferenceNode(this.context.pluginManager.resolveName({ name: enumName, pluginKey, type: 'type' }), undefined)
     }
 
     if (schema.enum) {
@@ -315,7 +306,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
 
     if ('items' in schema) {
       // items -> array
-      const node = this.#getTypeFromSchema(schema.items as OasTypes.SchemaObject, baseName)
+      const node = this.getTypeFromSchema(schema.items as OasTypes.SchemaObject, baseName)
       if (node) {
         return factory.createArrayTypeNode(node)
       }
@@ -332,7 +323,7 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
       return factory.createTupleDeclaration({
         nodes: prefixItems.map((item) => {
           // no baseType so we can fall back on an union when using enum
-          return this.#getBaseTypeFromSchema(item, undefined)
+          return this.getTypeFromSchema(item, undefined)
         }) as Array<ts.TypeNode>,
       })
     }
@@ -342,14 +333,38 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
       return this.#getTypeFromProperties(schema, baseName)
     }
 
+    /**
+     * validate "const" property as defined in JSON-Schema-Validation
+     *
+     * https://json-schema.org/draft/2020-12/json-schema-validation#name-const
+     *
+     * > 6.1.3. const
+     * > The value of this keyword MAY be of any type, including null.
+     * > Use of this keyword is functionally equivalent to an "enum" (Section 6.1.2) with a single value.
+     * > An instance validates successfully against this keyword if its value is equal to the value of the keyword.
+     */
+    if (version === '3.1' && 'const' in schema) {
+      // const keyword takes precendence over the actual type.
+      if (schema['const']) {
+        if (typeof schema['const'] === 'string') {
+          return factory.createLiteralTypeNode(factory.createStringLiteral(schema['const']))
+        } else if (typeof schema['const'] === 'number') {
+          return factory.createLiteralTypeNode(factory.createNumericLiteral(schema['const']))
+        }
+      } else {
+        return keywordTypeNodes.null
+      }
+    }
+
     if (schema.type) {
       if (Array.isArray(schema.type)) {
+        // TODO  remove hardcoded first type, second nullable
         // OPENAPI v3.1.0: https://www.openapis.org/blog/2021/02/16/migrating-from-openapi-3-0-to-3-1-0
         const [type, nullable] = schema.type as Array<OpenAPIV3_1.NonArraySchemaObjectType>
 
         return factory.createUnionDeclaration({
           nodes: [
-            this.#getBaseTypeFromSchema(
+            this.getTypeFromSchema(
               {
                 ...schema,
                 type,
@@ -375,11 +390,6 @@ export class TypeGenerator extends SchemaGenerator<Options, OasTypes.SchemaObjec
       return factory.createTypeReferenceNode('Blob', [])
     }
 
-    // detect assertion "const" and define the type property as a Literal
-    if (version === '3.1' && typeof schema['const'] === 'string') {
-      return factory.createLiteralTypeNode(factory.createStringLiteral(schema['const']))
-    }
-
     return factory.keywordTypeNodes.any
   }
 }

package/src/components/Mutation.tsx

@@ -0,0 +1,137 @@
+import transformers from '@kubb/core/transformers'
+import { print } from '@kubb/parser'
+import * as factory from '@kubb/parser/factory'
+import { File, usePlugin, usePluginManager } from '@kubb/react'
+import { useOas, useOperation, useOperationFile, useOperationName, useSchemas } from '@kubb/swagger/hooks'
+
+import { TypeBuilder } from '../TypeBuilder.ts'
+
+import type { KubbFile } from '@kubb/core'
+import type { ts } from '@kubb/parser'
+import type { Operation, OperationSchemas } from '@kubb/swagger'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginOptions } from '../types.ts'
+
+type Props = {
+  builder: TypeBuilder
+}
+
+function printCombinedSchema(name: string, operation: Operation, schemas: OperationSchemas): string {
+  const properties: Record<string, ts.TypeNode> = {
+    'response': factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.response.name),
+      undefined,
+    ),
+  }
+
+  if (schemas.request) {
+    properties['request'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.request.name),
+      undefined,
+    )
+  }
+
+  if (schemas.pathParams) {
+    properties['pathParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.pathParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.queryParams) {
+    properties['queryParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.queryParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.headerParams) {
+    properties['headerParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.headerParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.errors) {
+    properties['errors'] = factory.createUnionDeclaration({
+      nodes: schemas.errors.map(error => {
+        return factory.createTypeReferenceNode(
+          factory.createIdentifier(error.name),
+          undefined,
+        )
+      }),
+    })!
+  }
+
+  const namespaceNode = factory.createNamespaceDeclaration({
+    name: operation.method === 'get' ? `${name}Query` : `${name}Mutation`,
+    statements: Object.keys(properties).map(key => {
+      const type = properties[key]
+      if (!type) {
+        return undefined
+      }
+      return factory.createTypeAliasDeclaration({
+        modifiers: [factory.modifiers.export],
+        name: transformers.pascalCase(key),
+        type,
+      })
+    }).filter(Boolean),
+  })
+
+  return print(namespaceNode)
+}
+
+export function Mutation({
+  builder,
+}: Props): ReactNode {
+  const { source } = builder.build()
+
+  return (
+    <>
+      {source}
+    </>
+  )
+}
+
+type FileProps = {
+  mode: KubbFile.Mode
+}
+
+Mutation.File = function({ mode }: FileProps): ReactNode {
+  const { options } = usePlugin<PluginOptions>()
+
+  const schemas = useSchemas()
+  const pluginManager = usePluginManager()
+  const oas = useOas()
+  const file = useOperationFile()
+  const factoryName = useOperationName({ type: 'type' })
+  const operation = useOperation()
+
+  const builder = new TypeBuilder(options, { oas, pluginManager })
+    .add(schemas.pathParams)
+    .add(schemas.queryParams)
+    .add(schemas.headerParams)
+    .add(schemas.response)
+    .add(schemas.request)
+    .add(schemas.errors)
+
+  const { source, imports } = builder.build()
+
+  return (
+    <>
+      <File<FileMeta>
+        baseName={file.baseName}
+        path={file.path}
+        meta={file.meta}
+      >
+        {mode === 'directory' && imports.map((item, index) => {
+          return <File.Import key={index} root={file.path} {...item} />
+        })}
+        <File.Source>
+          {source}
+          {printCombinedSchema(factoryName, operation, schemas)}
+        </File.Source>
+      </File>
+    </>
+  )
+}

package/src/components/Oas.tsx

@@ -0,0 +1,84 @@
+import { File, Type, usePlugin } from '@kubb/react'
+import { useFile } from '@kubb/react'
+import { useOas } from '@kubb/swagger/hooks'
+
+import type { OasTypes } from '@kubb/swagger'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginOptions } from '../types.ts'
+
+type TemplateProps = {
+  /**
+   * Name of the function
+   */
+  name: string
+  typeName: string
+  api: OasTypes.OASDocument
+}
+
+function Template({
+  name,
+  typeName,
+  api,
+}: TemplateProps): ReactNode {
+  return (
+    <>
+      {`export const ${name} = ${JSON.stringify(api, undefined, 2)} as const`}
+      <br />
+      <Type name={typeName} export>
+        {`Infer<typeof ${name}>`}
+      </Type>
+    </>
+  )
+}
+
+const defaultTemplates = { default: Template } as const
+
+type Props = {
+  name: string
+  typeName: string
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<React.ComponentProps<typeof Template>>
+}
+
+export function Oas({
+  name,
+  typeName,
+  Template = defaultTemplates.default,
+}: Props): ReactNode {
+  const oas = useOas()
+
+  return <Template name={name} typeName={typeName} api={oas.api} />
+}
+
+type FileProps = {
+  name: string
+  typeName: string
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  templates?: typeof defaultTemplates
+}
+
+Oas.File = function({ name, typeName, templates = defaultTemplates }: FileProps): ReactNode {
+  const { key: pluginKey } = usePlugin<PluginOptions>()
+  const file = useFile({ name, pluginKey })
+
+  const Template = templates.default
+
+  return (
+    <File<FileMeta>
+      baseName={file.baseName}
+      path={file.path}
+      meta={file.meta}
+    >
+      <File.Import name={['Infer']} path="@kubb/swagger-ts/oas" isTypeOnly />
+      <File.Source>
+        <Oas Template={Template} name={name} typeName={typeName} />
+      </File.Source>
+    </File>
+  )
+}
+
+Oas.templates = defaultTemplates

package/src/components/Query.tsx

@@ -0,0 +1,136 @@
+import transformers from '@kubb/core/transformers'
+import { print } from '@kubb/parser'
+import * as factory from '@kubb/parser/factory'
+import { File, usePlugin, usePluginManager } from '@kubb/react'
+import { useOas, useOperation, useOperationFile, useOperationName, useSchemas } from '@kubb/swagger/hooks'
+
+import { TypeBuilder } from '../TypeBuilder.ts'
+
+import type { KubbFile } from '@kubb/core'
+import type { ts } from '@kubb/parser'
+import type { Operation, OperationSchemas } from '@kubb/swagger'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginOptions } from '../types.ts'
+
+type Props = {
+  builder: TypeBuilder
+}
+
+function printCombinedSchema(name: string, operation: Operation, schemas: OperationSchemas): string {
+  const properties: Record<string, ts.TypeNode> = {
+    'response': factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.response.name),
+      undefined,
+    ),
+  }
+
+  if (schemas.request) {
+    properties['request'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.request.name),
+      undefined,
+    )
+  }
+
+  if (schemas.pathParams) {
+    properties['pathParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.pathParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.queryParams) {
+    properties['queryParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.queryParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.headerParams) {
+    properties['headerParams'] = factory.createTypeReferenceNode(
+      factory.createIdentifier(schemas.headerParams.name),
+      undefined,
+    )
+  }
+
+  if (schemas.errors) {
+    properties['errors'] = factory.createUnionDeclaration({
+      nodes: schemas.errors.map(error => {
+        return factory.createTypeReferenceNode(
+          factory.createIdentifier(error.name),
+          undefined,
+        )
+      }),
+    })!
+  }
+
+  const namespaceNode = factory.createNamespaceDeclaration({
+    name: operation.method === 'get' ? `${name}Query` : `${name}Mutation`,
+    statements: Object.keys(properties).map(key => {
+      const type = properties[key]
+      if (!type) {
+        return undefined
+      }
+      return factory.createTypeAliasDeclaration({
+        modifiers: [factory.modifiers.export],
+        name: transformers.pascalCase(key),
+        type,
+      })
+    }).filter(Boolean),
+  })
+
+  return print(namespaceNode)
+}
+
+export function Query({
+  builder,
+}: Props): ReactNode {
+  const { source } = builder.build()
+
+  return (
+    <>
+      {source}
+    </>
+  )
+}
+
+type FileProps = {
+  mode: KubbFile.Mode
+}
+
+Query.File = function({ mode }: FileProps): ReactNode {
+  const { options } = usePlugin<PluginOptions>()
+
+  const schemas = useSchemas()
+  const pluginManager = usePluginManager()
+  const oas = useOas()
+  const file = useOperationFile()
+  const factoryName = useOperationName({ type: 'type' })
+  const operation = useOperation()
+
+  const builder = new TypeBuilder(options, { oas, pluginManager })
+    .add(schemas.pathParams)
+    .add(schemas.queryParams)
+    .add(schemas.headerParams)
+    .add(schemas.response)
+    .add(schemas.errors)
+
+  const { source, imports } = builder.build()
+
+  return (
+    <>
+      <File<FileMeta>
+        baseName={file.baseName}
+        path={file.path}
+        meta={file.meta}
+      >
+        {mode === 'directory' && imports.map((item, index) => {
+          return <File.Import key={index} root={file.path} {...item} />
+        })}
+        <File.Source>
+          {source}
+          {printCombinedSchema(factoryName, operation, schemas)}
+        </File.Source>
+      </File>
+    </>
+  )
+}

package/src/components/index.ts

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