Skip to content

Commit 83d0d31

Browse files
author
Ray Wong
committed
chore(svelte-virtual): update svelte examples to use svelte 5
1 parent 7d6e3c9 commit 83d0d31

20 files changed

+190
-142
lines changed

‎examples/svelte/dynamic/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
"@tanstack/svelte-virtual": "^3.13.12"
1414
},
1515
"devDependencies": {
16-
"@sveltejs/vite-plugin-svelte": "^3.1.2",
16+
"@sveltejs/vite-plugin-svelte": "^6.1.0",
1717
"@tsconfig/svelte": "^5.0.4",
18-
"svelte": "^4.2.20",
19-
"svelte-check": "^4.2.1",
18+
"svelte": "^5.36.10",
19+
"svelte-check": "^4.3.0",
2020
"tslib": "^2.8.1",
21-
"typescript": "5.4.5",
22-
"vite": "^5.4.19"
21+
"typescript": "^5.8.3",
22+
"vite": "^7.0.5"
2323
}
2424
}

‎examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { faker } from '@faker-js/faker'
33
import { createVirtualizer } from '@tanstack/svelte-virtual'
44
5-
let virtualListEl: HTMLDivElement
6-
let virtualItemEls: HTMLDivElement[] = []
5+
let virtualListEl = $state<HTMLDivElement | null>(null)
6+
let virtualItemEls = $state<HTMLDivElement[]>([])
77
88
function randomNumber(min: number, max: number) {
99
return faker.number.int({ min, max })
@@ -13,17 +13,21 @@
1313
.fill(true)
1414
.map(() => faker.lorem.sentence(randomNumber(20, 70)))
1515
16-
$: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
17-
horizontal: true,
18-
count: sentences.length,
19-
getScrollElement: () => virtualListEl,
20-
estimateSize: () => 45,
21-
})
16+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
17+
scrollElement
18+
let virtualizer = $derived(
19+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
20+
horizontal: true,
21+
count: sentences.length,
22+
getScrollElement: makeGetScrollElement(virtualListEl),
23+
estimateSize: () => 45,
24+
}),
25+
)
2226
23-
$: {
27+
$effect(() => {
2428
if (virtualItemEls.length)
2529
virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
26-
}
30+
})
2731
</script>
2832

2933
<div class="list scroll-container" bind:this={virtualListEl}>

‎examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
<script lang="ts">
22
import { createVirtualizer } from '@tanstack/svelte-virtual'
33
4-
let virtualListEl: HTMLDivElement
4+
let virtualListEl = $state<HTMLDivElement | null>(null)
5+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
6+
scrollElement
57
6-
$: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
7-
count: 10000,
8-
getScrollElement: () => virtualListEl,
9-
estimateSize: () => 35,
10-
overscan: 5,
11-
})
8+
let rowVirtualizer = $derived(
9+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
10+
count: 10000,
11+
getScrollElement: makeGetScrollElement(virtualListEl),
12+
estimateSize: () => 35,
13+
overscan: 5,
14+
}),
15+
)
1216
13-
$: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
14-
horizontal: true,
15-
count: 10000,
16-
getScrollElement: () => virtualListEl,
17-
estimateSize: () => 100,
18-
overscan: 5,
19-
})
17+
let columnVirtualizer = $derived(
18+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
19+
horizontal: true,
20+
count: 10000,
21+
getScrollElement: makeGetScrollElement(virtualListEl),
22+
estimateSize: () => 100,
23+
overscan: 5,
24+
}),
25+
)
2026
</script>
2127

2228
<div class="list scroll-container" bind:this={virtualListEl}>

‎examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { faker } from '@faker-js/faker'
33
import { createVirtualizer } from '@tanstack/svelte-virtual'
44
5-
let virtualListEl: HTMLDivElement
6-
let virtualItemEls: HTMLDivElement[] = []
5+
let virtualListEl = $state<HTMLDivElement | null>(null)
6+
let virtualItemEls = $state<HTMLDivElement[]>([])
77
88
function randomNumber(min: number, max: number) {
99
return faker.number.int({ min, max })
@@ -15,39 +15,43 @@
1515
1616
const count = sentences.length
1717
18-
$: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
19-
count,
20-
getScrollElement: () => virtualListEl,
21-
estimateSize: () => 45,
22-
})
18+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
19+
scrollElement
20+
let virtualizer = $derived(
21+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
22+
count,
23+
getScrollElement: makeGetScrollElement(virtualListEl),
24+
estimateSize: () => 45,
25+
}),
26+
)
2327
24-
$: items = $virtualizer.getVirtualItems()
28+
let items = $derived($virtualizer.getVirtualItems())
2529
26-
$: {
30+
$effect(() => {
2731
if (virtualItemEls.length)
2832
virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
29-
}
33+
})
3034
</script>
3135

3236
<div>
3337
<button
34-
on:click={() => {
38+
onclick={() => {
3539
$virtualizer.scrollToIndex(0)
3640
}}
3741
>
3842
scroll to the top
3943
</button>
40-
<span style="padding: 0 4px;" />
44+
<span style="padding: 0 4px;"></span>
4145
<button
42-
on:click={() => {
46+
onclick={() => {
4347
$virtualizer.scrollToIndex(count / 2)
4448
}}
4549
>
4650
scroll to the middle
4751
</button>
48-
<span style="padding: 0 4px;" />
52+
<span style="padding: 0 4px;"></span>
4953
<button
50-
on:click={() => {
54+
onclick={() => {
5155
$virtualizer.scrollToIndex(count - 1)
5256
}}
5357
>

‎examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { faker } from '@faker-js/faker'
33
import { createWindowVirtualizer } from '@tanstack/svelte-virtual'
44
5-
let virtualListEl: HTMLDivElement
6-
let virtualItemEls: HTMLDivElement[] = []
5+
let virtualListEl = $state<HTMLDivElement | null>(null)
6+
let virtualItemEls = $state<HTMLDivElement[]>([])
77
88
function randomNumber(min: number, max: number) {
99
return faker.number.int({ min, max })
@@ -15,18 +15,20 @@
1515
1616
const count = sentences.length
1717
18-
$: virtualizer = createWindowVirtualizer<HTMLDivElement>({
19-
count,
20-
scrollMargin: virtualListEl?.offsetTop ?? 0,
21-
estimateSize: () => 45,
22-
})
18+
let virtualizer = $derived(
19+
createWindowVirtualizer<HTMLDivElement>({
20+
count,
21+
scrollMargin: virtualListEl?.offsetTop ?? 0,
22+
estimateSize: () => 45,
23+
}),
24+
)
2325
24-
$: items = $virtualizer.getVirtualItems()
26+
let items = $derived($virtualizer.getVirtualItems())
2527
26-
$: {
28+
$effect(() => {
2729
if (virtualItemEls.length)
2830
virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
29-
}
31+
})
3032
</script>
3133

3234
<div>

‎examples/svelte/dynamic/src/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import './app.css'
22
import App from './App.svelte'
3+
import { mount } from "svelte";
34

4-
const app = new App({
5+
const app = mount(App, {
56
target: document.getElementById('app')!,
67
})
78

‎examples/svelte/fixed/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
"@tanstack/svelte-virtual": "^3.13.12"
1313
},
1414
"devDependencies": {
15-
"@sveltejs/vite-plugin-svelte": "^3.1.2",
15+
"@sveltejs/vite-plugin-svelte": "^6.1.0",
1616
"@tsconfig/svelte": "^5.0.4",
17-
"svelte": "^4.2.20",
18-
"svelte-check": "^4.2.1",
17+
"svelte": "^5.36.10",
18+
"svelte-check": "^4.3.0",
1919
"tslib": "^2.8.1",
20-
"typescript": "5.4.5",
21-
"vite": "^5.4.19"
20+
"typescript": "^5.8.3",
21+
"vite": "^7.0.5"
2222
}
2323
}

‎examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<script lang="ts">
22
import { createVirtualizer } from '@tanstack/svelte-virtual'
33
4-
let virtualListEl: HTMLDivElement
4+
let virtualListEl = $state<HTMLDivElement | null>(null)
5+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
6+
scrollElement
57
6-
$: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
7-
horizontal: true,
8-
count: 10000,
9-
getScrollElement: () => virtualListEl,
10-
estimateSize: () => 100,
11-
overscan: 5,
12-
})
8+
let virtualizer = $derived(
9+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
10+
horizontal: true,
11+
count: 10000,
12+
getScrollElement: makeGetScrollElement(virtualListEl),
13+
estimateSize: () => 100,
14+
overscan: 5,
15+
}),
16+
)
1317
</script>
1418

1519
<div class="list scroll-container" bind:this={virtualListEl}>

‎examples/svelte/fixed/src/GridVirtualizerFixed.svelte‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
<script lang="ts">
22
import { createVirtualizer } from '@tanstack/svelte-virtual'
33
4-
let virtualListEl: HTMLDivElement
4+
let virtualListEl = $state<HTMLDivElement | null>(null)
5+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
6+
scrollElement
57
6-
$: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
7-
count: 10000,
8-
getScrollElement: () => virtualListEl,
9-
estimateSize: () => 35,
10-
overscan: 5,
11-
})
8+
let rowVirtualizer = $derived(
9+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
10+
count: 10000,
11+
getScrollElement: makeGetScrollElement(virtualListEl),
12+
estimateSize: () => 35,
13+
overscan: 5,
14+
}),
15+
)
1216
13-
$: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
14-
horizontal: true,
15-
count: 10000,
16-
getScrollElement: () => virtualListEl,
17-
estimateSize: () => 100,
18-
overscan: 5,
19-
})
17+
let columnVirtualizer = $derived(
18+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
19+
horizontal: true,
20+
count: 10000,
21+
getScrollElement: makeGetScrollElement(virtualListEl),
22+
estimateSize: () => 100,
23+
overscan: 5,
24+
}),
25+
)
2026
</script>
2127

2228
<div class="list scroll-container" bind:this={virtualListEl}>

‎examples/svelte/fixed/src/RowVirtualizerFixed.svelte‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<script lang="ts">
22
import { createVirtualizer } from '@tanstack/svelte-virtual'
33
4-
let virtualListEl: HTMLDivElement
4+
let virtualListEl = $state<HTMLDivElement | null>(null)
55
6-
$: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
7-
count: 10000,
8-
getScrollElement: () => virtualListEl,
9-
estimateSize: () => 35,
10-
overscan: 5,
11-
})
6+
let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
7+
scrollElement
8+
let virtualizer = $derived(
9+
createVirtualizer<HTMLDivElement, HTMLDivElement>({
10+
count: 10000,
11+
getScrollElement: makeGetScrollElement(virtualListEl),
12+
estimateSize: () => 35,
13+
overscan: 5,
14+
}),
15+
)
1216
</script>
1317

1418
<div class="list scroll-container" bind:this={virtualListEl}>

0 commit comments

Comments
 (0)