@thi.ng/rdom 1.7.88 → 2.0.1

package/README.md

@@ -7,7 +7,7 @@
 [![Mastodon Follow](https://img.shields.io/mastodon/follow/109331703950160316?domain=https%3A%2F%2Fmastodon.thi.ng&style=social)](https://mastodon.thi.ng/@toxi)
 
 > [!NOTE]
-> This is one of 214 standalone projects, maintained as part
+> This is one of 215 standalone projects, maintained as part
 > of the [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem
 > and anti-framework.
 >
@@ -294,6 +294,7 @@ $compile(
 - [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) - HTML/SVG/XML serialization of nested data structures, iterables & closures
 - [@thi.ng/hiccup-html](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-html) - 100+ type-checked HTML5 element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) related infrastructure
 - [@thi.ng/hiccup-svg](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-svg) - SVG element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) & related tooling
+- [@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream) - Reactive streams & subscription primitives for constructing dataflow graphs / pipelines
 - [@thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers) - Collection of ~170 lightweight, composable transducers, reducers, generators, iterators for functional data transformations
 
 ## Installation
@@ -316,7 +317,7 @@ Browser ESM import:
 
 [JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.37 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.53 KB
 
 ## Dependencies
 
@@ -333,7 +334,7 @@ Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
 
 ## Usage examples
 
-52 projects in this repo's
+53 projects in this repo's
 [/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
 directory are using this package:
 
@@ -365,6 +366,7 @@ directory are using this package:
 | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/procedural-text.jpg" width="240"/>      | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation                | [Demo](https://demo.thi.ng/umbrella/procedural-text/)     | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/procedural-text)     |
 | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/ramp-scroll-anim.png" width="240"/>     | Scroll-based, reactive, multi-param CSS animation basics                                                | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/)    | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ramp-scroll-anim)    |
 |                                                                                                                             | Basic & barebones usage of async iterables in thi.ng/rdom                                               | [Demo](https://demo.thi.ng/umbrella/rdom-async/)          | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-async)          |
+| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-bare-lists.avif" width="240"/>     | Basic usage of rdom bare list components in multiple scenarios                                          | [Demo](https://demo.thi.ng/umbrella/rdom-bare-lists/)     | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-bare-lists)     |
 |                                                                                                                             | Demonstates various rdom usage patterns                                                                 | [Demo](https://demo.thi.ng/umbrella/rdom-basics/)         | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-basics)         |
 | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-delayed-update) |
 | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-dnd.png" width="240"/>             | rdom drag & drop example                                                                                | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)            | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-dnd)            |
@@ -396,11 +398,8 @@ directory are using this package:
 
 [Generated API docs](https://docs.thi.ng/umbrella/rdom/)
 
-TODO
-
-Currently, documentation only exists in the form of small examples and various
-doc strings (incomplete). I'm working to alleviate this situation ASAP... In
-that respect, PRs are welcome as well!
+Currently, documentation only exists in the form of API docs and 50+ small
+example projects (see above, all commented).
 
 ### Basic usage
 
@@ -462,13 +461,15 @@ const items = reactive([
 $klist(
     // reactive data source (any rstream subscribable)
     items,
-    // outer list element & attribs
-    "ul",
-    { class: "list red" },
-    // list item component constructor
-    (x) => ["li", {}, x.id, ` (${x.val})`],
-    // key function (includes)
-    (x) => `${x.id}-${x.val}`
+    {
+        // outer list element & attribs
+        el: "ul",
+        attribs: { class: "list red" },
+        // list item component constructor
+        item: (x) => ["li", {}, x.id, ` (${x.val})`],
+        // key function (includes)
+        key: (x) => `${x.id}-${x.val}`
+    }
 ).mount(document.body);
 
 // update list:

package/api.d.ts

@@ -1,4 +1,4 @@
-import type { Fn0 } from "@thi.ng/api";
+import type { Fn, Fn0 } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
 /**
  * Main rdom component interface/contract. Also see
@@ -34,7 +34,7 @@ export interface IComponent<T = any> {
      * @param idx -
      * @param args -
      */
-    mount(parent: ParentNode, idx?: NumOrElement, ...args: any[]): Promise<Element>;
+    mount(parent: ParentNode, idx?: NumOrNode, ...args: any[]): Promise<Element>;
     /**
      * Async component lifecycle method to remove the component from the
      * target DOM and release any other internal resources (e.g.
@@ -65,7 +65,7 @@ export interface IMountWith<T, M> extends IComponent<T> {
      * @param index -
      * @param state -
      */
-    mount(parent: ParentNode, index: NumOrElement, state: M): Promise<Element>;
+    mount(parent: ParentNode, index: NumOrNode, state: M): Promise<Element>;
     /**
      * Same like {@link IComponent.update}, but new `state` value arg is
      * mandatory.
@@ -91,4 +91,30 @@ export interface CompiledComponent extends IComponent {
 export type ComponentLike = IComponent | [string, ...(any | null)[]];
 export type Callback = Fn0<void>;
 export type NumOrElement = number | Element;
+export type NumOrNode = number | Node;
+/**
+ * Common options for {@link $list} and {@link $klist} components.
+ */
+export interface ListBaseOpts<T> {
+    /**
+     * Tag name or existing DOM element to use as list container.
+     *
+     * If given, the list items will be attached this this element. If given as
+     * string, an element of that type will be created first. In either case,
+     * the element can be further customized via {@link ListBaseOpts.attribs}.
+     *
+     * If NOT given, the list items will be directly attached to the list
+     * component's parent element. We call this a "bare" list.
+     */
+    el?: Element | string;
+    /**
+     * Element attributes for list container element (only used if
+     * {@link ListBaseOpts.el} is given).
+     */
+    attribs?: Record<string, any>;
+    /**
+     * List item component factory function.
+     */
+    item: Fn<T, any>;
+}
 //# sourceMappingURL=api.d.ts.map

package/async.d.ts

@@ -1,5 +1,5 @@
 import type { Maybe, Path } from "@thi.ng/api";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, NumOrNode } from "./api.js";
 /**
  * Takes an ES `AsyncIterable` and creates a simple component wrapper for its
  * asynchronously produced values.
@@ -33,7 +33,7 @@ export declare class $Async<T = any> {
     protected inner: IMountWithState<Maybe<T>>;
     el?: Element;
     constructor(src: AsyncIterable<T>, inner: IMountWithState<Maybe<T>>);
-    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
+    mount(parent: ParentNode, index?: NumOrNode): Promise<Element>;
     unmount(): Promise<void>;
     update(x: T): void;
 }

package/component.d.ts

@@ -1,5 +1,5 @@
 import type { Maybe, MaybeDeref } from "@thi.ng/api";
-import type { IComponent, NumOrElement } from "./api.js";
+import type { IComponent, NumOrNode } from "./api.js";
 /**
  * Abstract base class / {@link IComponent} implementation. Provides
  * additional convenience methods for DOM element creation &
@@ -7,7 +7,7 @@ import type { IComponent, NumOrElement } from "./api.js";
  */
 export declare abstract class Component<T = any> implements IComponent<T> {
     el?: Element;
-    abstract mount(parent: ParentNode, index?: NumOrElement, ...args: any[]): Promise<Element>;
+    abstract mount(parent: ParentNode, index?: NumOrNode, ...args: any[]): Promise<Element>;
     unmount(): Promise<void>;
     update(state?: T): void;
     /**
@@ -20,7 +20,7 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param parent
      * @param idx
      */
-    $el(tag: string, attribs?: any, body?: any, parent?: Maybe<ParentNode>, idx?: NumOrElement): Element;
+    $el(tag: string, attribs?: any, body?: any, parent?: Maybe<ParentNode>, idx?: NumOrNode): Element;
     /**
      * Syntax sugar for {@link $comment}, creates a new comment DOM node using
      * this component's {@link IComponent.el} as default `parent`.
@@ -29,7 +29,7 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param parent
      * @param idx
      */
-    $comment(body: string | string[], parent?: Maybe<ParentNode>, idx?: NumOrElement): Comment;
+    $comment(body: string | string[], parent?: Maybe<ParentNode>, idx?: NumOrNode): Comment;
     /**
      * Syntax sugar for {@link $clear}, using this component's
      * {@link IComponent.el} as default element to clear.
@@ -50,7 +50,7 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param root
      * @param index
      */
-    $tree(tree: any, root?: ParentNode, index?: NumOrElement): Promise<any>;
+    $tree(tree: any, root?: ParentNode, index?: NumOrNode): Promise<any>;
     /**
      * Syntax sugar for {@link $text}, using this component's
      * {@link IComponent.el} as default element to edit.
@@ -106,6 +106,6 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param el
      * @param idx
      */
-    $moveTo(newParent: ParentNode, el?: Element, idx?: NumOrElement): void;
+    $moveTo(newParent: ParentNode, el?: Element, idx?: NumOrNode): void;
 }
 //# sourceMappingURL=component.d.ts.map

package/dom.d.ts

@@ -1,5 +1,5 @@
 import { type MaybeDeref } from "@thi.ng/api/deref";
-import type { NumOrElement } from "./api.js";
+import type { NumOrNode } from "./api.js";
 /**
  * hdom-style DOM tree creation from hiccup format. Returns DOM element of
  * `tree` root. See {@link $el} for further details.
@@ -27,7 +27,7 @@ import type { NumOrElement } from "./api.js";
  * @param parent -
  * @param idx -
  */
-export declare const $tree: (tree: any, parent: ParentNode, idx?: NumOrElement) => Promise<any>;
+export declare const $tree: (tree: any, parent: ParentNode, idx?: NumOrNode) => Promise<any>;
 /**
  * Create a single DOM element and optionally attaches it to `parent`.
  *
@@ -50,7 +50,7 @@ export declare const $tree: (tree: any, parent: ParentNode, idx?: NumOrElement)
  * @param parent -
  * @param idx -
  */
-export declare const $el: (tag: string, attribs: any, body?: any, parent?: ParentNode, idx?: NumOrElement) => Element;
+export declare const $el: (tag: string, attribs: any, body?: any, parent?: ParentNode, idx?: NumOrNode) => Element;
 /**
  * Similar to {@link $el}, but creates a new comment DOM node using provided
  * body. If `parent` is given, the comment will be attached or inserted as child
@@ -64,7 +64,7 @@ export declare const $el: (tag: string, attribs: any, body?: any, parent?: Paren
  * @param parent
  * @param idx
  */
-export declare const $comment: (body: string | string[], parent?: ParentNode, idx?: NumOrElement) => Comment;
+export declare const $comment: (body: string | string[], parent?: ParentNode, idx?: NumOrNode) => Comment;
 /**
  * Appends or inserts `child` as child element of `parent`. The default `idx` of
  * -1 means the child will be appended, else uses `parent.insertBefore()` to
@@ -74,7 +74,7 @@ export declare const $comment: (body: string | string[], parent?: ParentNode, id
  * @param child
  * @param idx
  */
-export declare const $addChild: (parent: ParentNode, child: Node | Comment, idx?: NumOrElement) => void;
+export declare const $addChild: (parent: ParentNode, child: Node | Comment, idx?: NumOrNode) => void;
 /**
  * Removes given element or comment from the DOM.
  *
@@ -89,7 +89,7 @@ export declare const $remove: (el: Element | Comment) => void;
  * @param el
  * @param idx
  */
-export declare const $moveTo: (newParent: ParentNode, el: Element | Comment, idx?: NumOrElement) => void;
+export declare const $moveTo: (newParent: ParentNode, el: Element | Comment, idx?: NumOrNode) => void;
 /**
  * Removes all content from given element.
  *

package/internal/list.d.ts

@@ -0,0 +1,10 @@
+import type { ListBaseOpts, NumOrNode } from "../api.js";
+/** @internal */
+export declare const __initList: (parent: ParentNode, index: NumOrNode, { el, attribs }: ListBaseOpts<any>) => {
+    el: Element;
+    anchor?: undefined;
+} | {
+    el: Element;
+    anchor: Comment;
+};
+//# sourceMappingURL=list.d.ts.map

package/internal/list.js

@@ -0,0 +1,15 @@
+import { isString } from "@thi.ng/checks/is-string";
+import { $addChild, $attribs, $comment, $el } from "../dom.js";
+const __initList = (parent, index, { el, attribs }) => {
+  if (isString(el)) {
+    return { el: $el(el, attribs, null, parent, index) };
+  } else if (el) {
+    if (attribs) $attribs(el, attribs);
+    $addChild(parent, el, index);
+    return { el };
+  }
+  return { el: parent, anchor: $comment("", parent, index) };
+};
+export {
+  __initList
+};

package/klist.d.ts

@@ -1,7 +1,10 @@
-import type { Fn, Fn2, NumOrString } from "@thi.ng/api";
+import type { Fn2, NumOrString } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, ListBaseOpts, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
+export interface KListOpts<T> extends ListBaseOpts<T> {
+    key?: Fn2<T, number, NumOrString>;
+}
 export interface KListItem {
     k: NumOrString;
     v: IComponent;
@@ -14,11 +17,18 @@ export interface KListItem {
  * the list.
  *
  * @remarks
- * The given `keyFn` is used to obtain a *unique* key value for each list item
- * obtained from the reactive arrays obtained from `src`. Like a hash, the key
- * value MUST represent an item's *current* value such that if the value
+ * The given `key` function is used to obtain a *unique* key value for each list
+ * item obtained from the reactive arrays obtained from `src`. Like a hash, the
+ * key value MUST represent an item's *current* value such that if the value
  * changes, so does the key.
  *
+ * See {@link ListBaseOpts} for more details about wrapped vs. bare lists, i.e.
+ * using a list wrapper element for items or attaching list items directly to
+ * this component's parent. Also see this example project to illustrate the
+ * structure/possibilities of bare lists:
+ *
+ * - https://demo.thi.ng/umbrella/rdom-bare-lists/
+ *
  * @example
  * ```ts
  * import { $klist } from "@thi.ng/rdom";
@@ -29,13 +39,15 @@ export interface KListItem {
  * $klist(
  *   // data source (any rstream subscribable)
  *   items,
- *   // outer list element & attribs
- *   "ul",
- *   { class: "list red" },
- *   // list item component constructor
- *   (x) => ["li", {}, x.id, ` (${x.val})`],
- *   // key function
- *   (x) => `${x.id}-${x.val}`
+ *   {
+ *     // outer list element & attribs
+ *     el: "ul",
+ *     attribs: { class: "list red" },
+ *     // list item component constructor
+ *     item: (x) => ["li", {}, x.id, ` (${x.val})`],
+ *     // key function
+ *     key: (x) => `${x.id}-${x.val}`
+ *   }
  * ).mount(document.body);
  *
  * // update list:
@@ -56,21 +68,16 @@ export interface KListItem {
  * ```
  *
  * @param src -
- * @param tag -
- * @param attribs -
- * @param childCtor -
- * @param keyFn -
+ * @param opts -
  */
-export declare const $klist: <T>(src: ISubscribable<T[]>, tag: string, attribs: any, childCtor: Fn<T, any>, keyFn?: Fn2<T, number, NumOrString>) => IComponent<T[]>;
+export declare const $klist: <T>(src: ISubscribable<T[]>, opts: KListOpts<T>) => IComponent<T[]>;
 export declare class KList<T> extends Component<T[]> implements IMountWithState<T[]> {
-    protected tag: string;
-    protected attribs: any;
-    protected ctor: Fn<T, any>;
-    protected keyFn: Fn2<T, number, NumOrString>;
-    items?: KListItem[];
-    cache?: Map<NumOrString, KListItem>;
-    constructor(tag: string, attribs: any, ctor: Fn<T, any>, keyFn?: Fn2<T, number, NumOrString>);
-    mount(parent: ParentNode, index: NumOrElement, state: T[]): Promise<Element>;
+    protected opts: KListOpts<T>;
+    protected items?: KListItem[];
+    protected cache?: Map<NumOrString, KListItem>;
+    protected anchor?: Comment;
+    constructor(opts: KListOpts<T>);
+    mount(parent: ParentNode, index: NumOrNode, state: T[]): Promise<Element>;
     unmount(): Promise<void>;
     update(curr: T[]): Promise<void>;
 }

package/klist.js

@@ -1,43 +1,44 @@
+import { isString } from "@thi.ng/checks/is-string";
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
 import { __nextID } from "./idgen.js";
+import { __initList } from "./internal/list.js";
 import { $subWithID } from "./sub.js";
-const $klist = (src, tag, attribs, childCtor, keyFn) => $subWithID(
-  src,
-  new KList(tag, attribs, childCtor, keyFn),
-  __nextID("klist", src)
-);
+const $klist = (src, opts) => $subWithID(src, new KList(opts), __nextID("klist", src));
 class KList extends Component {
-  constructor(tag, attribs, ctor, keyFn = (_, i) => i) {
+  constructor(opts) {
     super();
-    this.tag = tag;
-    this.attribs = attribs;
-    this.ctor = ctor;
-    this.keyFn = keyFn;
+    this.opts = opts;
   }
-  tag;
-  attribs;
-  ctor;
-  keyFn;
+  opts;
   items = [];
   cache;
+  anchor;
   async mount(parent, index, state) {
     this.items = [];
     this.cache = /* @__PURE__ */ new Map();
-    this.el = this.$el(this.tag, this.attribs, null, parent, index);
+    const { el, anchor } = __initList(parent, index, this.opts);
+    this.el = el;
+    this.anchor = anchor;
     this.update(state);
     return this.el;
   }
   async unmount() {
     this.items.forEach((c) => c.v.unmount());
-    this.$remove();
+    if (isString(this.opts.el)) this.$remove();
+    this.anchor?.remove();
     this.el = void 0;
     this.items = void 0;
     this.cache = void 0;
   }
   async update(curr) {
     if (!curr) return;
-    const { keyFn, items, ctor, cache, el: parent } = this;
+    const {
+      opts: { item: ctor, key: keyFn = (_, i2) => i2 },
+      items,
+      cache,
+      el: parent
+    } = this;
     const currItems = [];
     const currCache = /* @__PURE__ */ new Map();
     const offsets = /* @__PURE__ */ new Map();
@@ -62,7 +63,7 @@ class KList extends Component {
     }
     const willMove = /* @__PURE__ */ new Set();
     const didMove = /* @__PURE__ */ new Set();
-    let next;
+    let next = this.anchor;
     const insert = async (item) => {
       if (cache.has(item.k)) {
         this.$moveTo(parent, item.v.el, next);

package/lazy.d.ts

@@ -1,5 +1,5 @@
 import type { Fn0, Maybe } from "@thi.ng/api";
-import type { ComponentLike, IComponent, NumOrElement } from "./api.js";
+import type { ComponentLike, IComponent, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
 /**
  * `IntersectionObserver`-based helper component for lazy
@@ -25,7 +25,7 @@ export declare class $Lazy extends Component {
     protected observer: Maybe<IntersectionObserver>;
     protected inner: Maybe<IComponent>;
     constructor(tag: string, attribs: any, ctor: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit | undefined);
-    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
+    mount(parent: ParentNode, index?: NumOrNode): Promise<Element>;
     unmount(): Promise<void>;
 }
 //# sourceMappingURL=lazy.d.ts.map

package/list.d.ts

@@ -1,7 +1,14 @@
-import type { Fn, Predicate2 } from "@thi.ng/api";
+import type { Predicate2 } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, ListBaseOpts, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
+export interface ListOpts<T> extends ListBaseOpts<T> {
+    /**
+     * Equality predicate function to determine if a list item has changed. Uses
+     * `===` by default.
+     */
+    equiv?: Predicate2<T>;
+}
 /**
  * Creates a generalized and dynamically updating list component from items of
  * the given `src` stream.
@@ -17,6 +24,13 @@ import { Component } from "./component.js";
  * a more elaborate diffing mechanism and keying to uniquely identify list items
  * (regardless of their position in the array).
  *
+ * See {@link ListBaseOpts} for more details about wrapped vs. bare lists, i.e.
+ * using a list wrapper element for items or attaching list items directly to
+ * this component's parent. Also see this example project to illustrate the
+ * structure/possibilities of bare lists:
+ *
+ * - https://demo.thi.ng/umbrella/rdom-bare-lists/
+ *
  * @example
  * ```ts
  * import { $list } from "@thi.ng/rdom";
@@ -27,13 +41,15 @@ import { Component } from "./component.js";
  * $list(
  *   // data source (rstream subsribable)
  *   items,
- *   // outer list element & attribs
- *   "ul",
- *   { class: "list red" },
- *   // list item component constructor
- *   (x) => ["li", {}, x.id],
- *   // optional equality predicate (default this.ng/equiv)
- *   (a, b) => a.id === b.id
+ *   {
+ *     // outer list element & attribs
+ *     el: "ul",
+ *     attribs: { class: "list red" },
+ *     // list item component constructor
+ *     item: (x) => ["li", {}, x.id],
+ *     // optional equality predicate (default this.ng/equiv)
+ *     equiv: (a, b) => a.id === b.id
+ *   }
  * ).mount(document.body);
  *
  * // update list
@@ -46,21 +62,18 @@ import { Component } from "./component.js";
  * ```
  *
  * @param src -
- * @param tag -
- * @param attribs -
- * @param ctor -
- * @param equiv -
+ * @param opts -
  */
-export declare const $list: <T>(src: ISubscribable<T[]>, tag: string, attribs: any, ctor: Fn<T, any>, equiv?: Predicate2<T>) => IComponent<T[]>;
+export declare const $list: <T>(src: ISubscribable<T[]>, opts: ListOpts<T>) => IComponent<T[]>;
 export declare class List<T> extends Component implements IMountWithState<T[]> {
-    protected tag: string;
-    protected attribs: any;
-    protected ctor: Fn<T, IComponent>;
-    protected equiv: Predicate2<T>;
-    prev?: T[];
-    items?: IComponent[];
-    constructor(tag: string, attribs: any, ctor: Fn<T, IComponent>, equiv?: Predicate2<T>);
-    mount(parent: ParentNode, index: NumOrElement, state: T[]): Promise<Element>;
+    protected opts: ListOpts<T>;
+    protected prev?: T[];
+    protected items?: IComponent[];
+    protected anchor?: Comment;
+    protected offset: number;
+    protected numChildren: number;
+    constructor(opts: ListOpts<T>);
+    mount(parent: ParentNode, index: NumOrNode, state: T[]): Promise<Element>;
     unmount(): Promise<void>;
     update(curr: T[]): Promise<void>;
 }

package/list.js

@@ -1,52 +1,62 @@
+import { isString } from "@thi.ng/checks/is-string";
 import { $compile } from "./compile.js";
 import { Component } from "./component.js";
 import { __nextID } from "./idgen.js";
+import { __initList } from "./internal/list.js";
 import { $subWithID } from "./sub.js";
-const $list = (src, tag, attribs, ctor, equiv) => $subWithID(
-  src,
-  new List(tag, attribs, ctor, equiv),
-  __nextID("list", src)
-);
+const $list = (src, opts) => $subWithID(src, new List(opts), __nextID("list", src));
 class List extends Component {
-  constructor(tag, attribs, ctor, equiv = (a, b) => a === b) {
+  constructor(opts) {
     super();
-    this.tag = tag;
-    this.attribs = attribs;
-    this.ctor = ctor;
-    this.equiv = equiv;
+    this.opts = opts;
   }
-  tag;
-  attribs;
-  ctor;
-  equiv;
+  opts;
   prev;
   items;
+  anchor;
+  offset = 0;
+  numChildren = -1;
   async mount(parent, index, state) {
     this.prev = [];
     this.items = [];
-    this.el = this.$el(this.tag, this.attribs, null, parent, index);
+    const { el, anchor } = __initList(parent, index, this.opts);
+    this.el = el;
+    this.anchor = anchor;
     this.update(state);
     return this.el;
   }
   async unmount() {
     this.items.forEach((c) => c.unmount());
-    this.$remove();
+    if (isString(this.opts.el)) this.$remove();
+    this.anchor?.remove();
     this.el = void 0;
     this.items = void 0;
     this.prev = void 0;
   }
   async update(curr) {
     if (!curr) return;
-    const { ctor, equiv, items, prev, el: parent } = this;
+    const {
+      opts: { item: ctor, equiv = (a, b) => a === b },
+      items,
+      prev,
+      el: parent,
+      anchor
+    } = this;
     const nb = curr.length;
     let na = prev.length;
     let n = Math.min(na, nb);
+    let offset = this.offset;
+    const children = parent.childNodes;
+    if (anchor && children.length !== this.numChildren) {
+      this.numChildren = children.length;
+      this.offset = offset = [...children].indexOf(anchor);
+    }
     for (let i = 0; i < n; i++) {
       if (!equiv(prev[i], curr[i])) {
         await items[i].unmount();
         const val = curr[i];
         const child = $compile(ctor(val));
-        await child.mount(parent, i);
+        await child.mount(parent, i + offset);
         items[i] = child;
         prev[i] = val;
       }
@@ -55,7 +65,7 @@ class List extends Component {
       for (; n < nb; n++) {
         const val = curr[n];
         const child = $compile(ctor(val));
-        await child.mount(parent, -1);
+        await child.mount(parent, n + offset);
         items[n] = child;
         prev[n] = val;
       }

package/object.d.ts

@@ -1,6 +1,6 @@
 import type { Fn, Keys } from "@thi.ng/api";
 import type { ISubscribable, StreamObj, StreamObjOpts } from "@thi.ng/rstream";
-import type { ComponentLike, IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { ComponentLike, IComponent, IMountWithState, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
 /**
  * Creates a control component wrapper with an internal stream setup for user
@@ -85,7 +85,7 @@ export declare class $Object<T extends object, K extends Keys<T>> extends Compon
     protected obj: StreamObj<T, K>;
     protected inner?: IComponent;
     constructor(src: T, opts: Partial<StreamObjOpts<T, K>>, ctor: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>);
-    mount(parent: ParentNode, index?: NumOrElement, state?: T): Promise<Element>;
+    mount(parent: ParentNode, index?: NumOrNode, state?: T): Promise<Element>;
     unmount(): Promise<void>;
     update(state: T): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thi.ng/rdom",
-	"version": "1.7.88",
+	"version": "2.0.1",
 	"description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
 	"type": "module",
 	"module": "./index.js",
@@ -41,14 +41,14 @@
 		"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
 	},
 	"dependencies": {
-		"@thi.ng/api": "^8.12.19",
-		"@thi.ng/checks": "^3.8.9",
-		"@thi.ng/errors": "^2.6.8",
-		"@thi.ng/hiccup": "^5.4.4",
-		"@thi.ng/paths": "^5.2.38",
-		"@thi.ng/prefixes": "^2.3.69",
-		"@thi.ng/rstream": "^9.5.2",
-		"@thi.ng/strings": "^3.12.1"
+		"@thi.ng/api": "^8.12.21",
+		"@thi.ng/checks": "^3.9.1",
+		"@thi.ng/errors": "^2.6.10",
+		"@thi.ng/hiccup": "^5.4.6",
+		"@thi.ng/paths": "^5.2.40",
+		"@thi.ng/prefixes": "^2.3.71",
+		"@thi.ng/rstream": "^9.5.5",
+		"@thi.ng/strings": "^3.12.3"
 	},
 	"devDependencies": {
 		"esbuild": "^0.28.0",
@@ -62,16 +62,19 @@
 		"component",
 		"css",
 		"datastructure",
+		"diff",
 		"dom",
 		"hiccup",
 		"html",
 		"lifecycle",
+		"list",
 		"reactive",
 		"rstream",
 		"svg",
 		"tree",
 		"typescript",
-		"ui"
+		"ui",
+		"wrapper"
 	],
 	"publishConfig": {
 		"access": "public"
@@ -81,7 +84,8 @@
 	},
 	"files": [
 		"./*.js",
-		"./*.d.ts"
+		"./*.d.ts",
+		"internal"
 	],
 	"exports": {
 		".": {
@@ -145,9 +149,10 @@
 			"hiccup",
 			"hiccup-html",
 			"hiccup-svg",
+			"rstream",
 			"transducers"
 		],
 		"year": 2020
 	},
-	"gitHead": "2085e9600e121134429c85f6d0ead46e3ce920ca"
+	"gitHead": "dcaa4e2beb427e434a68cba1259a9bf9983a569a"
 }

package/promise.d.ts

@@ -1,5 +1,5 @@
 import type { Fn } from "@thi.ng/api";
-import type { ComponentLike, IComponent, NumOrElement } from "./api.js";
+import type { ComponentLike, IComponent, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
 /**
  * Simple component wrapper for {@link ComponentLike} promises. When this
@@ -26,7 +26,7 @@ export declare class $Promise extends Component {
     protected error: Fn<Error, any>;
     inner?: IComponent;
     constructor(promise: Promise<ComponentLike>, error?: Fn<Error, any>);
-    mount(parent: ParentNode, index: NumOrElement): Promise<Element>;
+    mount(parent: ParentNode, index: NumOrNode): Promise<Element>;
     unmount(): Promise<void>;
 }
 //# sourceMappingURL=promise.d.ts.map

package/replace.d.ts

@@ -1,5 +1,5 @@
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
 /**
  * Similar to {@link $refresh}, but more basic/simple. Takes a reactive value
@@ -37,8 +37,8 @@ export declare const $replace: <T>(src: ISubscribable<T>) => IComponent<T>;
 export declare class Replace<T> extends Component implements IMountWithState<T> {
     protected parent?: ParentNode;
     protected inner?: IComponent<T>;
-    protected index?: NumOrElement;
-    mount(parent: ParentNode, index: NumOrElement, val: T): Promise<Element>;
+    protected index?: NumOrNode;
+    mount(parent: ParentNode, index: NumOrNode, val: T): Promise<Element>;
     unmount(): Promise<void>;
     update(val: T): Promise<void>;
 }

package/sub.d.ts

@@ -1,7 +1,7 @@
 import type { Fn2, Maybe, Path } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
 import { Subscription } from "@thi.ng/rstream/subscription";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, NumOrNode } from "./api.js";
 /**
  * Takes an
  * [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
@@ -45,7 +45,7 @@ export declare class $Sub<T = any> extends Subscription<T, T> {
     protected inner: IMountWithState<Maybe<T>>;
     el?: Element;
     constructor(inner: IMountWithState<Maybe<T>>, id?: string);
-    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
+    mount(parent: ParentNode, index?: NumOrNode): Promise<Element>;
     unmount(): Promise<void>;
     update(x: T): void;
     next(x: T): void;

package/switch.d.ts

@@ -1,6 +1,6 @@
 import type { Fn, NumOrString } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import type { IComponent, IMountWithState, NumOrNode } from "./api.js";
 import { Component } from "./component.js";
 /**
  * Reactive component wrapper to dynamically switch/replace itself with one of
@@ -94,9 +94,9 @@ export declare class Switch<T> extends Component implements IMountWithState<T> {
     protected val?: T;
     protected parent?: ParentNode;
     protected inner?: IComponent<T>;
-    protected index?: NumOrElement;
+    protected index?: NumOrNode;
     constructor(keyFn: Fn<T, NumOrString>, ctors: Record<NumOrString, Fn<T, Promise<any>>>, error?: Fn<Error, Promise<any>>, loader?: Fn<T, Promise<any>>);
-    mount(parent: ParentNode, index: NumOrElement, val: T): Promise<Element>;
+    mount(parent: ParentNode, index: NumOrNode, val: T): Promise<Element>;
     unmount(): Promise<void>;
     update(val: T): Promise<void>;
 }