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

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

import type { Fn, Fn2, NumOrString } from "@thi.ng/api";
import type { ISubscribable } from "@thi.ng/rstream";
import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
import { Component } from "./component.js";
export interface KListItem {
    k: NumOrString;
    v: IComponent;
}
/**
 * Similar to {@link $list}, however additionally uses keying to establish list
 * item identities and uses these keys (and *only* these!) in a more complex
 * diffing algorithm to avoid re-initialization of list items if they've been
 * re-ordered or changed positions due to removal/insertion of other items in
 * the list.
 *
 * @remarks
 * The given `keyFn` is used to obtain a *unique* key value for each list item
 * obtained from the reactive arrays obtained from `src`. Like a hash, the key
 * value MUST represent an item's *current* value such that if the value
 * changes, so does the key.
 *
 * @example
 * ```ts
 * import { $klist } from "@thi.ng/rdom";
 * import { reactive } from "@thi.ng/rstream";
 *
 * const items = reactive([{id: "a", val: 1}, {id: "b", val: 2}, {id: "c", val: 3}]);
 *
 * $klist(
 *   // data source (any rstream subscribable)
 *   items,
 *   // outer list element & attribs
 *   "ul",
 *   { class: "list red" },
 *   // list item component constructor
 *   (x) => ["li", {}, x.id, ` (${x.val})`],
 *   // key function
 *   (x) => `${x.id}-${x.val}`
 * ).mount(document.body);
 *
 * // update list:
 * // - item a will be removed
 * // - item b is unchanged
 * // - item d will be newly inserted
 * // - item c will be updated (due to new value)
 * setTimeout(
 *   () => {
 *     items.next([
 *       { id: "b", val: 2 },
 *       { id: "d", val: 4 },
 *       { id: "c", val: 30 },
 *     ]);
 *   },
 *   1000
 * );
 * ```
 *
 * @param src -
 * @param tag -
 * @param attribs -
 * @param childCtor -
 * @param keyFn -
 */
export declare const $klist: <T>(src: ISubscribable<T[]>, tag: string, attribs: any, childCtor: Fn<T, any>, keyFn?: Fn2<T, number, NumOrString>) => IComponent<T[]>;
export declare class KList<T> extends Component<T[]> implements IMountWithState<T[]> {
    protected tag: string;
    protected attribs: any;
    protected ctor: Fn<T, any>;
    protected keyFn: Fn2<T, number, NumOrString>;
    items?: KListItem[];
    cache?: Map<NumOrString, KListItem>;
    constructor(tag: string, attribs: any, ctor: Fn<T, any>, keyFn?: Fn2<T, number, NumOrString>);
    mount(parent: ParentNode, index: NumOrElement, state: T[]): Promise<Element>;
    unmount(): Promise<void>;
    update(curr: T[]): Promise<void>;
}
//# sourceMappingURL=klist.d.ts.map