@thi.ng/rdom 0.13.3 → 0.13.4

package/klist.js

@@ -3,169 +3,113 @@ import { Component } from "./component.js";
 import { $moveTo } from "./dom.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
- * diffing algorithm to avoid re-initialization of list items if they've been
- * re-ordered or changed positions due to removal/insertion of other items in
- * 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
- * changes, so does the key.
- *
- * @example
- * ```ts
- * const items = reactive([{id: "a", val: 1}, {id: "b", val: 2}, {id: "c", val: 3}]);
- *
- * $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}`
- * ).mount(document.body);
- *
- * // update list:
- * // - item a will be removed
- * // - item b is unchanged
- * // - item d will be newly inserted
- * // - item c will be updated (due to new value)
- * setTimeout(
- *   () => {
- *     items.next([
- *       { id: "b", val: 2 },
- *       { id: "d", val: 4 },
- *       { id: "c", val: 30 },
- *     ]);
- *   },
- *   1000
- * );
- * ```
- *
- * @param src -
- * @param tag -
- * @param attribs -
- * @param childCtor -
- * @param 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 {
-    tag;
-    attribs;
-    ctor;
-    keyFn;
-    items = [];
-    cache;
-    constructor(tag, attribs, ctor, keyFn = (_, i) => i) {
-        super();
-        this.tag = tag;
-        this.attribs = attribs;
-        this.ctor = ctor;
-        this.keyFn = keyFn;
+const $klist = (src, tag, attribs, childCtor, keyFn) => $subWithID(
+  src,
+  new KList(tag, attribs, childCtor, keyFn),
+  __nextID("klist", src)
+);
+class KList extends Component {
+  constructor(tag, attribs, ctor, keyFn = (_, i) => i) {
+    super();
+    this.tag = tag;
+    this.attribs = attribs;
+    this.ctor = ctor;
+    this.keyFn = keyFn;
+  }
+  items = [];
+  cache;
+  async mount(parent, index, state) {
+    this.items = [];
+    this.cache = /* @__PURE__ */ new Map();
+    this.el = this.$el(this.tag, this.attribs, null, parent, index);
+    this.update(state);
+    return this.el;
+  }
+  async unmount() {
+    this.items.forEach((c) => c.v.unmount());
+    this.$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 currItems = [];
+    const currCache = /* @__PURE__ */ new Map();
+    const offsets = /* @__PURE__ */ new Map();
+    const deltas = /* @__PURE__ */ new Map();
+    let numPrev = items.length;
+    let numCurr = curr.length;
+    let i;
+    for (i = numPrev; i-- > 0; ) {
+      offsets.set(items[i].k, i);
     }
-    async mount(parent, index, state) {
-        this.items = [];
-        this.cache = new Map();
-        this.el = this.$el(this.tag, this.attribs, null, parent, index);
-        this.update(state);
-        return this.el;
+    for (i = numCurr; i-- > 0; ) {
+      const val = curr[i];
+      const key = keyFn(val, i);
+      let item = cache.get(key);
+      item ? item.v.update(val) : item = {
+        k: key,
+        v: $compile(ctor(val))
+      };
+      currCache.set(key, currItems[i] = item);
+      const off = offsets.get(key);
+      off != void 0 && deltas.set(key, Math.abs(i - off));
     }
-    async unmount() {
-        this.items.forEach((c) => c.v.unmount());
-        this.$remove();
-        this.el = undefined;
-        this.items = undefined;
-        this.cache = undefined;
+    const willMove = /* @__PURE__ */ new Set();
+    const didMove = /* @__PURE__ */ new Set();
+    let next;
+    const insert = async (item) => {
+      if (cache.has(item.k)) {
+        $moveTo(parent, item.v.el, next);
+        next = item.v.el;
+      } else {
+        cache.set(item.k, item);
+        next = await item.v.mount(parent, next);
+      }
+      numCurr--;
+    };
+    while (numPrev && numCurr) {
+      const prevItem = items[numPrev - 1];
+      const prevKey = prevItem.k;
+      const currItem = currItems[numCurr - 1];
+      const currKey = currItem.k;
+      if (currItem === prevItem) {
+        next = currItem.v.el;
+        numPrev--;
+        numCurr--;
+      } else if (!currCache.has(prevKey)) {
+        await prevItem.v.unmount();
+        cache.delete(prevKey);
+        numPrev--;
+      } else if (!cache.has(currKey) || willMove.has(currKey)) {
+        await insert(currItem);
+      } else if (didMove.has(prevKey)) {
+        numPrev--;
+      } else if (deltas.get(currKey) > deltas.get(prevKey)) {
+        await insert(currItem);
+        didMove.add(currKey);
+      } else {
+        willMove.add(prevKey);
+        numPrev--;
+      }
     }
-    async update(curr) {
-        if (!curr)
-            return;
-        const { keyFn, items, ctor, cache, el: parent } = this;
-        const currItems = [];
-        const currCache = new Map();
-        const offsets = new Map();
-        const deltas = new Map();
-        let numPrev = items.length;
-        let numCurr = curr.length;
-        let i;
-        for (i = numPrev; i-- > 0;) {
-            offsets.set(items[i].k, i);
-        }
-        for (i = numCurr; i-- > 0;) {
-            const val = curr[i];
-            const key = keyFn(val, i);
-            let item = cache.get(key);
-            item
-                ? item.v.update(val) // TODO obsolete?
-                : (item = {
-                    k: key,
-                    v: $compile(ctor(val)),
-                });
-            currCache.set(key, (currItems[i] = item));
-            const off = offsets.get(key);
-            off != undefined && deltas.set(key, Math.abs(i - off));
-        }
-        const willMove = new Set();
-        const didMove = new Set();
-        let next;
-        const insert = async (item) => {
-            if (cache.has(item.k)) {
-                $moveTo(parent, item.v.el, next);
-                next = item.v.el;
-            }
-            else {
-                cache.set(item.k, item);
-                next = await item.v.mount(parent, next);
-            }
-            numCurr--;
-        };
-        while (numPrev && numCurr) {
-            const prevItem = items[numPrev - 1];
-            const prevKey = prevItem.k;
-            const currItem = currItems[numCurr - 1];
-            const currKey = currItem.k;
-            if (currItem === prevItem) {
-                next = currItem.v.el;
-                numPrev--;
-                numCurr--;
-            }
-            else if (!currCache.has(prevKey)) {
-                await prevItem.v.unmount();
-                cache.delete(prevKey);
-                numPrev--;
-            }
-            else if (!cache.has(currKey) || willMove.has(currKey)) {
-                await insert(currItem);
-            }
-            else if (didMove.has(prevKey)) {
-                numPrev--;
-            }
-            else if (deltas.get(currKey) > deltas.get(prevKey)) {
-                await insert(currItem);
-                didMove.add(currKey);
-            }
-            else {
-                willMove.add(prevKey);
-                numPrev--;
-            }
-        }
-        while (numPrev--) {
-            const item = items[numPrev];
-            if (!currCache.has(item.k)) {
-                await item.v.unmount();
-                cache.delete(item.k);
-            }
-        }
-        while (numCurr) {
-            await insert(currItems[numCurr - 1]);
-        }
-        this.items = currItems;
+    while (numPrev--) {
+      const item = items[numPrev];
+      if (!currCache.has(item.k)) {
+        await item.v.unmount();
+        cache.delete(item.k);
+      }
     }
+    while (numCurr) {
+      await insert(currItems[numCurr - 1]);
+    }
+    this.items = currItems;
+  }
 }
+export {
+  $klist,
+  KList
+};

package/list.js

@@ -2,114 +2,70 @@ import { $compile } from "./compile.js";
 import { Component } from "./component.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.
- *
- * @remarks
- * Only very basic key-less diffing of list items is performed (using the
- * `equiv` equality predicate arg, i.e. `equiv(prev[i], curr[i])`).
- *
- * Use this list component only for cases when the child item components do not
- * involve complex lifecycles (e.g. preloaders, intro animations etc.). Any list
- * items changing position will be first unmounted, then remounted. To avoid
- * this full lifecycle transition, consider using {@link $klist}, which employs
- * a more elaborate diffing mechanism and keying to uniquely identify list items
- * (regardless of their position in the array).
- *
- * @example
- * ```ts
- * const items = reactive([{id: "a"}, {id: "b"}, {id: "c"}]);
- *
- * $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
- * ).mount(document.body);
- *
- * // update list
- * items.next([{id: "b"}, {id: "d"}, {id: "c"}]);
- *
- * // removes component for item A
- * // recreates B in new position
- * // creates D
- * // keeps C
- * ```
- *
- *
- * @param src -
- * @param tag -
- * @param attribs -
- * @param ctor -
- * @param 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 {
-    tag;
-    attribs;
-    ctor;
-    equiv;
-    prev;
-    items;
-    constructor(tag, attribs, ctor, equiv = (a, b) => a === b) {
-        super();
-        this.tag = tag;
-        this.attribs = attribs;
-        this.ctor = ctor;
-        this.equiv = equiv;
+const $list = (src, tag, attribs, ctor, equiv) => $subWithID(
+  src,
+  new List(tag, attribs, ctor, equiv),
+  __nextID("list", src)
+);
+class List extends Component {
+  constructor(tag, attribs, ctor, equiv = (a, b) => a === b) {
+    super();
+    this.tag = tag;
+    this.attribs = attribs;
+    this.ctor = ctor;
+    this.equiv = equiv;
+  }
+  prev;
+  items;
+  async mount(parent, index, state) {
+    this.prev = [];
+    this.items = [];
+    this.el = this.$el(this.tag, this.attribs, null, parent, index);
+    this.update(state);
+    return this.el;
+  }
+  async unmount() {
+    this.items.forEach((c) => c.unmount());
+    this.$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 nb = curr.length;
+    let na = prev.length;
+    let n = Math.min(na, nb);
+    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);
+        items[i] = child;
+        prev[i] = val;
+      }
     }
-    async mount(parent, index, state) {
-        this.prev = [];
-        this.items = [];
-        this.el = this.$el(this.tag, this.attribs, null, parent, index);
-        this.update(state);
-        return this.el;
-    }
-    async unmount() {
-        this.items.forEach((c) => c.unmount());
-        this.$remove();
-        this.el = undefined;
-        this.items = undefined;
-        this.prev = undefined;
-    }
-    async update(curr) {
-        if (!curr)
-            return;
-        const { ctor, equiv, items, prev, el: parent } = this;
-        const nb = curr.length;
-        let na = prev.length;
-        let n = Math.min(na, nb);
-        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);
-                items[i] = child;
-                prev[i] = val;
-            }
-        }
-        if (na < nb) {
-            for (; n < nb; n++) {
-                const val = curr[n];
-                const child = $compile(ctor(val));
-                await child.mount(parent, -1);
-                items[n] = child;
-                prev[n] = val;
-            }
-        }
-        else {
-            while (--na >= nb) {
-                await items[na].unmount();
-                items.pop();
-                prev.pop();
-            }
-        }
+    if (na < nb) {
+      for (; n < nb; n++) {
+        const val = curr[n];
+        const child = $compile(ctor(val));
+        await child.mount(parent, -1);
+        items[n] = child;
+        prev[n] = val;
+      }
+    } else {
+      while (--na >= nb) {
+        await items[na].unmount();
+        items.pop();
+        prev.pop();
+      }
     }
+  }
 }
+export {
+  $list,
+  List
+};

package/object.js

@@ -2,101 +2,38 @@ import { fromObject } from "@thi.ng/rstream/object";
 import { Component } from "./component.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
- * call `inner` with an object of key-value streams and then {@link $compile}s
- * that function's return value as component body.
- *
- * @remarks
- * 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
- * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
- * for more details and options.
- *
- * Also see {@link $subObject}.
- *
- * @example
- * ```ts
- * const obj = $object(
- *   // source object (for seeding)
- *   { id: "a", name: "foo", ignore: 23 },
- *   // create subscriptions for given keys
- *   { keys: ["id", "name"] }
- *   // component factory
- *   async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
- * );
- *
- * obj.mount(document.body);
- *
- * obj.update({ id: "b", name: "bar" });
- * ```
- *
- * @param src -
- * @param opts - options for `fromObject()` stream setup
- * @param inner -
- */
-export const $object = (src, opts, inner) => new $Object(src, opts, inner);
-/**
- * Syntax sugar for a combination of {@link $sub} and {@link $object} to allow
- * reactive updates of `$object()` components themselves.
- *
- * @example
- * ```ts
- * interface Foo {
- *   id: string;
- *   name: string;
- * }
- *
- * const state = reactive<Foo>({ id: "a", name: "foo" });
- *
- * $subObject<Foo, keyof Foo>(
- *   state,
- *   { keys: ["id", "name"] },
- *   // component factory
- *   // only executed once, but `obj.id` and `obj.name` are reactive values
- *   async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
- * ).mount(document.body);
- *
- * // update
- * state.next({ id: "b", name: "bar" });
- * ```
- *
- * @param src -
- * @param opts -
- * @param inner -
- */
-export const $subObject = (src, opts, inner) => $subWithID(src, $object(src.deref() || {}, opts, inner), __nextID("obj", src));
-export class $Object extends Component {
-    ctor;
-    obj;
-    inner;
-    constructor(src, opts, ctor) {
-        super();
-        this.ctor = ctor;
-        this.obj = fromObject(src, opts);
-    }
-    async mount(parent, index = -1, state) {
-        state !== undefined && this.obj.next(state);
-        this.inner = this.$compile(await this.ctor(this.obj.streams));
-        this.el = await this.inner.mount(parent, index);
-        return this.el;
-    }
-    async unmount() {
-        this.obj.done();
-        await this.inner.unmount();
-        this.el = undefined;
-        this.inner = undefined;
-    }
-    update(state) {
-        this.obj.next(state);
-    }
+const $object = (src, opts, inner) => new $Object(src, opts, inner);
+const $subObject = (src, opts, inner) => $subWithID(
+  src,
+  $object(src.deref() || {}, opts, inner),
+  __nextID("obj", src)
+);
+class $Object extends Component {
+  constructor(src, opts, ctor) {
+    super();
+    this.ctor = ctor;
+    this.obj = fromObject(src, opts);
+  }
+  obj;
+  inner;
+  async mount(parent, index = -1, state) {
+    state !== void 0 && this.obj.next(state);
+    this.inner = this.$compile(await this.ctor(this.obj.streams));
+    this.el = await this.inner.mount(parent, index);
+    return this.el;
+  }
+  async unmount() {
+    this.obj.done();
+    await this.inner.unmount();
+    this.el = void 0;
+    this.inner = void 0;
+  }
+  update(state) {
+    this.obj.next(state);
+  }
 }
+export {
+  $Object,
+  $object,
+  $subObject
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -34,17 +36,18 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/checks": "^3.4.11",
-    "@thi.ng/errors": "^2.4.5",
-    "@thi.ng/hiccup": "^5.1.0",
-    "@thi.ng/paths": "^5.1.52",
-    "@thi.ng/prefixes": "^2.2.7",
-    "@thi.ng/rstream": "^8.2.13",
-    "@thi.ng/strings": "^3.7.2"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/checks": "^3.4.12",
+    "@thi.ng/errors": "^2.4.6",
+    "@thi.ng/hiccup": "^5.1.1",
+    "@thi.ng/paths": "^5.1.53",
+    "@thi.ng/prefixes": "^2.2.8",
+    "@thi.ng/rstream": "^8.2.14",
+    "@thi.ng/strings": "^3.7.3"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -140,5 +143,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }