Search documentation

Search by topic, API name, or import path.

GitHub ↗

interface / @typed/template

DomRenderEvent

A RenderEvent containing DOM nodes.

Package version
1.0.0-beta.7
Category
Native DOM output
Since
1.0.0

Import

import { DomRenderEvent } from "@typed/template";

Signatures

export interface DomRenderEvent {
    readonly [RenderEventTypeId]: "dom";
    readonly content: Rendered;
    readonly toString: () => string;
    readonly valueOf: () => Rendered;
}
export declare const DomRenderEvent: (content: Rendered) => DomRenderEvent;

Why

DomRenderEvent lets any renderer hand Typed an existing Node, DocumentFragment, Wire, or nested readonly collection of those values. The exact objects cross the boundary: Typed does not recreate them, rewrite their classes, or claim siblings and ancestors owned by another system.

Ownership and lifetime

The event owns no surrounding DOM and establishes no subscription. The Fx that emitted it owns external-renderer teardown and Effect finalizers. The receiving dynamic part may insert, remove, or move only the nodes represented by the event inside that part’s bounded range.

DOM behavior

Browser-owned state stays attached to the same node identity. Delegated event handlers use EventSource’s documented forwarding Proxy with an overridden currentTarget; the DOM nodes themselves are not recreated. When an already-connected node must move, the renderer prefers ParentNode.moveBefore and falls back to insertBefore.

Property: [[computed:[RenderEventTypeId]]]

Native-output discriminant stored at the public RenderEvent key.

Property: [[computed:[RenderEventTypeId]]]: Why

Distinguishes exact-node output from HTML transport.

Property: [[computed:[RenderEventTypeId]]]: Ownership and lifetime

Immutable metadata owned by the event record.

Property: content

The actual rendered DOM content.

Property: content: Why

Exposes exact nodes rather than a virtual representation.

Property: content: Ownership and lifetime

The event retains these nodes; producer and receiving range define teardown.

Property: toString

Serializes the current nodes for diagnostics or non-streaming integration.

Property: toString: Why

Provides a string representation without discarding DOM identity.

Property: toString: Ownership and lifetime

Reads the nodes and performs no mutation.

Property: valueOf

Returns the exact DOM value carried by the event.

Property: valueOf: Why

Integrations can insert or inspect the original nodes.

Property: valueOf: Ownership and lifetime

Returns a borrowed identity; it does not clone or transfer ownership.

Examples

import { DomRenderEvent } from "@typed/template/RenderEvent"

const node = document.createElement("div")
const event = DomRenderEvent(node)

// Get the DOM node
const domNode = event.valueOf()

// Convert to HTML string
const htmlString = event.toString()
import { DomRenderEvent } from "@typed/template/RenderEvent"

const div = document.createElement("div")
div.textContent = "Hello"
const event = DomRenderEvent(div)

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source