@thi.ng/rdom 0.10.18 → 0.11.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-03-27T19:05:49Z
+- **Last updated**: 2023-04-08T11:09:50Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,14 @@ 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.11.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.11.0) (2023-04-08)
+
+#### 🚀 Features
+
+- add null check for $remove() ([db9d2a1](https://github.com/thi-ng/umbrella/commit/db9d2a1))
+- add stream IDs for $list/$klist/$Sub/$SubA ([bfd4058](https://github.com/thi-ng/umbrella/commit/bfd4058))
+- add $subWithID(), add IDs for various constructs ([404eacb](https://github.com/thi-ng/umbrella/commit/404eacb))
+
 ## [0.10.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.10.0) (2022-11-30)
 
 #### 🚀 Features

package/README.md

@@ -277,7 +277,7 @@ For Node.js REPL:
 const rdom = await import("@thi.ng/rdom");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 3.81 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 3.88 KB
 
 ## Dependencies
 
@@ -312,7 +312,9 @@ A selection:
 | <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)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-svg-nodes.png" width="240"/>      | rdom powered SVG graph with draggable nodes                                 | [Demo](https://demo.thi.ng/umbrella/rdom-svg-nodes/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-svg-nodes)      |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rstream-sync.png" width="240"/>        | Minimal rstream sync() example using rdom                                   | [Demo](https://demo.thi.ng/umbrella/rstream-sync/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-sync)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/svg-resample.png" width="240"/>        | SVG path parsing & dynamic resampling                                       | [Demo](https://demo.thi.ng/umbrella/svg-resample/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/svg-resample)        |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/trace-bitmap.jpg" width="240"/>        | Multi-layer vectorization & dithering of bitmap images                      | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/trace-bitmap)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-channel-mixer.jpg" width="240"/> | rdom & WebGL-based image channel editor                                     | [Demo](https://demo.thi.ng/umbrella/webgl-channel-mixer/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-channel-mixer) |
 
 ## API

package/dom.js

@@ -175,7 +175,7 @@ export const $addChild = (parent, child, idx = -1) => {
  *
  * @param el
  */
-export const $remove = (el) => el.remove();
+export const $remove = (el) => el && el.remove();
 /**
  * Migrates given element to `newParent`, following the same append or insertion
  * logic as {@link $addChild}.

package/idgen.d.ts

@@ -0,0 +1,4 @@
+import type { ISubscribable } from "@thi.ng/rstream";
+/** @internal */
+export declare const __nextID: (name: string, src?: ISubscribable<any>) => string;
+//# sourceMappingURL=idgen.d.ts.map

package/idgen.js

@@ -0,0 +1,3 @@
+let NEXT_ID = 0;
+/** @internal */
+export const __nextID = (name, src) => src ? `rdom$${name}-${src.id}-${NEXT_ID++}` : `rdom$${name}-${NEXT_ID++}`;

package/index.d.ts

@@ -4,6 +4,7 @@ export * from "./compile.js";
 export * from "./component.js";
 export * from "./dom.js";
 export * from "./event.js";
+export * from "./idgen.js";
 export * from "./klist.js";
 export * from "./list.js";
 export * from "./object.js";

package/index.js

@@ -4,6 +4,7 @@ export * from "./compile.js";
 export * from "./component.js";
 export * from "./dom.js";
 export * from "./event.js";
+export * from "./idgen.js";
 export * from "./klist.js";
 export * from "./list.js";
 export * from "./object.js";

package/klist.js

@@ -1,7 +1,8 @@
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
 import { $moveTo } from "./dom.js";
-import { $sub } from "./sub.js";
+import { __nextID } from "./idgen.js";
+import { $subWithID } from "./sub.js";
 /**
  * Similar to {@link $list}, however additionally uses keying to establish list
  * item identities and uses these keys (and *only* these!) in a more complex
@@ -54,7 +55,7 @@ import { $sub } from "./sub.js";
  * @param childCtor -
  * @param keyFn -
  */
-export const $klist = (src, tag, attribs, childCtor, keyFn) => $sub(src, new KList(tag, attribs, childCtor, keyFn));
+export const $klist = (src, tag, attribs, childCtor, keyFn) => $subWithID(src, new KList(tag, attribs, childCtor, keyFn), __nextID("klist", src));
 export class KList extends Component {
     constructor(tag, attribs, ctor, keyFn = (_, i) => i) {
         super();

package/list.js

@@ -1,6 +1,7 @@
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
-import { $sub } from "./sub.js";
+import { __nextID } from "./idgen.js";
+import { $subWithID } from "./sub.js";
 /**
  * Creates a generalized and dynamically updating list component from items of
  * the given `src` stream.
@@ -48,7 +49,7 @@ import { $sub } from "./sub.js";
  * @param ctor -
  * @param equiv -
  */
-export const $list = (src, tag, attribs, ctor, equiv) => $sub(src, new List(tag, attribs, ctor, equiv));
+export const $list = (src, tag, attribs, ctor, equiv) => $subWithID(src, new List(tag, attribs, ctor, equiv), __nextID("list", src));
 export class List extends Component {
     constructor(tag, attribs, ctor, equiv = (a, b) => a === b) {
         super();

package/object.js

@@ -1,6 +1,7 @@
 import { fromObject } from "@thi.ng/rstream/object";
 import { Component } from "./component.js";
-import { $sub } from "./sub.js";
+import { __nextID } from "./idgen.js";
+import { $subWithID } from "./sub.js";
 /**
  * Creates a control component wrapper with an internal stream setup for user
  * defined keys in the given object. When this component is mounted, it will
@@ -73,7 +74,7 @@ export const $object = (src, opts, inner) => new $Object(src, opts, inner);
  * @param opts -
  * @param inner -
  */
-export const $subObject = (src, opts, inner) => $sub(src, $object(src.deref() || {}, opts, inner));
+export const $subObject = (src, opts, inner) => $subWithID(src, $object(src.deref() || {}, opts, inner), __nextID("obj", src));
 export class $Object extends Component {
     constructor(src, opts, ctor) {
         super();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "0.10.18",
+  "version": "0.11.0",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -35,22 +35,22 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.7.5",
-    "@thi.ng/checks": "^3.3.11",
-    "@thi.ng/errors": "^2.2.14",
-    "@thi.ng/hiccup": "^4.2.38",
-    "@thi.ng/paths": "^5.1.34",
-    "@thi.ng/prefixes": "^2.1.21",
-    "@thi.ng/rstream": "^7.2.46",
-    "@thi.ng/strings": "^3.4.3"
+    "@thi.ng/api": "^8.7.6",
+    "@thi.ng/checks": "^3.3.12",
+    "@thi.ng/errors": "^2.2.15",
+    "@thi.ng/hiccup": "^4.2.39",
+    "@thi.ng/paths": "^5.1.35",
+    "@thi.ng/prefixes": "^2.1.22",
+    "@thi.ng/rstream": "^8.0.0",
+    "@thi.ng/strings": "^3.4.4"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.34.4",
-    "@thi.ng/testament": "^0.3.14",
+    "@thi.ng/testament": "^0.3.15",
     "rimraf": "^4.4.1",
     "tools": "^0.0.1",
     "typedoc": "^0.23.28",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.4"
   },
   "keywords": [
     "async",
@@ -101,6 +101,9 @@
     "./event": {
       "default": "./event.js"
     },
+    "./idgen": {
+      "default": "./idgen.js"
+    },
     "./klist": {
       "default": "./klist.js"
     },
@@ -139,5 +142,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "83b15b34326d480cbca0472b20390d4d3bbb792a\n"
+  "gitHead": "abcedd9e4e06a4b631f363610eec572f79b571c1\n"
 }

package/replace.js

@@ -1,6 +1,7 @@
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
-import { $sub } from "./sub.js";
+import { __nextID } from "./idgen.js";
+import { $subWithID } from "./sub.js";
 import { $wrapText } from "./wrap.js";
 /**
  * Similar to {@link $refresh}, but more basic/simple. Takes a reactive value
@@ -34,7 +35,7 @@ import { $wrapText } from "./wrap.js";
  *
  * @param src -
  */
-export const $replace = (src) => $sub(src, new Replace());
+export const $replace = (src) => $subWithID(src, new Replace(), __nextID("replace", src));
 export class Replace extends Component {
     async mount(parent, index, val) {
         this.parent = parent;

package/sub.d.ts

@@ -28,10 +28,20 @@ import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
  */
 export declare function $sub<T>(src: ISubscribable<T>, inner: IMountWithState<T>): IComponent<T>;
 export declare function $sub(src: ISubscribable<any>, tag: string, attribs?: any): IComponent;
+/**
+ * Version of {@link $sub} which supports specifying an rstream stream ID for
+ * the resulting subscription (useful for debugging/visualizing the reactive
+ * graph topology).
+ *
+ * @param src
+ * @param inner
+ * @param id
+ */
+export declare const $subWithID: <T>(src: ISubscribable<T>, inner: IMountWithState<T>, id: string) => IComponent<T>;
 export declare class $Sub<T = any> extends Subscription<T, T> {
     protected inner: IMountWithState<T | undefined>;
     el?: Element;
-    constructor(inner: IMountWithState<T | undefined>);
+    constructor(inner: IMountWithState<T | undefined>, id?: string);
     mount(parent: Element, index?: NumOrElement): Promise<Element>;
     unmount(): Promise<void>;
     update(x: T): void;
@@ -41,7 +51,7 @@ export declare class $SubA extends Subscription<any, any> {
     protected comp: IComponent;
     protected setter: Fn2<any, any, any>;
     protected attr: any;
-    constructor(comp: IComponent, path: Path);
+    constructor(comp: IComponent, path: Path, id?: string);
     next(a: any): void;
 }
 //# sourceMappingURL=sub.d.ts.map

package/sub.js

@@ -8,9 +8,19 @@ import { $wrapText } from "./wrap.js";
 export function $sub(src, tag, attribs) {
     return (src.subscribe(new $Sub(isString(tag) ? $wrapText(tag, attribs) : tag)));
 }
+/**
+ * Version of {@link $sub} which supports specifying an rstream stream ID for
+ * the resulting subscription (useful for debugging/visualizing the reactive
+ * graph topology).
+ *
+ * @param src
+ * @param inner
+ * @param id
+ */
+export const $subWithID = (src, inner, id) => src.subscribe(new $Sub(inner, id));
 export class $Sub extends Subscription {
-    constructor(inner) {
-        super(undefined, { id: `rdom$sub-${__nextID()}` });
+    constructor(inner, id) {
+        super(undefined, { id: id || `rdom$sub-${__nextID()}` });
         this.inner = inner;
     }
     async mount(parent, index = -1) {
@@ -30,8 +40,8 @@ export class $Sub extends Subscription {
     }
 }
 export class $SubA extends Subscription {
-    constructor(comp, path) {
-        super(undefined, { id: `rdom$sub-${__nextID()}` });
+    constructor(comp, path, id) {
+        super(undefined, { id: id || `rdom$attr-${__nextID()}` });
         this.comp = comp;
         this.attr = {};
         this.setter = defSetterUnsafe(path);

package/switch.d.ts

@@ -67,6 +67,8 @@ export declare const $switch: <T>(src: ISubscribable<T>, keyFn: Fn<T, NumOrStrin
  * `$compile`d and then getting re-mounted. See {@link $switch} for
  * further details.
  *
+ * Also see {@link $replace}.
+ *
  * @example
  * ```ts
  * $refresh(fromInterval(1000), async (x) => ["div", {}, x])

package/switch.js

@@ -1,7 +1,8 @@
 import { assert } from "@thi.ng/errors/assert";
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
-import { $sub } from "./sub.js";
+import { __nextID } from "./idgen.js";
+import { $subWithID } from "./sub.js";
 import { $wrapText } from "./wrap.js";
 /**
  * Reactive component wrapper to dynamically switch/replace itself with one of
@@ -55,7 +56,7 @@ import { $wrapText } from "./wrap.js";
  * @param error -
  * @param loader -
  */
-export const $switch = (src, keyFn, ctors, error, loader) => $sub(src, new Switch(keyFn, ctors, error, loader));
+export const $switch = (src, keyFn, ctors, error, loader) => $subWithID(src, new Switch(keyFn, ctors, error, loader), __nextID("switch", src));
 /**
  * Syntax sugar for {@link $switch} for cases when there's only a single
  * component which should transition through its entire lifecycle for
@@ -68,6 +69,8 @@ export const $switch = (src, keyFn, ctors, error, loader) => $sub(src, new Switc
  * `$compile`d and then getting re-mounted. See {@link $switch} for
  * further details.
  *
+ * Also see {@link $replace}.
+ *
  * @example
  * ```ts
  * $refresh(fromInterval(1000), async (x) => ["div", {}, x])
@@ -78,7 +81,7 @@ export const $switch = (src, keyFn, ctors, error, loader) => $sub(src, new Switc
  * @param error -
  * @param loader -
  */
-export const $refresh = (src, ctor, error, loader) => $switch(src, () => 0, { 0: ctor }, error, loader);
+export const $refresh = (src, ctor, error, loader) => $subWithID(src, new Switch(() => 0, { 0: ctor }, error, loader), __nextID("refresh", src));
 export class Switch extends Component {
     constructor(keyFn, ctors, error = async (e) => $wrapText("span", {}, e), loader = async () => $wrapText("span", {
         hidden: true,