Search documentation

Search by topic, API name, or import path.

GitHub ↗

interface / @typed/template

Wire

Wire is a data type that serves as a persistent, reusable DocumentFragment.

Unlike a standard DocumentFragment, which empties itself when appended to the DOM, a Wire retains references to its child nodes. This allows it to be moved around the DOM or updated without losing track of its content.

It is used internally to manage the lifecycle of template instances.

Package version
1.0.0-beta.7
Category
Persistent DOM ranges
Since
1.0.0

Import

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

Signatures

export interface Wire {
    readonly ELEMENT_NODE: 1;
    readonly DOCUMENT_FRAGMENT_NODE: 11;
    readonly nodeType: 111;
    readonly firstChild: Node | null;
    readonly lastChild: Node | null;
    readonly childNodes: Array<Node>;
    readonly valueOf: () => DocumentFragment;
}

Why

Multiple concrete nodes need one stable, movable identity after their source DocumentFragment has been inserted and emptied. Boundary comments make that range explicit without wrapping it in an extra element.

Ownership and lifetime

A Wire retains its exact boundary and child nodes but claims no ancestors or external siblings. The render Scope decides when its range is moved or removed; browser-owned state remains attached to the same nodes.

Property: DOCUMENT_FRAGMENT_NODE

Native DocumentFragment node constant exposed for DOM-diff compatibility.

Property: DOCUMENT_FRAGMENT_NODE: Why

Supports algorithms branching on fragment behavior.

Property: DOCUMENT_FRAGMENT_NODE: Ownership and lifetime

Immutable numeric metadata.

Property: ELEMENT_NODE

Native Element node constant exposed for DOM-diff compatibility.

Property: ELEMENT_NODE: Why

Lets node algorithms treat Wire as a fragment-like DOM value.

Property: ELEMENT_NODE: Ownership and lifetime

Immutable numeric metadata.

Property: childNodes

Current concrete nodes in the represented range.

Property: childNodes: Why

Reflects moves performed after the source fragment was inserted.

Property: childNodes: Ownership and lifetime

Returns borrowed node identities in current DOM order.

Property: firstChild

Opening boundary of the represented DOM range.

Property: firstChild: Why

Gives bounded diff and move operations an exact start.

Property: firstChild: Ownership and lifetime

Borrowed node identity retained by the Wire.

Property: lastChild

Closing boundary of the represented DOM range.

Property: lastChild: Why

Gives bounded diff and move operations an exact end.

Property: lastChild: Ownership and lifetime

Borrowed node identity retained by the Wire.

Property: nodeType

Wire-specific node sentinel used by public guards and reconciliation.

Property: nodeType: Why

Distinguishes a transparent multi-node range from native Nodes.

Property: nodeType: Ownership and lifetime

Immutable numeric metadata.

Property: valueOf

Reassembles the current range as a DocumentFragment for native insertion.

Property: valueOf: Why

Native DOM insertion can move every represented node without a wrapper.

Property: valueOf: Ownership and lifetime

Moves the Wire’s exact nodes into its retained fragment; no clones are made.

Examples

import { persistent } from "@typed/template/Wire"

// Wire is created internally by the template renderer
// It wraps DocumentFragments with multiple children
// to maintain references after DOM operations

Other public imports

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

Source