@thi.ng/rdom 0.13.2 → 0.13.4

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-03T12:13:31Z
+- **Last updated**: 2023-12-11T10:07:09Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,18 @@ 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
+
+- fix updateValueAttrib() for some input types ([81facee](https://github.com/thi-ng/umbrella/commit/81facee))
+
 ## [0.13.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.13.0) (2023-11-12)
 
 #### 🚀 Features

package/README.md

@@ -249,6 +249,7 @@ $compile([
 
 - [@thi.ng/rdom-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom-canvas) - [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom) component wrapper for [@thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas) and declarative canvas drawing
 - [@thi.ng/rdom-components](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom-components) - Collection of unstyled, customizable components for [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom)
+- [@thi.ng/rdom-forms](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom-forms) - Data-driven declarative & extensible HTML form generation
 
 ## Related packages
 
@@ -278,7 +279,7 @@ For Node.js REPL:
 const rdom = await import("@thi.ng/rdom");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.12 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.06 KB
 
 ## Dependencies
 
@@ -319,6 +320,7 @@ directory are using this package:
 |                                                                                                                            | Demonstates various rdom usage patterns                                                                 | [Demo](https://demo.thi.ng/umbrella/rdom-basics/)         | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-basics)         |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-delayed-update.jpg" width="240"/> | Dynamically loaded images w/ preloader state                                                            | [Demo](https://demo.thi.ng/umbrella/rdom-delayed-update/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-delayed-update) |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/>            | rdom drag & drop example                                                                                | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd)            |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/>        | Basic usage of the declarative rdom-forms generator                                                     | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-key-sequences.jpg" width="240"/>  | rstream & transducer-based FSM for converting key event sequences into high-level commands              | [Demo](https://demo.thi.ng/umbrella/rdom-key-sequences/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-key-sequences)  |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/>      | rdom & hiccup-canvas interop test                                                                       | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous)      |
 |                                                                                                                            | Full umbrella repo doc string search w/ paginated results                                               | [Demo](https://demo.thi.ng/umbrella/rdom-search-docs/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-search-docs)    |

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
+};

package/dom.d.ts

@@ -129,12 +129,15 @@ export declare const $html: (el: HTMLElement | SVGElement, body: MaybeDeref<stri
  *   `attribs` object and return value used
  * - array values are converted into space-delimited string
  *
- * CSS classs are to given as `class` attribute, with its value either a string
- * or an object of booleans. If the latter, the given class names are either
- * added to or removed from the current list of classes.
+ * CSS classes can be given as `class` attribute, with its value either a
+ * string, a string array or an object of booleans. If the latter, the given
+ * class names are either added to or removed from the current list of classes.
+ * See
+ * [`mergeClasses()`](https://docs.thi.ng/umbrella/hiccup/functions/mergeClasses.html)
+ * for details.
  *
  * CSS style rules can be defined via the `style` attrib. Please {@link $style}
- * for further details.
+ *  for further details.
  *
  * Data attributes are to be given as object under the `data` attribute name,
  * with its values being merged with the element's current `dataset` property.