dom.js

Exports (auto)

DOM-first rendering primitives.

Import example

import { h, tag, createTags, tags, Show, If, For } from "@ztools.org/runtime";

When to use

Use dom.js when building client-side UI directly with DOM nodes and reactive values.

h(target, ...args)

Universal node factory:

const node = h("button", { onClick: () => console.log("click") }, "Save");
document.body.appendChild(node);

tag(name) and createTags(...names)

Tag factory helpers.

const div = tag("div");
const [p, button] = createTags("p", "button");

const ui = div(
  p("Hello"),
  button({ onClick: () => alert("Hi") }, "Click")
);

tags

Dual-mode API:

const { section, h2, ul, li } = tags;

const block = section(
  h2("Items"),
  ul(li("A"), li("B"), li("C"))
);

const t = tags("div", "a");
const link = t.div(t.a({ href: "#" }, "Open"));

Props model

Supports legacy and explicit channels:

div({
  attrs: { "data-id": "123" },
  props: { textContent: "hello" },
  on: { click: () => {} },
  onChange: () => {}
});

Show(when, render, fallback?)

Conditional branch rendering.

If is provided as an alias for Show.

const visible = signal(true);

const view = Show(
  () => visible(),
  () => div("Visible content"),
  () => div("Hidden content")
);

// same behavior:
const view2 = If(
  () => visible(),
  () => div("Visible content"),
  () => div("Hidden content")
);

For(listSignal, renderItem, keyFn?)

Keyed list rendering with efficient node reuse/reorder.

const rows = signal([
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]);

const listNode = For(
  rows,
  (row) => li(() => row.name),
  (row) => row.id
);

Examples

Related APIs