feat(rdom): add stream IDs for $list/$klist/$Sub/$SubA

thi-ng · Apr 3, 2023 · bfd4058 · bfd4058
1 parent baa8878
commit bfd4058
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/packages/rdom/src/klist.ts b/packages/rdom/src/klist.ts
@@ -1,10 +1,11 @@
 import type { Fn, Fn2, NumOrString } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
+import { __nextID } from "@thi.ng/rstream/idgen";
 import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
 import { $moveTo } from "./dom.js";
-import { $sub } from "./sub.js";
+import { $Sub } from "./sub.js";
 
 interface KListItem {
 	k: NumOrString;
@@ -69,7 +70,13 @@ export const $klist = <T>(
 	attribs: any,
 	childCtor: Fn<T, any>,
 	keyFn?: Fn2<T, number, NumOrString>
-) => $sub<T[]>(src, new KList<T>(tag, attribs, childCtor, keyFn));
+) =>
+	src.subscribe(
+		new $Sub<T[]>(
+			new KList<T>(tag, attribs, childCtor, keyFn),
+			`rdom$klist-${src.id}-${__nextID()}`
+		)
+	);
 
 export class KList<T> extends Component<T[]> implements IMountWithState<T[]> {
 	items?: KListItem[] = [];

diff --git a/packages/rdom/src/list.ts b/packages/rdom/src/list.ts
@@ -1,9 +1,10 @@
 import type { Fn, Predicate2 } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
+import { __nextID } from "@thi.ng/rstream/idgen";
 import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
-import { $sub } from "./sub.js";
+import { $Sub } from "./sub.js";
 
 /**
  * Creates a generalized and dynamically updating list component from items of
@@ -58,7 +59,13 @@ export const $list = <T>(
 	attribs: any,
 	ctor: Fn<T, any>,
 	equiv?: Predicate2<T>
-) => $sub<T[]>(src, new List<T>(tag, attribs, ctor, equiv));
+) =>
+	src.subscribe(
+		new $Sub<T[]>(
+			new List<T>(tag, attribs, ctor, equiv),
+			`rdom$list-${src.id}-${__nextID()}`
+		)
+	);
 
 export class List<T> extends Component implements IMountWithState<T[]> {
 	prev?: T[];

diff --git a/packages/rdom/src/sub.ts b/packages/rdom/src/sub.ts
@@ -55,8 +55,8 @@ export function $sub(
 export class $Sub<T = any> extends Subscription<T, T> {
 	el?: Element;
 
-	constructor(protected inner: IMountWithState<T | undefined>) {
-		super(undefined, { id: `rdom$sub-${__nextID()}` });
+	constructor(protected inner: IMountWithState<T | undefined>, id?: string) {
+		super(undefined, { id: id || `rdom$sub-${__nextID()}` });
 	}
 
 	async mount(parent: Element, index: NumOrElement = -1) {
@@ -87,8 +87,8 @@ export class $SubA extends Subscription<any, any> {
 	protected setter: Fn2<any, any, any>;
 	protected attr: any = {};
 
-	constructor(protected comp: IComponent, path: Path) {
-		super(undefined, { id: `rdom$sub-${__nextID()}` });
+	constructor(protected comp: IComponent, path: Path, id?: string) {
+		super(undefined, { id: id || `rdom$attr-${__nextID()}` });
 		this.setter = defSetterUnsafe(path);
 	}