@kubb/renderer-jsx 5.0.0-beta.75 → 5.0.0-beta.9

package/README.md

@@ -0,0 +1,124 @@
+<div align="center">
+  <h1>@kubb/renderer-jsx</h1>
+  <a href="https://kubb.dev" target="_blank" rel="noopener noreferrer">
+    <img width="180" src="https://raw.githubusercontent.com/kubb-labs/kubb/main/assets/logo.png" alt="Kubb logo">
+  </a>
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Coverage][coverage-src]][coverage-href]
+[![License][license-src]][license-href]
+[![Sponsors][sponsors-src]][sponsors-href]
+
+<h4>
+<a href="https://kubb.dev/" target="_blank">Documentation</a>
+<span> · </span>
+<a href="https://github.com/kubb-labs/kubb/issues/" target="_blank">Report Bug</a>
+<span> · </span>
+<a href="https://github.com/kubb-labs/kubb/issues/" target="_blank">Request Feature</a>
+</h4>
+</div>
+
+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
+
+```bash
+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:
+
+```tsx
+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
+
+| 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                             |
+| `<Root>`        | Root container for the renderer tree                                        |
+
+## API
+
+### `createRenderer(options?)`
+
+Creates a new renderer instance.
+
+```typescript
+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:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kubb/renderer-jsx"
+  }
+}
+```
+
+## Supporting Kubb
+
+Kubb is an open source project with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider:
+
+- [Become a Sponsor on GitHub](https://github.com/sponsors/stijnvanhulle)
+
+<p align="center">
+  <a href="https://github.com/sponsors/stijnvanhulle">
+    <img src="https://raw.githubusercontent.com/stijnvanhulle/sponsors/main/sponsors.svg" alt="My sponsors" />
+  </a>
+</p>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@kubb/renderer-jsx?flat&colorA=18181B&colorB=f58517
+[npm-version-href]: https://npmjs.com/package/@kubb/renderer-jsx
+[npm-downloads-src]: https://img.shields.io/npm/dm/@kubb/renderer-jsx?flat&colorA=18181B&colorB=f58517
+[npm-downloads-href]: https://npmjs.com/package/@kubb/renderer-jsx
+[license-src]: https://img.shields.io/github/license/kubb-labs/kubb.svg?flat&colorA=18181B&colorB=f58517
+[license-href]: https://github.com/kubb-labs/kubb/blob/main/LICENSE
+[coverage-src]: https://img.shields.io/codecov/c/github/kubb-labs/kubb?style=flat&colorA=18181B&colorB=f58517
+[coverage-href]: https://www.npmjs.com/package/@kubb/renderer-jsx
+[sponsors-src]: https://img.shields.io/github/sponsors/stijnvanhulle?style=flat&colorA=18181B&colorB=f58517
+[sponsors-href]: https://github.com/sponsors/stijnvanhulle/

package/dist/index.cjs

@@ -18078,7 +18078,7 @@ var Runtime = class {
 	nodes = [];
 	#container;
 	#rootNode;
-	constructor(options) {
+	constructor(options = {}) {
 		this.#options = options;
 		this.#rootNode = createNode("kubb-root");
 		this.#rootNode.onRender = this.onRender;
@@ -18149,53 +18149,10 @@ var Runtime = class {
 		}
 		this.resolveExitPromise();
 	}
-	async waitUntilExit() {
-		if (!this.exitPromise) this.exitPromise = new Promise((resolve, reject) => {
-			this.resolveExitPromise = resolve;
-			this.rejectExitPromise = reject;
-		});
-		return this.exitPromise;
-	}
 };
 //#endregion
 //#region src/createRenderer.tsx
 /**
-* Create a Kubb JSX renderer.
-*
-* 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.
-*
-* @example Basic usage
-* ```ts
-* import { createRenderer, File } 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()
-* ```
-*/
-function createRenderer(options = {}) {
-	const runtime = new Runtime(options);
-	return {
-		async render(Element) {
-			await runtime.render(Element);
-		},
-		get files() {
-			return runtime.nodes;
-		},
-		unmount(error) {
-			runtime.unmount(error);
-		}
-	};
-}
-/**
 * A renderer factory for generators that produce JSX output.
 *
 * Pass this as the `renderer` property of a `defineGenerator` call so that
@@ -18216,7 +18173,20 @@ function createRenderer(options = {}) {
 * })
 * ```
 */
-const jsxRenderer = () => createRenderer();
+const jsxRenderer = () => {
+	const runtime = new Runtime();
+	return {
+		async render(element) {
+			await runtime.render(element);
+		},
+		get files() {
+			return runtime.nodes;
+		},
+		unmount(error) {
+			runtime.unmount(error);
+		}
+	};
+};
 //#endregion
 exports.Const = Const;
 exports.File = File;
@@ -18225,7 +18195,6 @@ exports.Jsx = Jsx;
 exports.Root = Root;
 exports.Type = Type;
 exports.createContext = createContext;
-exports.createRenderer = createRenderer;
 exports.inject = inject;
 exports.jsxRenderer = jsxRenderer;
 exports.provide = provide;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
 import { a as JSDoc, h as KubbReactNode, m as KubbReactElement, o as Key } from "./types-nAFMiWFw.js";
-import { ExportNode, FileNode, ImportNode, SourceNode } from "@kubb/ast";
+import * as _$_kubb_ast0 from "@kubb/ast";
+import { ExportNode, ImportNode, SourceNode } from "@kubb/ast";
 import * as _$react from "react";
 
 //#region ../../internals/utils/src/context.d.ts
@@ -519,56 +520,6 @@ declare namespace Type {
 }
 //#endregion
 //#region src/createRenderer.d.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.
- *
- * 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.
- *
- * @example Basic usage
- * ```ts
- * import { createRenderer, File } 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()
- * ```
- */
-declare function createRenderer(options?: Options): Renderer;
 /**
  * A renderer factory for generators that produce JSX output.
  *
@@ -590,7 +541,11 @@ declare function createRenderer(options?: Options): Renderer;
  * })
  * ```
  */
-declare const jsxRenderer: () => Renderer;
+declare const jsxRenderer: () => {
+  render(element: KubbReactElement): Promise<void>;
+  readonly files: _$_kubb_ast0.FileNode[];
+  unmount(error?: Error | number | null): void;
+};
 //#endregion
-export { Const, File, Function, Jsx, Root, Type, createContext, createRenderer, inject, jsxRenderer, provide, unprovide };
+export { Const, File, Function, Jsx, Root, Type, createContext, inject, jsxRenderer, provide, unprovide };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -18075,7 +18075,7 @@ var Runtime = class {
 	nodes = [];
 	#container;
 	#rootNode;
-	constructor(options) {
+	constructor(options = {}) {
 		this.#options = options;
 		this.#rootNode = createNode("kubb-root");
 		this.#rootNode.onRender = this.onRender;
@@ -18146,53 +18146,10 @@ var Runtime = class {
 		}
 		this.resolveExitPromise();
 	}
-	async waitUntilExit() {
-		if (!this.exitPromise) this.exitPromise = new Promise((resolve, reject) => {
-			this.resolveExitPromise = resolve;
-			this.rejectExitPromise = reject;
-		});
-		return this.exitPromise;
-	}
 };
 //#endregion
 //#region src/createRenderer.tsx
 /**
-* Create a Kubb JSX renderer.
-*
-* 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.
-*
-* @example Basic usage
-* ```ts
-* import { createRenderer, File } 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()
-* ```
-*/
-function createRenderer(options = {}) {
-	const runtime = new Runtime(options);
-	return {
-		async render(Element) {
-			await runtime.render(Element);
-		},
-		get files() {
-			return runtime.nodes;
-		},
-		unmount(error) {
-			runtime.unmount(error);
-		}
-	};
-}
-/**
 * A renderer factory for generators that produce JSX output.
 *
 * Pass this as the `renderer` property of a `defineGenerator` call so that
@@ -18213,8 +18170,21 @@ function createRenderer(options = {}) {
 * })
 * ```
 */
-const jsxRenderer = () => createRenderer();
+const jsxRenderer = () => {
+	const runtime = new Runtime();
+	return {
+		async render(element) {
+			await runtime.render(element);
+		},
+		get files() {
+			return runtime.nodes;
+		},
+		unmount(error) {
+			runtime.unmount(error);
+		}
+	};
+};
 //#endregion
-export { Const, File, Function$1 as Function, Jsx, Root, Type, createContext, createRenderer, inject, jsxRenderer, provide, unprovide };
+export { Const, File, Function$1 as Function, Jsx, Root, Type, createContext, inject, jsxRenderer, provide, unprovide };
 
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,19 +1,13 @@
 {
   "name": "@kubb/renderer-jsx",
-  "version": "5.0.0-beta.75",
-  "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.9",
+  "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.75"
+    "@kubb/ast": "5.0.0-beta.9"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/Renderer.ts

@@ -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

@@ -3,7 +3,7 @@ import type { FileNode } from '@kubb/ast'
 import { ConcurrentRoot } 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'
@@ -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
@@ -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/createRenderer.tsx

@@ -1,74 +1,6 @@
-import type { FileNode } from '@kubb/ast'
 import { Runtime } from './Runtime.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.
- *
- * 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.
- *
- * @example Basic usage
- * ```ts
- * import { createRenderer, File } 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 function createRenderer(options: Options = {}): Renderer {
-  const runtime = new Runtime(options)
-
-  return {
-    async render(Element) {
-      await runtime.render(Element)
-    },
-    get files() {
-      return runtime.nodes
-    },
-    unmount(error) {
-      runtime.unmount(error)
-    },
-  }
-}
-
 /**
  * A renderer factory for generators that produce JSX output.
  *
@@ -90,4 +22,17 @@ export function createRenderer(options: Options = {}): Renderer {
  * })
  * ```
  */
-export const jsxRenderer: () => Renderer = () => createRenderer()
+export const jsxRenderer = () => {
+  const runtime = new Runtime()
+  return {
+    async render(element: KubbReactElement) {
+      await runtime.render(element)
+    },
+    get files() {
+      return runtime.nodes
+    },
+    unmount(error?: Error | number | null) {
+      runtime.unmount(error)
+    },
+  }
+}

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(),
     childNodes: [],
     parentNode: undefined,
   }
-
-  return node
 }
 
 /**

package/src/index.ts

@@ -5,4 +5,4 @@ export { Function } from './components/Function.tsx'
 export { Jsx } from './components/Jsx.tsx'
 export { Root } from './components/Root.tsx'
 export { Type } from './components/Type.tsx'
-export { createRenderer, jsxRenderer } from './createRenderer.tsx'
+export { jsxRenderer } from './createRenderer.tsx'