@thi.ng/rdom 0.10.2 → 0.10.4

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2022-12-16T12:52:25Z
+- **Last updated**: 2022-12-22T21:47:07Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/README.md

@@ -27,7 +27,7 @@ This project is part of the
 
 ## About
 
-Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible
+Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup) compatible.
 
 ### From hdom to rdom: Reactive UIs without virtual DOMs
 

package/compile.d.ts

@@ -1,22 +1,23 @@
 import type { IComponent } from "./api.js";
 /**
- * Compiles a tree of components given in any supported format incl.
- * reactive state values into a single, nested {@link IComponent}.
+ * Compiles a tree of components given in any supported format incl. reactive
+ * state values into a single, nested {@link IComponent}.
  *
  * @remarks
  * Supported formats:
  *
  * - hiccup component trees, i.e. `["tag#id.class", attribs, [...]]`
  * - {@link IComponent} instances
- * - {@link @thi.ng/rstream#ISubscribable} instances
- * - {@link @thi.ng/api#IDeref} instances
+ * - [`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.
+ * 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 -
  */

package/compile.js

@@ -7,23 +7,24 @@ import { SCHEDULER } from "./scheduler.js";
 import { $sub, $SubA } from "./sub.js";
 import { $wrapText } from "./wrap.js";
 /**
- * Compiles a tree of components given in any supported format incl.
- * reactive state values into a single, nested {@link IComponent}.
+ * Compiles a tree of components given in any supported format incl. reactive
+ * state values into a single, nested {@link IComponent}.
  *
  * @remarks
  * Supported formats:
  *
  * - hiccup component trees, i.e. `["tag#id.class", attribs, [...]]`
  * - {@link IComponent} instances
- * - {@link @thi.ng/rstream#ISubscribable} instances
- * - {@link @thi.ng/api#IDeref} instances
+ * - [`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.
+ * 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 -
  */

package/dom.d.ts

@@ -92,8 +92,9 @@ export declare const $moveTo: (newParent: Element, el: Element | Comment, idx?:
 export declare const $clear: (el: Element) => Element;
 /**
  * Same as `el.innerText = body`, however if `body` is an
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd. For SVG elements a
- * new child text DOM node will be created.
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
+ * automatically deref'd. For SVG elements a new child text DOM node will be
+ * created.
  *
  * @param el -
  * @param body -
@@ -101,7 +102,8 @@ export declare const $clear: (el: Element) => Element;
 export declare const $text: (el: HTMLElement | SVGElement, body: any) => void;
 /**
  * Same as `el.innerHtml = body`, use with caution! If `body` is an
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd.
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
+ * automatically deref'd.
  *
  * @param el -
  * @param body -
@@ -111,45 +113,44 @@ export declare const $html: (el: HTMLElement | SVGElement, body: MaybeDeref<stri
  * Takes an object of attributes and applies them to given DOM element.
  *
  * @remarks
- * The following rules & transformations are applied (in the stated
- * order):
- *
- * - {@link @thi.ng/api#IDeref} values are `deref`d
- * - attributes prefixed with `on` are considered event listeners and
- *   can either have a function value or tuple of `[listener, opts]`,
- *   where `opts` are the standard `.addEventListener()` options
- * - function values for any other attribs are first called with the
- *   entire `attribs` object and return value used
+ * The following rules & transformations are applied (in the stated order):
+ *
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values
+ *   are `deref`d
+ * - attributes prefixed with `on` are considered event listeners and can either
+ *   have a function value or tuple of `[listener, opts]`, where `opts` are the
+ *   standard `.addEventListener()` options
+ * - function values for any other attribs are first called with the entire
+ *   `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 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 style rules can be defined via the `style` attrib. Please
- * {@link $style} for further details.
+ * CSS style rules can be defined via the `style` attrib. Please {@link $style}
+ * 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.
+ * 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.
  *
- * Depending on element type the `value` attribute will be updated
- * keeping the current cursor position / selection intact.
+ * Depending on element type the `value` attribute will be updated keeping the
+ * current cursor position / selection intact.
  *
  * @param el -
  * @param attribs -
  */
 export declare const $attribs: (el: Element, attribs: any) => void;
 /**
- * Takes an object (or string) of CSS properties, compiles them into a
- * single CSS string and sets it as `style` attribute on the given
- * element.
+ * Takes an object (or string) of CSS properties, compiles them into a single
+ * CSS string and sets it as `style` attribute on the given element.
  *
  * @remarks
- * All property values can be {@link @thi.ng/api#IDeref} values, in
- * which case they're are first `deref`d before use. If the value is a
- * function, it will be called with the entire `rules` object as arg and
- * the return value used.
+ * All property values can be
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values,
+ * in which case they're are first `deref`d before use. If the value is a
+ * function, it will be called with the entire `rules` object as arg and the
+ * return value used.
  *
  * @param el -
  * @param rules -

package/dom.js

@@ -191,8 +191,9 @@ export const $moveTo = (newParent, el, idx = -1) => {
 export const $clear = (el) => ((el.innerHTML = ""), el);
 /**
  * Same as `el.innerText = body`, however if `body` is an
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd. For SVG elements a
- * new child text DOM node will be created.
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
+ * automatically deref'd. For SVG elements a new child text DOM node will be
+ * created.
  *
  * @param el -
  * @param body -
@@ -208,7 +209,8 @@ export const $text = (el, body) => {
 };
 /**
  * Same as `el.innerHtml = body`, use with caution! If `body` is an
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd.
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
+ * automatically deref'd.
  *
  * @param el -
  * @param body -
@@ -220,30 +222,29 @@ export const $html = (el, body) => {
  * Takes an object of attributes and applies them to given DOM element.
  *
  * @remarks
- * The following rules & transformations are applied (in the stated
- * order):
+ * The following rules & transformations are applied (in the stated order):
  *
- * - {@link @thi.ng/api#IDeref} values are `deref`d
- * - attributes prefixed with `on` are considered event listeners and
- *   can either have a function value or tuple of `[listener, opts]`,
- *   where `opts` are the standard `.addEventListener()` options
- * - function values for any other attribs are first called with the
- *   entire `attribs` object and return value used
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values
+ *   are `deref`d
+ * - attributes prefixed with `on` are considered event listeners and can either
+ *   have a function value or tuple of `[listener, opts]`, where `opts` are the
+ *   standard `.addEventListener()` options
+ * - function values for any other attribs are first called with the entire
+ *   `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 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 style rules can be defined via the `style` attrib. Please
- * {@link $style} for further details.
+ * CSS style rules can be defined via the `style` attrib. Please {@link $style}
+ * 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.
+ * 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.
  *
- * Depending on element type the `value` attribute will be updated
- * keeping the current cursor position / selection intact.
+ * Depending on element type the `value` attribute will be updated keeping the
+ * current cursor position / selection intact.
  *
  * @param el -
  * @param attribs -
@@ -358,15 +359,15 @@ const updateDataAttribs = (el, attribs) => {
     }
 };
 /**
- * Takes an object (or string) of CSS properties, compiles them into a
- * single CSS string and sets it as `style` attribute on the given
- * element.
+ * Takes an object (or string) of CSS properties, compiles them into a single
+ * CSS string and sets it as `style` attribute on the given element.
  *
  * @remarks
- * All property values can be {@link @thi.ng/api#IDeref} values, in
- * which case they're are first `deref`d before use. If the value is a
- * function, it will be called with the entire `rules` object as arg and
- * the return value used.
+ * All property values can be
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values,
+ * in which case they're are first `deref`d before use. If the value is a
+ * function, it will be called with the entire `rules` object as arg and the
+ * return value used.
  *
  * @param el -
  * @param rules -

package/object.d.ts

@@ -9,15 +9,18 @@ import { Component } from "./component.js";
  * that function's return value as component body.
  *
  * @remarks
- * Uses {@link @thi.ng/rstream#fromObject} for creating the internal key-value
- * streams. These can then be used by `inner` to produce reactive child
- * elements. The given `src` object is only used to seed those streams with
- * initial values. The component wrapper can be updated with new values, using
- * the `.update()` life cycle method with a new object.
+ * Uses
+ * [`fromObject()`](https://docs.thi.ng/umbrella/rstream/functions/fromObject.html)
+ * for creating the internal key-value streams. These can then be used by
+ * `inner` to produce reactive child elements. The given `src` object is only
+ * used to seed those streams with initial values. The component wrapper can be
+ * updated with new values, using the `.update()` life cycle method with a new
+ * object.
  *
  * By default the value streams will only trigger updates if their values have
- * changed. See {@link @thi.ng/rstream#StreamObjOpts} for more details and
- * options.
+ * changed. See
+ * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
+ * for more details and options.
  *
  * Also see {@link $subObject}.
  *

package/object.js

@@ -8,15 +8,18 @@ import { $sub } from "./sub.js";
  * that function's return value as component body.
  *
  * @remarks
- * Uses {@link @thi.ng/rstream#fromObject} for creating the internal key-value
- * streams. These can then be used by `inner` to produce reactive child
- * elements. The given `src` object is only used to seed those streams with
- * initial values. The component wrapper can be updated with new values, using
- * the `.update()` life cycle method with a new object.
+ * Uses
+ * [`fromObject()`](https://docs.thi.ng/umbrella/rstream/functions/fromObject.html)
+ * for creating the internal key-value streams. These can then be used by
+ * `inner` to produce reactive child elements. The given `src` object is only
+ * used to seed those streams with initial values. The component wrapper can be
+ * updated with new values, using the `.update()` life cycle method with a new
+ * object.
  *
  * By default the value streams will only trigger updates if their values have
- * changed. See {@link @thi.ng/rstream#StreamObjOpts} for more details and
- * options.
+ * changed. See
+ * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
+ * for more details and options.
  *
  * Also see {@link $subObject}.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -35,18 +35,18 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.6.0",
-    "@thi.ng/checks": "^3.3.5",
-    "@thi.ng/errors": "^2.2.6",
-    "@thi.ng/hiccup": "^4.2.26",
-    "@thi.ng/paths": "^5.1.25",
-    "@thi.ng/prefixes": "^2.1.15",
-    "@thi.ng/rstream": "^7.2.31",
-    "@thi.ng/strings": "^3.3.20"
+    "@thi.ng/api": "^8.6.2",
+    "@thi.ng/checks": "^3.3.6",
+    "@thi.ng/errors": "^2.2.7",
+    "@thi.ng/hiccup": "^4.2.28",
+    "@thi.ng/paths": "^5.1.27",
+    "@thi.ng/prefixes": "^2.1.16",
+    "@thi.ng/rstream": "^7.2.33",
+    "@thi.ng/strings": "^3.3.22"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.33.7",
-    "@thi.ng/testament": "^0.3.7",
+    "@thi.ng/testament": "^0.3.8",
     "rimraf": "^3.0.2",
     "tools": "^0.0.1",
     "typedoc": "^0.23.22",
@@ -140,5 +140,5 @@
     "status": "beta",
     "year": 2020
   },
-  "gitHead": "f445a9cc8022bcdebbf6ff91fd66ced016d72f01\n"
+  "gitHead": "bc6f7f5e2765bb96fe64db804eaf4b2443b47fc6\n"
 }

package/sub.d.ts

@@ -3,8 +3,9 @@ import type { ISubscribable } from "@thi.ng/rstream";
 import { Subscription } from "@thi.ng/rstream/subscription";
 import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
 /**
- * Takes an {@link @thi.ng/rstream#ISubscribable} and creates a simple component
- * wrapper for its reactively produced values.
+ * Takes an
+ * [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
+ * and creates a simple component wrapper for its reactively produced values.
  *
  * @remarks
  * If given an {@link IMountWithState} component, new stream values are applied