@kubb/renderer-jsx 5.0.0-beta.7 → 5.0.0-beta.70

package/src/components/File.tsx

@@ -1,186 +0,0 @@
-import type { ExportNode, ImportNode, SourceNode } from '@kubb/ast'
-import type { Key, KubbReactElement, KubbReactNode } from '../types.ts'
-
-type BasePropsWithBaseName = {
-  /**
-   * Base file name including extension, derived from the input path.
-   * Based on UNIX basename convention: `${name}${extname}`.
-   *
-   * @link https://nodejs.org/api/path.html#pathbasenamepath-suffix
-   *
-   * @example
-   * `baseName: 'petStore.ts'`
-   */
-  baseName: `${string}.${string}`
-  /**
-   * Fully qualified path to the generated file.
-   *
-   * @example
-   * `path: 'src/models/petStore.ts'`
-   */
-  path: string
-}
-
-type BasePropsWithoutBaseName = {
-  baseName?: never
-  /**
-   * Fully qualified path to the generated file.
-   * Optional when `baseName` is omitted — the component renders its children inline.
-   */
-  path?: string
-}
-
-type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName
-
-type Props<TMeta> = BaseProps & {
-  key?: Key
-  /**
-   * Arbitrary metadata attached to the file node.
-   * Used by plugins for barrel generation and custom post-processing.
-   */
-  meta?: TMeta
-  /**
-   * Text prepended to the generated file content before any source blocks.
-   */
-  banner?: string
-  /**
-   * Text appended to the generated file content after all source blocks.
-   */
-  footer?: string
-  /**
-   * Child nodes rendered as the content of this file (source blocks, imports, exports).
-   */
-  children?: KubbReactNode
-}
-
-/**
- * Declares a generated file entry to be collected by the renderer.
- *
- * When both `baseName` and `path` are provided, the component registers a new
- * `FileNode` and passes its children through as source blocks.
- * When either is omitted the children are rendered inline without creating a file entry.
- *
- * @example Basic file with a source block
- * ```tsx
- * <File baseName="petStore.ts" path="src/models/petStore.ts">
- *   <File.Source name="Pet" isExportable isIndexable>
- *     {`export type Pet = { id: number; name: string }`}
- *   </File.Source>
- * </File>
- * ```
- */
-export function File<TMeta extends object = object>({ children, ...props }: Props<TMeta>): KubbReactElement {
-  const { baseName, path } = props
-
-  if (!baseName || !path) {
-    return <>{children}</>
-  }
-
-  return <kubb-file {...props}>{children}</kubb-file>
-}
-
-File.displayName = 'File'
-
-type FileSourceProps = Omit<SourceNode, 'kind' | 'value'> & {
-  key?: Key
-  /**
-   * Child nodes rendered as the source content of this block.
-   */
-  children?: KubbReactNode
-}
-
-/**
- * Marks a block of source text to be associated with the enclosing {@link File}.
- *
- * Children are treated as the source string. When `isExportable` is `true` the
- * `name` is used for deduplication and barrel generation.
- *
- * @example Exportable, indexable source block
- * ```tsx
- * <File.Source name="Pet" isExportable isIndexable>
- *   {`export type Pet = { id: number; name: string }`}
- * </File.Source>
- * ```
- *
- * @example Type-only source block
- * ```tsx
- * <File.Source name="PetId" isTypeOnly isExportable>
- *   {`export type PetId = string`}
- * </File.Source>
- * ```
- */
-function FileSource({ children, ...props }: FileSourceProps): KubbReactElement {
-  const { name, isExportable, isIndexable, isTypeOnly } = props
-
-  return (
-    <kubb-source name={name} isTypeOnly={isTypeOnly} isExportable={isExportable} isIndexable={isIndexable}>
-      {children}
-    </kubb-source>
-  )
-}
-
-FileSource.displayName = 'FileSource'
-
-type FileExportProps = Omit<ExportNode, 'kind'> & { key?: Key }
-
-/**
- * Declares an export entry for the enclosing {@link File}.
- *
- * The export is collected by the renderer and emitted at the top of the generated file.
- *
- * @example Named export
- * ```tsx
- * <File.Export name={['Pet']} path="./models/petStore" />
- * // export { Pet } from './models/petStore'
- * ```
- *
- * @example Type-only wildcard export
- * ```tsx
- * <File.Export path="./models/petStore" isTypeOnly />
- * // export type * from './models/petStore'
- * ```
- */
-function FileExport(props: FileExportProps): KubbReactElement {
-  const { name, path, isTypeOnly, asAlias } = props
-
-  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly} asAlias={asAlias} />
-}
-
-FileExport.displayName = 'FileExport'
-
-type FileImportProps = Omit<ImportNode, 'kind'> & { key?: Key }
-
-/**
- * Declares an import entry for the enclosing {@link File}.
- *
- * The import is collected by the renderer and emitted at the top of the generated file.
- *
- * @example Named import
- * ```tsx
- * <File.Import name={['useState']} path="react" />
- * // import { useState } from 'react'
- * ```
- *
- * @example Type-only import
- * ```tsx
- * <File.Import name={['Pet']} path="./models" isTypeOnly />
- * // import type { Pet } from './models'
- * ```
- *
- * @example Namespace import
- * ```tsx
- * <File.Import name="z" path="zod" isNameSpace />
- * // import * as z from 'zod'
- * ```
- */
-function FileImport(props: FileImportProps): KubbReactElement {
-  const { name, root, path, isTypeOnly, isNameSpace } = props
-
-  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly} />
-}
-
-FileImport.displayName = 'FileImport'
-
-File.Export = FileExport
-File.Import = FileImport
-File.Source = FileSource

package/src/components/Function.tsx

@@ -1,152 +0,0 @@
-import type { JSDoc, Key, KubbReactElement, KubbReactNode } from '../types.ts'
-
-type Props = {
-  key?: Key
-  /**
-   * Identifier of the generated function declaration.
-   *
-   * @example
-   * `name: 'getPet'`
-   */
-  name: string
-  /**
-   * Emit `default` after the `export` keyword, making this the module's default export.
-   * Requires `export` to also be `true`.
-   * @default false
-   */
-  default?: boolean
-  /**
-   * Parameter list written verbatim between the function's parentheses.
-   *
-   * @example
-   * `params: 'petId: string, options?: RequestOptions'`
-   */
-  params?: string
-  /**
-   * Emit the `export` keyword before the function declaration.
-   * - `true` generates `export function name(…) { … }`
-   * - `false` generates `function name(…) { … }`
-   * @default false
-   */
-  export?: boolean
-  /**
-   * Emit the `async` keyword, making this an async function.
-   * The return type is automatically wrapped in `Promise<returnType>` when both
-   * `async` and `returnType` are set.
-   * @default false
-   */
-  async?: boolean
-  /**
-   * TypeScript generic type parameters written verbatim between `<` and `>`.
-   * Pass an array to emit multiple parameters separated by commas.
-   *
-   * @example Single generic
-   * `generics: 'TData'`
-   *
-   * @example Multiple generics
-   * `generics: ['TData', 'TError = unknown']`
-   */
-  generics?: string | string[]
-  /**
-   * TypeScript return type annotation written verbatim after `:`.
-   * When `async` is `true`, the value is automatically wrapped in `Promise<…>`.
-   *
-   * @example
-   * `returnType: 'Pet'`
-   */
-  returnType?: string
-  /**
-   * JSDoc block to prepend to the function declaration.
-   * Each entry in `comments` becomes one line inside the emitted `/** … *\/` block.
-   */
-  JSDoc?: JSDoc
-  /**
-   * Child nodes rendered as the body of the function.
-   */
-  children?: KubbReactNode
-}
-
-/**
- * Generates a TypeScript function declaration.
- *
- * @example Async exported function with generics
- * ```tsx
- * <Function export async name="getPet" generics={['TData = Pet']} params="petId: string" returnType="TData">
- *   {`return client.get(\`/pets/\${petId}\`)`}
- * </Function>
- * // export async function getPet<TData = Pet>(petId: string): Promise<TData> {
- * //   return client.get(`/pets/${petId}`)
- * // }
- * ```
- */
-export function Function({ children, ...props }: Props): KubbReactElement {
-  const { name, default: isDefault, export: canExport, async: isAsync, generics, params, returnType, JSDoc } = props
-
-  // Normalize generics array to comma-separated string for DOM attribute storage
-  const genericsString = Array.isArray(generics) ? generics.join(', ').trim() : generics
-
-  return (
-    <kubb-function
-      name={name}
-      params={params}
-      export={canExport}
-      default={isDefault}
-      async={isAsync}
-      generics={genericsString}
-      returnType={returnType}
-      JSDoc={JSDoc}
-    >
-      {children}
-    </kubb-function>
-  )
-}
-
-Function.displayName = 'Function'
-
-type ArrowFunctionProps = Props & {
-  /**
-   * Render the arrow function as a single-line expression (no braces around the body).
-   * - `true` generates `const name = (…) => expression`
-   * - `false` generates `const name = (…) => { … }`
-   * @default false
-   */
-  singleLine?: boolean
-}
-
-/**
- * Generates an arrow function expression assigned to a `const`.
- * Supports the same flags as {@link Function}.
- * Use `singleLine` to render the body as a concise expression rather than a block.
- *
- * @example Single-line arrow function
- * ```tsx
- * <Function.Arrow export name="double" params="n: number" returnType="number" singleLine>
- *   {`n * 2`}
- * </Function.Arrow>
- * // export const double = (n: number): number => n * 2
- * ```
- */
-function ArrowFunction({ children, ...props }: ArrowFunctionProps) {
-  const { name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, singleLine } = props
-
-  const genericsString = Array.isArray(generics) ? generics.join(', ').trim() : generics
-
-  return (
-    <kubb-arrow-function
-      name={name}
-      params={params}
-      export={canExport}
-      default={isDefault}
-      async={async}
-      generics={genericsString}
-      returnType={returnType}
-      singleLine={singleLine}
-      JSDoc={JSDoc}
-    >
-      {children}
-    </kubb-arrow-function>
-  )
-}
-
-ArrowFunction.displayName = 'ArrowFunction'
-Function.Arrow = ArrowFunction

package/src/components/Jsx.tsx

@@ -1,34 +0,0 @@
-import type { KubbReactElement } from '../types.ts'
-
-type Props = {
-  /**
-   * Raw JSX string to embed verbatim in the generated code.
-   * Supports JSX fragments (`<>…</>`), elements, and any valid JSX syntax.
-   * @example
-   * ```tsx
-   * <Jsx>{'<>\n  <a href={href}>Open</a>\n</>'}</Jsx>
-   * ```
-   */
-  children?: string
-}
-
-/**
- * Embeds a raw JSX string verbatim in the generated source code.
- *
- * Use this component when you need to include JSX markup (including fragments
- * `<>…</>`) in the body of a generated function or component. The `children`
- * prop must be a plain string — expression attributes that reference runtime
- * values should be written as template literals.
- *
- * @example
- * ```tsx
- * <Function name="MyComponent" export>
- *   <Jsx>{'return (\n  <>\n    <div>Hello</div>\n  </>\n)'}</Jsx>
- * </Function>
- * ```
- */
-export function Jsx({ children }: Props): KubbReactElement {
-  return <kubb-jsx>{children}</kubb-jsx>
-}
-
-Jsx.displayName = 'Jsx'

package/src/components/Root.tsx

@@ -1,70 +0,0 @@
-import { Component } from 'react'
-import type { KubbReactElement, KubbReactNode } from '../types.ts'
-
-type ErrorBoundaryProps = {
-  onError: (error: Error) => void
-  children?: KubbReactNode
-}
-
-class ErrorBoundary extends Component<{
-  onError: ErrorBoundaryProps['onError']
-  children?: KubbReactNode
-}> {
-  state = { hasError: false }
-
-  static displayName = 'ErrorBoundary'
-  static getDerivedStateFromError(_error: Error) {
-    return { hasError: true }
-  }
-
-  componentDidCatch(error: Error) {
-    if (error) {
-      this.props.onError(error)
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null
-    }
-    return this.props.children
-  }
-}
-
-type RootProps = {
-  /**
-   * Callback invoked to unmount the entire renderer tree.
-   * Called with an `Error` when the exit is caused by a render error,
-   * or with `undefined` for a clean shutdown.
-   */
-  onExit: (error?: Error) => void
-  /**
-   * Callback invoked whenever a render error is caught by the error boundary.
-   * Use this to propagate errors up to the caller of {@link createRenderer}.
-   */
-  onError: (error: Error) => void
-  /**
-   * Child nodes rendered inside the error boundary.
-   */
-  children?: KubbReactNode
-}
-
-/**
- * Root component for the Kubb renderer tree.
- *
- * Wraps all children in an `ErrorBoundary` so that render errors are caught
- * and forwarded to `onError` rather than crashing the process.
- */
-export function Root({ onError, children }: RootProps): KubbReactElement {
-  return (
-    <ErrorBoundary
-      onError={(error) => {
-        onError(error)
-      }}
-    >
-      {children}
-    </ErrorBoundary>
-  )
-}
-
-Root.displayName = 'Root'

package/src/components/Type.tsx

@@ -1,66 +0,0 @@
-import type { JSDoc, Key, KubbReactElement, KubbReactNode } from '../types.ts'
-
-type TypeProps = {
-  key?: Key
-  /**
-   * Identifier of the generated type alias.
-   * Must start with an uppercase letter to follow TypeScript naming conventions.
-   *
-   * @example
-   * `name: 'Pet'`
-   */
-  name: string
-  /**
-   * Emit the `export` keyword before the type alias declaration.
-   * - `true` generates `export type Name = …`
-   * - `false` generates `type Name = …`
-   * @default false
-   */
-  export?: boolean
-  /**
-   * JSDoc block to prepend to the type alias declaration.
-   * Each entry in `comments` becomes one line inside the emitted `/** … *\/` block.
-   */
-  JSDoc?: JSDoc
-  /**
-   * Child nodes rendered as the type expression on the right-hand side of the alias.
-   */
-  children?: KubbReactNode
-}
-
-/**
- * Generates a TypeScript type alias declaration.
- *
- * Throws if `name` does not start with an uppercase letter — TypeScript type aliases
- * should follow PascalCase naming conventions.
- *
- * @example Simple exported type alias
- * ```tsx
- * <Type export name="PetId">
- *   {`string | number`}
- * </Type>
- * // export type PetId = string | number
- * ```
- *
- * @example Type alias with JSDoc
- * ```tsx
- * <Type export name="Pet" JSDoc={{ comments: ['@description A pet in the store.'] }}>
- *   {`{ id: number; name: string }`}
- * </Type>
- * ```
- */
-export function Type({ children, ...props }: TypeProps): KubbReactElement {
-  const { name, export: canExport, JSDoc } = props
-
-  if (name.charAt(0).toUpperCase() !== name.charAt(0)) {
-    throw new Error('Name should start with a capital letter(see TypeScript types)')
-  }
-
-  return (
-    <kubb-type name={name} export={canExport} JSDoc={JSDoc}>
-      {children}
-    </kubb-type>
-  )
-}
-
-Type.displayName = 'Type'

package/src/constants.ts

@@ -1,28 +0,0 @@
-import type { ElementNames } from './types.ts'
-
-/**
- * Name used for text-node entries in the virtual DOM.
- */
-export const TEXT_NODE_NAME = '#text' as const
-
-/**
- * Set of all element names recognized by the Kubb renderer.
- * Used to distinguish Kubb-owned elements from unrecognized or text nodes during tree traversal.
- */
-export const nodeNames = new Set<ElementNames>([
-  'kubb-export',
-  'kubb-file',
-  'kubb-source',
-  'kubb-import',
-  'kubb-function',
-  'kubb-arrow-function',
-  'kubb-const',
-  'kubb-type',
-  'kubb-jsx',
-  'kubb-text',
-  'kubb-root',
-  'kubb-app',
-  'br',
-  'indent',
-  'dedent',
-] as const)

package/src/createRenderer.tsx

@@ -1,93 +0,0 @@
-import type { FileNode } from '@kubb/ast'
-import { Runtime } from './Runtime.tsx'
-import type { KubbReactElement } from './types.ts'
-
-type Options = {
-  /**
-   * Print each render result to the console for debugging.
-   * Useful when diagnosing output differences between renders.
-   * @default false
-   */
-  debug?: boolean
-}
-
-/**
- * The renderer instance returned by {@link createRenderer}.
- */
-type Renderer = {
-  /**
-   * Render a JSX element tree and collect the resulting {@link FileNode} entries.
-   * Resolves once all synchronous render work (including React's flush) is done.
-   */
-  render(Element: KubbReactElement): Promise<void>
-  /**
-   * Tear down the renderer and release all React resources.
-   * Pass an `Error` to signal an abnormal shutdown.
-   */
-  unmount(error?: Error | number | null): void
-  /**
-   * The {@link FileNode} entries collected from the most recent `render` call.
-   */
-  files: Array<FileNode>
-}
-
-/**
- * Create a Kubb JSX renderer.
- *
- * The renderer converts a React JSX element tree — built from the components in this
- * package — into an array of {@link FileNode} entries representing the generated files.
- *
- * @example Basic usage
- * ```ts
- * import { createRenderer, File } from '@kubb/renderer-jsx'
- *
- * const renderer = createRenderer()
- * await renderer.render(
- *   <File baseName="pet.ts" path="src/models/pet.ts">
- *     <File.Source name="Pet" isExportable isIndexable>
- *       {`export type Pet = { id: number; name: string }`}
- *     </File.Source>
- *   </File>
- * )
- * console.log(renderer.files) // [FileNode]
- * renderer.unmount()
- * ```
- */
-export function createRenderer(options: Options = {}): Renderer {
-  const runtime = new Runtime(options)
-
-  return {
-    async render(Element) {
-      await runtime.render(Element)
-    },
-    get files() {
-      return runtime.nodes
-    },
-    unmount(error) {
-      runtime.unmount(error)
-    },
-  }
-}
-
-/**
- * A renderer factory for generators that produce JSX output.
- *
- * Pass this as the `renderer` property of a `defineGenerator` call so that
- * core can render the JSX element tree returned by your generator methods
- * without a hard dependency on `@kubb/renderer-jsx`.
- *
- * @example
- * ```ts
- * import { jsxRenderer } from '@kubb/renderer-jsx'
- * import { defineGenerator } from '@kubb/core'
- *
- * export const myGenerator = defineGenerator<PluginTs>({
- *   name: 'my-generator',
- *   renderer: jsxRenderer,
- *   schema(node, options) {
- *     return <File baseName="output.ts" path="src/output.ts">...</File>
- *   },
- * })
- * ```
- */
-export const jsxRenderer: () => Renderer = () => createRenderer()