@brandup/ui 2.0.1 → 2.0.3

package/README.md

@@ -59,9 +59,12 @@ class MyWidget extends UIElement {
 }
 ```
 
-The `HTMLElement.prototype.ui` extension lets you bind a `UIElement` through a factory and returns the element itself:
+The `HTMLElement.prototype.ui` extension lets you bind a `UIElement` through a factory and returns the element itself. It is opt-in (not installed on import) — call `enableElementExtensions()` once before using it:
 
 ```ts
+import { enableElementExtensions } from "@brandup/ui";
+
+enableElementExtensions();
 document.getElementById("widget")!.ui(elem => new MyWidget(elem));
 ```
 
@@ -122,7 +125,7 @@ this.registerCommand(
 );
 ```
 
-Commands are triggered by the `click` event. The handler is looked up by walking up the DOM from the element with the `data-command` attribute to the nearest `UIElement` in which that command is registered.
+Commands are triggered by the `click` event. The handler is looked up by walking up the DOM from the element with the `data-command` attribute to the nearest `UIElement` in which that command is registered. The global click listener must be enabled once via `initUICommands()` — `Application` does this automatically (see [Command click handler](#command-click-handler)).
 
 While an asynchronous command is running, the **executing** CSS class is added to the target element (and removed once the `Promise` settles).
 
@@ -246,14 +249,16 @@ elem.remove(); // destroy() fires automatically on next microtask
 
 If the element was never connected to the document (e.g. built in memory and then discarded), auto-destroy does **not** fire — only mounted-then-removed elements are watched.
 
-### Global click handler cleanup
+### Command click handler
 
-The library registers one global `click` listener on `window` to handle commands. Call `destroyUI()` to remove it on app teardown or during HMR disposal:
+Commands are dispatched by a single global `click` listener on `window`. It is **not** registered automatically on import (so the command system can be tree-shaken away when unused) — call `initUICommands()` once during startup. It is idempotent and a no-op without a DOM. `Application.run()` (from `@brandup/ui-app`) calls it for you, so you only need it when using `UIElement` commands **without** an `Application`:
 
 ```ts
-import { destroyUI } from "@brandup/ui";
+import { initUICommands, destroyUI } from "@brandup/ui";
 
-destroyUI();
+initUICommands(); // enable command handling
+// ...
+destroyUI();      // remove the listener on app teardown or HMR disposal
 ```
 
 ## DOM helpers
@@ -462,7 +467,7 @@ user => DOM.tag("li", null, bind(() => user.name))
 user => DOM.tag("li", null, user.name)
 ```
 
-The binding stops automatically when its container is removed from the document (same lifecycle as `bind`).
+The binding stops automatically once its rendered nodes leave the document — whether the container is removed or just cleared/replaced (same lifecycle as `bind`).
 
 ### Disposal
 

package/dist/cjs/constants.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/** Default constant values used across the library. */
+const constants = {
+    ElemAttributeName: "uiElement",
+    ElemPropertyName: "uielement",
+    CommandAttributeName: "command",
+    CommandExecutingCssClassName: "executing"
+};
+
+exports.default = constants;
+//# sourceMappingURL=constants.js.map

package/dist/cjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../source/constants.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAYA;AACA,MAAM,SAAS,GAAgB;AAC9B,IAAA,iBAAiB,EAAE,WAAW;AAC9B,IAAA,gBAAgB,EAAE,WAAW;AAC7B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,4BAA4B,EAAE;;;;;"}

package/dist/cjs/dom/bind-each.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var effect = require('../reactive/effect.js');
+var bindingCleanup = require('./binding-cleanup.js');
+
+/** A keyed-list binding produced by {@link bindEach}; handled by `appendChild` in `tag.ts`. */
+class BindingEach {
+    getItems;
+    getKey;
+    render;
+    constructor(getItems, getKey, render) {
+        this.getItems = getItems;
+        this.getKey = getKey;
+        this.render = render;
+    }
+}
+/**
+ * Create a reactive keyed-list binding for use as a {@link tag} child.
+ *
+ * The `getItems` function is tracked; the list is reconciled whenever the array
+ * changes (push, splice, reassignment, etc.). Items are matched by `getKey` so
+ * unchanged nodes stay in place — only new, removed, or reordered nodes are touched.
+ *
+ * `render` is called **once per key** and runs **untracked**. Use `bind()` inside
+ * the render function for item properties that should update independently:
+ *
+ * ⚠️ The item object passed to `render` is captured at first render for that key.
+ * Mutate items in place (`item.name = "..."`) so `bind()` reactions fire. Replacing
+ * the array with **new objects that reuse the same keys** keeps the cached node bound
+ * to the *old* object, so per-item `bind()`s won't update — change the key, or mutate
+ * the existing item, when its identity should change.
+ *
+ * @example
+ * DOM.tag("ul", null,
+ *     bindEach(() => state.users, u => u.id, u =>
+ *         DOM.tag("li", null, bind(() => u.name))
+ *     )
+ * );
+ */
+function bindEach(getItems, getKey, render) {
+    return new BindingEach(getItems, getKey, render);
+}
+/**
+ * Mount a {@link BindingEach} into `container` and start tracking.
+ * Called by `appendChild` in `tag.ts`; not intended for direct use.
+ * @internal
+ */
+function appendBindingEach(container, binding) {
+    const nodes = new Map();
+    // Anchor comment marks the start of the managed region inside the container.
+    // Using an anchor (rather than container.firstChild) lets other children coexist.
+    const anchor = document.createComment("");
+    container.append(anchor);
+    const eff = effect.effect(() => {
+        const items = binding.getItems();
+        const nextKeys = new Set();
+        for (let i = 0; i < items.length; i++)
+            nextKeys.add(binding.getKey(items[i], i));
+        // Remove nodes whose keys are no longer present
+        for (const [key, node] of nodes) {
+            if (!nextKeys.has(key)) {
+                node.remove();
+                nodes.delete(key);
+            }
+        }
+        // Insert new nodes and restore order in a single pass starting after the anchor.
+        // If the node is already at the expected position we advance; otherwise insertBefore moves it.
+        let cursor = anchor.nextSibling;
+        for (let i = 0; i < items.length; i++) {
+            const key = binding.getKey(items[i], i);
+            let node = nodes.get(key);
+            if (!node) {
+                // Render untracked so item-property reads don't create dependencies on
+                // this list effect — use bind() inside render for fine-grained updates.
+                node = effect.untrack(() => binding.render(items[i]));
+                nodes.set(key, node);
+            }
+            if (cursor !== node)
+                container.insertBefore(node, cursor);
+            else
+                cursor = cursor.nextSibling;
+        }
+    });
+    bindingCleanup.autoDisposeBinding(container, () => anchor, eff);
+}
+
+exports.BindingEach = BindingEach;
+exports.appendBindingEach = appendBindingEach;
+exports.bindEach = bindEach;
+//# sourceMappingURL=bind-each.js.map

package/dist/cjs/dom/bind-each.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind-each.js","sources":["../../../../source/dom/bind-each.ts"],"sourcesContent":[null],"names":["effect","untrack","autoDisposeBinding"],"mappings":";;;;;AAGA;MACa,WAAW,CAAA;AAEb,IAAA,QAAA;AACA,IAAA,MAAA;AACA,IAAA,MAAA;AAHV,IAAA,WAAA,CACU,QAAmB,EACnB,MAAmD,EACnD,MAA4B,EAAA;QAF5B,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,MAAM,GAAN,MAAM;IACZ;AACJ;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;SACa,QAAQ,CACvB,QAAmB,EACnB,MAAmD,EACnD,MAA4B,EAAA;IAE5B,OAAO,IAAI,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;AACjD;AAEA;;;;AAIG;AACG,SAAU,iBAAiB,CAAI,SAAsB,EAAE,OAAuB,EAAA;AACnF,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAA4B;;;IAIjD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;AACzC,IAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;AAExB,IAAA,MAAM,GAAG,GAAGA,aAAM,CAAC,MAAK;AACvB,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,EAAE;AAEhC,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAmB;AAC3C,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE;AACpC,YAAA,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;;QAG1C,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE;YAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACvB,IAAI,CAAC,MAAM,EAAE;AACb,gBAAA,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YAClB;QACD;;;AAIA,QAAA,IAAI,MAAM,GAAqB,MAAM,CAAC,WAAW;AACjD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACtC,YAAA,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACvC,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;YAEzB,IAAI,CAAC,IAAI,EAAE;;;AAGV,gBAAA,IAAI,GAAGC,cAAO,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,gBAAA,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC;YACrB;YAEA,IAAI,MAAM,KAAK,IAAI;AAClB,gBAAA,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;;AAEpC,gBAAA,MAAM,GAAG,MAAM,CAAC,WAAW;QAC7B;AACD,IAAA,CAAC,CAAC;IAEFC,iCAAkB,CAAC,SAAS,EAAE,MAAM,MAAM,EAAE,GAAG,CAAC;AACjD;;;;;;"}

package/dist/cjs/dom/bind.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * A reactive binding for use as a {@link tag} child. Its `compute` function is
+ * re-evaluated and re-rendered whenever the reactive state it reads changes.
+ */
+class Binding {
+    compute;
+    constructor(compute) {
+        this.compute = compute;
+    }
+}
+/**
+ * Create a reactive {@link Binding} that can be passed as a `tag` child. The
+ * compute function is tracked: it re-runs (updating the DOM in place) whenever
+ * any reactive value it reads changes.
+ *
+ * @example
+ * const state = reactive({ name: "Alice" });
+ * DOM.tag("div", null, "Hi, ", bind(() => state.name));
+ * state.name = "Bob"; // the text updates in place
+ */
+function bind(compute) {
+    return new Binding(compute);
+}
+
+exports.Binding = Binding;
+exports.bind = bind;
+//# sourceMappingURL=bind.js.map

package/dist/cjs/dom/bind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.js","sources":["../../../../source/dom/bind.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAKA;;;AAGG;MACU,OAAO,CAAA;AACE,IAAA,OAAA;AAArB,IAAA,WAAA,CAAqB,OAA2B,EAAA;QAA3B,IAAA,CAAA,OAAO,GAAP,OAAO;IAAwB;AACpD;AAED;;;;;;;;;AASG;AACG,SAAU,IAAI,CAAC,OAA2B,EAAA;AAC/C,IAAA,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;AAC5B;;;;;"}

package/dist/cjs/dom/binding-cleanup.js

@@ -0,0 +1,162 @@
+'use strict';
+
+// UIElements are located via the data attribute `UIElement.setElement` already sets
+// (`elem.dataset.uiElement` → `data-ui-element`), so no extra marker is needed for them.
+const UIELEM_SELECTOR = "[data-ui-element]";
+// Marker placed on every element a reactive binding renders into, so a removed
+// subtree (or a cleared container) can be queried for affected bindings.
+const BINDING_ATTR = "data-bui-binding";
+const BINDING_SELECTOR = "[data-bui-binding]";
+// node → UIElement auto-destroy entry
+const trackedElements = new Map();
+// container element → bindings rendered into it (one marker per container)
+const bindingsByContainer = new Map();
+let observer;
+function ensureObserver() {
+    if (typeof MutationObserver !== "undefined" && !observer) {
+        observer = new MutationObserver(onMutations);
+        observer.observe(document, { childList: true, subtree: true });
+    }
+}
+function disconnectIfEmpty() {
+    if (trackedElements.size === 0 && bindingsByContainer.size === 0 && observer) {
+        observer.disconnect();
+        observer = undefined;
+    }
+}
+/**
+ * React only to *removed* nodes (insertions never disconnect anything). Two cases:
+ *  - a removed element subtree → dispose the tracked UIElements/bindings inside it;
+ *  - children removed from a surviving container (e.g. `container.innerHTML = ""`) →
+ *    re-check the bindings rendered directly into that container.
+ * Work stays proportional to what changed, not to the total number tracked.
+ */
+function onMutations(mutations) {
+    for (const mutation of mutations) {
+        mutation.removedNodes.forEach(node => {
+            if (node instanceof HTMLElement)
+                disposeDisconnectedWithin(node);
+        });
+        // A binding's managed node (a text/comment) can be removed while its container
+        // stays connected (a cleared/replaced container). The container itself is then
+        // the mutation target, not a removed node, so check its bindings here.
+        const target = mutation.target;
+        if (mutation.removedNodes.length && target instanceof HTMLElement && target.hasAttribute(BINDING_ATTR))
+            disposeDisconnectedBindings(target);
+    }
+    disconnectIfEmpty();
+}
+/** Apply `fn` to `root` itself (when it matches) and every descendant matching `selector`. */
+function forEachSelfAndMatches(root, selector, fn) {
+    if (root.matches(selector))
+        fn(root);
+    root.querySelectorAll(selector).forEach(el => fn(el));
+}
+/** Destroy/stop tracked entries inside a removed subtree that are no longer in the document. */
+function disposeDisconnectedWithin(removed) {
+    // UIElements first: destroying one cascades to its nested UIElements and bindings.
+    forEachSelfAndMatches(removed, UIELEM_SELECTOR, el => {
+        // `isConnected` guards against moves (removed from one place, re-inserted in another).
+        if (!el.isConnected) {
+            const entry = trackedElements.get(el);
+            if (entry)
+                entry.destroy(); // destroy() untracks itself, cascades, and disposes its bindings
+        }
+    });
+    forEachSelfAndMatches(removed, BINDING_SELECTOR, disposeDisconnectedBindings);
+}
+/** Stop the bindings of `container` whose managed node has left the document. */
+function disposeDisconnectedBindings(container) {
+    const set = bindingsByContainer.get(container);
+    if (!set)
+        return;
+    for (const binding of [...set]) {
+        if (!binding.getNode().isConnected) {
+            set.delete(binding);
+            binding.effect.stop();
+        }
+    }
+    if (!set.size) {
+        bindingsByContainer.delete(container);
+        container.removeAttribute(BINDING_ATTR);
+    }
+}
+/** Stop and forget every binding of `container`, unconditionally (owner is being destroyed). */
+function stopAllBindings(container) {
+    const set = bindingsByContainer.get(container);
+    if (!set)
+        return;
+    bindingsByContainer.delete(container);
+    container.removeAttribute(BINDING_ATTR);
+    set.forEach(binding => binding.effect.stop());
+}
+/**
+ * Track a binding so its reactive effect is stopped automatically once its managed node has
+ * been mounted and then removed from the document (via a shared `MutationObserver`), and so
+ * {@link disposeBindingsWithin} can stop it when its owning UIElement is destroyed.
+ *
+ * @param container Element the binding renders into (indexed/marked for subtree queries).
+ * @param getNode Returns the binding's current managed node — its connectivity drives disposal.
+ * @param effect The reactive effect to stop on disposal.
+ */
+function autoDisposeBinding(container, getNode, effect) {
+    let set = bindingsByContainer.get(container);
+    if (!set) {
+        bindingsByContainer.set(container, set = new Set());
+        container.setAttribute(BINDING_ATTR, "");
+    }
+    set.add({ getNode, container, effect });
+    ensureObserver();
+}
+/**
+ * Register a `UIElement`'s DOM node for auto-destroy: once the node has been mounted
+ * into the document and then removed, `destroy` is called automatically.
+ * @internal — called by `UIElement.setElement`.
+ */
+function trackAutoDestroy(node, destroy) {
+    trackedElements.set(node, { node, destroy });
+    ensureObserver();
+}
+/**
+ * Remove a node from auto-destroy tracking (called when `UIElement.destroy` is
+ * invoked explicitly so the entry does not linger).
+ * @internal — called by `UIElement.destroy`.
+ */
+function untrackAutoDestroy(node) {
+    trackedElements.delete(node);
+    disconnectIfEmpty();
+}
+/**
+ * Destroy every tracked `UIElement` nested within `root` (excluding `root` itself),
+ * deepest first. Located via the `data-ui-element` marker, so the cost is proportional
+ * to the subtree rather than to the total number of tracked elements.
+ * @internal — called by `UIElement.destroy`.
+ */
+function destroyUIElementsWithin(root) {
+    const victims = [];
+    root.querySelectorAll(UIELEM_SELECTOR).forEach(el => {
+        if (trackedElements.has(el))
+            victims.push(el);
+    });
+    // querySelectorAll yields document order (ancestors before descendants);
+    // iterate in reverse so deeper / nested elements are destroyed first.
+    for (let i = victims.length - 1; i >= 0; i--)
+        trackedElements.get(victims[i])?.destroy();
+}
+/**
+ * Stop and forget every tracked binding rendered within `root` (used when a UIElement is
+ * destroyed). Unlike the observer path this is unconditional — it does not check connectivity,
+ * because the owner is being torn down.
+ */
+function disposeBindingsWithin(root) {
+    if (root instanceof HTMLElement)
+        forEachSelfAndMatches(root, BINDING_SELECTOR, stopAllBindings);
+    disconnectIfEmpty();
+}
+
+exports.autoDisposeBinding = autoDisposeBinding;
+exports.destroyUIElementsWithin = destroyUIElementsWithin;
+exports.disposeBindingsWithin = disposeBindingsWithin;
+exports.trackAutoDestroy = trackAutoDestroy;
+exports.untrackAutoDestroy = untrackAutoDestroy;
+//# sourceMappingURL=binding-cleanup.js.map

package/dist/cjs/dom/binding-cleanup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding-cleanup.js","sources":["../../../../source/dom/binding-cleanup.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/cjs/dom/dom.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var helpers = require('./helpers.js');
+
+/**
+ * Finds an element by its `id` within the whole document.
+ * @param id The element id to look up.
+ * @returns The matching element, or `null` if none exists.
+ */
+function getById(id) {
+    return document.getElementById(id);
+}
+/**
+ * Returns the first descendant of `container` that has the given class.
+ * @param container Element to search within.
+ * @param className Single class name to match.
+ * @returns The first matching element, or `null` if none found.
+ */
+function getByClass(container, className) {
+    const elements = container.getElementsByClassName(className);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns the first element in the document with the given `name` attribute.
+ * @param name The `name` attribute value to look up.
+ * @returns The first matching element, or `null` if none found.
+ */
+function getByName(name) {
+    const elements = document.getElementsByName(name);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns the first descendant of `container` with the given tag name.
+ * @param container Element to search within.
+ * @param tagName Tag name to match (e.g. `"input"`).
+ * @returns The first matching element, or `null` if none found.
+ */
+function getElementByTagName(container, tagName) {
+    const elements = container.getElementsByTagName(tagName);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns all descendants of `container` with the given tag name as a live collection.
+ * @param container Element to search within.
+ * @param tagName Tag name to match (e.g. `"li"`).
+ * @returns A live `HTMLCollection` of matching elements.
+ */
+function getElementsByTagName(container, tagName) {
+    return container.getElementsByTagName(tagName);
+}
+/**
+ * Returns the first descendant of `container` matching the CSS selector.
+ * @param container Element to search within.
+ * @param query CSS selector.
+ * @returns The first matching element, or `null` if none found.
+ */
+function queryElement(container, query) {
+    return container.querySelector(query);
+}
+/**
+ * Returns all descendants of `container` matching the CSS selector.
+ * @param container Element to search within.
+ * @param query CSS selector.
+ * @returns A static `NodeList` of matching elements.
+ */
+function queryElements(container, query) {
+    return container.querySelectorAll(query);
+}
+/**
+ * Walks forward through the following siblings of `current` and returns the first one that has the given class.
+ * @param current Element to start from.
+ * @param className Class name to match.
+ * @returns The first matching following sibling, or `null` if none found.
+ */
+function nextElementByClass(current, className) {
+    let elem = current.nextSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
+            return elem;
+        elem = elem.nextSibling;
+    }
+    return null;
+}
+/**
+ * Walks backward through the preceding siblings of `current` and returns the first one that has the given class.
+ * @param current Element to start from.
+ * @param className Class name to match.
+ * @returns The first matching preceding sibling, or `null` if none found.
+ */
+function prevElementByClass(current, className) {
+    let elem = current.previousSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
+            return elem;
+        elem = elem.previousSibling;
+    }
+    return null;
+}
+/**
+ * Returns the nearest preceding sibling element of `current`, skipping non-element nodes (e.g. text nodes).
+ * @param current Element to start from.
+ * @returns The previous sibling element, or `null` if none found.
+ */
+function prevElement(current) {
+    let elem = current.previousSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
+            return elem;
+        elem = elem.previousSibling;
+    }
+    return null;
+}
+/**
+ * Returns the nearest following sibling element of `current`, skipping non-element nodes (e.g. text nodes).
+ * @param current Element to start from.
+ * @returns The next sibling element, or `null` if none found.
+ */
+function nextElement(current) {
+    let elem = current.nextSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
+            return elem;
+        elem = elem.nextSibling;
+    }
+    return null;
+}
+/**
+ * Adds the given CSS class(es) to every descendant of `container` matching the selector. No-op when `container` or `cssClass` is falsy.
+ * @param container Element to search within (ignored when null/undefined).
+ * @param selectors CSS selector for the elements to modify.
+ * @param cssClass Class name(s) to add.
+ */
+function addClass(container, selectors, cssClass) {
+    if (!container || !cssClass)
+        return;
+    const nodes = container.querySelectorAll(selectors);
+    nodes.forEach(node => helpers.default.addCssClass(node, cssClass));
+}
+/**
+ * Removes the given CSS class(es) from every descendant of `container` matching the selector. No-op when `container` or `cssClass` is falsy.
+ * @param container Element to search within (ignored when null/undefined).
+ * @param selectors CSS selector for the elements to modify.
+ * @param cssClass Class name(s) to remove.
+ */
+function removeClass(container, selectors, cssClass) {
+    if (!container || !cssClass)
+        return;
+    const nodes = container.querySelectorAll(selectors);
+    nodes.forEach(elem => helpers.default.removeCssClass(elem, cssClass));
+}
+/**
+ * Removes all child nodes from `container`, leaving it empty. No-op when `container` is null/undefined.
+ * @param container Element to clear.
+ */
+function empty(container) {
+    if (!container)
+        return;
+    while (container.hasChildNodes()) {
+        if (container.firstChild)
+            container.removeChild(container.firstChild);
+    }
+}
+
+exports.addClass = addClass;
+exports.empty = empty;
+exports.getByClass = getByClass;
+exports.getById = getById;
+exports.getByName = getByName;
+exports.getElementByTagName = getElementByTagName;
+exports.getElementsByTagName = getElementsByTagName;
+exports.nextElement = nextElement;
+exports.nextElementByClass = nextElementByClass;
+exports.prevElement = prevElement;
+exports.prevElementByClass = prevElementByClass;
+exports.queryElement = queryElement;
+exports.queryElements = queryElements;
+exports.removeClass = removeClass;
+//# sourceMappingURL=dom.js.map

package/dist/cjs/dom/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sources":["../../../../source/dom/dom.ts"],"sourcesContent":[null],"names":["helpers"],"mappings":"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"}

package/dist/cjs/dom/helpers.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @internal
+ * Adds one or more CSS classes to a single element. A string is split on spaces. No-op when `cssClass` is falsy.
+ */
+const addCssClass = (elem, cssClass) => {
+    if (!cssClass)
+        return;
+    const tokens = (Array.isArray(cssClass) ? cssClass : cssClass.split(' ')).filter(Boolean);
+    if (tokens.length)
+        elem.classList.add(...tokens);
+};
+/**
+ * @internal
+ * Removes one or more CSS classes from a single element. A string is split on spaces. No-op when `cssClass` is falsy.
+ */
+const removeCssClass = (elem, cssClass) => {
+    if (!cssClass)
+        return;
+    const tokens = (Array.isArray(cssClass) ? cssClass : cssClass.split(' ')).filter(Boolean);
+    if (tokens.length)
+        elem.classList.remove(...tokens);
+};
+var helpers = {
+    addCssClass,
+    removeCssClass
+};
+
+exports.default = helpers;
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/dom/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../source/dom/helpers.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAEA;;;AAGG;AACH,MAAM,WAAW,GAAG,CAAC,IAAa,EAAE,QAAkB,KAAI;AACzD,IAAA,IAAI,CAAC,QAAQ;QACZ;AAED,IAAA,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACzF,IAAI,MAAM,CAAC,MAAM;QAChB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAC/B,CAAC;AAED;;;AAGG;AACH,MAAM,cAAc,GAAG,CAAC,IAAa,EAAE,QAAkB,KAAI;AAC5D,IAAA,IAAI,CAAC,QAAQ;QACZ;AAED,IAAA,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACzF,IAAI,MAAM,CAAC,MAAM;QAChB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAClC,CAAC;AAED,cAAe;IACd,WAAW;IACX;CACA;;;;"}

package/dist/cjs/dom/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+require('../reactive/effect.js');
+var dom = require('./dom.js');
+var tag = require('./tag.js');
+
+/** Collection of DOM helper functions: element queries/traversal ({@link getById}, {@link queryElement}, {@link nextElement}, ...), class manipulation ({@link addClass}, {@link removeClass}), {@link empty}, and element creation via {@link tag}. */
+const DOM = {
+    ...dom,
+    ...tag
+};
+
+exports.DOM = DOM;
+//# sourceMappingURL=index.js.map

package/dist/cjs/dom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../source/dom/index.ts"],"sourcesContent":[null],"names":["DomHelpers","TagHelpers"],"mappings":";;;;;;AAMA;AACO,MAAM,GAAG,GAAG;AAClB,IAAA,GAAGA,GAAU;AACb,IAAA,GAAGC;;;;;"}