@humanspeak/svelte-virtual-list 0.3.1-beta.0 → 0.3.1-beta.1
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.md +36 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -136,19 +136,44 @@ npm install @humanspeak/svelte-virtual-list
|
|
|
136
136
|
</div>
|
|
137
137
|
```
|
|
138
138
|
|
|
139
|
+
### Bottom-to-top mode
|
|
140
|
+
|
|
141
|
+
Use `mode="bottomToTop"` for chat-like lists anchored to the bottom. Programmatic scrolling uses the same API as top-to-bottom lists:
|
|
142
|
+
|
|
143
|
+
```svelte
|
|
144
|
+
<script lang="ts">
|
|
145
|
+
import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
|
|
146
|
+
let listRef
|
|
147
|
+
const messages = Array.from({ length: 2000 }, (_, i) => ({ id: i, text: `Msg ${i}` }))
|
|
148
|
+
</script>
|
|
149
|
+
|
|
150
|
+
<SvelteVirtualList items={messages} mode="bottomToTop" bind:this={listRef} />
|
|
151
|
+
<button on:click={() => listRef.scroll({ index: messages.length - 1, align: 'bottom' })}>
|
|
152
|
+
Jump to latest
|
|
153
|
+
</button>
|
|
154
|
+
```
|
|
155
|
+
|
|
139
156
|
## Props
|
|
140
157
|
|
|
141
|
-
| Prop
|
|
142
|
-
|
|
|
143
|
-
| `items`
|
|
144
|
-
| `
|
|
145
|
-
| `mode`
|
|
146
|
-
| `bufferSize`
|
|
147
|
-
| `debug`
|
|
148
|
-
| `containerClass`
|
|
149
|
-
| `viewportClass`
|
|
150
|
-
| `contentClass`
|
|
151
|
-
| `itemsClass`
|
|
158
|
+
| Prop | Type | Default | Description |
|
|
159
|
+
| ---------------------------- | -------------------------------- | --------------- | ----------------------------------------------------------------------------- |
|
|
160
|
+
| `items` | `T[]` | Required | Array of items to render |
|
|
161
|
+
| `defaultEstimatedItemHeight` | `number` | `40` | Initial height estimate used until items are measured |
|
|
162
|
+
| `mode` | `'topToBottom' \| 'bottomToTop'` | `'topToBottom'` | Scroll direction and anchoring behavior |
|
|
163
|
+
| `bufferSize` | `number` | `20` | Number of items rendered outside the viewport |
|
|
164
|
+
| `debug` | `boolean` | `false` | Enable debug logging and visualizations |
|
|
165
|
+
| `containerClass` | `string` | `''` | Class for outer container |
|
|
166
|
+
| `viewportClass` | `string` | `''` | Class for scrollable viewport |
|
|
167
|
+
| `contentClass` | `string` | `''` | Class for content wrapper |
|
|
168
|
+
| `itemsClass` | `string` | `''` | Class for items container |
|
|
169
|
+
| `testId` | `string` | `''` | Base test id used in internal test hooks (useful for E2E/tests and debugging) |
|
|
170
|
+
|
|
171
|
+
## Testing
|
|
172
|
+
|
|
173
|
+
- Unit tests (Vitest): `npm test`
|
|
174
|
+
- E2E tests (Playwright):
|
|
175
|
+
- One-time: `npx playwright install`
|
|
176
|
+
- Run: `npm run test:e2e`
|
|
152
177
|
|
|
153
178
|
## Performance Considerations
|
|
154
179
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humanspeak/svelte-virtual-list",
|
|
3
|
-
"version": "0.3.1-beta.
|
|
3
|
+
"version": "0.3.1-beta.1",
|
|
4
4
|
"description": "A lightweight, high-performance virtual list component for Svelte 5 that renders large datasets with minimal memory usage. Features include dynamic height support, smooth scrolling, TypeScript support, and efficient DOM recycling. Ideal for infinite scrolling lists, data tables, chat interfaces, and any application requiring the rendering of thousands of items without compromising performance. Zero dependencies and fully customizable.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|