@kubb/renderer-jsx

Documentation · Report Bug · Request Feature

@kubb/renderer-jsx

JSX-based renderer for Kubb

Provides a JSX runtime and built-in components (File, Function, Type, Const) for component-based, type-safe code generation inside Kubb plugins. An alternative for the ast.factory syntax.

Installation

bun add @kubb/renderer-jsx
# or
pnpm add @kubb/renderer-jsx
# or
npm install @kubb/renderer-jsx

Usage

Use the built-in components inside a Kubb plugin to emit generated files:

import { jsxRenderer } from '@kubb/renderer-jsx'
import { File, Function, Type } from '@kubb/renderer-jsx'

const renderer = jsxRenderer()

await renderer.render(
  <File baseName="petStore.ts" path="src/gen/petStore.ts">
    <File.Source>
      <Type name="Pet">{'{ id: number; name: string }'}</Type>
      <Function name="getPet" async>
        {"return fetch('/pets')"}
      </Function>
    </File.Source>
  </File>,
)

const files = renderer.files

Built-in Components

Component	Description
<File>	Declares a generated output file with its path and optional imports/exports
<File.Source>	The source content block inside a <File>
<Function>	Generates a TypeScript function declaration
<Type>	Generates a TypeScript type alias
<Const>	Generates a const variable declaration
<Jsx>	Renders JSX expressions inside generated output
<Callout>	Generates a callout block in markdown output
<Frontmatter>	Generates a frontmatter block in markdown output
<Heading>	Generates a heading in markdown output
<List>	Generates a list in markdown output
<Paragraph>	Generates a paragraph in markdown output

API

jsxRenderer()

Creates a renderer instance with render, files, and stream:

const renderer = jsxRenderer()
await renderer.render(<MyComponent />)
const files = renderer.files  // FileNode[]

Use stream(element) instead of render to consume files one at a time as they are produced.

JSX Runtime

@kubb/renderer-jsx ships its own JSX runtime (jsx-runtime and jsx-dev-runtime). Configure your tsconfig.json to use it:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@kubb/renderer-jsx"
  }
}

Supporting Kubb

Kubb is an open source project, and its development is funded entirely by sponsors. If you would like to become a sponsor, please consider:

• Become a Sponsor on GitHub
• See sponsorship tiers and our sponsors

License

MIT