@humanspeak/svelte-virtual-list 0.2.4 โ 0.2.6-beta.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/LICENSE +1 -1
- package/README.md +48 -0
- package/dist/SvelteVirtualList.svelte +420 -121
- package/dist/SvelteVirtualList.svelte.d.ts +186 -32
- package/dist/index.d.ts +2 -2
- package/dist/types.d.ts +70 -16
- package/dist/types.js +8 -1
- package/dist/utils/heightCalculation.d.ts +77 -0
- package/dist/utils/heightCalculation.js +91 -0
- package/dist/utils/raf.d.ts +29 -5
- package/dist/utils/raf.js +45 -19
- package/dist/utils/virtualList.d.ts +43 -13
- package/dist/utils/virtualList.js +85 -13
- package/package.json +45 -36
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
[](https://github.com/humanspeak/svelte-virtual-list/blob/main/LICENSE)
|
|
7
7
|
[](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
|
|
8
8
|
[](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/codeql.yml)
|
|
9
|
+
[](https://packagephobia.com/result?p=@humanspeak/svelte-virtual-list)
|
|
9
10
|
[](https://trunk.io)
|
|
10
11
|
[](http://www.typescriptlang.org/)
|
|
11
12
|
[](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
|
|
@@ -27,6 +28,53 @@ A high-performance virtual list component for Svelte 5 applications that efficie
|
|
|
27
28
|
- ๐ง Memory-optimized for 10k+ items
|
|
28
29
|
- ๐งช Comprehensive test coverage (vitest and playwright)
|
|
29
30
|
- ๐ Progressive initialization for large datasets
|
|
31
|
+
- ๐น๏ธ Programmatic scrolling with `scroll`
|
|
32
|
+
|
|
33
|
+
## scroll: Programmatic Scrolling
|
|
34
|
+
|
|
35
|
+
You can now programmatically scroll to any item in the list using the `scroll` method. This is useful for chat apps, jump-to-item navigation, and more. You can check the usage in `src/routes/tests/scroll`. Thank you for the feature request!
|
|
36
|
+
|
|
37
|
+
### Usage Example
|
|
38
|
+
|
|
39
|
+
```svelte
|
|
40
|
+
<script lang="ts">
|
|
41
|
+
import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
|
|
42
|
+
let listRef
|
|
43
|
+
const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` }))
|
|
44
|
+
|
|
45
|
+
function goToItem5000() {
|
|
46
|
+
// Scroll to item 5000 with smooth scrolling and auto alignment
|
|
47
|
+
listRef.scroll({ index: 5000, smoothScroll: true, align: 'auto' })
|
|
48
|
+
}
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<button on:click={goToItem5000}> Scroll to item 5000 </button>
|
|
52
|
+
<SvelteVirtualList {items} bind:this={listRef}>
|
|
53
|
+
{#snippet renderItem(item)}
|
|
54
|
+
<div>{item.text}</div>
|
|
55
|
+
{/snippet}
|
|
56
|
+
</SvelteVirtualList>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### API
|
|
60
|
+
|
|
61
|
+
- `scroll(options: { index: number; smoothScroll?: boolean; shouldThrowOnBounds?: boolean; align?: 'auto' | 'top' | 'bottom' | 'nearest' })`
|
|
62
|
+
- `index`: The item index to scroll to (0-based)
|
|
63
|
+
- `smoothScroll`: If true, uses smooth scrolling (default: true)
|
|
64
|
+
- `shouldThrowOnBounds`: If true, throws if index is out of bounds (default: true)
|
|
65
|
+
- `align`: Where to align the item in the viewport:
|
|
66
|
+
- `'auto'` (default): Only scroll if not visible, align to top or bottom as appropriate
|
|
67
|
+
- `'top'`: Always align to the top
|
|
68
|
+
- `'bottom'`: Always align to the bottom
|
|
69
|
+
- `'nearest'`: Scroll as little as possible to bring the item into view (like native scrollIntoView({ block: 'nearest' }))
|
|
70
|
+
|
|
71
|
+
#### Usage Examples
|
|
72
|
+
|
|
73
|
+
```svelte
|
|
74
|
+
<button on:click={() => listRef.scroll({ index: 5000, align: 'nearest' })}>
|
|
75
|
+
Scroll to item 5000 (nearest)
|
|
76
|
+
</button>
|
|
77
|
+
```
|
|
30
78
|
|
|
31
79
|
## Installation
|
|
32
80
|
|