Modules · Interface

Dom

The low-level DOM driver. Dom is the bare layer beneath any user interface: a few calls that describe an element tree directly. Open an element with Tag and, inside its closure, declare its Attributes, its Text, its child tags, and how its events feed back into state.

An event sets a reactive value. State flows out onto the page through attributes and text, and back in through Event.Value and Event.Set: the same value, bound both ways. A tree is built with Dom and placed on the page with Reactive.Mount.

Reactive.Mount(() => {
  const ui = Dom(() => {
    const name = Reactive.State(Text)("world");

    Dom.Tag("input", () => {
      Dom.Attribute("value", name);
      Dom.Event.Value("input", name);
    });

    Dom.Tag("p", () => {
      Dom.Text(`Hello, ${name.value}!`);
    });
  });
  return { content: ui.content };
}, { content: { root: document.getElementById('app') } });
Two-way binding from a single value

Contents

Functions

Functions

Dom.Attribute

Sets an attribute on the element currently being built. Call it inside a Dom.Tag closure.

Parameters

NameTypeDescription
namestringThe attribute name, e.g. "class", "href" or "value".
valueanyA plain string or number, or a reactive value; when reactive, the attribute re-renders on its own as the value changes.

Example

const active = Reactive.State(Logic.Maybe)(true);
Dom.Tag("a", () => {
  Dom.Attribute("href", "/home");
  Dom.Attribute("class", Logic.SelectValue(active, "on", "off"));
  Dom.Text("Home");
});
Reactive class, plain href

Dom.Event.Set

Sets a reactive value to a fixed new value when an event fires. Call it inside a Dom.Tag closure.

Parameters

NameTypeDescription
eventNamestringThe DOM event to listen for, e.g. "click".
settableReactive valueThe value to set.
newValueanyWhat to set it to when the event fires.

Example

const open = Reactive.State(Logic.Maybe)(false);
Dom.Tag("button", () => {
  Dom.Event.Set("click", open, true);
  Dom.Text("Open");
});
Click sets a value to true

Dom.Event.Value

Sends the value an event carries back into a reactive value. Call it inside a Dom.Tag closure.

Parameters

NameTypeDescription
eventNamestringThe DOM event to listen for, e.g. "input", "change".
settableReactive valueThe value to update; it is set to whatever the event carries, an input's text or a checkbox's state.

Example

const text = Reactive.State(Text)("");
Dom.Tag("input", () => {
  Dom.Attribute("value", text);
  Dom.Event.Value("input", text);
});
Classic two-way input binding

Dom.Tag

Opens an HTML element and runs a closure to describe its contents.

Parameters

NameTypeDescription
tagNamestringThe HTML tag name, e.g. "div", "button", "input".
contentsfunctionA closure describing the element. Inside it, call Dom.Attribute, Dom.Text, Dom.Event.* and further Dom.Tag, and nothing else.

Returns

Nothing. The element is added to the tag currently being built, or to the mount point at the top level.

Example

Dom.Tag("ul", () => {
  Dom.Tag("li", () => {
    Dom.Text("First");
  });
  Dom.Tag("li", () => {
    Dom.Text("Second");
  });
});
Nested tags build a tree

Dom.Text

Adds a text node to the element currently being built. Call it inside a Dom.Tag closure.

Parameters

NameTypeDescription
textanyThe text to show; a plain string or number, or a reactive value that updates the text node on its own as it changes.

Example

const count = Reactive.State(Maths.Integer)(0);
Dom.Tag("p", () => {
  Dom.Text(`Clicked ${count.value} times`);
});
Text that tracks a value