@kubb/renderer-jsx 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/jsx-dev-runtime.d.ts

@@ -1,6 +1,6 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { h as KubbReactNode, m as KubbReactElement } from "./types-nAFMiWFw.js";
-import { t as JSX } from "./jsx-namespace-CNp0arTN.js";
+import { h as KubbReactNode, m as KubbReactElement } from "./types-Dk7A1Y5U.js";
+import { t as JSX } from "./jsx-namespace-BLGeMDcR.js";
 import * as _$react from "react";
 import * as React$1 from "react/jsx-runtime";
 

package/dist/{jsx-namespace-CNp0arTN.d.ts → jsx-namespace-BLGeMDcR.d.ts}

@@ -1,5 +1,5 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { _ as KubbTextProps, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, l as KubbExportProps, m as KubbReactElement, p as KubbJsxProps, s as KubbArrowFunctionProps, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-nAFMiWFw.js";
+import { _ as KubbTextProps, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, l as KubbExportProps, m as KubbReactElement, p as KubbJsxProps, s as KubbArrowFunctionProps, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-Dk7A1Y5U.js";
 import React from "react";
 
 //#region src/jsx-namespace.d.ts
@@ -36,4 +36,4 @@ declare namespace JSX$1 {
 }
 //#endregion
 export { JSX$1 as t };
-//# sourceMappingURL=jsx-namespace-CNp0arTN.d.ts.map
+//# sourceMappingURL=jsx-namespace-BLGeMDcR.d.ts.map

package/dist/jsx-runtime.d.ts

@@ -1,6 +1,6 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { h as KubbReactNode, m as KubbReactElement } from "./types-nAFMiWFw.js";
-import { t as JSX } from "./jsx-namespace-CNp0arTN.js";
+import { h as KubbReactNode, m as KubbReactElement } from "./types-Dk7A1Y5U.js";
+import { t as JSX } from "./jsx-namespace-BLGeMDcR.js";
 import * as _$react from "react";
 import * as React$1 from "react/jsx-runtime";
 

package/dist/{types-nAFMiWFw.d.ts → types-Dk7A1Y5U.d.ts}

@@ -46,7 +46,7 @@ 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.
    */
@@ -165,4 +165,4 @@ type JSDoc = {
 };
 //#endregion
 export { KubbTextProps as _, JSDoc as a, TextNode as b, KubbConstProps as c, KubbFunctionProps as d, KubbImportProps as f, KubbSourceProps as g, KubbReactNode as h, ElementNames as i, KubbExportProps as l, KubbReactElement as m, DOMNode as n, Key as o, KubbJsxProps as p, DOMNodeAttribute as r, KubbArrowFunctionProps as s, DOMElement as t, KubbFileProps as u, KubbTypeProps as v, LineBreakProps as y };
-//# sourceMappingURL=types-nAFMiWFw.d.ts.map
+//# sourceMappingURL=types-Dk7A1Y5U.d.ts.map

package/dist/types.d.ts

@@ -1,2 +1,2 @@
-import { _ as KubbTextProps, a as JSDoc, b as TextNode, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, i as ElementNames, l as KubbExportProps, m as KubbReactElement, n as DOMNode, o as Key, p as KubbJsxProps, r as DOMNodeAttribute, s as KubbArrowFunctionProps, t as DOMElement, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-nAFMiWFw.js";
+import { _ as KubbTextProps, a as JSDoc, b as TextNode, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, i as ElementNames, l as KubbExportProps, m as KubbReactElement, n as DOMNode, o as Key, p as KubbJsxProps, r as DOMNodeAttribute, s as KubbArrowFunctionProps, t as DOMElement, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-Dk7A1Y5U.js";
 export { DOMElement, DOMNode, DOMNodeAttribute, ElementNames, JSDoc, Key, KubbArrowFunctionProps, KubbConstProps, KubbExportProps, KubbFileProps, KubbFunctionProps, KubbImportProps, KubbJsxProps, KubbReactElement, KubbReactNode, KubbSourceProps, KubbTextProps, KubbTypeProps, LineBreakProps, TextNode };

package/package.json

@@ -1,19 +1,13 @@
 {
   "name": "@kubb/renderer-jsx",
-  "version": "5.0.0-beta.2",
-  "description": "React integration for Kubb - JSX runtime and component-based code generation with React reconciler for building type-safe generators",
+  "version": "5.0.0-beta.20",
+  "description": "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.",
   "keywords": [
-    "code-generator",
     "codegen",
-    "component-generation",
-    "file-generation",
     "jsx",
     "jsx-runtime",
     "kubb",
-    "plugin-system",
-    "plugins",
     "react",
-    "react-reconciler",
     "typescript"
   ],
   "license": "MIT",
@@ -81,7 +75,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@kubb/ast": "5.0.0-beta.2"
+    "@kubb/ast": "5.0.0-beta.20"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/Renderer.ts

@@ -105,7 +105,7 @@ export const Renderer = Reconciler({
     return false
   },
   supportsMutation: true,
-  isPrimaryRenderer: true,
+  isPrimaryRenderer: false,
   supportsPersistence: false,
   supportsHydration: false,
   scheduleTimeout: setTimeout,
@@ -155,9 +155,7 @@ export const Renderer = Reconciler({
   maySuspendCommit() {
     return false
   },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   NotPendingTransition: undefined,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   HostTransitionContext: createContext(null) as unknown as ReactContext<unknown>,
   resetFormInstance() {},
   requestPostPaintCallback() {},
@@ -180,5 +178,3 @@ export const Renderer = Reconciler({
     return null
   },
 })
-
-export type { FiberRoot } from 'react-reconciler'

package/src/Runtime.tsx

@@ -1,12 +1,12 @@
 import { onProcessExit } from '@internals/utils'
 import type { FileNode } from '@kubb/ast'
-import { ConcurrentRoot } from 'react-reconciler/constants.js'
+import { LegacyRoot } from 'react-reconciler/constants.js'
 import { Root } from './components/Root.tsx'
 import { createNode } from './dom.ts'
-import type { FiberRoot } from './Renderer.ts'
+import type { FiberRoot } from 'react-reconciler'
 import { Renderer } from './Renderer.ts'
 import type { DOMElement, KubbReactElement } from './types.ts'
-import { processFiles } from './utils.ts'
+import { collectFiles } from './utils.ts'
 
 type Options = {
   /**
@@ -26,7 +26,7 @@ export class Runtime {
   readonly #container: FiberRoot
   readonly #rootNode: DOMElement
 
-  constructor(options: Options) {
+  constructor(options: Options = {}) {
     this.#options = options
     this.#rootNode = createNode('kubb-root')
     this.#rootNode.onRender = this.onRender
@@ -51,7 +51,7 @@ export class Runtime {
 
     const logRecoverableError = typeof reportError === 'function' ? reportError : console.error
 
-    const rootTag = ConcurrentRoot
+    const rootTag = LegacyRoot
     this.#container = Renderer.createContainer(
       this.#rootNode,
       rootTag,
@@ -86,7 +86,7 @@ export class Runtime {
           return
         }
 
-        const files = processFiles(this.#rootNode)
+        const files = collectFiles(this.#rootNode)
 
         this.nodes.push(...files)
 
@@ -156,15 +156,4 @@ export class Runtime {
 
     this.resolveExitPromise()
   }
-
-  async waitUntilExit(): Promise<void> {
-    if (!this.exitPromise) {
-      this.exitPromise = new Promise((resolve, reject) => {
-        this.resolveExitPromise = resolve
-        this.rejectExitPromise = reject
-      })
-    }
-
-    return this.exitPromise
-  }
 }

package/src/SyncRuntime.tsx

@@ -0,0 +1,309 @@
+import type { ArrowFunctionNode, CodeNode, ExportNode, FileNode, ImportNode, JSDocNode, SourceNode } from '@kubb/ast'
+import {
+  createArrowFunction,
+  createBreak,
+  createConst,
+  createExport,
+  createFunction,
+  createImport,
+  createJsx,
+  createSource,
+  createText,
+  createType,
+} from '@kubb/ast'
+import React from 'react'
+import { KUBB_ARROW_FUNCTION, KUBB_CONST, KUBB_EXPORT, KUBB_FILE, KUBB_FUNCTION, KUBB_IMPORT, KUBB_JSX, KUBB_SOURCE, KUBB_TYPE } from './constants.ts'
+import type { KubbReactElement } from './types.ts'
+
+type OnText = (text: string) => void
+type OnHost = (type: string, props: Record<string, unknown>) => void
+
+/**
+ * Walks `element`, resolving arrays, Fragments, and function components
+ * transparently, then calls `onText` for primitive values and `onHost` for
+ * every host element encountered. Pure function components are called
+ * synchronously; hooks and class components are not supported.
+ */
+function walkElement(element: unknown, onText: OnText, onHost: OnHost): void {
+  if (element == null || typeof element === 'boolean') return
+
+  if (typeof element === 'string' || typeof element === 'number' || typeof element === 'bigint') {
+    onText(String(element))
+    return
+  }
+
+  if (Array.isArray(element)) {
+    for (const child of element) walkElement(child, onText, onHost)
+    return
+  }
+
+  if (typeof element === 'object' && '$$typeof' in element) {
+    const el = element as unknown as React.ReactElement
+    const { type } = el
+    const props = el.props as Record<string, unknown>
+
+    if (type === React.Fragment) {
+      walkElement(props['children'], onText, onHost)
+      return
+    }
+    if (typeof type === 'function') {
+      walkElement((type as (p: unknown) => unknown)(props), onText, onHost)
+      return
+    }
+    if (typeof type === 'string') {
+      onHost(type, props)
+    }
+  }
+}
+
+function toBool(val: unknown): boolean {
+  return (val ?? false) as boolean
+}
+
+function collectCodeNodes(props: Record<string, unknown>): CodeNode[] {
+  const nodes: CodeNode[] = []
+  collectCode(props['children'], nodes)
+  return nodes
+}
+
+function collectCode(element: unknown, nodes: CodeNode[]): void {
+  walkElement(
+    element,
+    (text) => {
+      if (text.trim()) nodes.push(createText(text))
+    },
+    (type, props) => resolveCodeNode(type, props, nodes),
+  )
+}
+
+function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: CodeNode[]): void {
+  if (type === 'br') {
+    nodes.push(createBreak())
+    return
+  }
+
+  if (type === KUBB_JSX) {
+    let value = ''
+    walkElement(
+      props['children'],
+      (t) => {
+        value += t
+      },
+      () => {},
+    )
+    if (value) nodes.push(createJsx(value))
+    return
+  }
+
+  if (type === KUBB_FUNCTION) {
+    nodes.push(
+      createFunction({
+        name: props['name'] as string,
+        params: props['params'] as string | undefined,
+        export: props['export'] as boolean | undefined,
+        default: props['default'] as boolean | undefined,
+        async: props['async'] as boolean | undefined,
+        generics: props['generics'] as string | undefined,
+        returnType: props['returnType'] as string | undefined,
+        JSDoc: props['JSDoc'] as JSDocNode | undefined,
+        nodes: collectCodeNodes(props),
+      }),
+    )
+    return
+  }
+
+  if (type === KUBB_ARROW_FUNCTION) {
+    nodes.push(
+      createArrowFunction({
+        name: props['name'] as string,
+        params: props['params'] as string | undefined,
+        export: props['export'] as boolean | undefined,
+        default: props['default'] as boolean | undefined,
+        async: props['async'] as boolean | undefined,
+        generics: props['generics'] as string | undefined,
+        returnType: props['returnType'] as string | undefined,
+        singleLine: props['singleLine'] as boolean | undefined,
+        JSDoc: props['JSDoc'] as JSDocNode | undefined,
+        nodes: collectCodeNodes(props),
+      } as Omit<ArrowFunctionNode, 'kind'>),
+    )
+    return
+  }
+
+  if (type === KUBB_CONST) {
+    nodes.push(
+      createConst({
+        name: props['name'] as string,
+        type: props['type'] as string | undefined,
+        export: props['export'] as boolean | undefined,
+        asConst: props['asConst'] as boolean | undefined,
+        JSDoc: props['JSDoc'] as JSDocNode | undefined,
+        nodes: collectCodeNodes(props),
+      }),
+    )
+    return
+  }
+
+  if (type === KUBB_TYPE) {
+    nodes.push(
+      createType({
+        name: props['name'] as string,
+        export: props['export'] as boolean | undefined,
+        JSDoc: props['JSDoc'] as JSDocNode | undefined,
+        nodes: collectCodeNodes(props),
+      }),
+    )
+    return
+  }
+}
+
+type FileChildren = { sources: SourceNode[]; exports: ExportNode[]; imports: ImportNode[] }
+
+function collectFileChildren(element: unknown): FileChildren {
+  const sources: SourceNode[] = []
+  const exports: ExportNode[] = []
+  const imports: ImportNode[] = []
+
+  walkElement(
+    element,
+    (text) => {
+      if (text.trim()) {
+        throw new Error(`[react] '${text}' should be part of <File.Source> component when using the <File/> component`)
+      }
+    },
+    (type, props) => {
+      if (type === KUBB_SOURCE) {
+        sources.push(
+          createSource({
+            name: props['name']?.toString(),
+            isTypeOnly: toBool(props['isTypeOnly']),
+            isExportable: toBool(props['isExportable']),
+            isIndexable: toBool(props['isIndexable']),
+            nodes: collectCodeNodes(props),
+          }),
+        )
+        return
+      }
+
+      if (type === KUBB_EXPORT) {
+        exports.push(
+          createExport({
+            name: props['name'] as ExportNode['name'],
+            path: props['path'] as string,
+            isTypeOnly: toBool(props['isTypeOnly']),
+            asAlias: toBool(props['asAlias']),
+          }),
+        )
+        return
+      }
+
+      if (type === KUBB_IMPORT) {
+        imports.push(
+          createImport({
+            name: props['name'] as ImportNode['name'],
+            path: props['path'] as string,
+            root: props['root'] as string | undefined,
+            isTypeOnly: toBool(props['isTypeOnly']),
+            isNameSpace: toBool(props['isNameSpace']),
+          }),
+        )
+        return
+      }
+
+      const nested = collectFileChildren(props['children'])
+      sources.push(...nested.sources)
+      exports.push(...nested.exports)
+      imports.push(...nested.imports)
+    },
+  )
+
+  return { sources, exports, imports }
+}
+
+function* walkFiles(element: unknown): Generator<FileNode> {
+  if (element == null || typeof element === 'boolean') return
+
+  if (typeof element === 'string' || typeof element === 'number' || typeof element === 'bigint') return
+
+  if (Array.isArray(element)) {
+    for (const child of element) yield* walkFiles(child)
+    return
+  }
+
+  if (typeof element === 'object' && '$$typeof' in element) {
+    const el = element as unknown as React.ReactElement
+    const { type } = el
+    const props = el.props as Record<string, unknown>
+
+    if (type === React.Fragment) {
+      yield* walkFiles(props['children'])
+      return
+    }
+
+    if (typeof type === 'function') {
+      yield* walkFiles((type as (p: unknown) => unknown)(props))
+      return
+    }
+
+    if (typeof type === 'string') {
+      if (type === KUBB_FILE && props['baseName'] !== undefined && props['path'] !== undefined) {
+        const { sources, exports, imports } = collectFileChildren(props['children'])
+        yield {
+          baseName: props['baseName'],
+          path: props['path'],
+          meta: props['meta'] || {},
+          footer: props['footer'],
+          banner: props['banner'],
+          sources,
+          exports,
+          imports,
+        } as FileNode
+      } else {
+        yield* walkFiles(props['children'])
+      }
+    }
+  }
+}
+
+/**
+ * Synchronous JSX renderer that walks the element tree in a single pass,
+ * producing {@link FileNode} objects directly without an intermediate virtual
+ * DOM. No React fiber, scheduler, or work loop is involved.
+ *
+ * All components must be pure functions; hooks and class components are not
+ * supported. Produces identical output to the React-backed {@link Runtime} at
+ * approximately 2–4× the speed and a fraction of the allocations.
+ */
+export class SyncRuntime {
+  /**
+   * Accumulated {@link FileNode} results from every {@link render} call.
+   */
+  nodes: FileNode[] = []
+
+  /**
+   * Walks `element` synchronously, converts every `<kubb-file>` subtree into
+   * a {@link FileNode} with no intermediate virtual DOM, and appends the results
+   * to {@link nodes}.
+   */
+  render(element: KubbReactElement): void {
+    for (const file of walkFiles(element)) {
+      this.nodes.push(file)
+    }
+  }
+
+  /**
+   * Walks `element` synchronously and yields each {@link FileNode} as it is
+   * produced, without buffering into an intermediate array first. Callers can
+   * begin processing each file before the rest of the element tree is traversed.
+   *
+   * @example
+   * ```ts
+   * for (const file of runtime.stream(element)) {
+   *   await writeFile(file)
+   * }
+   * ```
+   */
+  *stream(element: KubbReactElement): Generator<FileNode> {
+    yield* walkFiles(element)
+  }
+}

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,80 @@
 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 for generators that produce JSX output.
  *
- * 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.
+ * Pass as the `renderer` property of `defineGenerator`. Core drives rendering
+ * without a hard dependency on `@kubb/renderer-jsx`.
  *
- * @example Basic usage
+ * @example
  * ```ts
- * import { createRenderer, File } from '@kubb/renderer-jsx'
+ * 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>({
+ *   renderer: jsxRenderer,
+ *   schema(node, options) {
+ *     return <File baseName="output.ts" path="src/output.ts">...</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) {
+    unmount(error?: Error | number | null) {
       runtime.unmount(error)
     },
   }
 }
 
 /**
- * A renderer factory for generators that produce JSX output.
+ * Lightweight renderer factory with no React fiber, scheduler, or work loop.
  *
- * 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`.
+ * Walks the JSX element tree in a single recursive pass. All components must be
+ * pure functions; hooks and class components are not supported. Drop-in
+ * replacement for {@link jsxRenderer} at approximately 2–4× the speed.
  *
- * @example
+ * @example Drop-in replacement
  * ```ts
- * import { jsxRenderer } from '@kubb/renderer-jsx'
- * import { defineGenerator } from '@kubb/core'
+ * import { jsxRendererSync } from '@kubb/renderer-jsx'
  *
  * export const myGenerator = defineGenerator<PluginTs>({
- *   name: 'my-generator',
- *   renderer: jsxRenderer,
+ *   renderer: jsxRendererSync,
  *   schema(node, options) {
  *     return <File baseName="output.ts" path="src/output.ts">...</File>
  *   },
  * })
  * ```
+ *
+ * @example Stream files as they are produced
+ * ```ts
+ * for await (const file of jsxRendererSync().stream(element)) {
+ *   await writeFile(file)
+ * }
+ * ```
  */
-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)
+    },
+    unmount(_error?: Error | number | null) {},
+  }
+}