@kubb/plugin-ts 3.0.0-alpha.0

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@kubb/plugin-ts",
+  "version": "3.0.0-alpha.0",
+  "description": "Generator plugin-ts",
+  "keywords": [
+    "zod",
+    "plugins",
+    "kubb",
+    "codegen",
+    "swagger",
+    "openapi"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/kubb-labs/kubb.git",
+    "directory": "packages/plugin-ts"
+  },
+  "license": "MIT",
+  "author": "Stijn Van Hulle <stijn@stijnvanhulle.be",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.cjs"
+    },
+    "./components": {
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs",
+      "default": "./dist/components.cjs"
+    },
+    "./package.json": "./package.json",
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "components": [
+        "./dist/components.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "!/**/**.test.**",
+    "!/**/__tests__/**"
+  ],
+  "dependencies": {
+    "@kubb/core": "3.0.0-alpha.0",
+    "@kubb/fs": "3.0.0-alpha.0",
+    "@kubb/oas": "3.0.0-alpha.0",
+    "@kubb/parser-ts": "3.0.0-alpha.0",
+    "@kubb/plugin-oas": "3.0.0-alpha.0",
+    "@kubb/react": "3.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "@kubb/config-biome": "3.0.0-alpha.0",
+    "@kubb/config-ts": "3.0.0-alpha.0",
+    "@kubb/config-tsup": "3.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "@kubb/react": "3.0.0-alpha.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "npx rimraf ./dist",
+    "lint": "bun biome lint .",
+    "lint:fix": "bun biome lint --apply-unsafe .",
+    "release": "pnpm publish --no-git-check",
+    "release:canary": "bash ../../.github/canary.sh && node ../../scripts/build.js canary && pnpm publish --no-git-check",
+    "start": "tsup --watch",
+    "test": "vitest --passWithNoTests",
+    "typecheck": "tsc -p ./tsconfig.json --noEmit --emitDeclarationOnly false"
+  }
+}

package/src/OperationGenerator.tsx

@@ -0,0 +1,49 @@
+import { OperationGenerator as Generator } from '@kubb/plugin-oas'
+import { Oas } from '@kubb/plugin-oas/components'
+import { App, createRoot } from '@kubb/react'
+
+import { OasType } from './components/OasType.tsx'
+import { OperationSchema } from './components/OperationSchema.tsx'
+
+import type { Operation } from '@kubb/oas'
+import type { OperationMethodResult } from '@kubb/plugin-oas'
+import type { FileMeta, PluginTs } from './types.ts'
+
+export class OperationGenerator extends Generator<PluginTs['resolvedOptions'], PluginTs> {
+  async all(operations: Operation[]): OperationMethodResult<FileMeta> {
+    const { oas, pluginManager, plugin, mode } = this.context
+
+    const root = createRoot({
+      logger: pluginManager.logger,
+    })
+
+    root.render(
+      <App pluginManager={pluginManager} plugin={plugin} mode={mode}>
+        <Oas oas={oas} operations={operations} generator={this}>
+          {plugin.options.oasType && <OasType.File name="oas" typeName="Oas" />}
+        </Oas>
+      </App>,
+    )
+
+    return root.files
+  }
+
+  async operation(operation: Operation, options: PluginTs['resolvedOptions']): OperationMethodResult<FileMeta> {
+    const { oas, pluginManager, plugin, mode } = this.context
+
+    const root = createRoot({
+      logger: pluginManager.logger,
+    })
+    root.render(
+      <App pluginManager={pluginManager} plugin={{ ...plugin, options }} mode={mode}>
+        <Oas oas={oas} operations={[operation]} generator={this}>
+          <Oas.Operation operation={operation}>
+            <OperationSchema.File />
+          </Oas.Operation>
+        </Oas>
+      </App>,
+    )
+
+    return root.files
+  }
+}

package/src/SchemaGenerator.tsx

@@ -0,0 +1,31 @@
+import type { SchemaObject } from '@kubb/oas'
+import { SchemaGenerator as Generator } from '@kubb/plugin-oas'
+import type { SchemaMethodResult } from '@kubb/plugin-oas'
+import { Oas } from '@kubb/plugin-oas/components'
+import { App, createRoot } from '@kubb/react'
+import { Schema } from './components/Schema.tsx'
+import type { FileMeta, PluginTs } from './types.ts'
+
+export class SchemaGenerator extends Generator<PluginTs['resolvedOptions'], PluginTs> {
+  async schema(name: string, schema: SchemaObject, options: PluginTs['resolvedOptions']): SchemaMethodResult<FileMeta> {
+    const { oas, pluginManager, plugin, mode, output } = this.context
+
+    const root = createRoot({
+      logger: pluginManager.logger,
+    })
+
+    const tree = this.parse({ schema, name })
+
+    root.render(
+      <App pluginManager={pluginManager} plugin={{ ...plugin, options }} mode={mode}>
+        <Oas oas={oas}>
+          <Oas.Schema name={name} value={schema} tree={tree}>
+            <Schema.File />
+          </Oas.Schema>
+        </Oas>
+      </App>,
+    )
+
+    return root.files
+  }
+}

package/src/components/OasType.tsx

@@ -0,0 +1,76 @@
+import { Parser, File, Type, useApp } from '@kubb/react'
+import { useOas } from '@kubb/plugin-oas/hooks'
+
+import type { OasTypes } from '@kubb/oas'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginTs } 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 OasType({ 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
+}
+
+OasType.File = function ({ name, typeName, templates = defaultTemplates }: FileProps): ReactNode {
+  const {
+    pluginManager,
+    plugin: { key: pluginKey },
+  } = useApp<PluginTs>()
+  const file = pluginManager.getFile({ name, extName: '.ts', pluginKey })
+
+  const Template = templates.default
+
+  return (
+    <Parser language="typescript">
+      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
+        <File.Import name={['Infer']} path="@kubb/oas" isTypeOnly />
+        <File.Source>
+          <OasType Template={Template} name={name} typeName={typeName} />
+        </File.Source>
+      </File>
+    </Parser>
+  )
+}
+
+OasType.templates = defaultTemplates

package/src/components/OperationSchema.tsx

@@ -0,0 +1,161 @@
+import transformers from '@kubb/core/transformers'
+import { print } from '@kubb/parser-ts'
+import * as factory from '@kubb/parser-ts/factory'
+import { Oas } from '@kubb/plugin-oas/components'
+import { useOas, useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
+import { File, Parser, useApp } from '@kubb/react'
+
+import { SchemaGenerator } from '../SchemaGenerator.tsx'
+
+import type { PluginManager } from '@kubb/core'
+import type { Operation } from '@kubb/oas'
+import type { ts } from '@kubb/parser-ts'
+import type { OperationSchema as OperationSchemaType } from '@kubb/plugin-oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import { pluginTsName } from '@kubb/plugin-ts'
+import type { ReactNode } from 'react'
+import type { FileMeta, PluginTs } from '../types.ts'
+import { Schema } from './Schema.tsx'
+
+function printCombinedSchema({
+  name,
+  operation,
+  schemas,
+  pluginManager,
+}: { name: string; operation: Operation; schemas: OperationSchemas; pluginManager: PluginManager }): string {
+  const properties: Record<string, ts.TypeNode> = {}
+
+  if (schemas.response) {
+    const identifier = pluginManager.resolveName({
+      name: schemas.response.name,
+      pluginKey: [pluginTsName],
+      type: 'function',
+    })
+    properties['response'] = factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+  }
+
+  if (schemas.request) {
+    const identifier = pluginManager.resolveName({
+      name: schemas.request.name,
+      pluginKey: [pluginTsName],
+      type: 'function',
+    })
+    properties['request'] = factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+  }
+
+  if (schemas.pathParams) {
+    const identifier = pluginManager.resolveName({
+      name: schemas.pathParams.name,
+      pluginKey: [pluginTsName],
+      type: 'function',
+    })
+    properties['pathParams'] = factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+  }
+
+  if (schemas.queryParams) {
+    const identifier = pluginManager.resolveName({
+      name: schemas.queryParams.name,
+      pluginKey: [pluginTsName],
+      type: 'function',
+    })
+    properties['queryParams'] = factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+  }
+
+  if (schemas.headerParams) {
+    const identifier = pluginManager.resolveName({
+      name: schemas.headerParams.name,
+      pluginKey: [pluginTsName],
+      type: 'function',
+    })
+    properties['headerParams'] = factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+  }
+
+  if (schemas.errors) {
+    properties['errors'] = factory.createUnionDeclaration({
+      nodes: schemas.errors.map((error) => {
+        const identifier = pluginManager.resolveName({
+          name: error.name,
+          pluginKey: [pluginTsName],
+          type: 'function',
+        })
+
+        return factory.createTypeReferenceNode(factory.createIdentifier(identifier), undefined)
+      }),
+    })!
+  }
+
+  const namespaceNode = factory.createTypeAliasDeclaration({
+    name: operation.method === 'get' ? `${name}Query` : `${name}Mutation`,
+    type: factory.createTypeLiteralNode(
+      Object.keys(properties)
+        .map((key) => {
+          const type = properties[key]
+          if (!type) {
+            return undefined
+          }
+
+          return factory.createPropertySignature({
+            name: transformers.pascalCase(key),
+            type,
+          })
+        })
+        .filter(Boolean),
+    ),
+    modifiers: [factory.modifiers.export],
+  })
+
+  return print(namespaceNode)
+}
+
+type Props = {
+  description?: string
+  keysToOmit?: string[]
+}
+
+export function OperationSchema({ keysToOmit, description }: Props): ReactNode {
+  return <Schema keysToOmit={keysToOmit} description={description} />
+}
+
+type FileProps = {}
+
+OperationSchema.File = function ({}: FileProps): ReactNode {
+  const { pluginManager, plugin, mode, fileManager } = useApp<PluginTs>()
+  const oas = useOas()
+  const { getSchemas, getFile, getName } = useOperationManager()
+  const operation = useOperation()
+
+  const file = getFile(operation)
+  const schemas = getSchemas(operation)
+  const factoryName = getName(operation, { type: 'type' })
+  const generator = new SchemaGenerator(plugin.options, {
+    oas,
+    plugin,
+    pluginManager,
+    mode,
+    override: plugin.options.override,
+  })
+  const items = [schemas.pathParams, schemas.queryParams, schemas.headerParams, schemas.statusCodes, schemas.request, schemas.response].flat().filter(Boolean)
+
+  const mapItem = ({ name, schema, description, keysToOmit, ...options }: OperationSchemaType, i: number) => {
+    const tree = generator.parse({ schema, name })
+
+    return (
+      <Oas.Schema key={i} name={name} value={schema} tree={tree}>
+        {mode === 'split' && <Oas.Schema.Imports extName={plugin.options.extName} isTypeOnly />}
+        <File.Source>
+          <OperationSchema description={description} keysToOmit={keysToOmit} />
+        </File.Source>
+      </Oas.Schema>
+    )
+  }
+
+  return (
+    <Parser language="typescript">
+      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
+        {items.map(mapItem)}
+
+        <File.Source>{printCombinedSchema({ name: factoryName, operation, schemas, pluginManager })}</File.Source>
+      </File>
+    </Parser>
+  )
+}

package/src/components/Schema.tsx

@@ -0,0 +1,135 @@
+import { Oas } from '@kubb/plugin-oas/components'
+import { File, useApp } from '@kubb/react'
+
+import transformers from '@kubb/core/transformers'
+import { print, type ts } from '@kubb/parser-ts'
+import * as factory from '@kubb/parser-ts/factory'
+import { SchemaGenerator, schemaKeywords } from '@kubb/plugin-oas'
+import { useSchema } from '@kubb/plugin-oas/hooks'
+import type { ReactNode } from 'react'
+import { parse, typeKeywordMapper } from '../parser/index.ts'
+import { pluginTsName } from '../plugin.ts'
+import type { PluginTs } from '../types.ts'
+
+type Props = {
+  description?: string
+  keysToOmit?: string[]
+}
+
+export function Schema(props: Props): ReactNode {
+  const { keysToOmit, description } = props
+  const { tree, name } = useSchema()
+  const {
+    pluginManager,
+    plugin: {
+      options: { mapper, enumType, optionalType },
+    },
+  } = useApp<PluginTs>()
+
+  // all checks are also inside this.schema(React)
+  const resolvedName = pluginManager.resolveName({
+    name,
+    pluginKey: [pluginTsName],
+    type: 'function',
+  })
+
+  const typeName = pluginManager.resolveName({
+    name,
+    pluginKey: [pluginTsName],
+    type: 'type',
+  })
+
+  const nodes: ts.Node[] = []
+  const extraNodes: ts.Node[] = []
+
+  if (!tree.length) {
+    return ''
+  }
+
+  const isNullish = tree.some((item) => item.keyword === schemaKeywords.nullish)
+  const isNullable = tree.some((item) => item.keyword === schemaKeywords.nullable)
+  const isOptional = tree.some((item) => item.keyword === schemaKeywords.optional)
+
+  let type =
+    (tree
+      .map((schema) => parse(undefined, schema, { name: resolvedName, typeName, description, keysToOmit, optionalType, enumType, mapper }))
+      .filter(Boolean)
+      .at(0) as ts.TypeNode) || typeKeywordMapper.undefined()
+
+  if (isNullable) {
+    type = factory.createUnionDeclaration({
+      nodes: [type, factory.keywordTypeNodes.null],
+    }) as ts.TypeNode
+  }
+
+  if (isNullish && ['undefined', 'questionTokenAndUndefined'].includes(optionalType as string)) {
+    type = factory.createUnionDeclaration({
+      nodes: [type, factory.keywordTypeNodes.undefined],
+    }) as ts.TypeNode
+  }
+
+  if (isOptional && ['undefined', 'questionTokenAndUndefined'].includes(optionalType as string)) {
+    type = factory.createUnionDeclaration({
+      nodes: [type, factory.keywordTypeNodes.undefined],
+    }) as ts.TypeNode
+  }
+
+  const node = factory.createTypeAliasDeclaration({
+    modifiers: [factory.modifiers.export],
+    name: resolvedName,
+    type: keysToOmit?.length
+      ? factory.createOmitDeclaration({
+          keys: keysToOmit,
+          type,
+          nonNullable: true,
+        })
+      : type,
+  })
+
+  const enumSchemas = SchemaGenerator.deepSearch(tree, schemaKeywords.enum)
+  if (enumSchemas) {
+    enumSchemas.forEach((enumSchema) => {
+      extraNodes.push(
+        ...factory.createEnumDeclaration({
+          name: transformers.camelCase(enumSchema.args.name),
+          typeName: enumSchema.args.typeName,
+          enums: enumSchema.args.items
+            .map((item) => (item.value === undefined ? undefined : [transformers.trimQuotes(item.name?.toString()), item.value]))
+            .filter(Boolean) as unknown as [string, string][],
+          type: enumType,
+        }),
+      )
+    })
+  }
+
+  nodes.push(
+    factory.appendJSDocToNode({
+      node,
+      comments: [description ? `@description ${transformers.jsStringEscape(description)}` : undefined].filter(Boolean),
+    }),
+  )
+
+  const filterdNodes = nodes.filter(
+    (node: ts.Node) =>
+      !extraNodes.some(
+        (extraNode: ts.Node) => (extraNode as ts.TypeAliasDeclaration)?.name?.escapedText === (node as ts.TypeAliasDeclaration)?.name?.escapedText,
+      ),
+  )
+
+  return print([...extraNodes, ...filterdNodes])
+}
+
+type FileProps = {}
+
+Schema.File = function ({}: FileProps): ReactNode {
+  const { pluginManager } = useApp<PluginTs>()
+  const { schema } = useSchema()
+
+  return (
+    <Oas.Schema.File output={pluginManager.config.output.path}>
+      <File.Source>
+        <Schema description={schema?.description} />
+      </File.Source>
+    </Oas.Schema.File>
+  )
+}

package/src/components/__snapshots__/Schema/pets.ts

@@ -0,0 +1,23 @@
+/**
+ * @description Null response
+ */
+export type CreatePets201 = any
+/**
+ * @description unexpected error
+ */
+export type CreatePetsError = Error
+export type CreatePetsMutationRequest = {
+  /**
+   * @type string
+   */
+  name: string
+  /**
+   * @type string
+   */
+  tag: string
+}
+export type CreatePetsMutationResponse = any
+export type CreatePetsMutation = {
+  Response: CreatePetsMutationResponse
+  Request: CreatePetsMutationRequest
+}

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

@@ -0,0 +1,28 @@
+export type ShowPetByIdPathParams = {
+  /**
+   * @description The id of the pet to retrieve
+   * @type string
+   */
+  petId: string
+  /**
+   * @description The id of the pet to retrieve
+   * @type string
+   */
+  testId: string
+}
+/**
+ * @description Expected response to a valid request
+ */
+export type ShowPetById200 = Pet
+/**
+ * @description unexpected error
+ */
+export type ShowPetByIdError = Error
+/**
+ * @description Expected response to a valid request
+ */
+export type ShowPetByIdQueryResponse = Pet
+export type ShowPetByIdQuery = {
+  Response: ShowPetByIdQueryResponse
+  PathParams: ShowPetByIdPathParams
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { OasType } from './OasType.tsx'
+export { OperationSchema } from './OperationSchema.tsx'
+export { Schema } from './Schema.tsx'

package/src/index.ts

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

package/src/oas/index.ts

@@ -0,0 +1 @@
+export type { Infer, Response, RequestParams, Model } from '@kubb/oas'