Namespace: Reactive

Reactive

Reactive utilities for DOM binding and component management. Provides methods to bind signals to DOM elements and manage reactive components.
Source:

Classes

Component

Methods

(static) bind(el, sig, fn) → {function}

Binds a signal to an element's innerHTML through a transformation function.
Parameters:
Name Type Description
el HTMLElement Target element
sig Signal Signal to bind
fn function Transform function
Source:
Returns:
Unsubscribe function
Type
function
Example
const count = Signals.create(0);
Reactive.bind(div, count, val => html`Count: ${val}`);

(static) bindAttr(el, attr, sig) → {function}

Binds a signal to an element's attribute.
Parameters:
Name Type Description
el HTMLElement Target element
attr string Attribute name
sig Signal Signal to bind
Source:
Returns:
Unsubscribe function
Type
function
Example
const url = Signals.create("/page");
Reactive.bindAttr(link, "href", url);

(static) bindBoolAttr(el, attr, sig) → {function}

Binds a signal to a boolean attribute (present/absent).
Parameters:
Name Type Description
el HTMLElement Target element
attr string Attribute name (e.g., "disabled", "hidden")
sig Signal.<boolean> Signal to bind
Source:
Returns:
Unsubscribe function
Type
function
Example
const isDisabled = Signals.create(false);
Reactive.bindBoolAttr(button, "disabled", isDisabled);

(static) bindClass(el, cls, sig) → {function}

Binds a signal to toggle a CSS class on an element.
Parameters:
Name Type Description
el HTMLElement Target element
cls string CSS class name
sig Signal.<boolean> Signal to bind
Source:
Returns:
Unsubscribe function
Type
function
Example
const isActive = Signals.create(true);
Reactive.bindClass(div, "active", isActive);

(static) bindMultiple(el, signals, fn) → {function}

Binds multiple signals to an element using a combine function. Creates a computed signal that tracks all input signals.
Parameters:
Name Type Description
el HTMLElement Target element
signals Array.<Signal> Array of signals to combine
fn function Function that combines signal values
Source:
Throws:
If signals is not an array
Type
Error
Returns:
Unsubscribe function
Type
function
Example
const first = Signals.create("John");
const last = Signals.create("Doe");
Reactive.bindMultiple(div, [first, last], ([f, l]) => `${f} ${l}`);

(static) bindStyle(el, prop, sig) → {function}

Binds a signal to a CSS style property.
Parameters:
Name Type Description
el HTMLElement Target element
prop string CSS property name (camelCase)
sig Signal Signal to bind
Source:
Returns:
Unsubscribe function
Type
function
Example
const bgColor = Signals.create("red");
Reactive.bindStyle(div, "backgroundColor", bgColor);

(static) bindText(el, sig) → {function}

Binds a signal to an element's textContent.
Parameters:
Name Type Description
el HTMLElement Target element
sig Signal Signal to bind
Source:
Returns:
Unsubscribe function
Type
function
Example
const message = Signals.create("Hello");
Reactive.bindText(span, message);

(static) createComponent() → {Object}

Creates a component context for managing subscriptions and computed signals. Provides methods for tracking cleanup functions and creating scoped reactivity.
Source:
Returns:
Component context with track, computed, scan, bind methods
Type
Object
Example
const ctx = Reactive.createComponent();
const count = Signals.create(0);
ctx.bindText(element, count);
ctx.cleanup(); // Cleans up all bindings

(static) mount(el, fn) → {Object}

Mounts a reactive function to an element, updating its innerHTML.
Parameters:
Name Type Description
el HTMLElement Target element
fn function Function that returns content
Source:
Returns:
Object with update method
Type
Object

(static) scan(root, scope) → {function}

Scans a DOM tree for data attributes and binds them to signals in the scope. Supports: data-text, data-html, data-visible, data-if, data-model, data-class-*, data-attr-*, data-bool-*, data-on-*
Parameters:
Name Type Description
root HTMLElement Root element to scan
scope Object Object containing signals to bind
Source:
Returns:
Cleanup function to unbind all
Type
function
Example
const scope = { message: Signals.create("Hello") };
// <div data-text="message"></div>
const cleanup = Reactive.scan(document.body, scope);