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

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

import type { Fn2, Maybe, Path } from "@thi.ng/api";
import type { ISubscribable } from "@thi.ng/rstream";
import { Subscription } from "@thi.ng/rstream/subscription";
import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
/**
 * Takes an
 * [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
 * and creates a simple component wrapper for its reactively produced values.
 *
 * @remarks
 * If given an {@link IMountWithState} component, new stream values are applied
 * via the `.update()` life cycle value. If given a `tag` and `attribs`, a
 * corrresponding element wrapper component will be created automatically (using
 * {@link $wrapText} and stream values will be applied using {@link $text} (aka
 * setting `el.innerText`).
 *
 * @example
 * ```ts
 * import { $sub } from "@thi.ng/rdom";
 * import { reactive } from "@thi.ng/rstream";
 *
 * const src = reactive(42).map((x) => `value: ${x}`);
 *
 * $sub(src, "div", { class: "red" }).mount(document.body);
 *
 * src.next(43);
 * ```
 *
 * @param src -
 * @param inner -
 */
export declare function $sub<T>(src: ISubscribable<T>, inner: IMountWithState<T>): IComponent<T>;
export declare function $sub(src: ISubscribable<any>, tag: string, attribs?: any): IComponent;
/**
 * Version of {@link $sub} which supports specifying an rstream stream ID for
 * the resulting subscription (useful for debugging/visualizing the reactive
 * graph topology).
 *
 * @param src
 * @param inner
 * @param id
 */
export declare const $subWithID: <T>(src: ISubscribable<T>, inner: IMountWithState<T>, id: string) => IComponent<T>;
export declare class $Sub<T = any> extends Subscription<T, T> {
    protected inner: IMountWithState<Maybe<T>>;
    el?: Element;
    constructor(inner: IMountWithState<Maybe<T>>, id?: string);
    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
    unmount(): Promise<void>;
    update(x: T): void;
    next(x: T): void;
}
export declare class $SubA extends Subscription<any, any> {
    protected comp: IComponent;
    protected setter: Fn2<any, any, any>;
    protected attr: any;
    constructor(comp: IComponent, path: Path, id?: string);
    next(a: any): void;
}
//# sourceMappingURL=sub.d.ts.map