Migrate to Svelte 5

jonasgeiler · Nov 14, 2024 · 229c4a8 · 229c4a8
1 parent adfe82d
commit 229c4a8
Show file tree

Hide file tree

Showing 12 changed files with 5,560 additions and 373 deletions.
diff --git a/README.md b/README.md
@@ -73,9 +73,11 @@ From CDN (via [unpkg](https://unpkg.com/)):
 </script>
 
 <VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
-	<div slot="item" let:index let:style {style}>
-		Letter: {data[index]}, Row: #{index}
-	</div>
+	{#snippet children({ style, index })}
+		<div {style}>
+			Letter: {data[index]}, Row: #{index}
+		</div>
+	{/snippet}
 </VirtualList>
 ```
 
@@ -86,7 +88,7 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
 	import VirtualList from 'svelte-tiny-virtual-list';
 	import InfiniteLoading from 'svelte-infinite-loading';
 
-	let data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
+	let data = $state(['A', 'B', 'C', 'D', 'E', 'F' /* ... */]);
 
 	function infiniteHandler({ detail: { complete, error } }) {
 		try {
@@ -103,13 +105,17 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
 </script>
 
 <VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
-	<div slot="item" let:index let:style {style}>
-		Letter: {data[index]}, Row: #{index}
-	</div>
+	{#snippet children({ style, index })}
+		<div {style}>
+			Letter: {data[index]}, Row: #{index}
+		</div>
+	{/snippet}
 
-	<div slot="footer">
-		<InfiniteLoading on:infinite={infiniteHandler} />
-	</div>
+	{#snippet footer()}
+		<div>
+			<InfiniteLoading on:infinite={infiniteHandler} />
+		</div>
+	{/snippet}
 </VirtualList>
 ```
 
@@ -129,29 +135,20 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
 | stickyIndices     | `number[]`                                        |           | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`)                                                                                                                                                                                                                                                                                                                             |
 | 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.                                                                                                                                                                                                                                                                                    |
 | 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.                                                                                                                                                                                                                                                          |
-| 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.                                                                                                                                                                                                                         |
+| 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.           
+| 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`
+| 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.                                                                                                                                                                                         |
 
 _\* `height` must be a number when `scrollDirection` is `'vertical'`. Similarly, `width` must be a number if `scrollDirection` is `'horizontal'`_
 
-### Slots
+### Snippets
 
-- `item` - Slot for each item
-  - Props:
+- `children` - Snippet for each item
+  - Prop: `{ index, style }`
     - `index: number` - Item index
-    - `style: string` - Item style, must be applied to the slot (look above for example)
-- `header` - Slot for the elements that should appear at the top of the list
-- `footer` - Slot for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)
-
-### Events
-
-- `afterScroll` - Fired after handling the scroll event
-  - `detail` Props:
-    - `event: ScrollEvent` - The original scroll event
-    - `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
-- `itemsUpdated` - Fired when the visible items are updated
-  - `detail` Props:
-    - `start: number` - Index of the first visible item
-    - `end: number` - Index of the last visible item
+    - `style: string` - Item style, must be applied to the snippet (look above for example)
+- `header` - Snippet for the elements that should appear at the top of the list
+- `footer` - Snippet for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)
 
 ### Methods
 
@@ -185,9 +182,11 @@ However, if you're passing a function to `itemSize`, that type of comparison is
 	itemCount={data.length}
 	itemSize={50}
 >
-	<div slot="item" let:index let:style {style}>
-		Letter: {data[index]}, Row: #{index}
-	</div>
+	{#snippet children({ style, index })}
+		<div {style}>
+			Letter: {data[index]}, Row: #{index}
+		</div>
+	{/snippet}
 </VirtualList>
 ```
 
@@ -204,9 +203,11 @@ You can style the elements of the virtual list like this:
 
 <div class="list">
 	<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
-		<div slot="item" let:index let:style {style}>
-			Letter: {data[index]}, Row: #{index}
-		</div>
+		{#snippet children({ style, index })}
+			<div {style}>
+				Letter: {data[index]}, Row: #{index}
+			</div>
+		{/snippet}
 	</VirtualList>
 </div>