UNPKG

element-vir

Version:

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

38 lines (37 loc) 1.5 kB
import { repeat as repeatImport } from 'lit/directives/repeat.js'; /** * A directive that repeats a series of values (usually `TemplateResults`) generated from an * iterable, and updates those items efficiently when the iterable changes based on user-provided * `keys` associated with each item. * * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained, meaning previous DOM * for a given key is moved into the new position if needed, and DOM will never be reused with * values for different keys (new DOM will always be created for new keys). This is generally the * most efficient way to use `repeat` since it performs minimum unnecessary work for insertions and * removals. * * The `keyFn` takes two parameters, the item and its index, and returns a unique key value. * * ```js * html` * <ol> * ${repeat( * this.items, * (item) => item.id, * (item, index) => { * return html` * <li>${index}: ${item.name}</li> * `; * }, * )} * </ol> * `; * ``` * * **Important**: If providing a `keyFn`, keys _must_ be unique for all items in a given call to * `repeat`. The behavior when two or more items have the same key is undefined. * * If no `keyFn` is provided, this directive will perform similar to mapping items to values, and * DOM will be reused against potentially different items. */ export const repeat = repeatImport;