vlist 2.6.4 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.github.md +36 -6
- package/README.md +35 -5
- package/dist/config.js +1 -1
- package/dist/core/create.d.ts +7 -1
- package/dist/core/runway.d.ts +5 -0
- package/dist/core/state.d.ts +2 -0
- package/dist/core/types.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/size.json +1 -1
- package/dist/synthetic/handler.d.ts +8 -0
- package/dist/synthetic/motion.d.ts +28 -0
- package/dist/synthetic.d.ts +9 -0
- package/dist/synthetic.js +1 -0
- package/package.json +6 -1
package/README.github.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 9.7 KB.
|
|
4
4
|
|
|
5
|
-
**v2.
|
|
5
|
+
**v2.7.0** — [Changelog](./CHANGELOG.md) · Opt-in synthetic scroll input (RFC-014): import `createVList` from `vlist/synthetic` and set `scroll.mode: "synthetic"` for list-owned touch, wheel and keyboard input over a viewport-sized content box.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/vlist)
|
|
8
8
|
[](https://bundlephobia.com/package/vlist)
|
|
@@ -11,7 +11,7 @@ The virtual list library for every framework. Ultra efficient, batteries-include
|
|
|
11
11
|
|
|
12
12
|
- **Accessible** — WAI-ARIA, 2D keyboard navigation, focus recovery, screen-reader DOM ordering
|
|
13
13
|
- **Zero dependencies** — framework-agnostic core with tiny adapters for Vue, Svelte, Solid, React
|
|
14
|
-
- **9.
|
|
14
|
+
- **9.9 KB gzipped** — composable plugins with perfect tree-shaking
|
|
15
15
|
- **Constant memory** — ~0.1 MB overhead at any scale, from 10K to 1M+ items
|
|
16
16
|
- **Tree, grid, masonry, carousel, table, groups, data, selection, search, sortable, transition** — all opt-in
|
|
17
17
|
- **Axis-neutral** — vertical and horizontal scrolling through a single code path, all plugins work in both orientations
|
|
@@ -90,18 +90,48 @@ const list = createVList({
|
|
|
90
90
|
])
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
## Synthetic scroll input
|
|
94
|
+
|
|
95
|
+
The opt-in `vlist/synthetic` entry adds `scroll.mode: 'synthetic'` alongside native and bounded modes. Native remains the default. Import the factory from this entry and plugins from `vlist`:
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import { createVList } from 'vlist/synthetic'
|
|
99
|
+
import { scrollbar } from 'vlist'
|
|
100
|
+
import 'vlist/styles'
|
|
101
|
+
|
|
102
|
+
const list = createVList({
|
|
103
|
+
container: '#my-list',
|
|
104
|
+
items: Array.from({ length: 1000 }, (_, id) => ({ id, name: `Row ${id}` })),
|
|
105
|
+
item: { height: 48, template: item => `<div>${item.name}</div>` },
|
|
106
|
+
scroll: { mode: 'synthetic' },
|
|
107
|
+
}, [scrollbar()])
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Supported plugins are **table, groups, snapshots, scrollbar, autosize, transition, selection and a11y**. Existing plugin conflicts still apply; this list does not imply that all eight can be combined. `page()`, `carousel()` and `sortable()` throw when configured with synthetic mode. Carousel uses wrap scrolling, which this release does not support with synthetic input.
|
|
111
|
+
|
|
112
|
+
Known limitations:
|
|
113
|
+
|
|
114
|
+
- RTL horizontal lists throw in synthetic mode in this release; use native mode. Vertical lists on RTL pages are supported. RTL support for the synthetic driver is planned as a non-breaking addition.
|
|
115
|
+
- Same-axis touch stops at either boundary with no parent handoff, including gestures that start inside an edge-pinned list. Use native mode when touch gestures must scroll the parent page at a boundary.
|
|
116
|
+
- The native main-axis scrollbar is absent. Provide a custom scrollbar, such as `scrollbar()` above. Its accessibility release gate remains open; synthetic mode is not a completed scrollbar-accessibility sign-off.
|
|
117
|
+
- Inertia initializes its frame clock on the first frame after release, adding up to one frame of release latency.
|
|
118
|
+
- Wheel input at an edge is left to the page when it cannot move the list. Native cross-axis scrolling remains available.
|
|
119
|
+
|
|
120
|
+
Measurement corrections from autosize preserve ongoing motion. Synthetic input adds **2.6 KB gzipped** over the base entry (**12.5 KB** total before plugins); ordinary `vlist` imports exclude this driver. See [RFC-014](https://github.com/floor/vlist/discussions/127).
|
|
121
|
+
|
|
122
|
+
## Plugins
|
|
94
123
|
|
|
95
124
|
| Plugin | Size | Description |
|
|
96
125
|
|--------|------|-------------|
|
|
97
|
-
| **Base** | 9.
|
|
126
|
+
| **Base** | 9.9 KB | Virtualization, ARIA, keyboard nav, gap, padding, bounded scroll (1M+ items) |
|
|
127
|
+
| `vlist/synthetic` entry | +2.6 KB | Opt-in synthetic scroll input (12.5 KB total before plugins) |
|
|
98
128
|
| `data()` | +4.8 KB | Lazy loading with velocity-aware fetching |
|
|
99
129
|
| `selection()` | +2.8 KB | Single/multiple selection with 2D keyboard nav |
|
|
100
130
|
| `search()` | +3.2 KB | Search bar: filter/navigate modes, match highlighting |
|
|
101
131
|
| `groups()` | +5.3 KB | Sticky/inline headers with grid + masonry + table + data integration |
|
|
102
132
|
| `autosize()` | +1.0 KB | Auto-measure items via ResizeObserver |
|
|
103
133
|
| `scrollbar()` | +2.0 KB | Custom scrollbar UI |
|
|
104
|
-
| `grid()` | +2.
|
|
134
|
+
| `grid()` | +2.5 KB | 2D grid layout |
|
|
105
135
|
| `masonry()` | +4.0 KB | Pinterest-style masonry with lane-aware keyboard nav |
|
|
106
136
|
| `carousel()` | +3.5 KB | Paged horizontal carousel with snap and keyboard nav |
|
|
107
137
|
| `table()` | +5.8 KB | Data table with columns, resize, sort |
|
|
@@ -109,7 +139,7 @@ const list = createVList({
|
|
|
109
139
|
| `page()` | +0.8 KB | Window-level scrolling |
|
|
110
140
|
| `sortable()` | +3.0 KB | Drag-and-drop reordering with auto-scroll |
|
|
111
141
|
| `snapshots()` | +1.1 KB | Scroll position save/restore |
|
|
112
|
-
| `transition()` | +
|
|
142
|
+
| `transition()` | +2.0 KB | FLIP-based enter/exit animations for insert & remove |
|
|
113
143
|
|
|
114
144
|
## Examples
|
|
115
145
|
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 9.7 KB.
|
|
4
4
|
|
|
5
|
-
**v2.
|
|
5
|
+
**v2.7.0** — [Changelog](https://github.com/floor/vlist/blob/main/CHANGELOG.md) · Opt-in synthetic scroll input (RFC-014): import `createVList` from `vlist/synthetic` and set `scroll.mode: "synthetic"` for list-owned touch, wheel and keyboard input over a viewport-sized content box.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/vlist)
|
|
8
8
|
[](https://bundlephobia.com/package/vlist)
|
|
@@ -11,7 +11,7 @@ The virtual list library for every framework. Ultra efficient, batteries-include
|
|
|
11
11
|
|
|
12
12
|
- **Accessible** — WAI-ARIA, 2D keyboard navigation, focus recovery, screen-reader DOM ordering
|
|
13
13
|
- **Zero dependencies** — framework-agnostic core, tiny adapters for Vue, Svelte, Solid, React
|
|
14
|
-
- **9.
|
|
14
|
+
- **9.9 KB gzipped** — composable plugins with perfect tree-shaking
|
|
15
15
|
- **Constant memory** — ~0.1 MB overhead at any scale, from 10K to 1M+ items
|
|
16
16
|
- **Axis-neutral** — vertical and horizontal scrolling through a single code path, all plugins work in both orientations
|
|
17
17
|
|
|
@@ -52,18 +52,48 @@ const list = createVList({ container: '#app', items, item: { height: 200, templa
|
|
|
52
52
|
])
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
+
## Synthetic scroll input
|
|
56
|
+
|
|
57
|
+
The opt-in `vlist/synthetic` entry adds `scroll.mode: 'synthetic'` alongside native and bounded modes. Native remains the default. Import the factory from this entry and plugins from `vlist`:
|
|
58
|
+
|
|
59
|
+
```typescript
|
|
60
|
+
import { createVList } from 'vlist/synthetic'
|
|
61
|
+
import { scrollbar } from 'vlist'
|
|
62
|
+
import 'vlist/styles'
|
|
63
|
+
|
|
64
|
+
const list = createVList({
|
|
65
|
+
container: '#my-list',
|
|
66
|
+
items: Array.from({ length: 1000 }, (_, id) => ({ id, name: `Row ${id}` })),
|
|
67
|
+
item: { height: 48, template: item => `<div>${item.name}</div>` },
|
|
68
|
+
scroll: { mode: 'synthetic' },
|
|
69
|
+
}, [scrollbar()])
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Supported plugins are **table, groups, snapshots, scrollbar, autosize, transition, selection and a11y**. Existing plugin conflicts still apply; this list does not imply that all eight can be combined. `page()`, `carousel()` and `sortable()` throw when configured with synthetic mode. Carousel uses wrap scrolling, which this release does not support with synthetic input.
|
|
73
|
+
|
|
74
|
+
Known limitations:
|
|
75
|
+
|
|
76
|
+
- RTL horizontal lists throw in synthetic mode in this release; use native mode. Vertical lists on RTL pages are supported. RTL support for the synthetic driver is planned as a non-breaking addition.
|
|
77
|
+
- Same-axis touch stops at either boundary with no parent handoff, including gestures that start inside an edge-pinned list. Use native mode when touch gestures must scroll the parent page at a boundary.
|
|
78
|
+
- The native main-axis scrollbar is absent. Provide a custom scrollbar, such as `scrollbar()` above. Its accessibility release gate remains open; synthetic mode is not a completed scrollbar-accessibility sign-off.
|
|
79
|
+
- Inertia initializes its frame clock on the first frame after release, adding up to one frame of release latency.
|
|
80
|
+
- Wheel input at an edge is left to the page when it cannot move the list. Native cross-axis scrolling remains available.
|
|
81
|
+
|
|
82
|
+
Measurement corrections from autosize preserve ongoing motion. Synthetic input adds **2.6 KB gzipped** over the base entry (**12.5 KB** total before plugins); ordinary `vlist` imports exclude this driver. See [RFC-014](https://github.com/floor/vlist/discussions/127).
|
|
83
|
+
|
|
55
84
|
## Plugins
|
|
56
85
|
|
|
57
86
|
| Plugin | Size | Description |
|
|
58
87
|
|--------|------|-------------|
|
|
59
|
-
| **Base** | 9.
|
|
88
|
+
| **Base** | 9.9 KB | Virtualization, ARIA, keyboard nav, gap, padding, bounded scroll (1M+ items) |
|
|
89
|
+
| `vlist/synthetic` entry | +2.6 KB | Opt-in synthetic scroll input (12.5 KB total before plugins) |
|
|
60
90
|
| `data()` | +4.8 KB | Lazy loading with velocity-aware fetching |
|
|
61
91
|
| `selection()` | +2.8 KB | Single/multiple selection with 2D keyboard nav |
|
|
62
92
|
| `search()` | +3.2 KB | Search bar: filter/navigate modes, match highlighting |
|
|
63
93
|
| `groups()` | +5.3 KB | Sticky/inline headers with grid + masonry + table + data integration |
|
|
64
94
|
| `autosize()` | +1.0 KB | Auto-measure items via ResizeObserver |
|
|
65
95
|
| `scrollbar()` | +2.0 KB | Custom scrollbar UI |
|
|
66
|
-
| `grid()` | +2.
|
|
96
|
+
| `grid()` | +2.5 KB | 2D grid layout |
|
|
67
97
|
| `masonry()` | +4.0 KB | Pinterest-style masonry with lane-aware keyboard nav |
|
|
68
98
|
| `carousel()` | +3.5 KB | Paged horizontal carousel with snap and keyboard nav |
|
|
69
99
|
| `table()` | +5.8 KB | Data table with columns, resize, sort |
|
|
@@ -71,7 +101,7 @@ const list = createVList({ container: '#app', items, item: { height: 200, templa
|
|
|
71
101
|
| `page()` | +0.8 KB | Window-level scrolling |
|
|
72
102
|
| `sortable()` | +3.0 KB | Drag-and-drop reordering with auto-scroll |
|
|
73
103
|
| `snapshots()` | +1.1 KB | Scroll position save/restore |
|
|
74
|
-
| `transition()` | +
|
|
104
|
+
| `transition()` | +2.0 KB | FLIP-based enter/exit animations for insert & remove |
|
|
75
105
|
|
|
76
106
|
## Framework Adapters
|
|
77
107
|
|