/** * `keyedList` — keyed list rendering helper for component templates. * * Produces a string of repeated child markup with `data-bq-key=""` * annotations on the immediate top-level wrapper of each item. The keys are * preserved through sanitization (data attributes are allow-listed by default) * and enable {@link reconcileKeyed} to reorder existing DOM nodes after a * re-render instead of throwing away every child. * * Typical usage: * * ```ts * component('todo-list', { * state: { items: [] as { id: string; text: string }[] }, * render({ state }) { * return html` * * `; * }, * updated() { * const items = this.getState>('items'); * reconcileKeyed(this.shadowRoot!.querySelector('ul')!, items.map((item) => item.id)); * }, * }); * ``` * * @module bquery/component */ /** * Render a list of items with stable identity keys baked into the generated * markup. Each item's rendered output must start with a single top-level * element; the key attribute is injected into that element's opening tag. */ export declare const keyedList: (items: readonly T[], keyFn: (item: T, index: number) => string | number, renderItem: (item: T, index: number) => string) => string; /** * After a re-render, reorder direct children of `container` to match the order * of the provided key list (typically derived from the current state), preserving * any descendant DOM state (focus, scroll, custom-element internals) for items * whose key did not change. * * This is a best-effort, minimal reconciler: it works when the parent's * rendered children all have `data-bq-key` set (as produced by {@link keyedList}). * * Returns the number of nodes that were repositioned (0 if the order was * already correct). */ export declare const reconcileKeyed: (container: Element, desiredKeys?: readonly (string | number)[]) => number; //# sourceMappingURL=keyed-list.d.ts.map