import type { Fn, Predicate2 } from "@thi.ng/api"; import type { ISubscribable } from "@thi.ng/rstream"; import type { IComponent, IMountWithState, NumOrElement } from "./api.js"; import { Component } from "./component.js"; /** * Creates a generalized and dynamically updating list component from items of * the given `src` stream. * * @remarks * Only very basic key-less diffing of list items is performed (using the * `equiv` equality predicate arg, i.e. `equiv(prev[i], curr[i])`). * * Use this list component only for cases when the child item components do not * involve complex lifecycles (e.g. preloaders, intro animations etc.). Any list * items changing position will be first unmounted, then remounted. To avoid * this full lifecycle transition, consider using {@link $klist}, which employs * a more elaborate diffing mechanism and keying to uniquely identify list items * (regardless of their position in the array). * * @example * ```ts * import { $list } from "@thi.ng/rdom"; * import { reactive } from "@thi.ng/rstream"; * * const items = reactive([{id: "a"}, {id: "b"}, {id: "c"}]); * * $list( * // data source (rstream subsribable) * items, * // outer list element & attribs * "ul", * { class: "list red" }, * // list item component constructor * (x) => ["li", {}, x.id], * // optional equality predicate (default this.ng/equiv) * (a, b) => a.id === b.id * ).mount(document.body); * * // update list * items.next([{id: "b"}, {id: "d"}, {id: "c"}]); * * // removes component for item A * // recreates B in new position * // creates D * // keeps C * ``` * * @param src - * @param tag - * @param attribs - * @param ctor - * @param equiv - */ export declare const $list: (src: ISubscribable, tag: string, attribs: any, ctor: Fn, equiv?: Predicate2) => IComponent; export declare class List extends Component implements IMountWithState { protected tag: string; protected attribs: any; protected ctor: Fn; protected equiv: Predicate2; prev?: T[]; items?: IComponent[]; constructor(tag: string, attribs: any, ctor: Fn, equiv?: Predicate2); mount(parent: ParentNode, index: NumOrElement, state: T[]): Promise; unmount(): Promise; update(curr: T[]): Promise; } //# sourceMappingURL=list.d.ts.map