effex-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,
        ) => Effect<void>;
        appendChild: (parent: Node, child: Node) => 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[]>;
        insertBefore: (
            parent: Node,
            child: Node,
            reference: Node | null,
        ) => Effect<void>;
        isHydrating: Effect<boolean>;
        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

    Properties

    addEventListener appendChild createNode createSlot createTextNode environment finalizeNode getChildren insertBefore isHydrating pushHydrationParent removeAttribute removeChild removeStyleProperty replaceChild setAttribute setClassName setInnerHTML setInputValue setStyleProperty setTextContent toggleClass

    Properties

    addEventListener: (
        node: Node,
        event: string,
        handler: (event: unknown) => void,
    ) => Effect<void>

    Add an event listener to a node. Returns a cleanup function to remove the listener. Note: This may be a no-op for non-interactive renderers (SSR).

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

    Append a child node to a parent node.

    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).

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

    Insert a child before a reference node.

    isHydrating: Effect<boolean>

    Check if the renderer is in hydration mode.

    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