@thi.ng/rdom/component.d.ts

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

import type { Maybe, MaybeDeref } from "@thi.ng/api";
import type { IComponent, NumOrElement } from "./api.js";
/**
 * Abstract base class / {@link IComponent} implementation. Provides
 * additional convenience methods for DOM element creation &
 * manipulation.
 */
export declare abstract class Component<T = any> implements IComponent<T> {
    el?: Element;
    abstract mount(parent: ParentNode, index?: NumOrElement, ...args: any[]): Promise<Element>;
    unmount(): Promise<void>;
    update(state?: T): void;
    /**
     * 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: string, attribs?: any, body?: any, parent?: Maybe<ParentNode>, idx?: NumOrElement): Element;
    /**
     * 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: string | string[], parent?: Maybe<ParentNode>, idx?: NumOrElement): Comment;
    /**
     * Syntax sugar for {@link $clear}, using this component's
     * {@link IComponent.el} as default element to clear.
     *
     * @param el
     */
    $clear(el?: Element): Element;
    /**
     * Same as {@link $compile}.
     *
     * @param tree
     */
    $compile(tree: any): IComponent<any>;
    /**
     * Same as {@link $tree}.
     *
     * @param tree
     * @param root
     * @param index
     */
    $tree(tree: any, root?: ParentNode, index?: NumOrElement): Promise<any>;
    /**
     * 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: any, el?: HTMLElement | SVGElement): void;
    /**
     * 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: MaybeDeref<string>, el?: HTMLElement | SVGElement): void;
    /**
     * Syntax sugar for {@link $attribs}, using this component's
     * {@link IComponent.el} as default element to edit.
     *
     * @param attribs
     * @param el
     */
    $attribs(attribs: any, el?: Element): void;
    /**
     * Syntax sugar for {@link $style}, using this component's
     * {@link IComponent.el} as default element to edit.
     *
     * @param rules
     * @param el
     */
    $style(rules: any, el?: Element): void;
    /**
     * Syntax sugar for {@link $remove}, using this component's
     * {@link IComponent.el} as default element to remove.
     *
     * @param el
     */
    $remove(el?: Element): void;
    /**
     * 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: ParentNode, el?: Element, idx?: NumOrElement): void;
}
//# sourceMappingURL=component.d.ts.map