@thi.ng/rdom/lazy.js

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

import { Component } from "./component.js";
const $lazy = (tag, attribs, inner, opts) => new $Lazy(tag, attribs, inner, opts);
class $Lazy extends Component {
  constructor(tag, attribs, ctor, opts) {
    super();
    this.tag = tag;
    this.attribs = attribs;
    this.ctor = ctor;
    this.opts = opts;
  }
  observer;
  inner;
  async mount(parent, index) {
    this.el = this.$el(this.tag, this.attribs, null, parent, index);
    this.observer = new IntersectionObserver(([item]) => {
      if (item.isIntersecting) {
        this.observer.unobserve(this.el);
        (async () => {
          this.inner = this.$compile(await this.ctor());
          this.inner.mount(this.el, 0);
        })();
      }
    }, this.opts);
    this.observer.observe(this.el);
    return this.el;
  }
  async unmount() {
    if (this.inner) {
      await this.inner.unmount();
      this.inner = void 0;
    }
    if (this.observer) {
      this.observer.disconnect();
      this.observer = void 0;
      super.unmount();
    }
  }
}
export {
  $Lazy,
  $lazy
};