#Compilation and rendering

Kita Html turns JSX source into an HTML string in two stages: TypeScript compilation and runtime rendering. Compilation removes the JSX syntax. Rendering concatenates the output of the resulting function calls into the final HTML string.

#Compilation

When tsconfig.json specifies jsx: "react-jsx" and jsxImportSource: "@kitajs/html", TypeScript rewrites every JSX expression into a function call. Elements with a single child call jsx(). Elements with multiple children call jsxs(). Attributes and children are passed as a single props object.

const 
const html: JSX.Elementhtml = (
  <
JSX.IntrinsicElements.ol: JSX.HtmlOListTagol 
JSX.HtmlOListTag.start?: string | number | undefinedstart={2}>
    {[1, 2].
Array<number>.map<JSX.Element>(callbackfn: (value: number, index: number, array: number[]) => JSX.Element, thisArg?: any): JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn  A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((
i: numberi) => (
      <
JSX.IntrinsicElements.li: JSX.HtmlLITagli>{
i: numberi}</
JSX.IntrinsicElements.li: JSX.HtmlLITagli>
    ))}
  </
JSX.IntrinsicElements.ol: JSX.HtmlOListTagol>
)

<ol start="2">
  <li>1</li>
  <li>2</li>
</ol>

TypeScript compiles the expression to function calls:

import { jsx as _jsx } from "@kitajs/html/jsx-runtime";
const html = (_jsx("ol", { start: 2, children: [1, 2].map((i) => (_jsx("li", { children: i }))) }));

<ol start="2">
  <li>1</li>
  <li>2</li>
</ol>

#Rendering

The jsx() and jsxs() functions receive the tag name and the props object produced by compilation. They render HTML by converting attributes and children to strings and concatenating the opening tag, content, and closing tag.

If any child is a Promise, the concatenation returns a Promise<string> instead of a string. See promise propagation.

Void elements like <br />, <img />, and <meta /> skip the closing tag entirely. The runtime checks the tag name against a list ordered by frequency so the most common void elements resolve in the fewest comparisons.

Attribute values always have double quotes escaped. The class attribute accepts arrays for conditional composition. The style attribute accepts both strings and objects, with automatic camelCase-to-kebab-case conversion for object keys. Boolean attributes like disabled render as valueless attributes when true and are omitted when false.