@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