@thi.ng/rdom 0.13.2 → 0.13.4

package/promise.js

@@ -1,43 +1,27 @@
 import { Component } from "./component.js";
-/**
- * Simple component wrapper for {@link ComponentLike} promises. When this
- * component mounts it will `await` the given promise or if it fails, compile
- * the result of the given (optional) `error` handler as component body.
- *
- * @example
- * ```ts
- * const prom = Promise.resolve<ComponentLike>(
- *   ["div", {}, "Resolved!"]
- * );
- *
- * $promise(prom).mount(document.body);
- * ```
- *
- * @param prom -
- * @param error -
- */
-export const $promise = (prom, error) => new $Promise(prom, error);
-export class $Promise extends Component {
-    promise;
-    error;
-    inner;
-    constructor(promise, error = (e) => e) {
-        super();
-        this.promise = promise;
-        this.error = error;
-    }
-    async mount(parent, index) {
-        try {
-            this.inner = this.$compile(await this.promise);
-        }
-        catch (e) {
-            this.inner = this.$compile(this.error(e));
-        }
-        return (this.el = await this.inner.mount(parent, index));
-    }
-    async unmount() {
-        await this.inner.unmount();
-        this.inner = undefined;
-        this.el = undefined;
+const $promise = (prom, error) => new $Promise(prom, error);
+class $Promise extends Component {
+  constructor(promise, error = (e) => e) {
+    super();
+    this.promise = promise;
+    this.error = error;
+  }
+  inner;
+  async mount(parent, index) {
+    try {
+      this.inner = this.$compile(await this.promise);
+    } catch (e) {
+      this.inner = this.$compile(this.error(e));
     }
+    return this.el = await this.inner.mount(parent, index);
+  }
+  async unmount() {
+    await this.inner.unmount();
+    this.inner = void 0;
+    this.el = void 0;
+  }
 }
+export {
+  $Promise,
+  $promise
+};

package/replace.js

@@ -3,64 +3,36 @@ import { Component } from "./component.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
- * `src` and wraps it in a {@link $sub} component using an inner
- * {@link Replace}, which then passes the value to {@link $compile} for each
- * change and replaces the result in the target DOM. If the value evaluates to
- * `null`ish, the previously mounted component will be unmounted and stays so
- * until the value becomes non-null again.
- *
- * @remarks
- * If the reactive value is null-ish when the wrapper component is first
- * mounted, a hidden dummy `<span>` element will be created instead. This is to
- * ensure the general {@link IComponent.mount} contract will not be broken. The
- * dummy element will later be removed/replaced as soon as the reactive value
- * becomes non-null.
- *
- * @example
- * ```ts
- * import { $compile, $replace } from "@thi.ng/rdom";
- * import { fromInterval } from "@thi.ng/rstream";
- *
- * // reactive counter component
- * const counter = fromInterval(16).map((x) => [
- *     "div",
- *     { style: { "font-size": `${(x % 100) + 10}px` } },
- *     x,
- * ]);
- *
- * $compile($replace(counter)).mount(document.body);
- * ```
- *
- * @param src -
- */
-export const $replace = (src) => $subWithID(src, new Replace(), __nextID("replace", src));
-export class Replace extends Component {
-    parent;
-    inner;
-    index;
-    async mount(parent, index, val) {
-        this.parent = parent;
-        this.index = index;
-        await this.update(val);
-        if (!this.inner) {
-            this.inner = $wrapText("span", { hidden: true });
-            await this.inner.mount(parent, index);
-        }
-        return this.inner.el;
+const $replace = (src) => $subWithID(src, new Replace(), __nextID("replace", src));
+class Replace extends Component {
+  parent;
+  inner;
+  index;
+  async mount(parent, index, val) {
+    this.parent = parent;
+    this.index = index;
+    await this.update(val);
+    if (!this.inner) {
+      this.inner = $wrapText("span", { hidden: true });
+      await this.inner.mount(parent, index);
     }
-    async unmount() {
-        this.inner && (await this.inner.unmount());
-        this.parent = undefined;
-        this.inner = undefined;
-    }
-    async update(val) {
-        this.inner && (await this.inner.unmount());
-        this.inner = undefined;
-        if (val != null) {
-            this.inner = $compile(val);
-            this.inner && (await this.inner.mount(this.parent, this.index));
-        }
+    return this.inner.el;
+  }
+  async unmount() {
+    this.inner && await this.inner.unmount();
+    this.parent = void 0;
+    this.inner = void 0;
+  }
+  async update(val) {
+    this.inner && await this.inner.unmount();
+    this.inner = void 0;
+    if (val != null) {
+      this.inner = $compile(val);
+      this.inner && await this.inner.mount(this.parent, this.index);
     }
+  }
 }
+export {
+  $replace,
+  Replace
+};

package/scheduler.js

@@ -1,54 +1,39 @@
-/**
- * {@link IScheduler} implementation which queues component updates (or other
- * tasks) and then only processes them during next RAF cycle. Supports task
- * cancellation.
- *
- * @remarks
- * See {@link setScheduler} and {@link NullScheduler}.
- */
-export class RAFScheduler {
-    tasks;
-    raf;
-    constructor() {
-        this.tasks = new Map();
-        this.raf = -1;
-    }
-    add(scope, fn) {
-        const tasks = this.tasks.get(scope);
-        tasks ? tasks.push(fn) : this.tasks.set(scope, [fn]);
-        this.raf < 0 &&
-            (this.raf = requestAnimationFrame(this.update.bind(this)));
-    }
-    cancel(scope) {
-        this.tasks.delete(scope);
-    }
-    update() {
-        for (let tasks of this.tasks.values()) {
-            for (let i = tasks.length; i-- > 0; tasks[i]())
-                ;
-        }
-        this.tasks.clear();
-        this.raf = -1;
+class RAFScheduler {
+  tasks;
+  raf;
+  constructor() {
+    this.tasks = /* @__PURE__ */ new Map();
+    this.raf = -1;
+  }
+  add(scope, fn) {
+    const tasks = this.tasks.get(scope);
+    tasks ? tasks.push(fn) : this.tasks.set(scope, [fn]);
+    this.raf < 0 && (this.raf = requestAnimationFrame(this.update.bind(this)));
+  }
+  cancel(scope) {
+    this.tasks.delete(scope);
+  }
+  update() {
+    for (let tasks of this.tasks.values()) {
+      for (let i = tasks.length; i-- > 0; tasks[i]())
+        ;
     }
+    this.tasks.clear();
+    this.raf = -1;
+  }
 }
-/**
- * Dummy (and default) {@link IScheduler} implementation which immediately
- * processes component updates.
- *
- * @remarks
- * See {@link setScheduler} and {@link RAFScheduler}.
- */
-export class NullScheduler {
-    add(_, fn) {
-        fn();
-    }
-    cancel() { }
+class NullScheduler {
+  add(_, fn) {
+    fn();
+  }
+  cancel() {
+  }
 }
-// export let SCHEDULER: IScheduler = new RAFScheduler();
-export let SCHEDULER = new NullScheduler();
-/**
- * Sets rdom-global scheduler for component updates (and other tasks).
- *
- * @param s -
- */
-export const setScheduler = (s) => (SCHEDULER = s);
+let SCHEDULER = new NullScheduler();
+const setScheduler = (s) => SCHEDULER = s;
+export {
+  NullScheduler,
+  RAFScheduler,
+  SCHEDULER,
+  setScheduler
+};

package/sub.js

@@ -5,53 +5,55 @@ import { Subscription } from "@thi.ng/rstream/subscription";
 import { $attribs } from "./dom.js";
 import { SCHEDULER } from "./scheduler.js";
 import { $wrapText } from "./wrap.js";
-export function $sub(src, tag, attribs) {
-    return (src.subscribe(new $Sub(isString(tag) ? $wrapText(tag, attribs) : tag)));
+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 {
-    inner;
-    el;
-    constructor(inner, id) {
-        super(undefined, { id: id || `rdom$sub-${__nextID()}` });
-        this.inner = inner;
-    }
-    async mount(parent, index = -1) {
-        return (this.el = await this.inner.mount(parent, index, this.parent.deref()));
-    }
-    async unmount() {
-        this.unsubscribe();
-        SCHEDULER.cancel(this);
-        this.el = undefined;
-        await this.inner.unmount();
-    }
-    update(x) {
-        this.next(x);
-    }
-    next(x) {
-        SCHEDULER.add(this, () => this.el && this.inner.update(x));
-    }
+const $subWithID = (src, inner, id) => src.subscribe(new $Sub(inner, id));
+class $Sub extends Subscription {
+  constructor(inner, id) {
+    super(void 0, { id: id || `rdom$sub-${__nextID()}` });
+    this.inner = inner;
+  }
+  el;
+  async mount(parent, index = -1) {
+    return this.el = await this.inner.mount(
+      parent,
+      index,
+      this.parent.deref()
+    );
+  }
+  async unmount() {
+    this.unsubscribe();
+    SCHEDULER.cancel(this);
+    this.el = void 0;
+    await this.inner.unmount();
+  }
+  update(x) {
+    this.next(x);
+  }
+  next(x) {
+    SCHEDULER.add(this, () => this.el && this.inner.update(x));
+  }
 }
-export class $SubA extends Subscription {
-    comp;
-    setter;
-    attr = {};
-    constructor(comp, path, id) {
-        super(undefined, { id: id || `rdom$attr-${__nextID()}` });
-        this.comp = comp;
-        this.setter = defSetterUnsafe(path);
-    }
-    next(a) {
-        const $ = this.comp;
-        SCHEDULER.add($, () => $.el && $attribs($.el, this.setter(this.attr, a)));
-    }
+class $SubA extends Subscription {
+  constructor(comp, path, id) {
+    super(void 0, { id: id || `rdom$attr-${__nextID()}` });
+    this.comp = comp;
+    this.setter = defSetterUnsafe(path);
+  }
+  setter;
+  attr = {};
+  next(a) {
+    const $ = this.comp;
+    SCHEDULER.add(
+      $,
+      () => $.el && $attribs($.el, this.setter(this.attr, a))
+    );
+  }
 }
+export {
+  $Sub,
+  $SubA,
+  $sub,
+  $subWithID
+};

package/switch.js

@@ -4,141 +4,72 @@ import { Component } from "./component.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
- * the given components depending on subscribed value.
- *
- * @remarks
- * Subscribes to `src`, then calls `keyFn` for each received value and uses
- * result to call one of the given `ctors` async component factories. The value
- * returned from the chosen factory will be passsed to {@link $compile} and then
- * mounted in place of this `$switch` wrapper. If an uncaught error occurs in
- * the selected component factory, the `error` component factory will be used
- * instead (which is expected to succeed).
- *
- * When a new value is received from `src`, the currently active inner component
- * (if any) will always be fist `unmount`ed and if the optional `loader` is
- * given, it will be temporarily mounted whilst the actual `ctor` component
- * factory executes. This is can be used to show a pre-loaders.
- *
- * **IMPORTANT:** When a `null` or `undefined` value is received from `src`, the
- * currently active inner component will be unmounted and the optional loader
- * shown. However, no other inner component constructor will be called in this
- * case (until the next valid/non-null value is received).
- *
- * All component factories are async functions to facilitate dynamic `import()`
- * / code splitting and other async initializations (WASM etc.)
- *
- * @example
- * ```ts
- * $switch(
- *   fromInterval(1000),
- *   (x) => x % 3,
- *   {
- *     0: async (x) => {
- *       await delayed(null, 500); // fake preload
- *       return ["div.green", {}, x];
- *     },
- *     1: async (x) => ["div.yellow", {}, x]
- *   },
- *   async (err) => ["div.bg-red", {}, err],
- *   async () => ["div", {}, "Loading..."]
- * ).mount(document.body)
- * ```
- *
- * This example uses a 1Hz counter to delegate to 3 different possible
- * components, however only two are defined, causing the last option to
- * throw an error and so trigger/use the error component.
- *
- * @param src -
- * @param keyFn -
- * @param ctors -
- * @param error -
- * @param 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
- * each reactive value change.
- *
- * @remarks
- * In other words, for each new value received from `src`. The wrapped
- * component will first be unmounted, an optional pre-`loader` shown
- * whilst the async `ctor` component factory executes, its result
- * `$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])
- * ```
- *
- * @param src -
- * @param ctor -
- * @param error -
- * @param 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 {
-    keyFn;
-    ctors;
-    error;
-    loader;
-    val;
-    parent;
-    inner;
-    index;
-    constructor(keyFn, ctors, error = async (e) => $wrapText("span", {}, e), loader = async () => $wrapText("span", {
-        hidden: true,
-    })) {
-        super();
-        this.keyFn = keyFn;
-        this.ctors = ctors;
-        this.error = error;
-        this.loader = loader;
-    }
-    async mount(parent, index, val) {
-        this.parent = parent;
-        this.index = index;
-        await this.update(val);
-        return this.inner.el;
-    }
-    async unmount() {
-        this.inner && (await this.inner.unmount());
-        this.val = undefined;
-        this.parent = undefined;
-        this.inner = undefined;
-    }
-    async update(val) {
-        this.inner && (await this.inner.unmount());
-        this.inner = undefined;
-        if (val != null) {
-            this.val = val;
-            let loader;
-            if (this.loader) {
-                loader = $compile(await this.loader(val));
-                await loader.mount(this.parent, this.index);
-            }
-            try {
-                const key = this.keyFn(val);
-                const next = this.ctors[key];
-                assert(!!next, `missing component for key: ${key}`);
-                this.inner = $compile(await next(val));
-                loader && (await loader.unmount());
-            }
-            catch (e) {
-                if (this.error) {
-                    this.inner = $compile(await this.error(e));
-                    loader && (await loader.unmount());
-                }
-            }
-        }
-        else {
-            this.loader && (this.inner = $compile(await this.loader(val)));
+const $switch = (src, keyFn, ctors, error, loader) => $subWithID(
+  src,
+  new Switch(keyFn, ctors, error, loader),
+  __nextID("switch", src)
+);
+const $refresh = (src, ctor, error, loader) => $subWithID(
+  src,
+  new Switch(() => 0, { 0: ctor }, error, loader),
+  __nextID("refresh", src)
+);
+class Switch extends Component {
+  constructor(keyFn, ctors, error = async (e) => $wrapText("span", {}, e), loader = async () => $wrapText("span", {
+    hidden: true
+  })) {
+    super();
+    this.keyFn = keyFn;
+    this.ctors = ctors;
+    this.error = error;
+    this.loader = loader;
+  }
+  val;
+  parent;
+  inner;
+  index;
+  async mount(parent, index, val) {
+    this.parent = parent;
+    this.index = index;
+    await this.update(val);
+    return this.inner.el;
+  }
+  async unmount() {
+    this.inner && await this.inner.unmount();
+    this.val = void 0;
+    this.parent = void 0;
+    this.inner = void 0;
+  }
+  async update(val) {
+    this.inner && await this.inner.unmount();
+    this.inner = void 0;
+    if (val != null) {
+      this.val = val;
+      let loader;
+      if (this.loader) {
+        loader = $compile(await this.loader(val));
+        await loader.mount(this.parent, this.index);
+      }
+      try {
+        const key = this.keyFn(val);
+        const next = this.ctors[key];
+        assert(!!next, `missing component for key: ${key}`);
+        this.inner = $compile(await next(val));
+        loader && await loader.unmount();
+      } catch (e) {
+        if (this.error) {
+          this.inner = $compile(await this.error(e));
+          loader && await loader.unmount();
         }
-        this.inner && (await this.inner.mount(this.parent, this.index));
+      }
+    } else {
+      this.loader && (this.inner = $compile(await this.loader(val)));
     }
+    this.inner && await this.inner.mount(this.parent, this.index);
+  }
 }
+export {
+  $refresh,
+  $switch,
+  Switch
+};

package/wrap.js

@@ -1,52 +1,36 @@
 import { $addChild, $el, $html, $remove, $text } from "./dom.js";
 import { SCHEDULER } from "./scheduler.js";
 const wrapper = (update) => (tag, attribs, body) => ({
-    el: undefined,
-    async mount(parent, index, state) {
-        this.el = $el(tag, attribs, null, parent, index);
-        update(this.el, state != null ? state : body);
-        return this.el;
-    },
-    async unmount() {
-        $remove(this.el);
-        this.el = undefined;
-    },
-    update(body) {
-        SCHEDULER.add(this, () => this.el && update(this.el, body));
-    },
+  el: void 0,
+  async mount(parent, index, state) {
+    this.el = $el(tag, attribs, null, parent, index);
+    update(this.el, state != null ? state : body);
+    return this.el;
+  },
+  async unmount() {
+    $remove(this.el);
+    this.el = void 0;
+  },
+  update(body2) {
+    SCHEDULER.add(this, () => this.el && update(this.el, body2));
+  }
 });
-/**
- * Returns a component wrapper for a single DOM element whose TEXT body can be
- * later updated/replaced via `.update()`, similarly to setting `.innerText`.
- *
- * @param tag - element name
- * @param attribs - element attribs
- * @param body - optional initial body
- */
-export const $wrapText = wrapper($text);
-/**
- * Returns a component wrapper for a single DOM element whose HTML body can be
- * later updated/replaced via `.update()`, similarly to setting `.innerHTML`.
- *
- * @param tag - element name
- * @param attribs - element attribs
- * @param body - optional initial body
- */
-export const $wrapHtml = wrapper($html);
-/**
- * {@link IComponent} wrapper for an existing DOM element. When mounted, the
- * given element will be (re)attached to the parent node provided at that time.
- *
- * @param el
- */
-export const $wrapEl = (el) => ({
-    async mount(parent, idx) {
-        $addChild(parent, el, idx);
-        return (this.el = el);
-    },
-    async unmount() {
-        $remove(this.el);
-        this.el = undefined;
-    },
-    update() { },
+const $wrapText = wrapper($text);
+const $wrapHtml = wrapper($html);
+const $wrapEl = (el) => ({
+  async mount(parent, idx) {
+    $addChild(parent, el, idx);
+    return this.el = el;
+  },
+  async unmount() {
+    $remove(this.el);
+    this.el = void 0;
+  },
+  update() {
+  }
 });
+export {
+  $wrapEl,
+  $wrapHtml,
+  $wrapText
+};