velt/jsx/jsx-runtime
API referenceThe JSX provider module of velt/jsx. A module with JSX imports it implicitly: as the namespace JSX for types (JSX.Element, JSX.IntrinsicElements), and for the factories the compiled code calls (jsx, Fragment, jsxComponent, jsxAsyncComponent). For a walkthrough, read the guide.
Exports
<tag names[i]=values[i]…>children</tag>.Fragment<>children</>: the children's markup, nothing around it.jsxComponent<Card …/>: std/jsx has no context to set up, so it calls the component at once.jsxAsyncComponent<Posts …/> for an async component: calls it now, so siblings load concurrently, and keeps its promise in the node; rendering awaits it in document order, and a rejection surfaces then as a RenderError naming the component.jsxEscapeA dynamic text child of a template, escaped: numbers render like ${n}, true, false and null render nothing.jsxEscapeStringjsxEscape of a string child: the compiler calls it when the child's type is string, so the text is escaped without going through the Text union.jsxAttrA dynamic attribute of a template: name="value", name or nothing (folded into the template's strings like jsxEscape).jsxTemplateA precompiled subtree: strings[0] slots[0] strings[1] … strings[n].jsxTemplateStringA precompiled subtree without slots (no components, fragments or element children): its markup, with text and attributes folded in.jsxListThe markup of a list whose rows the compiler wrote as strings ({xs.map((x) => <tr>…</tr>)} with rows without slots): the rows in order.ElementA rendered or partly rendered JSX node (see the module comment).RenderErrorThrown while rendering when a component threw or an async component rejected.ChildWhat may appear as a child: text is escaped, numbers render like ${n}, true, false and null render nothing, and an array renders its elements in order.AttrValueWhat an intrinsic attribute may hold: true renders the bare name, false and null omit the attribute, numbers render like ${n}, a Style renders its declarations.StyleAn inline style object: CSS properties in camelCase (fontSize) or custom ones (--accent) with their values (std/jsx/style.vlt renders it as React does).TextA dynamic text child that a precompiled template folds into its strings (jsxEscape).IntrinsicElementsTag name → attribute type, for every element of the HTML standard, of SVG 2 and of MathML Core.ElementChildrenAttributeComponents receive their JSX children in the children field of their props.jsxVoidElementsThe provider export jsxVoidElements (docs/internals/contracts/jsx.md "Void elements"): the compiler rejects children of these tags and writes them without an end tag in templates.Re-exported from velt/jsx/factory
function jsx(
tag: string,
names: string[],
values: AttrValue[],
children: Child[],
key: string | null,
): ElementAn intrinsic element <tag names[i]=values[i]…>children</tag>. names are compile-time
attribute names; children of a void element (<br>) are dropped. key is not rendered.
Re-exported from velt/jsx/factory
function Fragment(children: Child[], key: string | null): Element<>children</>: the children's markup, nothing around it.
Re-exported from velt/jsx/factory
function jsxComponent<P, E>(
component: (props: P) => Element throws E,
props: P,
key: string | null,
name: string,
): Element<Card …/>: std/jsx has no context to set up, so it calls the component at once. What the
component throws does not propagate from here: the node then fails when it is rendered, with
a RenderError naming the component, like an async component's rejection. name
("<module path>#<Name>") is for providers that emit hydration markers; std/jsx renders none.
Re-exported from velt/jsx/factory
function jsxAsyncComponent<P, E>(
component: (props: P) => Promise<Element, E>,
props: P,
key: string | null,
name: string,
): Element<Posts …/> for an async component: calls it now, so siblings load concurrently, and keeps
its promise in the node; rendering awaits it in document order, and a rejection surfaces then
as a RenderError naming the component.
Re-exported from velt/jsx/factory
function jsxEscape(value: Text): stringA dynamic text child of a template, escaped: numbers render like ${n}, true, false and
null render nothing. The compiler folds the result into the template's strings.
Re-exported from velt/jsx/factory
function jsxEscapeString(value: string): stringjsxEscape of a string child: the compiler calls it when the child's type is string, so
the text is escaped without going through the Text union.
Re-exported from velt/jsx/factory
function jsxAttr(name: string, value: AttrValue): stringA dynamic attribute of a template: name="value", name or nothing (folded into the
template's strings like jsxEscape).
Re-exported from velt/jsx/template
function jsxTemplate(strings: string[], slots: Element[]): ElementA precompiled subtree: strings[0] slots[0] strings[1] … strings[n]. strings are the
compiler's markup, text and attributes already folded in (one more than slots).
Re-exported from velt/jsx/template
function jsxTemplateString(html: string): ElementA precompiled subtree without slots (no components, fragments or element children): its markup, with text and attributes folded in.
Re-exported from velt/jsx/template
function jsxList(items: string[]): stringThe markup of a list whose rows the compiler wrote as strings ({xs.map((x) => <tr>…</tr>)}
with rows without slots): the rows in order.
Re-exported from velt/jsx/node
A rendered or partly rendered JSX node (see the module comment). Its fields are std/jsx's
internals (render.vlt and factory.vlt use them): read the markup with renderToString, as a
template node keeps it in tree and its html is "".
html: stringMarkup rendered so far: everything when rest is null. Unused ("") in a template node.
tree: Tree | null = nullA template node's strings and child nodes (null for a node of one string, almost all).
rest: Deferred | null = nullWhat follows html when the node contains an async component or a component that threw.
constructor(html: string)No doc comment yetget isComplete(): boolTrue when the node is rendered completely (no async or failed component inside): its
markup is html, or tree in a template node.
Re-exported from velt/jsx/errors
class RenderError extends ErrorThrown while rendering when a component threw or an async component rejected. Element is not
generic, so the component's own error type cannot travel through the tree: its value is
formatted like ${e} into message, and component names the component
("<module path>#<Name>"). Also thrown by renderToStringSync for a tree that still has a
pending async component (component is then "").
component: stringNo doc comment yetconstructor(component: string, message: string)No doc comment yetRe-exported from velt/jsx/node
type Child = Element | Element[] | string | i64 | f64 | bool | nullWhat may appear as a child: text is escaped, numbers render like ${n}, true, false and
null render nothing, and an array renders its elements in order.
Re-exported from velt/jsx/node
type AttrValue = string | i64 | f64 | bool | Style | nullWhat an intrinsic attribute may hold: true renders the bare name, false and null omit
the attribute, numbers render like ${n}, a Style renders its declarations.
Re-exported from velt/jsx/node
type Style = Record<string, string | f64>An inline style object: CSS properties in camelCase (fontSize) or custom ones (--accent)
with their values (std/jsx/style.vlt renders it as React does).
Re-exported from velt/jsx/node
type Text = string | i64 | f64 | bool | nullA dynamic text child that a precompiled template folds into its strings (jsxEscape).
Re-exported from velt/jsx/intrinsic
type IntrinsicElements = { a: AnchorAttrs & SvgAttrs; abbr: HtmlAttrs; address: HtmlAttrs; area: AreaAttrs; article: HtmlAttrs; aside: HtmlAttrs; audio: AudioAttrs; b: HtmlAttrs; base: BaseAttrs; bdi: HtmlAttrs; bdo: HtmlAttrs; blockquote: QuoteAttrs; body: HtmlAttrs; br: HtmlAttrs; button: ButtonAttrs; canvas: CanvasAttrs; caption: HtmlAttrs; cite: HtmlAttrs; code: HtmlAttrs; col: ColAttrs; colgroup: ColAttrs; data: DataAttrs; datalist: HtmlAttrs; dd: HtmlAttrs; del: EditAttrs; details: DetailsAttrs; dfn: HtmlAttrs; dialog: DialogAttrs; div: HtmlAttrs; dl: HtmlAttrs; dt: HtmlAttrs; em: HtmlAttrs; embed: EmbedAttrs; fieldset: FieldsetAttrs; figcaption: HtmlAttrs; figure: HtmlAttrs; footer: HtmlAttrs; form: FormAttrs; h1: HtmlAttrs; h2: HtmlAttrs; h3: HtmlAttrs; h4: HtmlAttrs; h5: HtmlAttrs; h6: HtmlAttrs; head: HtmlAttrs; header: HtmlAttrs; hgroup: HtmlAttrs; hr: HtmlAttrs; html: HtmlAttrs; i: HtmlAttrs; iframe: IframeAttrs; img: ImgAttrs; input: InputAttrs; ins: EditAttrs; kbd: HtmlAttrs; label: LabelAttrs; legend: HtmlAttrs; li: LiAttrs; link: LinkAttrs; main: HtmlAttrs; map: MapAttrs; mark: HtmlAttrs; menu: HtmlAttrs; meta: MetaAttrs; meter: MeterAttrs; nav: HtmlAttrs; noscript: HtmlAttrs; object: ObjectAttrs; ol: OlAttrs; optgroup: OptgroupAttrs; option: OptionAttrs; output: OutputAttrs; p: HtmlAttrs; picture: HtmlAttrs; pre: HtmlAttrs; progress: ProgressAttrs; q: QuoteAttrs; rp: HtmlAttrs; rt: HtmlAttrs; ruby: HtmlAttrs; s: HtmlAttrs; samp: HtmlAttrs; script: ScriptAttrs & SvgScriptAttrs; search: HtmlAttrs; section: HtmlAttrs; select: SelectAttrs; slot: SlotAttrs; small: HtmlAttrs; source: SourceAttrs; span: HtmlAttrs; strong: HtmlAttrs; style: StyleAttrs; sub: HtmlAttrs; summary: HtmlAttrs; sup: HtmlAttrs; table: HtmlAttrs; tbody: HtmlAttrs; td: TdAttrs; template: TemplateAttrs; textarea: TextareaAttrs; tfoot: HtmlAttrs; th: ThAttrs; thead: HtmlAttrs; time: TimeAttrs; title: HtmlAttrs; tr: HtmlAttrs; track: TrackAttrs; u: HtmlAttrs; ul: HtmlAttrs; var: HtmlAttrs; video: VideoAttrs; wbr: HtmlAttrs; animate: AnimationAttrs; animateMotion: AnimationAttrs; animateTransform: AnimationAttrs; circle: CircleAttrs; clipPath: ClipPathAttrs; defs: SvgAttrs; desc: SvgAttrs; discard: AnimationAttrs; ellipse: EllipseAttrs; feBlend: FilterPrimitiveAttrs; feColorMatrix: FilterPrimitiveAttrs; feComponentTransfer: FilterPrimitiveAttrs; feComposite: FilterPrimitiveAttrs; feConvolveMatrix: FilterPrimitiveAttrs; feDiffuseLighting: FilterPrimitiveAttrs; feDisplacementMap: FilterPrimitiveAttrs; feDistantLight: FilterPrimitiveAttrs; feDropShadow: FilterPrimitiveAttrs; feFlood: FilterPrimitiveAttrs; feFuncA: FilterPrimitiveAttrs; feFuncB: FilterPrimitiveAttrs; feFuncG: FilterPrimitiveAttrs; feFuncR: FilterPrimitiveAttrs; feGaussianBlur: FilterPrimitiveAttrs; feImage: FilterPrimitiveAttrs; feMerge: FilterPrimitiveAttrs; feMergeNode: FilterPrimitiveAttrs; feMorphology: FilterPrimitiveAttrs; feOffset: FilterPrimitiveAttrs; fePointLight: FilterPrimitiveAttrs; feSpecularLighting: FilterPrimitiveAttrs; feSpotLight: FilterPrimitiveAttrs; feTile: FilterPrimitiveAttrs; feTurbulence: FilterPrimitiveAttrs; filter: FilterAttrs; foreignObject: ForeignObjectAttrs; g: SvgAttrs; image: SvgImageAttrs; line: LineAttrs; linearGradient: LinearGradientAttrs; marker: MarkerAttrs; mask: MaskAttrs; metadata: SvgAttrs; mpath: MpathAttrs; path: PathAttrs; pattern: PatternAttrs; polygon: PolyAttrs; polyline: PolyAttrs; radialGradient: RadialGradientAttrs; rect: RectAttrs; set: AnimationAttrs; stop: StopAttrs; svg: SvgRootAttrs; switch: SvgAttrs; symbol: SymbolAttrs; text: TextContentAttrs; textPath: TextPathAttrs; tspan: TextContentAttrs; use: UseAttrs; view: ViewAttrs; annotation: AnnotationAttrs; maction: MactionAttrs; math: MathRootAttrs; merror: MathAttrs; mfrac: MfracAttrs; mi: MathAttrs; mmultiscripts: MathAttrs; mn: MathAttrs; mo: MoAttrs; mover: MunderoverAttrs; mpadded: MpaddedAttrs; mphantom: MathAttrs; mprescripts: MathAttrs; mroot: MathAttrs; mrow: MathAttrs; ms: MathAttrs; mspace: MspaceAttrs; msqrt: MathAttrs; mstyle: MathAttrs; msub: MathAttrs; msubsup: MathAttrs; msup: MathAttrs; mtable: MathAttrs; mtd: MtdAttrs; mtext: MathAttrs; mtr: MathAttrs; munder: MunderoverAttrs; munderover: MunderoverAttrs; none: MathAttrs; semantics: MathAttrs }Tag name → attribute type, for every element of the HTML standard, of SVG 2 and of MathML
Core. a, script, style and title exist in HTML and SVG and take HTML's attributes
(a and script also SVG's).
Re-exported from velt/jsx/intrinsic
type ElementChildrenAttribute = { children: Child }Components receive their JSX children in the children field of their props.
Re-exported from velt/jsx/void_elements
const jsxVoidElements = "area base br col embed hr img input link meta source track wbr"The provider export jsxVoidElements (docs/internals/contracts/jsx.md "Void elements"): the
compiler rejects children of these tags and writes them without an end tag in templates.