@humanspeak/svelte-virtual-list 0.0.0 → 0.0.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 +26 -7
- package/dist/SvelteVirtualList.svelte +1 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
|
|
4
4
|
[](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/npm-publish.yml)
|
|
5
|
+
[](https://coveralls.io/github/humanspeak/svelte-virtual-list?branch=main)
|
|
5
6
|
[](https://github.com/humanspeak/svelte-virtual-list/blob/main/LICENSE)
|
|
6
7
|
[](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
|
|
7
8
|
[](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/codeql.yml)
|
|
@@ -22,6 +23,7 @@ npm install @humanspeak/svelte-virtual-list
|
|
|
22
23
|
```svelte
|
|
23
24
|
<script lang="ts">
|
|
24
25
|
import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
|
|
26
|
+
import { onMount } from 'svelte'
|
|
25
27
|
|
|
26
28
|
type Item = {
|
|
27
29
|
id: number
|
|
@@ -43,13 +45,29 @@ npm install @humanspeak/svelte-virtual-list
|
|
|
43
45
|
})
|
|
44
46
|
</script>
|
|
45
47
|
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
<div class="grid grid-cols-2 gap-8">
|
|
49
|
+
<!-- Top to bottom scrolling -->
|
|
50
|
+
<div>
|
|
51
|
+
<SvelteVirtualList {items} {itemHeight}>
|
|
52
|
+
{#snippet renderItem(item: Item, index: number)}
|
|
53
|
+
<div bind:this={measureRef}>
|
|
54
|
+
{item.text}
|
|
55
|
+
</div>
|
|
56
|
+
{/snippet}
|
|
57
|
+
</SvelteVirtualList>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Bottom to top scrolling -->
|
|
61
|
+
<div>
|
|
62
|
+
<SvelteVirtualList {items} {itemHeight} mode="bottomToTop">
|
|
63
|
+
{#snippet renderItem(item: Item, index: number)}
|
|
64
|
+
<div bind:this={measureRef}>
|
|
65
|
+
{item.text}
|
|
66
|
+
</div>
|
|
67
|
+
{/snippet}
|
|
68
|
+
</SvelteVirtualList>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
53
71
|
```
|
|
54
72
|
|
|
55
73
|
## Props
|
|
@@ -59,6 +77,7 @@ The VirtualList component accepts the following props:
|
|
|
59
77
|
- `items` - Array of items to render
|
|
60
78
|
- `height` - Height of the viewport in pixels
|
|
61
79
|
- `itemHeight` - Height of each item in pixels
|
|
80
|
+
- `mode` - Scroll direction ('topToBottom' or 'bottomToTop')
|
|
62
81
|
- `debug` - Enable debug mode (optional)
|
|
63
82
|
- `containerClass` - Custom class for container element (optional)
|
|
64
83
|
- `viewportClass` - Custom class for viewport element (optional)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humanspeak/svelte-virtual-list",
|
|
3
3
|
"description": "A high-performance virtual list component for Svelte 5 that efficiently renders large datasets through DOM recycling. Perfect for handling infinite scrolling and rendering thousands of items with minimal memory footprint.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.1",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
7
7
|
"build": "vite build && npm run package",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"@types/node": "^22.10.5",
|
|
83
83
|
"@typescript-eslint/eslint-plugin": "^8.19.0",
|
|
84
84
|
"@typescript-eslint/parser": "^8.19.0",
|
|
85
|
-
"@vitest/coverage-v8": "^
|
|
85
|
+
"@vitest/coverage-v8": "^3.0.0-beta.3",
|
|
86
86
|
"eslint": "^9.17.0",
|
|
87
87
|
"eslint-config-prettier": "^9.1.0",
|
|
88
88
|
"eslint-plugin-svelte": "^2.46.1",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"svelte-check": "^4.1.1",
|
|
98
98
|
"typescript": "^5.7.2",
|
|
99
99
|
"vite": "^6.0.7",
|
|
100
|
-
"vitest": "^
|
|
100
|
+
"vitest": "^3.0.0-beta.3"
|
|
101
101
|
},
|
|
102
102
|
"overrides": {
|
|
103
103
|
"@sveltejs/kit": {
|