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

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

import type { ISubscribable } from "@thi.ng/rstream";
import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
import { Component } from "./component.js";
/**
 * Similar to {@link $refresh}, but more basic/simple. Takes a reactive value
 * `src` and wraps it in a {@link $sub} component using an inner
 * {@link Replace}, which then passes the value to {@link $compile} for each
 * change and replaces the result in the target DOM. If the value evaluates to
 * `null`ish, the previously mounted component will be unmounted and stays so
 * until the value becomes non-null again.
 *
 * @remarks
 * If the reactive value is null-ish when the wrapper component is first
 * mounted, a hidden dummy `<span>` element will be created instead. This is to
 * ensure the general {@link IComponent.mount} contract will not be broken. The
 * dummy element will later be removed/replaced as soon as the reactive value
 * becomes non-null.
 *
 * @example
 * ```ts
 * import { $compile, $replace } from "@thi.ng/rdom";
 * import { fromInterval } from "@thi.ng/rstream";
 *
 * // reactive counter component
 * const counter = fromInterval(16).map((x) => [
 *     "div",
 *     { style: { "font-size": `${(x % 100) + 10}px` } },
 *     x,
 * ]);
 *
 * $compile($replace(counter)).mount(document.body);
 * ```
 *
 * @param src -
 */
export declare const $replace: <T>(src: ISubscribable<T>) => IComponent<T>;
export declare class Replace<T> extends Component implements IMountWithState<T> {
    protected parent?: ParentNode;
    protected inner?: IComponent<T>;
    protected index?: NumOrElement;
    mount(parent: ParentNode, index: NumOrElement, val: T): Promise<Element>;
    unmount(): Promise<void>;
    update(val: T): Promise<void>;
}
//# sourceMappingURL=replace.d.ts.map