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

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

import type { Fn, Keys } from "@thi.ng/api";
import type { ISubscribable, StreamObj, StreamObjOpts } from "@thi.ng/rstream";
import type { ComponentLike, IComponent, IMountWithState, NumOrElement } from "./api.js";
import { Component } from "./component.js";
/**
 * Creates a control component wrapper with an internal stream setup for user
 * defined keys in the given object. When this component is mounted, it will
 * call `inner` with an object of key-value streams and then {@link $compile}s
 * that function's return value as component body.
 *
 * @remarks
 * Uses
 * [`fromObject`](https://docs.thi.ng/umbrella/rstream/functions/fromObject.html)
 * for creating the internal key-value streams. These can then be used by
 * `inner` to produce reactive child elements. The given `src` object is only
 * used to seed those streams with initial values. The component wrapper can be
 * updated with new values, using the `.update()` life cycle method with a new
 * object.
 *
 * By default the value streams will only trigger updates if their values have
 * changed. See
 * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
 * for more details and options.
 *
 * Also see {@link $subObject}.
 *
 * @example
 * ```ts
 * import { $object, type ComponentLike } from "@thi.ng/rdom";
 *
 * const obj = $object(
 *   // source object (for seeding)
 *   { id: "a", name: "foo", ignore: 23 },
 *   // create subscriptions for given keys
 *   { keys: ["id", "name"] }
 *   // component factory
 *   async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
 * );
 *
 * obj.mount(document.body);
 *
 * obj.update({ id: "b", name: "bar" });
 * ```
 *
 * @param src -
 * @param opts - options for `fromObject()` stream setup
 * @param inner -
 */
export declare const $object: <T extends object, K extends Keys<T>>(src: T, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => $Object<T, K>;
/**
 * Syntax sugar for a combination of {@link $sub} and {@link $object} to allow
 * reactive updates of `$object()` components themselves.
 *
 * @example
 * ```ts
 * import { $subObject, type ComponentLike } from "@thi.ng/rdom";
 * import { reactive } from "@thi.ng/rstream";
 *
 * interface Foo {
 *   id: string;
 *   name: string;
 * }
 *
 * const state = reactive<Foo>({ id: "a", name: "foo" });
 *
 * $subObject<Foo, keyof Foo>(
 *   state,
 *   { keys: ["id", "name"] },
 *   // component factory
 *   // only executed once, but `obj.id` and `obj.name` are reactive values
 *   async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
 * ).mount(document.body);
 *
 * // update
 * state.next({ id: "b", name: "bar" });
 * ```
 *
 * @param src -
 * @param opts -
 * @param inner -
 */
export declare const $subObject: <T extends object, K extends Keys<T>>(src: ISubscribable<T>, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => IComponent<T>;
export declare class $Object<T extends object, K extends Keys<T>> extends Component implements IMountWithState<T> {
    protected ctor: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>;
    protected obj: StreamObj<T, K>;
    protected inner?: IComponent;
    constructor(src: T, opts: Partial<StreamObjOpts<T, K>>, ctor: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>);
    mount(parent: ParentNode, index?: NumOrElement, state?: T): Promise<Element>;
    unmount(): Promise<void>;
    update(state: T): void;
}
//# sourceMappingURL=object.d.ts.map