vlist #
Moteur de liste virtuelle haute performance pour le web. Noyau indépendant de tout framework avec bindings pour React, Vue, Solid et Svelte.
Pourquoi vlist ? #
Les librairies de listes virtuelles existent depuis des années, mais la quasi-totalité d'entre elles sont liées à un seul framework. react-window, react-virtuoso, TanStack Virtual, Legend List — elles supposent toutes que vous êtes dans React.
vlist adopte une approche différente : vanilla d'abord, framework optionnel.
| Librairie | Framework | Dépendances | Gzippé | Tree-shakeable |
|---|---|---|---|---|
| react-window | React | 1 | ~6 KB | Non |
| react-virtuoso | React | 1 | ~16 KB | Non |
| TanStack Virtual | Multi (React-dominant) | 1+ | ~10 KB | Partiel |
| Legend List v3 | React / RN | 1+ | ~21 KB | Non |
| vlist | Aucun | 0 | 8.7 KB | Oui |
Zéro dépendance runtime signifie aucun risque de supply chain, aucun conflit de version, aucun bloat transitif dans node_modules. La librairie entière est construite from scratch en TypeScript.
Mémoire Constante #
La plupart des librairies de listes virtuelles créent des structures de données internes qui croissent linéairement avec votre dataset. Pas vlist.
| Taille du dataset | Mémoire vlist |
|---|---|
| 10 000 éléments | ~0.2 MB |
| 100 000 éléments | ~0.2 MB |
| 1 000 000 éléments | ~0.4 MB |
Avec 100 000 éléments dans votre dataset, environ 26 éléments DOM existent à tout moment. Le scroll handler tourne à 120 FPS avec zéro allocation sur le chemin critique.
Ne Payez que ce que Vous Utilisez #
vlist utilise un pattern builder avec des fonctionnalités opt-in. La base fait 8.7 KB gzippé. Chaque fonctionnalité n'ajoute que ce dont elle a besoin :
| Configuration | Gzippé | Fonctionnalités |
|---|---|---|
| Base seule | 10.3 KB | Aucune |
| + Sélection | 12.1 KB | withSelection() |
| + Grille | 14.3 KB | withGrid() + withScrollbar() |
| + Groupes | 14.6 KB | withGroups() |
| + Async | 14.6 KB | withAsync() + withPage() |
| + Scale | 12.9 KB | withScale() + withScrollbar() |
| Toutes fonctionnalités | ~33 KB | Tout |
Comparez cela aux librairies monolithiques où vous embarquez chaque fonctionnalité que vous l'utilisiez ou non.
Fonctionnalités #
Chaque fonctionnalité est autonome et tree-shakeable :
| Fonctionnalité | Comment |
|---|---|
| Listes (verticales & horizontales) | Intégré |
| Grilles | withGrid() |
| Masonry | withMasonry() |
| Tableaux de données | withTable() |
| Réorganisation par glisser-déposer | withSortable() |
| Sections groupées avec en-têtes fixes | withGroups() |
| Chargement async/infini | withAsync() |
| Multi-sélection | withSelection() |
| 1M+ éléments avec compression du scroll | withScale() |
| Mesure auto des éléments | withAutoSize() |
| Scroll au niveau page | withPage() |
| Sauvegarde/restauration du scroll | withSnapshots() |
| Scrollbar personnalisée | withScrollbar() |
| Mode inverse (UIs de chat) | reverse: true |
| Navigation clavier & ARIA | Intégré |
Démarrage Rapide #
npm install vlist
import { vlist } from 'vlist';
import 'vlist/styles';
const list = vlist({
container: '#list',
items: data,
item: {
height: 48,
template: (item) => `<div class="row">${item.name}</div>`,
},
}).build();
Ça y est, une liste virtuelle fonctionnelle. Des milliers d'éléments, seulement ~20 nœuds DOM.
Adaptateurs Framework #
vlist fournit des adaptateurs pour React, Vue, Svelte et SolidJS. Ce sont de fins wrappers — quelques lignes de code glue qui traduisent les idiomes du framework (refs, hooks, réactivité) vers l'API vanilla de vlist. Le noyau n'importe jamais React, n'appelle jamais useState, ne touche jamais à un DOM virtuel.
Si votre framework n'a pas encore d'adaptateur, vous pouvez intégrer vlist en un après-midi. C'est juste du DOM.