ef.js

Declarative DOM helper experiment

import { attr, derived, el, on, signal } from "/ef.js";

const $opened = signal(false);

querySelector("#demo").appendChild(
  el(
    "label",
    [],
    [
      el("input", [
        attr("type", "checkbox"),
        on("input", (ev) => {
          $opened.set(ev.currentTarget.checked);
        }),
      ]),
      derived(() => ($opened.get() ? "Checked" : "Unchecked")),
    ],
  ),
);

ef.js (@pocka/ef) is a small JavaScript library that helps writing DOM manipulation in a declarative manner.