@humanspeak/svelte-virtual-list 0.4.6 → 0.5.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 +16 -63
- package/dist/SvelteVirtualList.svelte +26 -746
- package/dist/SvelteVirtualList.svelte.d.ts +9 -58
- package/dist/index.d.ts +2 -2
- package/dist/reactive-list-manager/INTEGRATION_EXAMPLE.md +0 -5
- package/dist/types.d.ts +0 -11
- package/dist/utils/heightCalculation.d.ts +1 -2
- package/dist/utils/heightCalculation.js +2 -2
- package/dist/utils/scrollCalculation.d.ts +3 -9
- package/dist/utils/scrollCalculation.js +13 -72
- package/dist/utils/types.d.ts +0 -3
- package/dist/utils/virtualList.d.ts +12 -18
- package/dist/utils/virtualList.js +60 -128
- package/package.json +29 -29
package/README.md
CHANGED
|
@@ -17,7 +17,6 @@ A high-performance virtual list component for Svelte 5 applications that efficie
|
|
|
17
17
|
## Features
|
|
18
18
|
|
|
19
19
|
- 📏 Dynamic item height handling - no fixed height required
|
|
20
|
-
- 🔄 Bi-directional scrolling support (top-to-bottom and bottom-to-top)
|
|
21
20
|
- 🔄 Automatic resize handling for dynamic content
|
|
22
21
|
- 📝 TypeScript support with full type safety
|
|
23
22
|
- 🚀 SSR compatible with hydration support
|
|
@@ -70,60 +69,24 @@ yarn add @humanspeak/svelte-virtual-list
|
|
|
70
69
|
|
|
71
70
|
## Props
|
|
72
71
|
|
|
73
|
-
| Prop | Type
|
|
74
|
-
| ---------------------------- |
|
|
75
|
-
| `items` | `T[]`
|
|
76
|
-
| `defaultEstimatedItemHeight` | `number`
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `hasMore` | `boolean` | `true` | Set to `false` when all data has been loaded |
|
|
88
|
-
|
|
89
|
-
## Bottom-to-Top Mode
|
|
90
|
-
|
|
91
|
-
Use `mode="bottomToTop"` for chat-like lists anchored to the bottom:
|
|
92
|
-
|
|
93
|
-
```svelte
|
|
94
|
-
<script lang="ts">
|
|
95
|
-
import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
|
|
96
|
-
|
|
97
|
-
type Message = {
|
|
98
|
-
id: number
|
|
99
|
-
text: string
|
|
100
|
-
timestamp: Date
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
const messages: Message[] = Array.from({ length: 100 }, (_, i) => ({
|
|
104
|
-
id: i,
|
|
105
|
-
text: `Message ${i}`,
|
|
106
|
-
timestamp: new Date()
|
|
107
|
-
}))
|
|
108
|
-
</script>
|
|
109
|
-
|
|
110
|
-
<div style="height: 500px;">
|
|
111
|
-
<SvelteVirtualList items={messages} mode="bottomToTop">
|
|
112
|
-
{#snippet renderItem(message)}
|
|
113
|
-
<div class="message-container">
|
|
114
|
-
<p>{message.text}</p>
|
|
115
|
-
<span class="timestamp">
|
|
116
|
-
{message.timestamp.toLocaleString()}
|
|
117
|
-
</span>
|
|
118
|
-
</div>
|
|
119
|
-
{/snippet}
|
|
120
|
-
</SvelteVirtualList>
|
|
121
|
-
</div>
|
|
122
|
-
```
|
|
72
|
+
| Prop | Type | Default | Description |
|
|
73
|
+
| ---------------------------- | ----------------------------- | -------- | ----------------------------------------------------------------------------- |
|
|
74
|
+
| `items` | `T[]` | Required | Array of items to render |
|
|
75
|
+
| `defaultEstimatedItemHeight` | `number` | `40` | Initial height estimate used until items are measured |
|
|
76
|
+
| `bufferSize` | `number` | `20` | Number of items rendered outside the viewport |
|
|
77
|
+
| `debug` | `boolean` | `false` | Enable debug logging and visualizations |
|
|
78
|
+
| `containerClass` | `string` | `''` | Class for outer container |
|
|
79
|
+
| `viewportClass` | `string` | `''` | Class for scrollable viewport |
|
|
80
|
+
| `contentClass` | `string` | `''` | Class for content wrapper |
|
|
81
|
+
| `itemsClass` | `string` | `''` | Class for items container |
|
|
82
|
+
| `testId` | `string` | `''` | Base test id used in internal test hooks (useful for E2E/tests and debugging) |
|
|
83
|
+
| `onLoadMore` | `() => void \| Promise<void>` | - | Callback when more data is needed for infinite scroll |
|
|
84
|
+
| `loadMoreThreshold` | `number` | `20` | Items from end to trigger `onLoadMore` |
|
|
85
|
+
| `hasMore` | `boolean` | `true` | Set to `false` when all data has been loaded |
|
|
123
86
|
|
|
124
87
|
## Programmatic Scrolling
|
|
125
88
|
|
|
126
|
-
Scroll to any item in the list using the `scroll` method. Useful for
|
|
89
|
+
Scroll to any item in the list using the `scroll` method. Useful for jump-to-item navigation, search results, and more.
|
|
127
90
|
|
|
128
91
|
```svelte
|
|
129
92
|
<script lang="ts">
|
|
@@ -160,18 +123,9 @@ Alignment options:
|
|
|
160
123
|
- `'bottom'` - Always align to the bottom
|
|
161
124
|
- `'nearest'` - Scroll as little as possible to bring the item into view
|
|
162
125
|
|
|
163
|
-
Works with both `topToBottom` and `bottomToTop` modes:
|
|
164
|
-
|
|
165
|
-
```svelte
|
|
166
|
-
<SvelteVirtualList items={messages} mode="bottomToTop" bind:this={listRef} />
|
|
167
|
-
<button onclick={() => listRef.scroll({ index: messages.length - 1, align: 'bottom' })}>
|
|
168
|
-
Jump to latest
|
|
169
|
-
</button>
|
|
170
|
-
```
|
|
171
|
-
|
|
172
126
|
## Infinite Scroll
|
|
173
127
|
|
|
174
|
-
Load more data automatically as users scroll near the end of the list. Perfect for paginated APIs, infinite feeds, and
|
|
128
|
+
Load more data automatically as users scroll near the end of the list. Perfect for paginated APIs, infinite feeds, and activity logs.
|
|
175
129
|
|
|
176
130
|
```svelte
|
|
177
131
|
<script lang="ts">
|
|
@@ -202,7 +156,6 @@ Load more data automatically as users scroll near the end of the list. Perfect f
|
|
|
202
156
|
- Automatically triggers on mount if initial items are below threshold
|
|
203
157
|
- Prevents concurrent `onLoadMore` calls while loading
|
|
204
158
|
- Works with both sync and async callbacks
|
|
205
|
-
- Supports both `topToBottom` and `bottomToTop` modes
|
|
206
159
|
|
|
207
160
|
### Integration Guides
|
|
208
161
|
|