@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
110 lines • 3.8 kB
TypeScript
/**
* Create a VNode. This is the function Bun's JSX transpiler calls.
*
* @param type - Tag name string, component function, or Fragment symbol
* @param props - Props object (may include children)
* @param key - Optional key for list reconciliation
*/
export declare function jsx(type: string | ComponentFunction | typeof Fragment, props: Record<string, any> | null, key?: string | number | null): VNode;
/**
* Render a VNode tree to an HTML string.
* This is the primary SSR function.
*
* @param vnode - The VNode or string to render
* @returns HTML string
*/
export declare function renderToString(vnode: VNode | string | null | undefined | boolean | number): string;
/**
* Render a VNode tree to a readable stream for streaming SSR.
*/
export declare function renderToStream(vnode: VNode | string): ReadableStream<string>;
/**
* Render a VNode tree to real DOM nodes.
*
* @param vnode - The VNode or string to render
* @param container - The parent DOM element to append to
*/
export declare function renderToDOM(vnode: VNode | string | null | undefined | boolean | number, container: Element): void;
/**
* Conditional rendering component — equivalent to v-if / @if.
*
* ```tsx
* <Show when={isVisible} fallback={<p>Hidden</p>}>
* <div>Visible content</div>
* </Show>
* ```
*/
export declare function Show(props: { when: any, fallback?: VNode | string | null, children?: any }): VNode | string | null;
/**
* List rendering component — equivalent to v-for / @foreach.
*
* ```tsx
* <For each={items}>
* {(item, index) => <div key={item.id}>{item.name}</div>}
* </For>
* ```
*/
export declare function For<T>(props: { each: T[] | undefined | null, fallback?: VNode | string | null, children: ((item: T, index: number) => VNode | string) | Array<(item: T, index: number) => VNode | string> }): VNode | string | null;
/**
* Portal/Teleport component — renders children to a different DOM target.
* Only effective on client-side; SSR renders children inline.
*
* ```tsx
* <Portal to="body">
* <div class="modal">Modal content</div>
* </Portal>
* ```
*/
export declare function Portal(props: { to: string, children?: any }): VNode | string | null;
/**
* Create a VNode using the h() function syntax (alternative to JSX).
*
* ```ts
* import { h } from '@stacksjs/stx/jsx-runtime'
*
* const vnode = h('div', { class: 'container' },
* h('h1', null, 'Hello'),
* h('p', null, 'World')
* )
* ```
*/
export declare function h(type: string | ComponentFunction | typeof Fragment, props?: Record<string, any> | null, ...children: any[]): VNode;
/** Fragment symbol - renders children without a wrapper element */
export declare const Fragment: unique symbol;
/**
* Same as jsx — Bun's transpiler uses jsxs when there are multiple static children.
*/
export declare const jsxs: unknown;
/**
* Development version of jsx with extra validation.
*/
export declare const jsxDEV: unknown;
/**
* STX JSX Runtime
*
* Self-made JSX runtime for stx — no React, no Preact, no external dependencies.
* This module provides the jsx/jsxs/Fragment functions that Bun's JSX transpiler calls,
* plus renderToString() for SSR and renderToDOM() for client-side rendering.
*
* Usage in tsconfig.json:
* ```json
* {
* "compilerOptions": {
* "jsx": "react-jsx",
* "jsxImportSource": "@stacksjs/stx"
* }
* }
* ```
*
* @module jsx-runtime
*/
/** Virtual DOM node representation */
export declare interface VNode {
type: string | ComponentFunction | typeof Fragment
props: Record<string, any> | null
children: Array<VNode | string>
key?: string | number | null
ref?: string | ((el: any) => void) | null
}
/** Function component type */
export type ComponentFunction = (props: Record<string, any>) => VNode | string | null