jsx-runtime.ts

17 documented symbols. Read the signatures first, then expand each item for parameters, return types, and examples.

17 symbols 11 functions 2 interfaces 2 types 1 variables 1 modules 19 parameters 3 members 11 returns 5 examples

Reference

fneach<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNodeMaps over an array and renders each item.2 paramsreturns JSXNode1 example

Maps over an array and renders each item.

Signature

export function each<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNode

View source

Parameters

items T[]
render (item: T, index: number) => JSXNode

Returns

JSXNode

Examples

Example 1

{each(items, (item) => <li>{item.name}</li>)}

fnescapeHtml(str: string): stringEscapes HTML special characters to prevent XSS.1 paramreturns string

Escapes HTML special characters to prevent XSS.

Signature

function escapeHtml(str: string): string

View source

Parameters

str string

Returns

string

fnFragment({ children }: { children?: JSXChild }): JSXNodeFragment component - renders children without a wrapper element.2 paramsreturns JSXNode

Fragment component - renders children without a wrapper element.

Signature

export function Fragment({ children }: { children?: JSXChild }): JSXNode

View source

Parameters

param { children?: JSXChild }
param.children? JSXChild

optional

Returns

JSXNode

fnjsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNodeCreates a JSX element. This is the core function called by the JSX transform.3 paramsreturns JSXNode

Creates a JSX element. This is the core function called by the JSX transform.

Signature

export function jsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNode

View source

Parameters

type JSXElementType
props JSXProps
_key string

optional

Returns

JSXNode

modulejsx-runtimeCustom JSX Runtime for Static HTML Generation This module provides a JSX runtime that outputs static HTML strings. No R…1 example

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.

View source

Examples

Example 1

// tsconfig.json or vite.config.ts
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@ox-content/vite-plugin"
  }
}

Valid JSX child types.

Signature

export type JSXChild = string | number | boolean | null | undefined | JSXNode | JSXChild[]

View source

typeJSXElementType = 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.

Signature

export type JSXElementType = string | ((props: Record<string, unknown>) => JSXNode)

View source

interfaceJSXNodeJSX node - the result of JSX expressions.1 member

JSX node - the result of JSX expressions.

Signature

export interface JSXNode

View source

Members

Properties

Name	Type	Description
`__html`	`string`

interfaceJSXPropsProps with children.2 members

Props with children.

Signature

export interface JSXProps

View source

Members

Indexable

[key: string]: unknown

Properties

Name	Type	Description
`children`optional	`JSXChild`

fnjsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNodeCreates a JSX element with static children. Called by the JSX transform for ele…3 paramsreturns JSXNode

Creates a JSX element with static children. Called by the JSX transform for elements with multiple children.

Signature

export function jsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNode

View source

Parameters

type JSXElementType
props JSXProps
key string

optional

Returns

JSXNode

fnraw(html: string): JSXNodeCreates raw HTML without escaping. Use with caution - only for trusted content.1 paramreturns JSXNode1 example

Creates raw HTML without escaping. Use with caution - only for trusted content.

Signature

export function raw(html: string): JSXNode

View source

Parameters

html string

Returns

JSXNode

Examples

Example 1

<div>{raw('<strong>Bold</strong>')}</div>

fnrenderAttr(name: string, value: unknown): stringRenders an attribute value to a string.2 paramsreturns string

Renders an attribute value to a string.

Signature

function renderAttr(name: string, value: unknown): string

View source

Parameters

name string
value unknown

Returns

string

fnrenderChildren(children: JSXChild): stringRenders children to HTML string.1 paramreturns string

Renders children to HTML string.

Signature

function renderChildren(children: JSXChild): string

View source

Parameters

children JSXChild

Returns

string

fnrenderToString(node: JSXNode): stringRenders a JSX node to an HTML string.1 paramreturns string

Renders a JSX node to an HTML string.

Signature

export function renderToString(node: JSXNode): string

View source

Parameters

node JSXNode

Returns

string

fntoHtmlAttr(name: string): stringConverts a camelCase attribute name to kebab-case for HTML. Special handling fo…1 paramreturns string

Converts a camelCase attribute name to kebab-case for HTML. Special handling for data- and aria- attributes.

Signature

function toHtmlAttr(name: string): string

View source

Parameters

name string

Returns

string

variable

const VOID_ELEMENTS = new Set([ "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr", ])

Custom JSX Runtime for Static HTML Generation This module provides a JSX runtim…1 example

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.

Signature

const VOID_ELEMENTS = new Set([
  "area",
  "base",
  "br",
  "col",
  "embed",
  "hr",
  "img",
  "input",
  "link",
  "meta",
  "param",
  "source",
  "track",
  "wbr",
])

View source

Examples

Example 1

// tsconfig.json or vite.config.ts
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@ox-content/vite-plugin"
  }
}

fnwhen(condition: boolean, content: JSXNode): JSXNodeConditionally renders content.2 paramsreturns JSXNode1 example

Conditionally renders content.

Signature

export function when(condition: boolean, content: JSXNode): JSXNode

View source

Parameters

condition boolean
content JSXNode

Returns

JSXNode

Examples

Example 1

{when(isLoggedIn, <UserMenu />)}