diff --git a/benchmark/benchmarks/krausest/lib/components/Application.ts b/benchmark/benchmarks/krausest/lib/components/Application.ts index dcef90f00d..e9901902ed 100644 --- a/benchmark/benchmarks/krausest/lib/components/Application.ts +++ b/benchmark/benchmarks/krausest/lib/components/Application.ts @@ -131,9 +131,7 @@ export class Application { this.children.push(this.list); } removeItem(item: Item) { - const key = this.list.keyForItem(item); this.items = this.items.filter((i) => i.id !== item.id); - this.list.destroyListItem(key); } create_1_000_Items() { this.items = buildData(1000); diff --git a/benchmark/benchmarks/krausest/lib/components/list.ts b/benchmark/benchmarks/krausest/lib/components/list.ts index f089adeb58..4564f94bdf 100644 --- a/benchmark/benchmarks/krausest/lib/components/list.ts +++ b/benchmark/benchmarks/krausest/lib/components/list.ts @@ -29,10 +29,23 @@ export class ListComponent { } syncList(items: Item[]) { const existingKeys = new Set(this.keyMap.keys()); + const updatingKeys = new Set(items.map((item) => this.keyForItem(item))); + const keysToRemove = [...existingKeys].filter((key) => !updatingKeys.has(key)); const amountOfKeys = existingKeys.size; let targetNode = amountOfKeys > 0 ? this.parent : document.createDocumentFragment(); const rowsToMove: Array<[ReturnType, number]> = []; let seenKeys = 0; + + // iterate over existing keys and remove them + const removedIndexes = keysToRemove.map((key) => this.destroyListItem(key)); + for (const value of this.keyMap.values()) { + removedIndexes.forEach((index) => { + if (value.index > index) { + value.index--; + } + }); + } + items.forEach((item, index) => { if (seenKeys === amountOfKeys && !(targetNode instanceof DocumentFragment)) { // optimization for appending items case @@ -46,16 +59,11 @@ export class ListComponent { this.keyMap.set(key, row); } else { seenKeys++; - existingKeys.delete(key); if (maybeRow.index !== index) { rowsToMove.push([maybeRow, index]); } } }); - // iterate over existing keys and remove them - existingKeys.forEach((key) => { - this.destroyListItem(key); - }); // iterate over rows to move and move them rowsToMove.forEach(([row, index]) => { const nextItem = items[index + 1]; @@ -84,7 +92,7 @@ export class ListComponent { row.nodes.forEach((node) => { node.parentElement?.removeChild(node); }); - return this; + return row.index; } }