@kubb/renderer-jsx

Documentation · Report Bug · Request Feature

@kubb/renderer-jsx

JSX-based renderer for Kubb

Provides a custom React runtime, reconciler, and built-in components (File, Function, Type, Const) for component-based, type-safe code generation inside Kubb plugins.

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 { createRenderer } from '@kubb/renderer-jsx'
import { File, Function, Type } from '@kubb/renderer-jsx'

const renderer = createRenderer()

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
renderer.unmount()

Built-in Components

API

createRenderer(options?)

Creates a new renderer instance.

const renderer = createRenderer({ debug: false })
await renderer.render(<MyComponent />)
const files = renderer.files  // FileNode[]
renderer.unmount()

jsxRenderer

Pre-built renderer instance for use directly in Kubb plugins as the jsxRenderer plugin option.

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