Skip to content

Commit 63c389f

Browse files
author
TutorLatin
committed
Migrate to Svelte 5
1 parent f179308 commit 63c389f

File tree

12 files changed

+6853
-373
lines changed

12 files changed

+6853
-373
lines changed

‎README.md

+35-34
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,11 @@ From CDN (via [unpkg](https://unpkg.com/)):
7373
</script>
7474
7575
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
76-
<div slot="item" let:index let:style {style}>
77-
Letter: {data[index]}, Row: #{index}
78-
</div>
76+
{#snippet children({ style, index })}
77+
<div {style}>
78+
Letter: {data[index]}, Row: #{index}
79+
</div>
80+
{/snippet}
7981
</VirtualList>
8082
```
8183

@@ -86,7 +88,7 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
8688
import VirtualList from 'svelte-tiny-virtual-list';
8789
import InfiniteLoading from 'svelte-infinite-loading';
8890
89-
let data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
91+
let data = $state(['A', 'B', 'C', 'D', 'E', 'F' /* ... */]);
9092
9193
function infiniteHandler({ detail: { complete, error } }) {
9294
try {
@@ -103,13 +105,17 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
103105
</script>
104106
105107
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
106-
<div slot="item" let:index let:style {style}>
107-
Letter: {data[index]}, Row: #{index}
108-
</div>
108+
{#snippet children({ style, index })}
109+
<div {style}>
110+
Letter: {data[index]}, Row: #{index}
111+
</div>
112+
{/snippet}
109113
110-
<div slot="footer">
111-
<InfiniteLoading on:infinite={infiniteHandler} />
112-
</div>
114+
{#snippet footer()}
115+
<div>
116+
<InfiniteLoading on:infinite={infiniteHandler} />
117+
</div>
118+
{/snippet}
113119
</VirtualList>
114120
```
115121

@@ -129,29 +135,20 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
129135
| stickyIndices | `number[]` | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |
130136
| overscanCount | `number` | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
131137
| estimatedItemSize | `number` | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
132-
| getKey | `(index: number) => any` | | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
138+
| getKey | `(index: number) => any` | | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index.
139+
| onAfterScroll | `({ event: ScrollEvent, offset: number }) => any` | | Function that fires after handling the scroll event. Props: `event: ScrollEvent` - The original scroll event, `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
140+
| onListItemsUpdate | `({ start: number, end: number }) => any` | | Function that fires when the visible items are updated. Props: `start: number` - Index of the first visible item, `end: number` - Index of the last visible item. |
133141

134142
_\* `height` must be a number when `scrollDirection` is `'vertical'`. Similarly, `width` must be a number if `scrollDirection` is `'horizontal'`_
135143

136-
### Slots
144+
### Snippets
137145

138-
- `item` - Slot for each item
139-
- Props:
146+
- `children` - Snippet for each item
147+
- Prop: `{ index, style }`
140148
- `index: number` - Item index
141-
- `style: string` - Item style, must be applied to the slot (look above for example)
142-
- `header` - Slot for the elements that should appear at the top of the list
143-
- `footer` - Slot for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)
144-
145-
### Events
146-
147-
- `afterScroll` - Fired after handling the scroll event
148-
- `detail` Props:
149-
- `event: ScrollEvent` - The original scroll event
150-
- `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
151-
- `itemsUpdated` - Fired when the visible items are updated
152-
- `detail` Props:
153-
- `start: number` - Index of the first visible item
154-
- `end: number` - Index of the last visible item
149+
- `style: string` - Item style, must be applied to the snippet (look above for example)
150+
- `header` - Snippet for the elements that should appear at the top of the list
151+
- `footer` - Snippet for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)
155152

156153
### Methods
157154

@@ -185,9 +182,11 @@ However, if you're passing a function to `itemSize`, that type of comparison is
185182
itemCount={data.length}
186183
itemSize={50}
187184
>
188-
<div slot="item" let:index let:style {style}>
189-
Letter: {data[index]}, Row: #{index}
190-
</div>
185+
{#snippet children({ style, index })}
186+
<div {style}>
187+
Letter: {data[index]}, Row: #{index}
188+
</div>
189+
{/snippet}
191190
</VirtualList>
192191
```
193192

@@ -204,9 +203,11 @@ You can style the elements of the virtual list like this:
204203
205204
<div class="list">
206205
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
207-
<div slot="item" let:index let:style {style}>
208-
Letter: {data[index]}, Row: #{index}
209-
</div>
206+
{#snippet children({ style, index })}
207+
<div {style}>
208+
Letter: {data[index]}, Row: #{index}
209+
</div>
210+
{/snippet}
210211
</VirtualList>
211212
</div>
212213

0 commit comments

Comments
 (0)