laissez-list

laissez-list provides a declarative "lazy loading" list web component.

It serves a similar purpose to "virtual list" components, but strictly speaking it isn't a virtual list because of one key difference: It never removes content after it's been created.

Some advantages of a lazy-loaded list vs a virtual list:

1. If the user starts to edit a part of the list, and then scrolls away, and then comes back again, focus might not be lost. Other changes that might have been incurred by user interaction are also much less likely to be lost with this approach.
2. As content lazy loads, it permanently becomes searchable via the browser's search tool.
3. Because it leans more on native browser capabilities, it may work better as far as accessibility.
4. The complexity and size of the code base is reduced.

Disadvantages:

1. True "infinite scrolling" would require infinite memory.

To work well with laissez-list, components should use be-oosoom techniques to indicate how to "go to sleep" when scrolling out of view, which simply requires adding a "beOosoom" mapping property to the component. be-repeated is one such component that is be-oosoom friendly.

Another feature that makes laissez-list's performance come close to a virtual list is use of "time-stamping" of items in the list, so that the renderer knows how to rebind items which have changed since the last render. xtal-tree is an example of a time-stamping virtual model, that takes an object structure, and turns it into a flat list, with time-stamping support.

Demo 1 -- Simple

Demo 2 -- Tree View

Note that for Demo 2, if you click expand all, and enable Chrome's Web Vitals dev tool (under rendering tab), there is no Cumulative Layout Shift.

This is done by utilizing the intersectional settings:

<laissez-list ...
  row-intersectional-settings='{
    "rootClosest": ".scroller",
    "options": {
        "rootMargin": "300px",
        "threshold": 0
    }
}'>
 ...
</laissez-list>

API

Example

<laissez-list style="height:600px;width:100%;" id="lzlist"
    row-transform='{
        "span": "."
    }'
>
    <template slot=row>
        <div>
            <span></span>
        </div>
    </template>
</laissez-list>
<script>
    const list = [];
    for (let i = 0; i < 100000; i++) {
        list.push(i);
    }
    lzlist.list = list;
</script>

The row-transform syntax is based on css-like Declarative Trans-Render syntax (DTR).

Installation

1. npm instal laissez-list
   1. In JS, import 'laissez-list/laissez-list.js';

or

2. jsDelivr

<script type=module>
    import 'https://esm.run/laissez-list/laissez-list.js';
</script>

Viewing Your Element Locally

$ npm install
$ npm run serve