@thi.ng/rdom/async.js

Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible

import { isString } from "@thi.ng/checks/is-string";
import { defSetterUnsafe } from "@thi.ng/paths/setter";
import { $attribs } from "./dom.js";
import { $wrapText } from "./wrap.js";
function $async(src, tag, attribs) {
  return new $Async(src, isString(tag) ? $wrapText(tag, attribs) : tag);
}
class $Async {
  constructor(src, inner) {
    this.src = src;
    this.inner = inner;
  }
  el;
  async mount(parent, index = -1) {
    this.el = await this.inner.mount(parent, index, void 0);
    (async () => {
      for await (let x of this.src) {
        if (!this.el) return;
        this.update(x);
      }
    })();
    return this.el;
  }
  async unmount() {
    this.el = void 0;
    await this.inner.unmount();
  }
  update(x) {
    if (this.el) this.inner.update(x);
  }
}
const $asyncA = async (src, comp, path) => {
  const attribs = {};
  const setter = defSetterUnsafe(path);
  for await (let x of src) {
    if (comp.el) $attribs(comp.el, setter(attribs, x));
  }
};
export {
  $Async,
  $async,
  $asyncA
};