Search documentation

Search by topic, API name, or import path.

GitHub ↗

variable / @typed/template

DomRenderTemplate

A Layer that provides the RenderTemplate service implemented for DOM rendering.

This layer enables templates to be rendered as actual DOM nodes. It handles:

  • Parsing templates into DOM fragments.
  • Caching parsed templates.
  • Hydrating from existing DOM (if applicable).
  • Setting up event listeners.
  • Managing fine-grained updates to DOM nodes via Fx streams.
Package version
1.0.0-beta.7
Category
DOM template interpretation
Since
1.0.0

Import

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

Signatures

export declare const DomRenderTemplate: Layer.Layer<RenderTemplate, never, never> & {
    readonly using: (document: Document) => Layer.Layer<RenderTemplate, never, never>;
};

Why

The Layer is the DOM implementation of the same RenderTemplate service used by SSR. It compiles a literal once, clones namespace-correct fragments, and connects each captured part directly to its producer—there is no virtual DOM or component-specific event state. Delegated handlers receive EventSource’s documented native-event Proxy so currentTarget can identify their target.

Ownership and lifetime

Template and fragment caches live with the Layer service. Each emitted DOM range keeps its mounted subscriptions, delegated native listeners, queued callbacks, and ref finalizers in the surrounding event Scope. Replaceable spread parts use child Scopes so replacement still releases their resources. Only nodes and attributes represented by that range are changed; external classes and unowned siblings remain intact.

Cost model and moves

Captured scalar text, attribute, property, boolean, comment, and ref parts update their retained target in O(1) with respect to the surrounding tree. Structural changes diff only the local dynamic range. Moving an already connected node prefers ParentNode.moveBefore and falls back to insertBefore, preserving DOM identity and browser state.

Web standards

HTML, SVG, MathML, and foreign-content namespace boundaries are compiled with native DOM APIs. Dialog, popover, anchor positioning, custom elements, and browser event behavior remains available through EventSource’s forwarding Proxy because the renderer does not replace the platform event model.

Examples

import { Effect, Layer } from "effect"
import { html } from "@typed/template"
import { DomRenderTemplate, render } from "@typed/template/Render"
import { Fx } from "@typed/fx"

const program = Effect.gen(function* () {
  const template = html`<div>Hello, world!</div>`

  return yield* render(template, document.body).pipe(
    Fx.drainLayer,
    Layer.provide(DomRenderTemplate),
    Layer.launch
  )
})

Other public imports

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

Source