const ATTR_ALIASES: Record<string, string>React prop names whose HTML spelling is not the lowercased identifier.React prop names whose HTML spelling is not the lowercased identifier.
const ATTR_ALIASES: Record<string, string>each<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNodeMaps over an array and renders each item.Maps over an array and renders each item.
export function each<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNode{each(items, (item) => <li>{item.name}</li>)}escapeHtml(str: string): stringEscapes HTML special characters to prevent XSS.Escapes HTML special characters to prevent XSS.
function escapeHtml(str: string): stringstr
string
string
Fragment({ children }: { children?: JSXChild }): JSXNodeFragment component - renders children without a wrapper element.Fragment component - renders children without a wrapper element.
export function Fragment({ children }: { children?: JSXChild }): JSXNodejsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNodeCreates a JSX element. This is the core function called by the JSX transform.Creates a JSX element. This is the core function called by the JSX transform.
export function jsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNodetype
JSXElementType
props
JSXProps
_key
string
optional
jsx-htmlCustom JSX Runtime for Static HTML Generation This module provides a JSX runtime that outputs static HTML strings. No R…Custom JSX Runtime for Static HTML Generation
This module provides a JSX runtime that outputs static HTML strings. No React, no hydration, no client-side JavaScript - just pure HTML.
This is the implementation. The JSX transform imports it through the ./jsx-runtime and ./jsx-dev-runtime entry points, which are the subpaths jsxImportSource resolves. Keeping the implementation under its own name keeps those two entries from colliding with the shared bundle chunk.
// tsconfig.json or vite.config.ts
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@ox-content/vite-plugin"
}
}
// MyComponent.tsx
export function Hero({ title }: { title: string }) {
return (
<section class="hero">
<h1>{title}</h1>
</section>
);
}JSXChild = string | number | boolean | null | undefined | JSXNode | JSXChild[]Valid JSX child types.Valid JSX child types.
export type JSXChild = string | number | boolean | null | undefined | JSXNode | JSXChild[]JSXElementType = string | ((props: Record<string, unknown>) => JSXNode)JSX element type - either a string (intrinsic) or a function component.JSX element type - either a string (intrinsic) or a function component.
export type JSXElementType = string | ((props: Record<string, unknown>) => JSXNode)JSXNodeJSX node - the result of JSX expressions.JSX node - the result of JSX expressions.
export interface JSXNode| Name | Type | Description |
|---|---|---|
__html |
string |
JSXPropsProps with children.Props with children.
export interface JSXPropsjsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNodeCreates a JSX element with static children. Called by the JSX transform for ele…Creates a JSX element with static children. Called by the JSX transform for elements with multiple children.
export function jsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNodetype
JSXElementType
props
JSXProps
key
string
optional
raw(html: string): JSXNodeCreates raw HTML without escaping. Use with caution - only for trusted content.Creates raw HTML without escaping. Use with caution - only for trusted content.
export function raw(html: string): JSXNodehtml
string
<div>{raw('<strong>Bold</strong>')}</div>renderAttr(name: string, value: unknown): stringRenders an attribute value to a string.Renders an attribute value to a string.
function renderAttr(name: string, value: unknown): stringname
string
value
unknown
string
renderChildren(children: JSXChild): stringRenders children to HTML string.Renders children to HTML string.
function renderChildren(children: JSXChild): stringchildren
JSXChild
string
renderToString(node: JSXNode): stringRenders a JSX node to an HTML string.Renders a JSX node to an HTML string.
export function renderToString(node: JSXNode): stringnode
JSXNode
string
const SVG_CAMEL_CASE = new Set(["viewBox"])SVG attributes that stay camelCase in HTML (they are case-sensitive).SVG attributes that stay camelCase in HTML (they are case-sensitive).
const SVG_CAMEL_CASE = new Set(["viewBox"])toHtmlAttr(name: string): stringConverts a JSX/React prop name to the HTML attribute the runtime emits. HTML at…Converts a JSX/React prop name to the HTML attribute the runtime emits.
HTML attributes are case-insensitive and conventionally lowercase (charSet → charset, tabIndex → tabindex). A few React names are not a lowercase of themselves (className, httpEquiv), and SVG names like viewBox must keep their case.
function toHtmlAttr(name: string): stringname
string
string
when(condition: boolean, content: JSXNode): JSXNodeConditionally renders content.Conditionally renders content.
export function when(condition: boolean, content: JSXNode): JSXNodecondition
boolean
content
JSXNode
{when(isLoggedIn, <UserMenu />)}