chore(svelte-virtual): update svelte examples to use svelte 5

examples/svelte/dynamic/package.json

@@ -13,12 +13,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }

examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte

@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -13,17 +13,21 @@
     .fill(true)
     .map(() => faker.lorem.sentence(randomNumber(20, 70)))
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: sentences.length,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 45,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: sentences.length,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>

examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let rowVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 
-  $: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let columnVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>

examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte

@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -15,39 +15,43 @@
 
   const count = sentences.length
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 45,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: items = $virtualizer.getVirtualItems()
+  let items = $derived($virtualizer.getVirtualItems())
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(0)
     }}
   >
     scroll to the top
   </button>
-  <span style="padding: 0 4px;" />
+  <span style="padding: 0 4px;"></span>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(count / 2)
     }}
   >
     scroll to the middle
   </button>
-  <span style="padding: 0 4px;" />
+  <span style="padding: 0 4px;"></span>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(count - 1)
     }}
   >

examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte

@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createWindowVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -15,18 +15,20 @@
 
   const count = sentences.length
 
-  $: virtualizer = createWindowVirtualizer<HTMLDivElement>({
-    count,
-    scrollMargin: virtualListEl?.offsetTop ?? 0,
-    estimateSize: () => 45,
-  })
+  let virtualizer = $derived(
+    createWindowVirtualizer<HTMLDivElement>({
+      count,
+      scrollMargin: virtualListEl?.offsetTop ?? 0,
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: items = $virtualizer.getVirtualItems()
+  let items = $derived($virtualizer.getVirtualItems())
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div>

examples/svelte/dynamic/src/main.ts

@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 

examples/svelte/fixed/package.json

@@ -12,12 +12,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }

examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>

examples/svelte/fixed/src/GridVirtualizerFixed.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let rowVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 
-  $: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let columnVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>

examples/svelte/fixed/src/RowVirtualizerFixed.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>

examples/svelte/fixed/src/main.ts

@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 

examples/svelte/infinite-scroll/package.json

@@ -13,12 +13,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }