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: (src: ISubscribable, tag: string, attribs: any, childCtor: Fn, keyFn?: Fn2) => IComponent; export declare class KList extends Component implements IMountWithState { protected tag: string; protected attribs: any; protected ctor: Fn; protected keyFn: Fn2; items?: KListItem[]; cache?: Map; constructor(tag: string, attribs: any, ctor: Fn, keyFn?: Fn2); mount(parent: ParentNode, index: NumOrElement, state: T[]): Promise; unmount(): Promise; update(curr: T[]): Promise; } //# sourceMappingURL=klist.d.ts.map