@kubb/renderer-jsx 5.0.0-beta.4 → 5.0.0-beta.40

package/src/components/Type.tsx

@@ -16,12 +16,12 @@ type TypeProps = {
    * - `false` generates `type Name = …`
    * @default false
    */
-  export?: boolean
+  export?: boolean | null
   /**
    * JSDoc block to prepend to the type alias declaration.
    * Each entry in `comments` becomes one line inside the emitted `/** … *\/` block.
    */
-  JSDoc?: JSDoc
+  JSDoc?: JSDoc | null
   /**
    * Child nodes rendered as the type expression on the right-hand side of the alias.
    */
@@ -31,7 +31,7 @@ type TypeProps = {
 /**
  * Generates a TypeScript type alias declaration.
  *
- * Throws if `name` does not start with an uppercase letter — TypeScript type aliases
+ * Throws if `name` does not start with an uppercase letter. TypeScript type aliases
  * should follow PascalCase naming conventions.
  *
  * @example Simple exported type alias

package/src/constants.ts

@@ -5,20 +5,30 @@ import type { ElementNames } from './types.ts'
  */
 export const TEXT_NODE_NAME = '#text' as const
 
+export const KUBB_FILE = 'kubb-file' as const
+export const KUBB_SOURCE = 'kubb-source' as const
+export const KUBB_EXPORT = 'kubb-export' as const
+export const KUBB_IMPORT = 'kubb-import' as const
+export const KUBB_FUNCTION = 'kubb-function' as const
+export const KUBB_ARROW_FUNCTION = 'kubb-arrow-function' as const
+export const KUBB_CONST = 'kubb-const' as const
+export const KUBB_TYPE = 'kubb-type' as const
+export const KUBB_JSX = 'kubb-jsx' 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_EXPORT,
+  KUBB_FILE,
+  KUBB_SOURCE,
+  KUBB_IMPORT,
+  KUBB_FUNCTION,
+  KUBB_ARROW_FUNCTION,
+  KUBB_CONST,
+  KUBB_TYPE,
+  KUBB_JSX,
   'kubb-text',
   'kubb-root',
   'kubb-app',

package/src/createRenderer.tsx

@@ -1,93 +1,112 @@
 import type { FileNode } from '@kubb/ast'
 import { Runtime } from './Runtime.tsx'
+import { SyncRuntime } from './SyncRuntime.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.
+ * Renderer factory that turns the JSX produced by a generator into
+ * `FileNode`s using React's reconciler under the hood. Pass as the `renderer`
+ * property on `defineGenerator`. Kubb core stays generic, with no hard
+ * dependency on `@kubb/renderer-jsx`.
  *
- * 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.
+ * Use this when generators rely on React features (hooks, suspense, context).
+ * For pure-function components, see {@link jsxRendererSync} for ~2-4× faster
+ * rendering.
  *
- * @example Basic usage
- * ```ts
- * import { createRenderer, File } from '@kubb/renderer-jsx'
+ * @example Wire up a JSX generator
+ * ```tsx
+ * import { defineGenerator } from '@kubb/core'
+ * import { jsxRenderer } 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 const myGenerator = defineGenerator<PluginTs>({
+ *   name: 'types',
+ *   renderer: jsxRenderer,
+ *   schema(node, ctx) {
+ *     return (
+ *       <File baseName="output.ts" path={`${ctx.root}/output.ts`}>
+ *         <Type node={node} resolver={ctx.resolver} />
+ *       </File>
+ *     )
+ *   },
+ * })
  * ```
  */
-export function createRenderer(options: Options = {}): Renderer {
-  const runtime = new Runtime(options)
+export const jsxRenderer = () => {
+  const runtime = new Runtime()
 
   return {
-    async render(Element) {
-      await runtime.render(Element)
+    async render(element: KubbReactElement) {
+      await runtime.render(element)
     },
     get files() {
       return runtime.nodes
     },
-    unmount(error) {
+    dispose() {
+      runtime.unmount()
+    },
+    unmount(error?: Error | number | null) {
       runtime.unmount(error)
     },
+    [Symbol.dispose]() {
+      this.dispose()
+    },
   }
 }
 
 /**
- * A renderer factory for generators that produce JSX output.
+ * Lightweight renderer that walks the JSX tree in a single recursive pass,  * no React reconciler, no scheduler. Drop-in replacement for
+ * {@link jsxRenderer} at roughly 2, 4× the throughput.
  *
- * 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`.
+ * Constraints: every component must be a pure function. Hooks, suspense, and
+ * class components are not supported.
  *
- * @example
- * ```ts
- * import { jsxRenderer } from '@kubb/renderer-jsx'
+ * Use this for generators that produce large amounts of output and do not need
+ * React's runtime features. It also exposes `stream()` for incremental file
+ * emission.
+ *
+ * @example Drop-in faster renderer
+ * ```tsx
  * import { defineGenerator } from '@kubb/core'
+ * import { jsxRendererSync } from '@kubb/renderer-jsx'
  *
  * export const myGenerator = defineGenerator<PluginTs>({
- *   name: 'my-generator',
- *   renderer: jsxRenderer,
- *   schema(node, options) {
- *     return <File baseName="output.ts" path="src/output.ts">...</File>
+ *   name: 'types',
+ *   renderer: jsxRendererSync,
+ *   schema(node, ctx) {
+ *     return (
+ *       <File baseName="output.ts" path={`${ctx.root}/output.ts`}>
+ *         <Type node={node} resolver={ctx.resolver} />
+ *       </File>
+ *     )
  *   },
  * })
  * ```
+ *
+ * @example Stream files as they are produced
+ * ```tsx
+ * const renderer = jsxRendererSync()
+ * for (const file of renderer.stream(element)) {
+ *   await writeFile(file.path, file.sources[0])
+ * }
+ * ```
  */
-export const jsxRenderer: () => Renderer = () => createRenderer()
+export const jsxRendererSync = () => {
+  const runtime = new SyncRuntime()
+
+  return {
+    async render(element: KubbReactElement): Promise<void> {
+      runtime.render(element)
+    },
+    get files() {
+      return runtime.nodes
+    },
+    stream(element: KubbReactElement): Generator<FileNode> {
+      return runtime.stream(element)
+    },
+    dispose() {},
+    unmount(_error?: Error | number | null) {},
+    [Symbol.dispose]() {
+      this.dispose()
+    },
+  }
+}

package/src/dom.ts

@@ -6,14 +6,12 @@ import type { DOMElement, DOMNode, DOMNodeAttribute, TextNode } from './types.ts
  * The element has no attributes, no children, and no parent.
  */
 export const createNode = (nodeName: string): DOMElement => {
-  const node: DOMElement = {
+  return {
     nodeName: nodeName as DOMElement['nodeName'],
-    attributes: new Map(),
+    attributes: Object.create(null) as Record<string, DOMNodeAttribute>,
     childNodes: [],
-    parentNode: undefined,
+    parentNode: null,
   }
-
-  return node
 }
 
 /**
@@ -50,7 +48,6 @@ export const insertBeforeNode = (node: DOMElement, newChildNode: DOMNode, before
   const index = node.childNodes.indexOf(beforeChildNode)
   if (index >= 0) {
     node.childNodes.splice(index, 0, newChildNode)
-
     return
   }
 
@@ -62,7 +59,7 @@ export const insertBeforeNode = (node: DOMElement, newChildNode: DOMNode, before
  * Does nothing if `removeNode` is not a direct child of `node`.
  */
 export const removeChildNode = (node: DOMElement, removeNode: DOMNode): void => {
-  removeNode.parentNode = undefined
+  removeNode.parentNode = null
 
   const index = node.childNodes.indexOf(removeNode)
   if (index >= 0) {
@@ -74,32 +71,23 @@ export const removeChildNode = (node: DOMElement, removeNode: DOMNode): void =>
  * Set an attribute on `node`, storing it in the node's `attributes` map.
  */
 export const setAttribute = (node: DOMElement, key: string, value: DOMNodeAttribute): void => {
-  node.attributes.set(key, value)
+  node.attributes[key] = value
 }
 
 /**
  * Create a new {@link TextNode} with the given text value.
  */
 export const createTextNode = (text: string): TextNode => {
-  const node: TextNode = {
+  return {
     nodeName: TEXT_NODE_NAME,
     nodeValue: text,
-    parentNode: undefined,
+    parentNode: null,
   }
-
-  setTextNodeValue(node, text)
-
-  return node
 }
 
 /**
  * Update the `nodeValue` of an existing {@link TextNode}.
- * Non-string values are coerced to strings via `String(text)`.
  */
 export const setTextNodeValue = (node: TextNode, text: string): void => {
-  if (typeof text !== 'string') {
-    text = String(text)
-  }
-
   node.nodeValue = text
 }

package/src/index.ts

@@ -1,8 +1,14 @@
 export { createContext, inject, provide, unprovide } from '@internals/utils'
+export { Callout } from './components/Callout.tsx'
+export { CodeBlock } from './components/CodeBlock.tsx'
 export { Const } from './components/Const.tsx'
 export { File } from './components/File.tsx'
+export { Frontmatter } from './components/Frontmatter.tsx'
 export { Function } from './components/Function.tsx'
+export { Heading } from './components/Heading.tsx'
 export { Jsx } from './components/Jsx.tsx'
+export { List } from './components/List.tsx'
+export { Paragraph } from './components/Paragraph.tsx'
 export { Root } from './components/Root.tsx'
 export { Type } from './components/Type.tsx'
-export { createRenderer, jsxRenderer } from './createRenderer.tsx'
+export { jsxRenderer, jsxRendererSync } from './createRenderer.tsx'

package/src/types.ts

@@ -30,14 +30,15 @@ export type ElementNames =
   | 'kubb-app'
 
 type Node = {
-  parentNode: DOMElement | undefined
+  parentNode: DOMElement | null
   internal_static?: boolean
 }
 
 /**
  * Allowed attribute value types for DOM elements.
+ * `null` signals intentionally empty, the prop was explicitly cleared.
  */
-export type DOMNodeAttribute = boolean | string | number | Record<string, unknown> | Array<unknown>
+export type DOMNodeAttribute = boolean | string | number | null | Record<string, unknown> | Array<unknown>
 
 type TextName = '#text'
 
@@ -50,7 +51,7 @@ export type TextNode = {
 } & Node
 
 /**
- * Virtual DOM node — either a text node or a named element.
+ * Virtual DOM node, either a text node or a named element.
  */
 export type DOMNode<T = { nodeName: NodeNames }> = T extends {
   nodeName: infer U
@@ -71,11 +72,11 @@ export type DOMElement = {
   /**
    * Key/value attributes passed as JSX props to this element.
    */
-  attributes: Map<string, DOMNodeAttribute>
+  attributes: Record<string, DOMNodeAttribute>
   /**
    * Ordered list of child nodes attached to this element.
    */
-  childNodes: DOMNode[]
+  childNodes: Array<DOMNode>
   internal_transform?: OutputTransformer
 
   // Internal properties
@@ -119,12 +120,12 @@ export type KubbTextProps = {
  * Represents a generated file.
  */
 export type KubbFileProps = {
-  id?: string
+  id?: string | null
   children?: KubbReactNode
   baseName: string
   path: string
-  override?: boolean
-  meta?: FileNode['meta']
+  override?: boolean | null
+  meta?: FileNode['meta'] | null
 }
 
 /**