DOM Runtime & SSR
@dathra/runtimeprovides low-level DOM manipulation primitives, SSR rendering
functions, and a hydration engine.
Runtime APIs are mainly for compiler output, integrations, and Dathra contributors. For exact signatures, see theRuntime API Reference.
DOM Primitives
ts
import {
setAttr, // set DOM attributes
setProp, // set DOM properties
setText, // set text content
insert, // insert a node
append, // append a node
spread, // spread props onto an element
firstChild,
nextSibling,
} from "@dathra/runtime";Tree IR
Build DOM from a structured intermediate representation:
ts
import { fromTree, fromMarkup } from "@dathra/runtime";
const el = fromTree({
tag: "div",
props: { class: "container" },
children: [{ tag: "p", children: ["Hello"] }],
});
// Returns a thunk that produces the DOM element
const fromHtml = fromMarkup("<p>Hello</p>");Hello
");Events
ts
import { event } from "@dathra/runtime";
// Event handling utilities used internally by the runtimeReconciliation
Keyed list reconciliation:
ts
import { reconcile } from "@dathra/runtime";
const list = reconcile(
parentElement,
items, // current items array
renderItem, // (item) => HTMLElement
getKey, // (item) => string | number
);SSR Primitives
ts
import {
renderDynamicText,
renderDynamicAttr,
renderDynamicSpread,
renderDynamicInsert,
renderDynamicEach,
} from "@dathra/runtime/ssr";
// Used by the transformer for SSR code generationHydration
ts
import {
hydrateWithPlan,
getClientAction,
registerClientAction,
} from "@dathra/runtime/hydration";
// Deserialize SSR state
import { deserializeState } from "@dathra/runtime/hydration";