@thi.ng/rdom/component.js

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

import { $compile } from "./compile.js";
import {
  $attribs,
  $clear,
  $comment,
  $el,
  $html,
  $moveTo,
  $remove,
  $style,
  $text,
  $tree
} from "./dom.js";
class Component {
  el;
  async unmount() {
    this.$remove();
    this.el = void 0;
  }
  // @ts-ignore args
  update(state) {
  }
  /**
   * Syntax sugar for {@link $el}, using this component's
   * {@link IComponent.el} as default `parent`.
   *
   * @param tag
   * @param attribs
   * @param body
   * @param parent
   * @param idx
   */
  $el(tag, attribs, body, parent = this.el, idx) {
    return $el(tag, attribs, body, parent, idx);
  }
  /**
   * Syntax sugar for {@link $comment}, creates a new comment DOM node using
   * this component's {@link IComponent.el} as default `parent`.
   *
   * @param body
   * @param parent
   * @param idx
   */
  $comment(body, parent = this.el, idx) {
    return $comment(body, parent, idx);
  }
  /**
   * Syntax sugar for {@link $clear}, using this component's
   * {@link IComponent.el} as default element to clear.
   *
   * @param el
   */
  $clear(el = this.el) {
    return $clear(el);
  }
  /**
   * Same as {@link $compile}.
   *
   * @param tree
   */
  $compile(tree) {
    return $compile(tree);
  }
  /**
   * Same as {@link $tree}.
   *
   * @param tree
   * @param root
   * @param index
   */
  $tree(tree, root = this.el, index) {
    return $tree(tree, root, index);
  }
  /**
   * Syntax sugar for {@link $text}, using this component's
   * {@link IComponent.el} as default element to edit.
   *
   * @remarks
   * If using the default element, assumes `this.el` is an existing
   * `HTMLElement`.
   *
   * @param body
   * @param el
   */
  $text(body, el = this.el) {
    $text(el, body);
  }
  /**
   * Syntax sugar for {@link $html}, using this component's
   * {@link IComponent.el} as default element to edit.
   *
   * @remarks
   * If using the default element, assumes `this.el` is an existing
   * `HTMLElement` or `SVGElement`.
   *
   * @param body
   * @param el
   */
  $html(body, el = this.el) {
    $html(el, body);
  }
  /**
   * Syntax sugar for {@link $attribs}, using this component's
   * {@link IComponent.el} as default element to edit.
   *
   * @param attribs
   * @param el
   */
  $attribs(attribs, el = this.el) {
    $attribs(el, attribs);
  }
  /**
   * Syntax sugar for {@link $style}, using this component's
   * {@link IComponent.el} as default element to edit.
   *
   * @param rules
   * @param el
   */
  $style(rules, el = this.el) {
    $style(el, rules);
  }
  /**
   * Syntax sugar for {@link $remove}, using this component's
   * {@link IComponent.el} as default element to remove.
   *
   * @param el
   */
  $remove(el = this.el) {
    $remove(el);
  }
  /**
   * Syntax sugar for {@link $moveTo}, using this component's
   * {@link IComponent.el} as default element to migrate.
   *
   * @param newParent
   * @param el
   * @param idx
   */
  $moveTo(newParent, el = this.el, idx) {
    $moveTo(newParent, el, idx);
  }
}
export {
  Component
};