stax-monorepo
    Preparing search index...

    Interface Renderer<Node>

    Abstract renderer interface for creating and manipulating a node tree. Implementations can target DOM, strings (SSR), terminal, native, etc.

    interface Renderer<Node> {
        addEventListener: (
            node: Node,
            event: string,
            handler: (event: unknown) => void,
            options?: AddEventListenerOptions,
        ) => Effect<void, never, Scope>;
        appendChild: (parent: Node, child: Node) => Effect<void>;
        completeHydration: Effect<void>;
        createNode: (type: string, namespace?: string) => Effect<Node>;
        createSlot: () => Effect<Slot<Node>>;
        createTextNode: (text: string) => Effect<Node>;
        environment: string;
        finalizeNode: (node: Node) => Effect<void>;
        getChildren: (node: Node) => Effect<readonly Node[]>;
        hydrationPhase: Readable.Readable<boolean>;
        insertBefore: (
            parent: Node,
            child: Node,
            reference: Node | null,
        ) => Effect<void>;
        pushHydrationParent: (node: Node) => Effect<void>;
        removeAttribute: (node: Node, key: string) => Effect<void>;
        removeChild: (parent: Node, child: Node) => Effect<void>;
        removeStyleProperty: (node: Node, property: string) => Effect<void>;
        replaceChild: (
            parent: Node,
            newChild: Node,
            oldChild: Node,
        ) => Effect<void>;
        setAttribute: (node: Node, key: string, value: unknown) => Effect<void>;
        setClassName: (node: Node, className: string) => Effect<void>;
        setInnerHTML: (node: Node, html: string) => Effect<void>;
        setInputValue: (node: Node, value: string) => Effect<void>;
        setStyleProperty: (
            node: Node,
            property: string,
            value: string,
        ) => Effect<void>;
        setTextContent: (node: Node, text: string) => Effect<void>;
        toggleClass: (
            node: Node,
            className: string,
            force?: boolean,
        ) => Effect<void>;
    }

    Type Parameters

    • Node

      The node type for this renderer (e.g., HTMLElement, VNode, string)

    Index
    addEventListener appendChild completeHydration createNode createSlot createTextNode environment finalizeNode getChildren hydrationPhase insertBefore pushHydrationParent removeAttribute removeChild removeStyleProperty replaceChild setAttribute setClassName setInnerHTML setInputValue setStyleProperty setTextContent toggleClass
    addEventListener: (
        node: Node,
        event: string,
        handler: (event: unknown) => void,
        options?: AddEventListenerOptions,
    ) => Effect<void, never, Scope>

    Add an event listener to a node. Scoped — the listener is removed when the enclosing Scope closes. Callers don't need to register their own finalizer.

    options is passed through to the underlying addEventListener (matters for once, capture, passive); the same values are passed to removeEventListener in the finalizer so the listener is correctly identified for removal.

    Non-interactive renderers (SSR) treat this as a no-op.

    appendChild: (parent: Node, child: Node) => Effect<void>

    Append a child node to a parent node.

    completeHydration: Effect<void>

    Mark the initial hydration walk as complete — flips hydrationPhase from true to false and emits the transition to subscribers. Called by hydrate() after the initial Effect.provide(element, …) returns; no-op for non-hydration renderers.

    createNode: (type: string, namespace?: string) => Effect<Node>

    Create an element node of the given type.

    Type Declaration

      • (type: string, namespace?: string): Effect<Node>

      • Parameters

        Returns Effect<Node>

    createSlot: () => Effect<Slot<Node>>

    Create a slot for swappable content. Used by Boundary.suspense to swap fallback with actual content. Returns a Slot with a marker node and methods to set/clear content.

    createTextNode: (text: string) => Effect<Node>

    Create a text node with the given content.

    environment: string

    A string identifying the rendering environment (e.g., "dom", "ssr", "terminal"). Useful for conditional logic in components that need to behave differently in different environments.

    finalizeNode: (node: Node) => Effect<void>

    Signal that an element created with createNode has been fully built (attributes set, children appended). Used by the hydration renderer to pop its traversal context. No-op for other renderers.

    getChildren: (node: Node) => Effect<readonly Node[]>

    Get children of a node (for traversal during hydration).

    hydrationPhase: Readable.Readable<boolean>

    Reactive hydration phase — true while the initial hydration walk is in progress, false afterwards (or from the outset for non-hydration renderers). Observed by browser-only reactive values (e.g. Screen.match) that need to serve their SSR-safe fallback during hydration and switch to the live value once hydration completes, so the first client render matches the SSR HTML.

    insertBefore: (
        parent: Node,
        child: Node,
        reference: Node | null,
    ) => Effect<void>

    Insert a child before a reference node.

    pushHydrationParent: (node: Node) => Effect<void>

    Resume a hydration walk inside a node whose subtree hasn't been fully consumed yet. Used by reconcile after a forked ControlCtx builds its containerElement via create() — create()'s inner finalizeNode pops the container off the stack, and subsequent addSlot renders need it back on top so they find the SSR slot nodes inside.

    The complementary pop is finalizeNode(node), which is invoked indirectly by finalizeContainer at the end of reconcile.

    No-op for renderers that don't maintain a traversal stack.

    removeAttribute: (node: Node, key: string) => Effect<void>

    Remove an attribute from a node.

    removeChild: (parent: Node, child: Node) => Effect<void>

    Remove a child node from a parent node.

    removeStyleProperty: (node: Node, property: string) => Effect<void>

    Remove a CSS style property from a node.

    replaceChild: (parent: Node, newChild: Node, oldChild: Node) => Effect<void>

    Replace an old child node with a new one.

    setAttribute: (node: Node, key: string, value: unknown) => Effect<void>

    Set an attribute on a node. If value is null/undefined, the attribute should be removed. If value is a boolean, true sets empty string, false removes.

    setClassName: (node: Node, className: string) => Effect<void>

    Set the className of a node.

    setInnerHTML: (node: Node, html: string) => Effect<void>

    Set the innerHTML of a node. Note: This may not be supported by all renderers.

    setInputValue: (node: Node, value: string) => Effect<void>

    Set the value property of an input-like node.

    setStyleProperty: (node: Node, property: string, value: string) => Effect<void>

    Set a CSS style property on a node.

    setTextContent: (node: Node, text: string) => Effect<void>

    Set the text content of a node.

    toggleClass: (node: Node, className: string, force?: boolean) => Effect<void>

    Toggle a CSS class on a node.

    Type Declaration

      • (node: Node, className: string, force?: boolean): Effect<void>

      • Parameters

        • node: Node
        • className: string
        • Optionalforce: boolean

          If true, adds the class; if false, removes it; if undefined, toggles

        Returns Effect<void>

    Settings
    Member Visibility

    On This Page
    Properties