@thi.ng/rdom 0.13.3 → 0.13.5

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:03Z
+- **Last updated**: 2023-12-18T13:41:19Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,12 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+### [0.13.4](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.13.4) (2023-12-11)
+
+#### ♻️ Refactoring
+
+- update boolean attrib handling in setAttrib() ([96a21ab](https://github.com/thi-ng/umbrella/commit/96a21ab))
+
 ### [0.13.3](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.13.3) (2023-12-09)
 
 #### 🩹 Bug fixes

package/README.md

@@ -279,7 +279,7 @@ For Node.js REPL:
 const rdom = await import("@thi.ng/rdom");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.10 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.06 KB
 
 ## Dependencies
 
@@ -309,6 +309,7 @@ directory are using this package:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/>      | Randomized space-filling, nested grid layout generator                                                  | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen)      |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/lispy-repl.png" width="240"/>          | Browser REPL for a Lispy S-expression based mini language                                               | [Demo](https://demo.thi.ng/umbrella/lispy-repl/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/lispy-repl)          |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/mastodon-feed.jpg" width="240"/>       | Mastodon API feed reader with support for different media types, fullscreen media modal, HTML rewriting | [Demo](https://demo.thi.ng/umbrella/mastodon-feed/)       | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/mastodon-feed)       |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/>     | Basic thi.ng/meta-css usage & testbed                                                                   | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/parse-playground.png" width="240"/>    | Parser grammar livecoding editor/playground & codegen                                                   | [Demo](https://demo.thi.ng/umbrella/parse-playground/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/parse-playground)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-colormatrix.jpg" width="240"/>   | Matrix-based image color adjustments                                                                    | [Demo](https://demo.thi.ng/umbrella/pixel-colormatrix/)   | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-colormatrix)   |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-gradients.jpg" width="240"/>     | Randomized 4-point 2D color gradient image generator                                                    | [Demo](https://demo.thi.ng/umbrella/pixel-gradients/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-gradients)     |

package/api.js

@@ -1 +0,0 @@
-export {};

package/checks.js

@@ -1,25 +1,10 @@
 import { implementsFunction } from "@thi.ng/checks/implements-function";
 import { COMMENT } from "@thi.ng/hiccup/api";
-/**
- * Returns true if given hiccup component describes a comment node. I.e. is of
- * the form `[COMMENT, "foo"...]`.
- *
- * @remarks
- * See thi.ng/hiccup docs for reference:
- * - https://docs.thi.ng/umbrella/hiccup/functions/serialize.html
- *
- * @param tree
- */
-export const isComment = (tree) => tree[0] === COMMENT;
-/**
- * Returns true if given value has a {@link IComponent.mount} function.
- *
- * @param x
- */
-export const isComponent = (x) => implementsFunction(x, "mount");
-/**
- * Returns true if given value is a DOM element.
- *
- * @param x
- */
-export const isElement = (x) => x instanceof Element;
+const isComment = (tree) => tree[0] === COMMENT;
+const isComponent = (x) => implementsFunction(x, "mount");
+const isElement = (x) => x instanceof Element;
+export {
+  isComment,
+  isComponent,
+  isElement
+};

package/compile.js

@@ -6,101 +6,71 @@ import { $el, $remove, $tree } from "./dom.js";
 import { SCHEDULER } from "./scheduler.js";
 import { $SubA, $sub } from "./sub.js";
 import { $wrapEl, $wrapText } from "./wrap.js";
-/**
- * Compiles a tree of components given in any supported format incl. reactive
- * state values into a single, nested {@link IComponent}.
- *
- * @remarks
- * Supported formats/values:
- *
- * - hiccup component trees, i.e. `["tag#id.class", attribs, [...]]`
- * - {@link IComponent} instances
- * - pre-existing DOM elements
- * - [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
- *   instances
- * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html)
- *   instances
- *
- * Any other value type will be wrapped in a `<span>` element. Reactive
- * `ISubscribable` values can be used as element attributes or element
- * body/children. For the former, a subscription will be added to update the
- * target attribute. If used as element body, the reactive value will be wrapped
- * using a {@link $sub} `<span>` with the value as its reactive body.
- *
- * @param tree -
- */
-export const $compile = (tree) => isArray(tree)
-    ? isComplexComponent(tree)
-        ? complexComponent(tree)
-        : basicComponent(tree)
-    : isComponent(tree)
-        ? tree
-        : isSubscribable(tree)
-            ? $sub(tree, "span")
-            : tree instanceof Element
-                ? $wrapEl(tree)
-                : $wrapText("span", null, tree);
+const $compile = (tree) => isArray(tree) ? isComplexComponent(tree) ? complexComponent(tree) : basicComponent(tree) : isComponent(tree) ? tree : isSubscribable(tree) ? $sub(tree, "span") : tree instanceof Element ? $wrapEl(tree) : $wrapText("span", null, tree);
 const walk = (f, x, path = []) => {
-    if (isPlainObject(x)) {
-        for (const k in x) {
-            walk(f, x[k], [...path, k]);
-        }
+  if (isPlainObject(x)) {
+    for (const k in x) {
+      walk(f, x[k], [...path, k]);
     }
-    f(x, path);
+  }
+  f(x, path);
 };
 const isComplexComponent = (x) => {
-    if (isPlainObject(x)) {
-        for (const k in x) {
-            if (isComplexComponent(x[k]))
-                return true;
-        }
+  if (isPlainObject(x)) {
+    for (const k in x) {
+      if (isComplexComponent(x[k]))
+        return true;
     }
-    else if (isArray(x)) {
-        for (let i = 0, n = x.length; i < n; i++) {
-            if (isComplexComponent(x[i]))
-                return true;
-        }
+  } else if (isArray(x)) {
+    for (let i = 0, n = x.length; i < n; i++) {
+      if (isComplexComponent(x[i]))
+        return true;
     }
-    return isSubscribable(x) || isComponent(x) || isElement(x);
+  }
+  return isSubscribable(x) || isComponent(x) || isElement(x);
 };
 const complexComponent = (tree) => ({
-    async mount(parent, index = -1) {
-        this.subs = [];
-        walk((x, path) => {
-            isSubscribable(x) &&
-                this.subs.push(x.subscribe(new $SubA(this, path)));
-        }, tree[1]);
-        this.children = [];
-        this.el = $el(tree[0], tree[1], null, parent, index);
-        for (let i = 2; i < tree.length; i++) {
-            const child = $compile(tree[i]);
-            child.mount(this.el, i - 2);
-            this.children.push(child);
-        }
-        return this.el;
-    },
-    async unmount() {
-        SCHEDULER.cancel(this);
-        if (this.children) {
-            for (let c of this.children) {
-                await c.unmount();
-            }
-        }
-        this.subs && this.subs.forEach((s) => s.unsubscribe());
-        $remove(this.el);
-        this.children = undefined;
-        this.subs = undefined;
-        this.el = undefined;
-    },
-    update() { },
+  async mount(parent, index = -1) {
+    this.subs = [];
+    walk((x, path) => {
+      isSubscribable(x) && this.subs.push(x.subscribe(new $SubA(this, path)));
+    }, tree[1]);
+    this.children = [];
+    this.el = $el(tree[0], tree[1], null, parent, index);
+    for (let i = 2; i < tree.length; i++) {
+      const child = $compile(tree[i]);
+      child.mount(this.el, i - 2);
+      this.children.push(child);
+    }
+    return this.el;
+  },
+  async unmount() {
+    SCHEDULER.cancel(this);
+    if (this.children) {
+      for (let c of this.children) {
+        await c.unmount();
+      }
+    }
+    this.subs && this.subs.forEach((s) => s.unsubscribe());
+    $remove(this.el);
+    this.children = void 0;
+    this.subs = void 0;
+    this.el = void 0;
+  },
+  update() {
+  }
 });
 const basicComponent = (tree) => ({
-    async mount(parent, index = -1) {
-        return (this.el = await $tree(tree, parent, index));
-    },
-    async unmount() {
-        $remove(this.el);
-        this.el = undefined;
-    },
-    update() { },
+  async mount(parent, index = -1) {
+    return this.el = await $tree(tree, parent, index);
+  },
+  async unmount() {
+    $remove(this.el);
+    this.el = void 0;
+  },
+  update() {
+  }
 });
+export {
+  $compile
+};

package/component.js

@@ -1,135 +1,145 @@
 import { $compile } from "./compile.js";
-import { $attribs, $clear, $comment, $el, $html, $moveTo, $remove, $style, $text, $tree, } from "./dom.js";
-/**
- * Abstract base class / {@link IComponent} implementation. Provides
- * additional convenience methods for DOM element creation &
- * manipulation.
- */
-export class Component {
-    el;
-    async unmount() {
-        this.$remove();
-        this.el = undefined;
-    }
-    // @ts-ignore args
-    update(state) { }
-    /**
-     * Syntax sugar for {@link $el}, using this component's
-     * {@link IComponent.el} as default `parent`.
-     *
-     * @param tag
-     * @param attribs
-     * @param body
-     * @param parent
-     * @param idx
-     */
-    $el(tag, attribs, body, parent = this.el, idx) {
-        return $el(tag, attribs, body, parent, idx);
-    }
-    /**
-     * Syntax sugar for {@link $comment}, creates a new comment DOM node using
-     * this component's {@link IComponent.el} as default `parent`.
-     *
-     * @param body
-     * @param parent
-     * @param idx
-     */
-    $comment(body, parent = this.el, idx) {
-        return $comment(body, parent, idx);
-    }
-    /**
-     * Syntax sugar for {@link $clear}, using this component's
-     * {@link IComponent.el} as default element to clear.
-     *
-     * @param el
-     */
-    $clear(el = this.el) {
-        return $clear(el);
-    }
-    /**
-     * Same as {@link $compile}.
-     *
-     * @param tree
-     */
-    $compile(tree) {
-        return $compile(tree);
-    }
-    /**
-     * Same as {@link $tree}.
-     *
-     * @param tree
-     * @param root
-     * @param index
-     */
-    $tree(tree, root = this.el, index) {
-        return $tree(tree, root, index);
-    }
-    /**
-     * Syntax sugar for {@link $text}, using this component's
-     * {@link IComponent.el} as default element to edit.
-     *
-     * @remarks
-     * If using the default element, assumes `this.el` is an existing
-     * `HTMLElement`.
-     *
-     * @param body
-     * @param el
-     */
-    $text(body, el = this.el) {
-        $text(el, body);
-    }
-    /**
-     * Syntax sugar for {@link $html}, using this component's
-     * {@link IComponent.el} as default element to edit.
-     *
-     * @remarks
-     * If using the default element, assumes `this.el` is an existing
-     * `HTMLElement` or `SVGElement`.
-     *
-     * @param body
-     * @param el
-     */
-    $html(body, el = this.el) {
-        $html(el, body);
-    }
-    /**
-     * Syntax sugar for {@link $attribs}, using this component's
-     * {@link IComponent.el} as default element to edit.
-     *
-     * @param attribs
-     * @param el
-     */
-    $attribs(attribs, el = this.el) {
-        $attribs(el, attribs);
-    }
-    /**
-     * Syntax sugar for {@link $style}, using this component's
-     * {@link IComponent.el} as default element to edit.
-     *
-     * @param rules
-     * @param el
-     */
-    $style(rules, el = this.el) {
-        $style(el, rules);
-    }
-    /**
-     * Syntax sugar for {@link $remove}, using this component's
-     * {@link IComponent.el} as default element to remove.
-     *
-     * @param el
-     */
-    $remove(el = this.el) {
-        $remove(el);
-    }
-    /**
-     * Syntax sugar for {@link $moveTo}, using this component's
-     * {@link IComponent.el} as default element to migrate.
-     *
-     * @param newParent
-     * @param el
-     * @param idx
-     */
-    $moveTo(newParent, el = this.el, idx) {
-        $moveTo(newParent, el, idx);
-    }
+import {
+  $attribs,
+  $clear,
+  $comment,
+  $el,
+  $html,
+  $moveTo,
+  $remove,
+  $style,
+  $text,
+  $tree
+} from "./dom.js";
+class Component {
+  el;
+  async unmount() {
+    this.$remove();
+    this.el = void 0;
+  }
+  // @ts-ignore args
+  update(state) {
+  }
+  /**
+   * Syntax sugar for {@link $el}, using this component's
+   * {@link IComponent.el} as default `parent`.
+   *
+   * @param tag
+   * @param attribs
+   * @param body
+   * @param parent
+   * @param idx
+   */
+  $el(tag, attribs, body, parent = this.el, idx) {
+    return $el(tag, attribs, body, parent, idx);
+  }
+  /**
+   * Syntax sugar for {@link $comment}, creates a new comment DOM node using
+   * this component's {@link IComponent.el} as default `parent`.
+   *
+   * @param body
+   * @param parent
+   * @param idx
+   */
+  $comment(body, parent = this.el, idx) {
+    return $comment(body, parent, idx);
+  }
+  /**
+   * Syntax sugar for {@link $clear}, using this component's
+   * {@link IComponent.el} as default element to clear.
+   *
+   * @param el
+   */
+  $clear(el = this.el) {
+    return $clear(el);
+  }
+  /**
+   * Same as {@link $compile}.
+   *
+   * @param tree
+   */
+  $compile(tree) {
+    return $compile(tree);
+  }
+  /**
+   * Same as {@link $tree}.
+   *
+   * @param tree
+   * @param root
+   * @param index
+   */
+  $tree(tree, root = this.el, index) {
+    return $tree(tree, root, index);
+  }
+  /**
+   * Syntax sugar for {@link $text}, using this component's
+   * {@link IComponent.el} as default element to edit.
+   *
+   * @remarks
+   * If using the default element, assumes `this.el` is an existing
+   * `HTMLElement`.
+   *
+   * @param body
+   * @param el
+   */
+  $text(body, el = this.el) {
+    $text(el, body);
+  }
+  /**
+   * Syntax sugar for {@link $html}, using this component's
+   * {@link IComponent.el} as default element to edit.
+   *
+   * @remarks
+   * If using the default element, assumes `this.el` is an existing
+   * `HTMLElement` or `SVGElement`.
+   *
+   * @param body
+   * @param el
+   */
+  $html(body, el = this.el) {
+    $html(el, body);
+  }
+  /**
+   * Syntax sugar for {@link $attribs}, using this component's
+   * {@link IComponent.el} as default element to edit.
+   *
+   * @param attribs
+   * @param el
+   */
+  $attribs(attribs, el = this.el) {
+    $attribs(el, attribs);
+  }
+  /**
+   * Syntax sugar for {@link $style}, using this component's
+   * {@link IComponent.el} as default element to edit.
+   *
+   * @param rules
+   * @param el
+   */
+  $style(rules, el = this.el) {
+    $style(el, rules);
+  }
+  /**
+   * Syntax sugar for {@link $remove}, using this component's
+   * {@link IComponent.el} as default element to remove.
+   *
+   * @param el
+   */
+  $remove(el = this.el) {
+    $remove(el);
+  }
+  /**
+   * Syntax sugar for {@link $moveTo}, using this component's
+   * {@link IComponent.el} as default element to migrate.
+   *
+   * @param newParent
+   * @param el
+   * @param idx
+   */
+  $moveTo(newParent, el = this.el, idx) {
+    $moveTo(newParent, el, idx);
+  }
 }
+export {
+  Component
+};