This PR removes the items: array property in favor of the totalItems: number property. As a consequence, we don't pass the item as input for new/update/recycleChild and childKey, but rather the index of the item.
This exposes even more the need for requestReset() as a mean to notify the virtual-list that the data has changed.
One nice property of this change is that now the user could theoretically set virtualList.size = Number.MAX_SAFE_INTEGER and dynamically load each item as it gets displayed, without the need to allocate an array of that size.
const nodePool = [];
virtualList.newChild = () => nodePool.pop() || document.createElement('div');
virtualList.updateChild = (elem, i) => elem.textContent = `item ${i}`;
virtualList.recycleChild = (elem) => nodePool.push(elem);
// Render as many items as possible --> infinite scrolling!
virtualList.totalItems = Number.MAX_SAFE_INTEGER;
In practice, we'd hit the maximum scroll height handled by the browser. In Chrome this seems to be ~33.5M pixels 📜
Fixes #21, #29.
This PR removes the
items: arrayproperty in favor of thetotalItems: numberproperty. As a consequence, we don't pass theitemas input for new/update/recycleChild and childKey, but rather the index of the item.This exposes even more the need for
requestReset()as a mean to notify thevirtual-listthat the data has changed.One nice property of this change is that now the user could theoretically set
virtualList.size = Number.MAX_SAFE_INTEGERand dynamically load each item as it gets displayed, without the need to allocate an array of that size.In practice, we'd hit the maximum scroll height handled by the browser. In Chrome this seems to be ~33.5M pixels 📜