@thi.ng/rdom/replace.js

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

import { $compile } from "./compile.js";
import { Component } from "./component.js";
import { __nextID } from "./idgen.js";
import { $subWithID } from "./sub.js";
import { $wrapText } from "./wrap.js";
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);
    }
    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
};