diff --git a/eslint.config.js b/eslint.config.js
index 27000af9d1b..3e22e3274a1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -39,6 +39,7 @@ export default [
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
       'no-case-declarations': 'off',
+      'prefer-const': 'off',
     },
   },
   {
diff --git a/examples/svelte/auto-refetching/package.json b/examples/svelte/auto-refetching/package.json
index 5ad77309003..571a08fa8aa 100644
--- a/examples/svelte/auto-refetching/package.json
+++ b/examples/svelte/auto-refetching/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/auto-refetching/src/routes/+layout.svelte b/examples/svelte/auto-refetching/src/routes/+layout.svelte
index ef60a2f559e..4b170dc01ec 100644
--- a/examples/svelte/auto-refetching/src/routes/+layout.svelte
+++ b/examples/svelte/auto-refetching/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -15,7 +17,7 @@
 
 <QueryClientProvider client={queryClient}>
   <main>
-    <slot />
+    {@render children()}
   </main>
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/auto-refetching/src/routes/+page.svelte b/examples/svelte/auto-refetching/src/routes/+page.svelte
index ab5e83e17ff..40fdc0e541b 100644
--- a/examples/svelte/auto-refetching/src/routes/+page.svelte
+++ b/examples/svelte/auto-refetching/src/routes/+page.svelte
@@ -5,30 +5,30 @@
     createMutation,
   } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-  let value = ''
+  let intervalMs = $state(1000)
+  let value = $state<string>('')
 
   const client = useQueryClient()
 
   const endpoint = 'http://localhost:5173/api/data'
 
-  $: todos = createQuery<{ items: string[] }>({
+  const todos = createQuery<{ items: string[] }>(() => ({
     queryKey: ['refetch'],
     queryFn: async () => await fetch(endpoint).then((r) => r.json()),
     // Refetch the data every second
     refetchInterval: intervalMs,
-  })
+  }))
 
-  const addMutation = createMutation({
+  const addMutation = createMutation(() => ({
     mutationFn: (value: string) =>
       fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+  }))
 
-  const clearMutation = createMutation({
+  const clearMutation = createMutation(() => ({
     mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+  }))
 </script>
 
 <h1>Auto Refetch with stale-time set to 1s</h1>
@@ -49,8 +49,8 @@
           margin-left:.5rem;
           width:.75rem;
           height:.75rem; 
-          background: {$todos.isFetching ? 'green' : 'transparent'};
-          transition: {!$todos.isFetching ? 'all .3s ease' : 'none'};
+          background: {todos.isFetching ? 'green' : 'transparent'};
+          transition: {!todos.isFetching ? 'all .3s ease' : 'none'};
           border-radius: 100%;
           transform: scale(1.5)"
     ></span>
@@ -58,10 +58,10 @@
 </label>
 <h2>Todo List</h2>
 <form
-  on:submit={(e) => {
+  onsubmit={(e) => {
     e.preventDefault()
     e.stopPropagation()
-    $addMutation.mutate(value, {
+    addMutation.mutate(value, {
       onSuccess: () => (value = ''),
     })
   }}
@@ -69,26 +69,24 @@
   <input placeholder="enter something" bind:value />
 </form>
 
-{#if $todos.isPending}
+{#if todos.isPending}
   Loading...
 {/if}
-{#if $todos.error}
+{#if todos.error}
   An error has occurred:
-  {$todos.error.message}
+  {todos.error.message}
 {/if}
-{#if $todos.isSuccess}
+{#if todos.isSuccess}
   <ul>
-    {#each $todos.data.items as item}
+    {#each todos.data.items as item}
       <li>{item}</li>
     {/each}
   </ul>
   <div>
-    <button on:click={() => $clearMutation.mutate(undefined)}>
-      Clear All
-    </button>
+    <button onclick={() => clearMutation.mutate(undefined)}> Clear All </button>
   </div>
 {/if}
-{#if $todos.isFetching}
+{#if todos.isFetching}
   <div style="color:darkgreen; font-weight:700">
     'Background Updating...' : ' '
   </div>
diff --git a/examples/svelte/auto-refetching/svelte.config.js b/examples/svelte/auto-refetching/svelte.config.js
index 2dee2d78a18..d6b43b00850 100644
--- a/examples/svelte/auto-refetching/svelte.config.js
+++ b/examples/svelte/auto-refetching/svelte.config.js
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
index 3e7b63cd65c..8ba9d4bfdbd 100644
--- a/examples/svelte/basic/package.json
+++ b/examples/svelte/basic/package.json
@@ -17,8 +17,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/basic/src/lib/Post.svelte b/examples/svelte/basic/src/lib/Post.svelte
index 56472ce68fa..49469c2fb53 100644
--- a/examples/svelte/basic/src/lib/Post.svelte
+++ b/examples/svelte/basic/src/lib/Post.svelte
@@ -3,29 +3,29 @@
   import { getPostById } from './data'
   import type { Post } from './types'
 
-  export let postId: number
+  const { postId }: { postId: number } = $props()
 
-  const post = createQuery<Post>({
+  const post = createQuery<Post>(() => ({
     queryKey: ['post', postId],
     queryFn: () => getPostById(postId),
-  })
+  }))
 </script>
 
 <div>
   <div>
     <a class="button" href="/"> Back </a>
   </div>
-  {#if !postId || $post.isPending}
+  {#if !postId || post.isPending}
     <span>Loading...</span>
   {/if}
-  {#if $post.error}
-    <span>Error: {$post.error.message}</span>
+  {#if post.error}
+    <span>Error: {post.error.message}</span>
   {/if}
-  {#if $post.isSuccess}
-    <h1>{$post.data.title}</h1>
+  {#if post.isSuccess}
+    <h1>{post.data.title}</h1>
     <div>
-      <p>{$post.data.body}</p>
+      <p>{post.data.body}</p>
     </div>
-    <div>{$post.isFetching ? 'Background Updating...' : ' '}</div>
+    <div>{post.isFetching ? 'Background Updating...' : ' '}</div>
   {/if}
 </div>
diff --git a/examples/svelte/basic/src/lib/Posts.svelte b/examples/svelte/basic/src/lib/Posts.svelte
index c4f2f2c6427..e6a0851ee2d 100644
--- a/examples/svelte/basic/src/lib/Posts.svelte
+++ b/examples/svelte/basic/src/lib/Posts.svelte
@@ -9,21 +9,21 @@
   const posts = createQuery<
     { id: number; title: string; body: string }[],
     Error
-  >({
+  >(() => ({
     queryKey: ['posts', limit],
     queryFn: () => getPosts(limit),
-  })
+  }))
 </script>
 
 <div>
   <div>
-    {#if $posts.status === 'pending'}
+    {#if posts.status === 'pending'}
       <span>Loading...</span>
-    {:else if $posts.status === 'error'}
-      <span>Error: {$posts.error.message}</span>
+    {:else if posts.status === 'error'}
+      <span>Error: {posts.error.message}</span>
     {:else}
       <ul>
-        {#each $posts.data as post}
+        {#each posts.data as post}
           <article>
             <a
               href={`/${post.id}`}
@@ -38,7 +38,7 @@
           </article>
         {/each}
       </ul>
-      {#if $posts.isFetching}
+      {#if posts.isFetching}
         <div style="color:darkgreen; font-weight:700">
           Background Updating...
         </div>
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index da5d841b0bf..2cb76cd097d 100644
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/examples/svelte/basic/src/routes/+layout.svelte
@@ -6,6 +6,8 @@
   import { PersistQueryClientProvider } from '@tanstack/svelte-query-persist-client'
   import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -21,7 +23,7 @@
 
 <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
   <main>
-    <slot />
+    {@render children()}
   </main>
   <SvelteQueryDevtools />
 </PersistQueryClientProvider>
diff --git a/examples/svelte/basic/src/routes/[postId]/+page.svelte b/examples/svelte/basic/src/routes/[postId]/+page.svelte
index b68acc0bc0a..2400baac2a0 100644
--- a/examples/svelte/basic/src/routes/[postId]/+page.svelte
+++ b/examples/svelte/basic/src/routes/[postId]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import Post from '$lib/Post.svelte'
-  import type { PageData } from './$types'
 
-  export let data: PageData
+  const { data } = $props()
 </script>
 
 <Post postId={data.postId} />
diff --git a/examples/svelte/basic/svelte.config.js b/examples/svelte/basic/svelte.config.js
index 2dee2d78a18..d6b43b00850 100644
--- a/examples/svelte/basic/svelte.config.js
+++ b/examples/svelte/basic/svelte.config.js
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json
index 863f6b54bce..aa3f1cbd393 100644
--- a/examples/svelte/load-more-infinite-scroll/package.json
+++ b/examples/svelte/load-more-infinite-scroll/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/load-more-infinite-scroll/src/app.css b/examples/svelte/load-more-infinite-scroll/src/app.css
index c57658b1efe..d301f1b2a37 100644
--- a/examples/svelte/load-more-infinite-scroll/src/app.css
+++ b/examples/svelte/load-more-infinite-scroll/src/app.css
@@ -48,7 +48,7 @@ main {
   text-align: center;
 }
 
-button {
+.button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -59,11 +59,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+.button:hover {
   border-color: #646cff;
 }
-button:focus,
-button:focus-visible {
+.button:focus,
+.button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
@@ -75,7 +75,7 @@ button:focus-visible {
   a:hover {
     color: #747bff;
   }
-  button {
+  .button {
     background-color: #f9f9f9;
   }
 }
diff --git a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
index 79c602e6728..32f6e8971d7 100644
--- a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
+++ b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
@@ -6,7 +6,7 @@
   const fetchPlanets = async ({ pageParam = 1 }) =>
     await fetch(`${endPoint}/planets/?page=${pageParam}`).then((r) => r.json())
 
-  const query = createInfiniteQuery({
+  const query = createInfiniteQuery(() => ({
     queryKey: ['planets'],
     queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
     initialPageParam: 1,
@@ -20,18 +20,18 @@
       }
       return undefined
     },
-  })
+  }))
 </script>
 
-{#if $query.isPending}
+{#if query.isPending}
   Loading...
 {/if}
-{#if $query.error}
-  <span>Error: {$query.error.message}</span>
+{#if query.error}
+  <span>Error: {query.error.message}</span>
 {/if}
-{#if $query.isSuccess}
+{#if query.isSuccess}
   <div>
-    {#each $query.data.pages as { results }}
+    {#each query.data.pages as { results }}
       {#each results as planet}
         <div class="card">
           <div class="card-body">
@@ -44,12 +44,12 @@
   </div>
   <div>
     <button
-      on:click={() => $query.fetchNextPage()}
-      disabled={!$query.hasNextPage || $query.isFetchingNextPage}
+      onclick={() => query.fetchNextPage()}
+      disabled={!query.hasNextPage || query.isFetchingNextPage}
     >
-      {#if $query.isFetching}
+      {#if query.isFetching}
         Loading more...
-      {:else if $query.hasNextPage}
+      {:else if query.hasNextPage}
         Load More
       {:else}Nothing more to load{/if}
     </button>
diff --git a/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte b/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
index ef60a2f559e..4b170dc01ec 100644
--- a/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
+++ b/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -15,7 +17,7 @@
 
 <QueryClientProvider client={queryClient}>
   <main>
-    <slot />
+    {@render children()}
   </main>
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/load-more-infinite-scroll/svelte.config.js b/examples/svelte/load-more-infinite-scroll/svelte.config.js
index 0aa6cba9371..d6b43b00850 100644
--- a/examples/svelte/load-more-infinite-scroll/svelte.config.js
+++ b/examples/svelte/load-more-infinite-scroll/svelte.config.js
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/optimistic-updates/package.json b/examples/svelte/optimistic-updates/package.json
index d7b60f4bb46..5f22ba6366b 100644
--- a/examples/svelte/optimistic-updates/package.json
+++ b/examples/svelte/optimistic-updates/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/optimistic-updates/src/routes/+layout.svelte b/examples/svelte/optimistic-updates/src/routes/+layout.svelte
index ef60a2f559e..4b170dc01ec 100644
--- a/examples/svelte/optimistic-updates/src/routes/+layout.svelte
+++ b/examples/svelte/optimistic-updates/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -15,7 +17,7 @@
 
 <QueryClientProvider client={queryClient}>
   <main>
-    <slot />
+    {@render children()}
   </main>
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/optimistic-updates/src/routes/+page.svelte b/examples/svelte/optimistic-updates/src/routes/+page.svelte
index af8738ffccb..feb5d1085ca 100644
--- a/examples/svelte/optimistic-updates/src/routes/+page.svelte
+++ b/examples/svelte/optimistic-updates/src/routes/+page.svelte
@@ -16,7 +16,7 @@
     ts: number
   }
 
-  let text = ''
+  let text = $state<string>('')
 
   const client = useQueryClient()
 
@@ -36,12 +36,12 @@
       }),
     }).then((res) => res.json())
 
-  const todos = createQuery<Todos>({
+  const todos = createQuery<Todos>(() => ({
     queryKey: ['optimistic'],
     queryFn: fetchTodos,
-  })
+  }))
 
-  const addTodoMutation = createMutation({
+  const addTodoMutation = createMutation(() => ({
     mutationFn: createTodo,
     onMutate: async (newTodo: string) => {
       text = ''
@@ -74,7 +74,7 @@
     onSettled: () => {
       client.invalidateQueries({ queryKey: ['optimistic'] })
     },
-  })
+  }))
 </script>
 
 <h1>Optimistic Updates</h1>
@@ -87,36 +87,36 @@
 </p>
 
 <form
-  on:submit={(e) => {
+  onsubmit={(e) => {
     e.preventDefault()
     e.stopPropagation()
-    $addTodoMutation.mutate(text)
+    addTodoMutation.mutate(text)
   }}
 >
   <div>
     <input type="text" bind:value={text} />
-    <button disabled={$addTodoMutation.isPending}>Create</button>
+    <button disabled={addTodoMutation.isPending}>Create</button>
   </div>
 </form>
 
-{#if $todos.isPending}
+{#if todos.isPending}
   Loading...
 {/if}
-{#if $todos.error}
+{#if todos.error}
   An error has occurred:
-  {$todos.error.message}
+  {todos.error.message}
 {/if}
-{#if $todos.isSuccess}
+{#if todos.isSuccess}
   <div class="mb-4">
-    Updated At: {new Date($todos.data.ts).toLocaleTimeString()}
+    Updated At: {new Date(todos.data.ts).toLocaleTimeString()}
   </div>
   <ul>
-    {#each $todos.data.items as todo}
+    {#each todos.data.items as todo}
       <li>{todo.text}</li>
     {/each}
   </ul>
 {/if}
-{#if $todos.isFetching}
+{#if todos.isFetching}
   <div style="color:darkgreen; font-weight:700">
     'Background Updating...' : ' '
   </div>
diff --git a/examples/svelte/optimistic-updates/svelte.config.js b/examples/svelte/optimistic-updates/svelte.config.js
index 2dee2d78a18..d6b43b00850 100644
--- a/examples/svelte/optimistic-updates/svelte.config.js
+++ b/examples/svelte/optimistic-updates/svelte.config.js
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json
index b5c2b1bb051..db8249160f4 100644
--- a/examples/svelte/playground/package.json
+++ b/examples/svelte/playground/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/playground/src/lib/stores.svelte.ts b/examples/svelte/playground/src/lib/stores.svelte.ts
new file mode 100644
index 00000000000..18f0232ebbd
--- /dev/null
+++ b/examples/svelte/playground/src/lib/stores.svelte.ts
@@ -0,0 +1,37 @@
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}
+
+export const staleTime = ref(1000)
+export const gcTime = ref(3000)
+export const errorRate = ref(0.05)
+export const queryTimeMin = ref(1000)
+export const queryTimeMax = ref(2000)
+
+export const editingIndex = ref<number | null>(null)
+export const views = ref(['', 'fruit', 'grape'])
+
+let initialId = 0
+const initialList = [
+  'apple',
+  'banana',
+  'pineapple',
+  'grapefruit',
+  'dragonfruit',
+  'grapes',
+].map((d) => ({ id: initialId++, name: d, notes: 'These are some notes' }))
+
+export const list = ref(initialList)
+export const id = ref(initialId)
+
+export type Todos = typeof initialList
+export type Todo = Todos[0]
diff --git a/examples/svelte/playground/src/lib/stores.ts b/examples/svelte/playground/src/lib/stores.ts
deleted file mode 100644
index 2dcdd669a62..00000000000
--- a/examples/svelte/playground/src/lib/stores.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { writable } from 'svelte/store'
-
-export const staleTime = writable(1000)
-export const gcTime = writable(3000)
-export const errorRate = writable(0.05)
-export const queryTimeMin = writable(1000)
-export const queryTimeMax = writable(2000)
-
-export const editingIndex = writable<number | null>(null)
-export const views = writable(['', 'fruit', 'grape'])
-
-let initialId = 0
-const initialList = [
-  'apple',
-  'banana',
-  'pineapple',
-  'grapefruit',
-  'dragonfruit',
-  'grapes',
-].map((d) => ({ id: initialId++, name: d, notes: 'These are some notes' }))
-
-export const list = writable(initialList)
-export const id = writable(initialId)
-
-export type Todos = typeof initialList
-export type Todo = Todos[0]
diff --git a/examples/svelte/playground/src/routes/+layout.svelte b/examples/svelte/playground/src/routes/+layout.svelte
index 1b9267032c8..76c2d0d277d 100644
--- a/examples/svelte/playground/src/routes/+layout.svelte
+++ b/examples/svelte/playground/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -19,7 +21,7 @@
 
 <QueryClientProvider client={queryClient}>
   <div id="app">
-    <slot />
+    {@render children()}
   </div>
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/playground/src/routes/+page.svelte b/examples/svelte/playground/src/routes/+page.svelte
index 4830d01eb3b..cec4a24208f 100644
--- a/examples/svelte/playground/src/routes/+page.svelte
+++ b/examples/svelte/playground/src/routes/+page.svelte
@@ -6,15 +6,15 @@
     errorRate,
     queryTimeMin,
     queryTimeMax,
-  } from '../lib/stores'
+  } from '../lib/stores.svelte'
   import App from './App.svelte'
 
   const queryClient = useQueryClient()
 
   queryClient.setDefaultOptions({
     queries: {
-      staleTime: $staleTime,
-      gcTime: $gcTime,
+      staleTime: staleTime.value,
+      gcTime: gcTime.value,
     },
   })
 </script>
@@ -29,7 +29,7 @@
     type="number"
     min="0"
     step="1000"
-    bind:value={$staleTime}
+    bind:value={staleTime.value}
     style="width: 100px"
   />
 </div>
@@ -39,7 +39,7 @@
     type="number"
     min="0"
     step="1000"
-    bind:value={$gcTime}
+    bind:value={gcTime.value}
     style="width: 100px"
   />
 </div>
@@ -51,7 +51,7 @@
     min="0"
     max="1"
     step=".05"
-    bind:value={$errorRate}
+    bind:value={errorRate.value}
     style="width: 100px"
   />
 </div>
@@ -61,7 +61,7 @@
     type="number"
     min="1"
     step="500"
-    bind:value={$queryTimeMin}
+    bind:value={queryTimeMin.value}
     style="width: 100px"
   />{' '}
 </div>
@@ -71,7 +71,7 @@
     type="number"
     min="1"
     step="500"
-    bind:value={$queryTimeMax}
+    bind:value={queryTimeMax.value}
     style="width: 100px"
   />
 </div>
diff --git a/examples/svelte/playground/src/routes/AddTodo.svelte b/examples/svelte/playground/src/routes/AddTodo.svelte
index 5fe8fc4dcd1..514e4b8ee78 100644
--- a/examples/svelte/playground/src/routes/AddTodo.svelte
+++ b/examples/svelte/playground/src/routes/AddTodo.svelte
@@ -1,55 +1,68 @@
 <script lang="ts">
   import { createMutation, useQueryClient } from '@tanstack/svelte-query'
-  import { errorRate, queryTimeMin, queryTimeMax, list, id } from '$lib/stores'
-  import type { Todo } from '$lib/stores'
+  import {
+    errorRate,
+    queryTimeMin,
+    queryTimeMax,
+    list,
+    id,
+  } from '$lib/stores.svelte'
+  import type { Todo } from '$lib/stores.svelte'
 
   const queryClient = useQueryClient()
 
-  let name = ''
+  let name = $state('')
 
   const postTodo = async ({ name, notes }: Omit<Todo, 'id'>) => {
     console.info('postTodo', { name, notes })
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
-          if (Math.random() < $errorRate) {
+          if (Math.random() < errorRate.value) {
             return reject(
-              new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2)),
+              new Error(
+                JSON.stringify(
+                  { postTodo: { name: $state.snapshot(name), notes } },
+                  null,
+                  2,
+                ),
+              ),
             )
           }
-          const todo = { name, notes, id: $id }
-          id.set($id + 1)
-          list.set([...$list, todo])
+          const todo = { name, notes, id: id.value }
+          id.value = id.value + 1
+          list.value = [...list.value, todo]
           resolve(todo)
         },
-        $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin),
+        queryTimeMin.value +
+          Math.random() * (queryTimeMax.value - queryTimeMin.value),
       )
     })
   }
 
-  const addMutation = createMutation({
+  const addMutation = createMutation(() => ({
     mutationFn: postTodo,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['todos'] })
     },
-  })
+  }))
 </script>
 
 <div>
-  <input bind:value={name} disabled={$addMutation.status === 'pending'} />
+  <input bind:value={name} disabled={addMutation.status === 'pending'} />
 
   <button
-    on:click={() => $addMutation.mutate({ name, notes: name })}
-    disabled={$addMutation.status === 'pending' || !name}
+    onclick={() => addMutation.mutate({ name, notes: name })}
+    disabled={addMutation.status === 'pending' || !name}
   >
     Add Todo
   </button>
 
   <div>
-    {$addMutation.status === 'pending'
+    {addMutation.status === 'pending'
       ? 'Saving...'
-      : $addMutation.status === 'error'
-        ? $addMutation.error.message
+      : addMutation.status === 'error'
+        ? addMutation.error.message
         : 'Saved!'}
   </div>
 </div>
diff --git a/examples/svelte/playground/src/routes/App.svelte b/examples/svelte/playground/src/routes/App.svelte
index 5a72f454c0d..04ddbb9b40d 100644
--- a/examples/svelte/playground/src/routes/App.svelte
+++ b/examples/svelte/playground/src/routes/App.svelte
@@ -3,21 +3,21 @@
   import TodosList from './TodosList.svelte'
   import EditTodo from './EditTodo.svelte'
   import AddTodo from './AddTodo.svelte'
-  import { views, editingIndex } from '../lib/stores'
+  import { views, editingIndex } from '../lib/stores.svelte'
 
   const queryClient = useQueryClient()
 </script>
 
 <div>
   <div>
-    <button on:click={() => queryClient.invalidateQueries()}>
+    <button onclick={() => queryClient.invalidateQueries()}>
       Force Refetch All
     </button>
   </div>
   <br />
   <hr />
 
-  {#each $views as view}
+  {#each views.value as view}
     <div>
       <TodosList initialFilter={view} />
       <br />
@@ -25,15 +25,15 @@
   {/each}
 
   <button
-    on:click={() => {
-      views.set([...$views, ''])
+    onclick={() => {
+      views.value = [...views.value, '']
     }}
   >
     Add Filter List
   </button>
   <hr />
 
-  {#if $editingIndex !== null}
+  {#if editingIndex.value !== null}
     <EditTodo />
     <hr />
   {/if}
diff --git a/examples/svelte/playground/src/routes/EditTodo.svelte b/examples/svelte/playground/src/routes/EditTodo.svelte
index 40b2208e60e..d38c2322218 100644
--- a/examples/svelte/playground/src/routes/EditTodo.svelte
+++ b/examples/svelte/playground/src/routes/EditTodo.svelte
@@ -10,23 +10,21 @@
     queryTimeMax,
     list,
     editingIndex,
-  } from '$lib/stores'
-  import { derived } from 'svelte/store'
-  import type { Todo } from '$lib/stores'
+  } from '$lib/stores.svelte'
+  import type { Todo } from '$lib/stores.svelte'
 
   const queryClient = useQueryClient()
 
   const fetchTodoById = async ({ id }: { id: number }): Promise<Todo> => {
-    console.info('fetchTodoById', { id })
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
-          if (Math.random() < $errorRate) {
+          if (Math.random() < errorRate.value) {
             return reject(
               new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
             )
           }
-          const todo = $list.find((d) => d.id === id)
+          const todo = $state.snapshot(list.value.find((d) => d.id === id))
           if (!todo) {
             return reject(
               new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
@@ -34,7 +32,8 @@
           }
           resolve(todo)
         },
-        $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin),
+        queryTimeMin.value +
+          Math.random() * (queryTimeMax.value - queryTimeMin.value),
       )
     })
   }
@@ -44,7 +43,7 @@
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
-          if (Math.random() < $errorRate) {
+          if (Math.random() < errorRate.value) {
             return reject(
               new Error(JSON.stringify({ patchTodo: todo }, null, 2)),
             )
@@ -54,60 +53,58 @@
               new Error(JSON.stringify({ patchTodo: todo }, null, 2)),
             )
           }
-          list.set(
-            $list.map((d) => {
-              if (d.id === todo.id) {
-                return todo
-              }
-              return d
-            }),
-          )
+          list.value = list.value.map((d) => {
+            if (d.id === todo.id) {
+              return $state.snapshot(todo)
+            }
+            return d
+          })
           resolve(todo)
         },
-        $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin),
+        queryTimeMin.value +
+          Math.random() * (queryTimeMax.value - queryTimeMin.value),
       )
     })
   }
 
-  const query = createQuery(
-    derived(editingIndex, ($editingIndex) => ({
-      queryKey: ['todo', { id: $editingIndex }],
-      queryFn: () => fetchTodoById({ id: $editingIndex || 0 }),
-      enabled: $editingIndex !== null,
-    })),
-  )
+  const query = createQuery(() => ({
+    queryKey: ['todo', { id: editingIndex.value }],
+    queryFn: () => fetchTodoById({ id: editingIndex.value || 0 }),
+    enabled: editingIndex.value !== null,
+  }))
 
-  const saveMutation = createMutation({
+  const saveMutation = createMutation(() => ({
     mutationFn: patchTodo,
     onSuccess: (data) => {
       // Update `todos` and the individual todo queries when this mutation succeeds
       queryClient.invalidateQueries({ queryKey: ['todos'] })
       queryClient.setQueryData(['todo', { id: editingIndex }], data)
     },
-  })
+  }))
 
-  $: todo = $query.data
+  const todo = $derived(query.data)
 
   const onSave = () => {
-    $saveMutation.mutate(todo)
+    saveMutation.mutate(todo)
   }
 
-  $: disableEditSave =
-    $query.status === 'pending' || $saveMutation.status === 'pending'
+  const disableEditSave = $derived(
+    query.status === 'pending' || saveMutation.status === 'pending',
+  )
 </script>
 
 <div>
   <div>
-    {#if $query.data}
-      <button on:click={() => editingIndex.set(null)}>Back</button> Editing Todo
-      "{$query.data.name}" (#{$editingIndex})
+    {#if query.data}
+      <button onclick={() => (editingIndex.value = null)}>Back</button> Editing
+      Todo "{query.data.name}" (#{editingIndex.value})
     {/if}
   </div>
-  {#if $query.status === 'pending'}
-    <span>Loading... (Attempt: {$query.failureCount + 1})</span>
-  {:else if $query.error}
+  {#if query.status === 'pending'}
+    <span>Loading... (Attempt: {query.failureCount + 1})</span>
+  {:else if query.error}
     <span>
-      Error! <button on:click={() => $query.refetch()}>Retry</button>
+      Error! <button onclick={() => query.refetch()}>Retry</button>
     </span>
   {:else if todo}
     <label>
@@ -119,19 +116,19 @@
       <input bind:value={todo.notes} disabled={disableEditSave} />
     </label>
     <div>
-      <button on:click={onSave} disabled={disableEditSave}> Save </button>
+      <button onclick={onSave} disabled={disableEditSave}> Save </button>
     </div>
     <div>
-      {$saveMutation.status === 'pending'
+      {saveMutation.status === 'pending'
         ? 'Saving...'
-        : $saveMutation.status === 'error'
-          ? $saveMutation.error.message
+        : saveMutation.status === 'error'
+          ? saveMutation.error.message
           : 'Saved!'}
     </div>
     <div>
-      {#if $query.isFetching}
+      {#if query.isFetching}
         <span>
-          Background Refreshing... (Attempt: {$query.failureCount + 1})
+          Background Refreshing... (Attempt: {query.failureCount + 1})
         </span>
       {:else}
         <span>&nbsp;</span>
diff --git a/examples/svelte/playground/src/routes/TodosList.svelte b/examples/svelte/playground/src/routes/TodosList.svelte
index 586af38e35d..a7d6f392cc1 100644
--- a/examples/svelte/playground/src/routes/TodosList.svelte
+++ b/examples/svelte/playground/src/routes/TodosList.svelte
@@ -6,68 +6,66 @@
     queryTimeMax,
     list,
     editingIndex,
-  } from '$lib/stores'
-  import { derived, writable } from 'svelte/store'
-  import type { Todos } from '$lib/stores'
+  } from '$lib/stores.svelte'
+  import type { Todos } from '$lib/stores.svelte'
 
-  export let initialFilter: string
+  let { initialFilter }: { initialFilter: string } = $props()
 
-  let filter = writable(initialFilter)
+  let filter = $state(initialFilter)
 
   const fetchTodos = async ({ filter }: { filter: string }): Promise<Todos> => {
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
-          if (Math.random() < $errorRate) {
+          if (Math.random() < errorRate.value) {
             return reject(
               new Error(JSON.stringify({ fetchTodos: { filter } }, null, 2)),
             )
           }
-          resolve($list.filter((d) => d.name.includes(filter)))
+          resolve(list.value.filter((d) => d.name.includes(filter)))
         },
-        $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin),
+        queryTimeMin.value +
+          Math.random() * (queryTimeMax.value - queryTimeMin.value),
       )
     })
   }
 
-  const query = createQuery(
-    derived(filter, ($filter) => ({
-      queryKey: ['todos', { filter: $filter }],
-      queryFn: () => fetchTodos({ filter: $filter }),
-    })),
-  )
+  const query = createQuery(() => ({
+    queryKey: ['todos', { filter: filter }],
+    queryFn: () => fetchTodos({ filter: filter }),
+  }))
 </script>
 
 <div>
   <label>
     Filter:{' '}
-    <input bind:value={$filter} />
+    <input bind:value={filter} />
   </label>
 </div>
 
-{#if $query.status === 'pending'}
-  <span>Loading... (Attempt: {$query.failureCount + 1})</span>
-{:else if $query.status === 'error'}
+{#if query.status === 'pending'}
+  <span>Loading... (Attempt: {query.failureCount + 1})</span>
+{:else if query.status === 'error'}
   <span>
-    Error: {$query.error.message}
+    Error: {query.error.message}
     <br />
-    <button on:click={() => $query.refetch()}>Retry</button>
+    <button onclick={() => query.refetch()}>Retry</button>
   </span>
 {:else}
   <ul>
-    {#if $query.data}
-      {#each $query.data as todo}
+    {#if query.data}
+      {#each query.data as todo}
         <li>
           {todo.name}{' '}
-          <button on:click={() => editingIndex.set(todo.id)}> Edit </button>
+          <button onclick={() => (editingIndex.value = todo.id)}> Edit </button>
         </li>
       {/each}
     {/if}
   </ul>
   <div>
-    {#if $query.isFetching}
+    {#if query.isFetching}
       <span>
-        Background Refreshing... (Attempt: {$query.failureCount + 1})
+        Background Refreshing... (Attempt: {query.failureCount + 1})
       </span>
     {:else}
       <span>&nbsp;</span>
diff --git a/examples/svelte/playground/svelte.config.js b/examples/svelte/playground/svelte.config.js
index a52aed3a7b5..d6b43b00850 100644
--- a/examples/svelte/playground/svelte.config.js
+++ b/examples/svelte/playground/svelte.config.js
@@ -4,10 +4,12 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json
index 2933367ca5f..8561aacb5a2 100644
--- a/examples/svelte/simple/package.json
+++ b/examples/svelte/simple/package.json
@@ -13,9 +13,9 @@
     "@tanstack/svelte-query-devtools": "^5.52.3"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/simple/src/lib/Simple.svelte b/examples/svelte/simple/src/lib/Simple.svelte
index 6b044dc3214..a467e91393f 100644
--- a/examples/svelte/simple/src/lib/Simple.svelte
+++ b/examples/svelte/simple/src/lib/Simple.svelte
@@ -9,32 +9,32 @@
     forks_count: number
   }
 
-  const query = createQuery<Repo>({
+  const query = createQuery<Repo>(() => ({
     queryKey: ['repoData'],
     queryFn: async () =>
       await fetch('https://api.github.com/repos/TanStack/query').then((r) =>
         r.json(),
       ),
-  })
+  }))
 </script>
 
 <h1>Simple</h1>
 <div class="my-4">
   <div>
-    {#if $query.isPending}
+    {#if query.isPending}
       Loading...
     {/if}
-    {#if $query.error}
+    {#if query.error}
       An error has occurred:
-      {$query.error.message}
+      {query.error.message}
     {/if}
-    {#if $query.isSuccess}
+    {#if query.isSuccess}
       <div>
-        <h1>{$query.data.full_name}</h1>
-        <p>{$query.data.description}</p>
-        <strong>👀 {$query.data.subscribers_count}</strong>{' '}
-        <strong>✨ {$query.data.stargazers_count}</strong>{' '}
-        <strong>🍴 {$query.data.forks_count}</strong>
+        <h1>{query.data.full_name}</h1>
+        <p>{query.data.description}</p>
+        <strong>👀 {query.data.subscribers_count}</strong>{' '}
+        <strong>✨ {query.data.stargazers_count}</strong>{' '}
+        <strong>🍴 {query.data.forks_count}</strong>
       </div>
     {/if}
   </div>
diff --git a/examples/svelte/simple/src/main.ts b/examples/svelte/simple/src/main.ts
index 7ad46094a0a..eeb0a0bcec3 100644
--- a/examples/svelte/simple/src/main.ts
+++ b/examples/svelte/simple/src/main.ts
@@ -1,7 +1,8 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.querySelector('#app')!,
 })
 
diff --git a/examples/svelte/simple/svelte.config.js b/examples/svelte/simple/svelte.config.js
index ec6a224d761..64c513012f8 100644
--- a/examples/svelte/simple/svelte.config.js
+++ b/examples/svelte/simple/svelte.config.js
@@ -1,7 +1,8 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 export default {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
+  compilerOptions: {
+    runes: true,
+  },
 }
diff --git a/examples/svelte/ssr/package.json b/examples/svelte/ssr/package.json
index 9a239bb2257..1e02435236c 100644
--- a/examples/svelte/ssr/package.json
+++ b/examples/svelte/ssr/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.5"
diff --git a/examples/svelte/ssr/src/lib/Post.svelte b/examples/svelte/ssr/src/lib/Post.svelte
index 0de658b6dd3..10b4df1949e 100644
--- a/examples/svelte/ssr/src/lib/Post.svelte
+++ b/examples/svelte/ssr/src/lib/Post.svelte
@@ -3,29 +3,29 @@
   import { api } from './api'
   import type { Post } from './types'
 
-  export let postId: number
+  const { postId }: { postId: number } = $props()
 
-  const post = createQuery<Post>({
+  const post = createQuery<Post>(() => ({
     queryKey: ['post', postId],
     queryFn: () => api().getPostById(postId),
-  })
+  }))
 </script>
 
 <div>
   <div>
     <a class="button" href="/"> Back </a>
   </div>
-  {#if !postId || $post.isPending}
+  {#if !postId || post.isPending}
     <span>Loading...</span>
   {/if}
-  {#if $post.error}
-    <span>Error: {$post.error.message}</span>
+  {#if post.error}
+    <span>Error: {post.error.message}</span>
   {/if}
-  {#if $post.isSuccess}
-    <h1>{$post.data.title}</h1>
+  {#if post.isSuccess}
+    <h1>{post.data.title}</h1>
     <div>
-      <p>{$post.data.body}</p>
+      <p>{post.data.body}</p>
     </div>
-    <div>{$post.isFetching ? 'Background Updating...' : ' '}</div>
+    <div>{post.isFetching ? 'Background Updating...' : ' '}</div>
   {/if}
 </div>
diff --git a/examples/svelte/ssr/src/lib/Posts.svelte b/examples/svelte/ssr/src/lib/Posts.svelte
index 7457dfd49b8..7f7065e8137 100644
--- a/examples/svelte/ssr/src/lib/Posts.svelte
+++ b/examples/svelte/ssr/src/lib/Posts.svelte
@@ -4,26 +4,26 @@
 
   const client = useQueryClient()
 
-  let limit = 10
+  const limit = 10
 
   const posts = createQuery<
     { id: number; title: string; body: string }[],
     Error
-  >({
+  >(() => ({
     queryKey: ['posts', limit],
     queryFn: () => api().getPosts(limit),
-  })
+  }))
 </script>
 
 <div>
   <div>
-    {#if $posts.status === 'pending'}
+    {#if posts.status === 'pending'}
       <span>Loading...</span>
-    {:else if $posts.status === 'error'}
-      <span>Error: {$posts.error.message}</span>
+    {:else if posts.status === 'error'}
+      <span>Error: {posts.error.message}</span>
     {:else}
       <ul>
-        {#each $posts.data as post}
+        {#each posts.data as post}
           <article>
             <a
               href={`/${post.id}`}
@@ -38,7 +38,7 @@
           </article>
         {/each}
       </ul>
-      {#if $posts.isFetching}
+      {#if posts.isFetching}
         <div style="color:darkgreen; font-weight:700">
           Background Updating...
         </div>
diff --git a/examples/svelte/ssr/src/routes/+layout.svelte b/examples/svelte/ssr/src/routes/+layout.svelte
index d639174e3f8..0b024478534 100644
--- a/examples/svelte/ssr/src/routes/+layout.svelte
+++ b/examples/svelte/ssr/src/routes/+layout.svelte
@@ -2,14 +2,13 @@
   import '../app.css'
   import { QueryClientProvider } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
-  import type { PageData } from './$types'
 
-  export let data: PageData
+  const { data, children } = $props()
 </script>
 
 <QueryClientProvider client={data.queryClient}>
   <main>
-    <slot />
+    {@render children()}
   </main>
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/ssr/src/routes/+layout.ts b/examples/svelte/ssr/src/routes/+layout.ts
index 0d38c029197..5104825207f 100644
--- a/examples/svelte/ssr/src/routes/+layout.ts
+++ b/examples/svelte/ssr/src/routes/+layout.ts
@@ -2,7 +2,7 @@ import { browser } from '$app/environment'
 import { QueryClient } from '@tanstack/svelte-query'
 import type { LayoutLoad } from './$types'
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
diff --git a/examples/svelte/ssr/src/routes/[postId]/+page.svelte b/examples/svelte/ssr/src/routes/[postId]/+page.svelte
index b68acc0bc0a..2400baac2a0 100644
--- a/examples/svelte/ssr/src/routes/[postId]/+page.svelte
+++ b/examples/svelte/ssr/src/routes/[postId]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import Post from '$lib/Post.svelte'
-  import type { PageData } from './$types'
 
-  export let data: PageData
+  const { data } = $props()
 </script>
 
 <Post postId={data.postId} />
diff --git a/examples/svelte/ssr/svelte.config.js b/examples/svelte/ssr/svelte.config.js
index 2dee2d78a18..d6b43b00850 100644
--- a/examples/svelte/ssr/svelte.config.js
+++ b/examples/svelte/ssr/svelte.config.js
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json
index 014eadb781d..f7cad71cecb 100644
--- a/examples/svelte/star-wars/package.json
+++ b/examples/svelte/star-wars/package.json
@@ -15,10 +15,10 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.40",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4",
     "tailwindcss": "^3.4.7",
     "typescript": "5.3.3",
diff --git a/examples/svelte/star-wars/src/routes/+layout.svelte b/examples/svelte/star-wars/src/routes/+layout.svelte
index d11124d6fe6..5f2bf488e95 100644
--- a/examples/svelte/star-wars/src/routes/+layout.svelte
+++ b/examples/svelte/star-wars/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
+  const { children } = $props()
+
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -25,6 +27,6 @@
     <a href="/films">Films</a>
     <a href="/characters">Characters</a>
   </nav>
-  <slot />
+  {@render children()}
   <SvelteQueryDevtools />
 </QueryClientProvider>
diff --git a/examples/svelte/star-wars/src/routes/characters/+page.svelte b/examples/svelte/star-wars/src/routes/characters/+page.svelte
index 0fef65bd7a1..7c59efd1082 100644
--- a/examples/svelte/star-wars/src/routes/characters/+page.svelte
+++ b/examples/svelte/star-wars/src/routes/characters/+page.svelte
@@ -6,24 +6,24 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['characters'],
     queryFn: getCharacters,
-  })
+  }))
 </script>
 
-{#if $query.status === 'pending'}
+{#if query.status === 'pending'}
   <p>Loading...</p>
 {/if}
 
-{#if $query.status === 'error'}
+{#if query.status === 'error'}
   <p>Error :(</p>
 {/if}
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <div>
     <h2 class="text-4xl">Characters</h2>
-    {#each $query.data.results as person}
+    {#each query.data.results as person}
       {@const personUrlParts = person.url.split('/').filter(Boolean)}
       {@const personId = personUrlParts[personUrlParts.length - 1]}
       <article>
diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte
index 6743ccbcb5f..3298c72c5aa 100644
--- a/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte
+++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte
@@ -2,9 +2,8 @@
   import { createQuery } from '@tanstack/svelte-query'
   import Homeworld from './Homeworld.svelte'
   import Film from './Film.svelte'
-  import type { PageData } from './$types'
 
-  export let data: PageData
+  let { data } = $props()
 
   const getCharacter = async () => {
     const res = await fetch(
@@ -13,25 +12,25 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['character', data.params.characterId],
     queryFn: getCharacter,
-  })
+  }))
 </script>
 
-{#if $query.status === 'pending'}
+{#if query.status === 'pending'}
   <p>Loading...</p>
 {/if}
 
-{#if $query.status === 'error'}
+{#if query.status === 'error'}
   <p>Error :(</p>
 {/if}
 
-{#if $query.status === 'success'}
-  {@const homeworldUrlParts = $query.data.homeworld.split('/').filter(Boolean)}
+{#if query.status === 'success'}
+  {@const homeworldUrlParts = query.data.homeworld.split('/').filter(Boolean)}
   {@const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1]}
   <div>
-    <h2 class="text-4xl">{$query.data.name}</h2>
+    <h2 class="text-4xl">{query.data.name}</h2>
     <table>
       <thead>
         <tr>
@@ -42,23 +41,23 @@
       <tbody>
         <tr>
           <td>Born</td>
-          <td>{$query.data.birth_year}</td>
+          <td>{query.data.birth_year}</td>
         </tr>
         <tr>
           <td>Eyes</td>
-          <td>{$query.data.eye_color}</td>
+          <td>{query.data.eye_color}</td>
         </tr>
         <tr>
           <td>Hair</td>
-          <td>{$query.data.hair_color}</td>
+          <td>{query.data.hair_color}</td>
         </tr>
         <tr>
           <td>Height</td>
-          <td>{$query.data.height}</td>
+          <td>{query.data.height}</td>
         </tr>
         <tr>
           <td>Mass</td>
-          <td>{$query.data.mass}</td>
+          <td>{query.data.mass}</td>
         </tr>
         <tr>
           <td>Homeworld</td>
@@ -68,7 +67,7 @@
     </table>
     <br />
     <h4 class="text-2xl">Films</h4>
-    {#each $query.data.films as film}
+    {#each query.data.films as film}
       {@const filmUrlParts = film.split('/').filter(Boolean)}
       {@const filmId = filmUrlParts[filmUrlParts.length - 1]}
       <Film {filmId} />
diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte
index 7c0210d8d5d..f9c7aba727c 100644
--- a/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte
+++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  export let filmId: string
+  let { filmId }: { filmId: string } = $props()
 
   const getFilm = async () => {
     const res = await fetch(`https://swapi.dev/api/films/${filmId}/`)
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['film', filmId],
     queryFn: getFilm,
-  })
+  }))
 </script>
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <article>
     <a href={`/films/${filmId}`}>
-      <h6 class="text-lg">{$query.data.episode_id}. {$query.data.title}</h6>
+      <h6 class="text-lg">{query.data.episode_id}. {query.data.title}</h6>
     </a>
   </article>
 {/if}
diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte
index d931b8cc192..bde4c4cadaf 100644
--- a/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte
+++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  export let homeworldId: string
+  let { homeworldId }: { homeworldId: string } = $props()
 
   const getHomeworld = async () => {
     const res = await fetch(`https://swapi.dev/api/planets/${homeworldId}/`)
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['homeworld', homeworldId],
     queryFn: getHomeworld,
-  })
+  }))
 </script>
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <span>
-    {$query.data.name}
+    {query.data.name}
   </span>
 {/if}
diff --git a/examples/svelte/star-wars/src/routes/films/+page.svelte b/examples/svelte/star-wars/src/routes/films/+page.svelte
index adb251e0d23..4fc29c6f505 100644
--- a/examples/svelte/star-wars/src/routes/films/+page.svelte
+++ b/examples/svelte/star-wars/src/routes/films/+page.svelte
@@ -6,24 +6,24 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['films'],
     queryFn: getFilms,
-  })
+  }))
 </script>
 
-{#if $query.status === 'pending'}
+{#if query.status === 'pending'}
   <p>Loading...</p>
 {/if}
 
-{#if $query.status === 'error'}
+{#if query.status === 'error'}
   <p>Error :(</p>
 {/if}
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <div>
     <h2 class="text-4xl">Films</h2>
-    {#each $query.data.results as film}
+    {#each query.data.results as film}
       {@const filmUrlParts = film.url.split('/').filter(Boolean)}
       {@const filmId = filmUrlParts[filmUrlParts.length - 1]}
       <article>
diff --git a/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte b/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte
index 5342487a6ee..84f1abffe94 100644
--- a/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte
+++ b/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
   import Character from './Character.svelte'
-  import type { PageData } from './$types'
 
-  export let data: PageData
+  let { data } = $props()
 
   const getFilm = async () => {
     const res = await fetch(
@@ -12,27 +11,27 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['film', data.params.filmId],
     queryFn: getFilm,
-  })
+  }))
 </script>
 
-{#if $query.status === 'pending'}
+{#if query.status === 'pending'}
   <p>Loading...</p>
 {/if}
 
-{#if $query.status === 'error'}
+{#if query.status === 'error'}
   <p>Error :(</p>
 {/if}
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <div>
-    <h2 class="text-4xl">{$query.data.title}</h2>
-    <p>{$query.data.opening_crawl}</p>
+    <h2 class="text-4xl">{query.data.title}</h2>
+    <p>{query.data.opening_crawl}</p>
     <br />
     <h4 class="text-2xl">Characters</h4>
-    {#each $query.data.characters as character}
+    {#each query.data.characters as character}
       {@const characterUrlParts = character.split('/').filter(Boolean)}
       {@const characterId = characterUrlParts[characterUrlParts.length - 1]}
       <Character {characterId} />
diff --git a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
index b4827ccdf90..2b1a0ba4c96 100644
--- a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
+++ b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  export let characterId: string
+  let { characterId }: { characterId: string } = $props()
 
   const getCharacter = async () => {
     const res = await fetch(`https://swapi.dev/api/people/${characterId}/`)
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['character', characterId],
     queryFn: getCharacter,
-  })
+  }))
 </script>
 
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
   <article>
     <a href={`/characters/${characterId}`}>
-      <h6 class="text-lg">{$query.data.name}</h6>
+      <h6 class="text-lg">{query.data.name}</h6>
     </a>
   </article>
 {/if}
diff --git a/examples/svelte/star-wars/svelte.config.js b/examples/svelte/star-wars/svelte.config.js
index a52aed3a7b5..d6b43b00850 100644
--- a/examples/svelte/star-wars/svelte.config.js
+++ b/examples/svelte/star-wars/svelte.config.js
@@ -4,10 +4,12 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config
diff --git a/integrations/svelte-vite/package.json b/integrations/svelte-vite/package.json
index c8c9e3975ec..b9e89dd07cf 100644
--- a/integrations/svelte-vite/package.json
+++ b/integrations/svelte-vite/package.json
@@ -6,10 +6,10 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "@tanstack/svelte-query": "workspace:*",
     "@tanstack/svelte-query-devtools": "workspace:*",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "vite": "^5.3.5"
   }
 }
diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json
index 7ebad0e5212..9eba58eca16 100644
--- a/packages/svelte-query-devtools/package.json
+++ b/packages/svelte-query-devtools/package.json
@@ -43,14 +43,14 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "@tanstack/svelte-query": "workspace:*",
     "eslint-plugin-svelte": "^2.43.0",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4"
   },
   "peerDependencies": {
     "@tanstack/svelte-query": "workspace:^",
-    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+    "svelte": "^5.0.0-next.204"
   }
 }
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte
index 38480043254..f83e6330775 100644
--- a/packages/svelte-query-devtools/src/Devtools.svelte
+++ b/packages/svelte-query-devtools/src/Devtools.svelte
@@ -10,13 +10,50 @@
     TanstackQueryDevtools,
   } from '@tanstack/query-devtools'
 
-  export let initialIsOpen = false
-  export let buttonPosition: DevtoolsButtonPosition = 'bottom-right'
-  export let position: DevtoolsPosition = 'bottom'
-  export let client: QueryClient = useQueryClient()
-  export let errorTypes: Array<DevtoolsErrorType> = []
-  export let styleNonce: string | undefined = undefined
-  export let shadowDOMTarget: ShadowRoot | undefined = undefined
+  interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean
+    /**
+     * The position of the TanStack Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition
+    /**
+     * The position of the TanStack Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot
+  }
+
+  let {
+    initialIsOpen = false,
+    buttonPosition = 'bottom-right',
+    position = 'bottom',
+    client = useQueryClient(),
+    errorTypes = [],
+    styleNonce = undefined,
+    shadowDOMTarget = undefined,
+  }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
   let devtools: TanstackQueryDevtools | undefined
@@ -41,20 +78,24 @@
 
         devtools.mount(ref)
       })
+      return () => devtools?.unmount()
+    })
 
-      return () => {
-        devtools?.unmount()
-      }
+    $effect(() => {
+      devtools?.setButtonPosition(buttonPosition)
     })
-  }
 
-  $: {
-    if (devtools) {
-      devtools.setButtonPosition(buttonPosition)
-      devtools.setPosition(position)
-      devtools.setInitialIsOpen(initialIsOpen)
-      devtools.setErrorTypes(errorTypes)
-    }
+    $effect(() => {
+      devtools?.setPosition(position)
+    })
+
+    $effect(() => {
+      devtools?.setInitialIsOpen(initialIsOpen)
+    })
+
+    $effect(() => {
+      devtools?.setErrorTypes(errorTypes)
+    })
   }
 </script>
 
diff --git a/packages/svelte-query-persist-client/eslint.config.js b/packages/svelte-query-persist-client/eslint.config.js
index d0e37929b08..1d0ce17d526 100644
--- a/packages/svelte-query-persist-client/eslint.config.js
+++ b/packages/svelte-query-persist-client/eslint.config.js
@@ -10,6 +10,7 @@ export default [
     rules: {
       'svelte/block-lang': ['error', { script: ['ts'] }],
       'svelte/no-svelte-internal': 'error',
+      'svelte/no-unused-svelte-ignore': 'off',
       'svelte/valid-compile': 'off',
     },
   },
diff --git a/packages/svelte-query-persist-client/package.json b/packages/svelte-query-persist-client/package.json
index f1b9f9397b8..2be92eb88b9 100644
--- a/packages/svelte-query-persist-client/package.json
+++ b/packages/svelte-query-persist-client/package.json
@@ -45,15 +45,15 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "@tanstack/svelte-query": "workspace:*",
     "@testing-library/svelte": "^5.2.1",
     "eslint-plugin-svelte": "^2.43.0",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4"
   },
   "peerDependencies": {
     "@tanstack/svelte-query": "workspace:^",
-    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+    "svelte": "^5.0.0-next.204"
   }
 }
diff --git a/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte b/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
index 5f5e04ada71..35482d9fcc6 100644
--- a/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
+++ b/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
@@ -1,43 +1,55 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte'
-  import { persistQueryClient } from '@tanstack/query-persist-client-core'
+  import {
+    persistQueryClientRestore,
+    persistQueryClientSubscribe,
+  } from '@tanstack/query-persist-client-core'
   import {
     QueryClientProvider,
     setIsRestoringContext,
   } from '@tanstack/svelte-query'
-  import { writable } from 'svelte/store'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
-
-  export let client: QueryClient
-  export let onSuccess: () => Promise<unknown> | unknown = () => undefined
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-
-  const isRestoring = writable(true)
-  setIsRestoringContext(isRestoring)
-  $: {
-    let isStale = false
-    isRestoring.set(true)
-    const [unsubscribe, promise] = persistQueryClient({
-      ...persistOptions,
-      queryClient: client,
-    })
-    promise.then(async () => {
-      if (!isStale) {
-        try {
-          await onSuccess()
-        } finally {
-          isRestoring.set(false)
-        }
+  import type {
+    OmitKeyof,
+    QueryClientProviderProps,
+  } from '@tanstack/svelte-query'
+
+  type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess?: () => void
+  }
+
+  let {
+    client,
+    children,
+    persistOptions,
+    ...props
+  }: PersistQueryClientProviderProps = $props()
+
+  let isRestoring = $state(true)
+
+  setIsRestoringContext(() => isRestoring)
+
+  const options = $derived({
+    ...persistOptions,
+    queryClient: client,
+  })
+
+  $effect(() => {
+    return isRestoring ? () => {} : persistQueryClientSubscribe(options)
+  })
+
+  $effect(() => {
+    isRestoring = true
+    persistQueryClientRestore(options).then(async () => {
+      try {
+        await props.onSuccess?.()
+      } finally {
+        isRestoring = false
       }
     })
-    onDestroy(() => {
-      isStale = true
-      unsubscribe()
-    })
-  }
+  })
 </script>
 
-<QueryClientProvider {client}>
-  <slot />
+<QueryClientProvider {client} {...props}>
+  {@render children()}
 </QueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
index 2a7501660e0..8a02d39a7f8 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
-  import type { Writable } from 'svelte/store'
+  import { sleep } from '../utils.svelte.js'
 
-  export let states: Writable<Array<string>>
+  let { states }: { states: Array<string> } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
-      states.update((s) => [...s, 'fetching'])
+      states.push('fetching')
       await sleep(5)
-      states.update((s) => [...s, 'fetched'])
+      states.push('fetched')
       return 'fetched'
     },
-  })
+  }))
 </script>
 
-<div>{$query.data}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
index c3087ac2fa4..7d1201e0da5 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
@@ -3,12 +3,15 @@
   import AwaitOnSuccess from './AwaitOnSuccess.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { Writable } from 'svelte/store'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let onSuccess: () => Promise<void>
-  export let states: Writable<Array<string>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess: () => Promise<void>
+    states: Array<string>
+  }
+
+  let { queryClient, persistOptions, onSuccess, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
index fd46ffb5b6a..5972e07cf25 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -1,25 +1,34 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let states: Writable<Array<StatusResult<string>>>
-  export let fetched: Writable<boolean>
+  let {
+    states,
+    fetched,
+  }: {
+    states: { value: Array<StatusResult<string>> }
+    fetched: boolean
+  } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
-      fetched.set(true)
+      fetched = true
       await sleep(5)
       return 'fetched'
     },
 
     staleTime: Infinity,
-  })
+  }))
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>data: {$query.data ?? 'undefined'}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>data: {query.data ?? 'undefined'}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
+<div>fetched: {fetched}</div>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
index 75a9c1aefae..3859dbc30e3 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -3,13 +3,16 @@
   import FreshData from './FreshData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let states: Writable<Array<StatusResult<string>>>
-  export let fetched: Writable<boolean>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: { value: Array<StatusResult<string>> }
+    fetched: boolean
+  }
+
+  let { queryClient, persistOptions, states, fetched }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
index 900c7f37cd3..ff3397bd2db 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let states: Writable<Array<StatusResult<string>>>
+  let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
@@ -17,10 +17,13 @@
     // make sure that initial data is older than the hydration data
     // otherwise initialData would be newer and takes precedence
     initialDataUpdatedAt: 1,
-  })
+  }))
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>{$query.data}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
index e5e17f712eb..b9d600d0dfd 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -3,12 +3,15 @@
   import InitialData from './InitialData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let states: Writable<Array<StatusResult<string>>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: { value: Array<StatusResult<string>> }
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
index efd321ca8ba..51fc2b0e50d 100644
--- a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 </script>
 
-<div>{$query.data}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
index c0d27927719..0b280ca5701 100644
--- a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
@@ -4,9 +4,13 @@
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let onSuccess: () => void
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess: () => void
+  }
+
+  let { queryClient, persistOptions, onSuccess }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
similarity index 79%
rename from packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
rename to packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
index 86b99cce900..b41b348f1e3 100644
--- a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
+++ b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
@@ -1,7 +1,6 @@
 import { render, waitFor } from '@testing-library/svelte'
 import { describe, expect, test, vi } from 'vitest'
 import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
-import { get, writable } from 'svelte/store'
 import AwaitOnSuccess from './AwaitOnSuccess/Provider.svelte'
 import FreshData from './FreshData/Provider.svelte'
 import OnSuccess from './OnSuccess/Provider.svelte'
@@ -9,14 +8,13 @@ import InitialData from './InitialData/Provider.svelte'
 import RemoveCache from './RemoveCache/Provider.svelte'
 import RestoreCache from './RestoreCache/Provider.svelte'
 import UseQueries from './UseQueries/Provider.svelte'
-import { createQueryClient, sleep } from './utils.js'
+import { createQueryClient, ref, sleep } from './utils.svelte.js'
 
 import type {
   PersistedClient,
   Persister,
 } from '@tanstack/query-persist-client-core'
-import type { Writable } from 'svelte/store'
-import type { StatusResult } from './utils.js'
+import type { StatusResult } from './utils.svelte.js'
 
 const createMockPersister = (): Persister => {
   let storedState: PersistedClient | undefined
@@ -56,7 +54,7 @@ const createMockErrorPersister = (
 
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
-    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -74,7 +72,7 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        states: statesStore,
+        states,
       },
     })
 
@@ -82,36 +80,35 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states = get(statesStore)
-    expect(states).toHaveLength(4)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
-      fetchStatus: 'fetching',
-      data: 'hydrated',
+      fetchStatus: 'idle',
+      data: 'fetched',
     })
 
-    expect(states[3]).toMatchObject({
+    /* expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
-    })
+    }) */
   })
 
   test('should also put useQueries into idle state', async () => {
-    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -129,7 +126,7 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        states: statesStore,
+        states,
       },
     })
 
@@ -137,29 +134,21 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states = get(statesStore)
-
-    expect(states).toHaveLength(4)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
-      status: 'success',
-      fetchStatus: 'fetching',
-      data: 'hydrated',
-    })
-
-    expect(states[3]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -167,7 +156,7 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should show initialData while restoring', async () => {
-    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -185,7 +174,7 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        states: statesStore,
+        states,
       },
     })
 
@@ -193,28 +182,27 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states = get(statesStore)
-    expect(states).toHaveLength(4)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'initial',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    /* expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
-    })
+    }) */
 
-    expect(states[3]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -222,7 +210,7 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should not refetch after restoring when data is fresh', async () => {
-    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -236,13 +224,13 @@ describe('PersistQueryClientProvider', () => {
 
     queryClient.clear()
 
-    const fetched = writable(false)
+    const fetched = $state(false)
 
     const rendered = render(FreshData, {
       props: {
         queryClient,
         persistOptions: { persister },
-        states: statesStore,
+        states,
         fetched,
       },
     })
@@ -250,18 +238,17 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('data: undefined'))
     await waitFor(() => rendered.getByText('data: hydrated'))
 
-    const states = get(statesStore)
-    expect(states).toHaveLength(2)
+    expect(fetched).toBe(false)
 
-    expect(get(fetched)).toBe(false)
+    expect(states.value).toHaveLength(2)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'hydrated',
@@ -311,17 +298,17 @@ describe('PersistQueryClientProvider', () => {
 
     queryClient.clear()
 
-    const statesStore: Writable<Array<string>> = writable([])
+    let states: Array<string> = $state([])
 
     const rendered = render(AwaitOnSuccess, {
       props: {
         queryClient,
         persistOptions: { persister },
-        states: statesStore,
+        states,
         onSuccess: async () => {
-          statesStore.update((s) => [...s, 'onSuccess'])
-          await sleep(20)
-          statesStore.update((s) => [...s, 'onSuccess done'])
+          states.push('onSuccess')
+          await sleep(5)
+          states.push('onSuccess done')
         },
       },
     })
@@ -329,8 +316,6 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states = get(statesStore)
-
     expect(states).toEqual([
       'onSuccess',
       'onSuccess done',
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
index 8738e99bd55..32e3430c4d1 100644
--- a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
@@ -4,8 +4,12 @@
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+  }
+
+  let { queryClient, persistOptions }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
index efd321ca8ba..51fc2b0e50d 100644
--- a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 </script>
 
-<div>{$query.data}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
index 531aae8c3f6..cfbf97767c5 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -3,12 +3,15 @@
   import RestoreCache from './RestoreCache.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let states: Writable<Array<StatusResult<string>>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: { value: Array<StatusResult<string>> }
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
index 15b3a92df91..362f39ea608 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let states: Writable<Array<StatusResult<string>>>
+  let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>{$query.data}</div>
-<div>fetchStatus: {$query.fetchStatus}</div>
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
index 56429b7d816..de1a961a5fa 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
@@ -3,12 +3,15 @@
   import UseQueries from './UseQueries.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let states: Writable<Array<StatusResult<string>>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: { value: Array<StatusResult<string>> }
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
index 75ec9dc4e31..122d3da2545 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { createQueries } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.js'
-  import type { Writable } from 'svelte/store'
-  import type { StatusResult } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
+  import type { StatusResult } from '../utils.svelte.js'
 
-  export let states: Writable<Array<StatusResult<string>>>
+  let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
   const queries = createQueries({
-    queries: [
+    queries: () => [
       {
         queryKey: ['test'],
         queryFn: async (): Promise<string> => {
@@ -18,8 +18,11 @@
     ],
   })
 
-  $: states.update((prev) => [...prev, $queries[0]])
+  $effect(() => {
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(queries[0])]
+  })
 </script>
 
-<div>{$queries[0].data}</div>
-<div>fetchStatus: {$queries[0].fetchStatus}</div>
+<div>{queries[0].data}</div>
+<div>fetchStatus: {queries[0].fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/utils.ts b/packages/svelte-query-persist-client/tests/utils.svelte.ts
similarity index 72%
rename from packages/svelte-query-persist-client/tests/utils.ts
rename to packages/svelte-query-persist-client/tests/utils.svelte.ts
index b246d49a350..8e59db6139d 100644
--- a/packages/svelte-query-persist-client/tests/utils.ts
+++ b/packages/svelte-query-persist-client/tests/utils.svelte.ts
@@ -17,3 +17,16 @@ export type StatusResult<T = unknown> = {
   fetchStatus: string
   data: T | undefined
 }
+
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}
diff --git a/packages/svelte-query/eslint.config.js b/packages/svelte-query/eslint.config.js
index d0e37929b08..1d0ce17d526 100644
--- a/packages/svelte-query/eslint.config.js
+++ b/packages/svelte-query/eslint.config.js
@@ -10,6 +10,7 @@ export default [
     rules: {
       'svelte/block-lang': ['error', { script: ['ts'] }],
       'svelte/no-svelte-internal': 'error',
+      'svelte/no-unused-svelte-ignore': 'off',
       'svelte/valid-compile': 'off',
     },
   },
diff --git a/packages/svelte-query/package.json b/packages/svelte-query/package.json
index 84cbdeb069c..ceabdf9a25a 100644
--- a/packages/svelte-query/package.json
+++ b/packages/svelte-query/package.json
@@ -45,13 +45,13 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.5",
     "@testing-library/svelte": "^5.2.1",
     "eslint-plugin-svelte": "^2.43.0",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0-next.204",
     "svelte-check": "^3.8.4"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+    "svelte": "^5.0.0-next.204"
   }
 }
diff --git a/packages/svelte-query/src/HydrationBoundary.svelte b/packages/svelte-query/src/HydrationBoundary.svelte
index 330984311f1..96c26068a22 100644
--- a/packages/svelte-query/src/HydrationBoundary.svelte
+++ b/packages/svelte-query/src/HydrationBoundary.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
   import { useHydrate } from './useHydrate.js'
+  import type { Snippet } from 'svelte'
   import type {
     DehydratedState,
     HydrateOptions,
     QueryClient,
   } from '@tanstack/query-core'
 
-  export let state: DehydratedState
-  export let options: HydrateOptions | undefined = undefined
-  export let queryClient: QueryClient | undefined = undefined
+  type Props = {
+    children: Snippet
+    state: DehydratedState
+    options: HydrateOptions | undefined
+    queryClient: QueryClient | undefined
+  }
+
+  const {
+    children,
+    state,
+    options = undefined,
+    queryClient = undefined,
+  }: Props = $props()
 
   useHydrate(state, options, queryClient)
 </script>
 
-<slot />
+{@render children()}
diff --git a/packages/svelte-query/src/QueryClientProvider.svelte b/packages/svelte-query/src/QueryClientProvider.svelte
index 9f43e490934..36f1df43b12 100644
--- a/packages/svelte-query/src/QueryClientProvider.svelte
+++ b/packages/svelte-query/src/QueryClientProvider.svelte
@@ -2,8 +2,10 @@
   import { onDestroy, onMount } from 'svelte'
   import { QueryClient } from '@tanstack/query-core'
   import { setQueryClientContext } from './context.js'
+  import type { QueryClientProviderProps } from './types.js'
 
-  export let client = new QueryClient()
+  const { client = new QueryClient(), children }: QueryClientProviderProps =
+    $props()
 
   onMount(() => {
     client.mount()
@@ -16,4 +18,4 @@
   })
 </script>
 
-<slot />
+{@render children()}
diff --git a/packages/svelte-query/src/context.ts b/packages/svelte-query/src/context.ts
index 962451b232e..0676181f574 100644
--- a/packages/svelte-query/src/context.ts
+++ b/packages/svelte-query/src/context.ts
@@ -1,7 +1,5 @@
 import { getContext, setContext } from 'svelte'
-import { readable } from 'svelte/store'
 import type { QueryClient } from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
 
 const _contextKey = '$$_queryClient'
 
@@ -25,18 +23,18 @@ export const setQueryClientContext = (client: QueryClient): void => {
 const _isRestoringContextKey = '$$_isRestoring'
 
 /** Retrieves a `isRestoring` from Svelte's context */
-export const getIsRestoringContext = (): Readable<boolean> => {
+export const getIsRestoringContext = (): (() => boolean) => {
   try {
-    const isRestoring = getContext<Readable<boolean> | undefined>(
+    const isRestoring = getContext<(() => boolean) | undefined>(
       _isRestoringContextKey,
     )
-    return isRestoring ? isRestoring : readable(false)
+    return isRestoring ?? (() => false)
   } catch (error) {
-    return readable(false)
+    return () => false
   }
 }
 
 /** Sets a `isRestoring` on Svelte's context */
-export const setIsRestoringContext = (isRestoring: Readable<boolean>): void => {
+export const setIsRestoringContext = (isRestoring: () => boolean): void => {
   setContext(_isRestoringContextKey, isRestoring)
 }
diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts
new file mode 100644
index 00000000000..6290ea9b97f
--- /dev/null
+++ b/packages/svelte-query/src/createBaseQuery.svelte.ts
@@ -0,0 +1,83 @@
+import { notifyManager } from '@tanstack/query-core'
+import { useIsRestoring } from './useIsRestoring.js'
+import { useQueryClient } from './useQueryClient.js'
+import type {
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+  FunctionedParams,
+} from './types.js'
+import type {
+  QueryClient,
+  QueryKey,
+  QueryObserver,
+  QueryObserverResult,
+} from '@tanstack/query-core'
+
+export function createBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: FunctionedParams<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  >,
+  Observer: typeof QueryObserver,
+  queryClient?: QueryClient,
+): CreateBaseQueryResult<TData, TError> {
+  /** Load query client */
+  const client = useQueryClient(queryClient)
+  const isRestoring = useIsRestoring()
+
+  /** Creates a store that has the default options applied */
+  const defaultedOptions = $derived(() => {
+    const defaultOptions = client.defaultQueryOptions(options())
+    defaultOptions._optimisticResults = isRestoring()
+      ? 'isRestoring'
+      : 'optimistic'
+    defaultOptions.structuralSharing = false
+    return defaultOptions
+  })
+
+  /** Creates the observer */
+  const observer = new Observer<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >(client, defaultedOptions())
+
+  const result = $state<QueryObserverResult<TData, TError>>(
+    observer.getOptimisticResult(defaultedOptions()),
+  )
+
+  function updateResult(r: QueryObserverResult<TData, TError>) {
+    Object.assign(result, r)
+  }
+
+  $effect(() => {
+    const unsubscribe = isRestoring()
+      ? () => undefined
+      : observer.subscribe(() => {
+          notifyManager.batchCalls(() => {
+            updateResult(observer.getOptimisticResult(defaultedOptions()))
+          })()
+        })
+
+    observer.updateResult()
+    return () => unsubscribe()
+  })
+
+  /** Subscribe to changes in result and defaultedOptionsStore */
+  $effect.pre(() => {
+    observer.setOptions(defaultedOptions(), { listeners: false })
+    updateResult(observer.getOptimisticResult(defaultedOptions()))
+  })
+
+  // Handle result property usage tracking
+  return !defaultedOptions().notifyOnChangeProps
+    ? observer.trackResult(result)
+    : result
+}
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
deleted file mode 100644
index 3b33485905d..00000000000
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { derived, get, readable } from 'svelte/store'
-import { notifyManager } from '@tanstack/query-core'
-import { useIsRestoring } from './useIsRestoring.js'
-import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore } from './utils.js'
-import type {
-  QueryClient,
-  QueryKey,
-  QueryObserver,
-  QueryObserverResult,
-} from '@tanstack/query-core'
-import type {
-  CreateBaseQueryOptions,
-  CreateBaseQueryResult,
-  StoreOrVal,
-} from './types.js'
-
-export function createBaseQuery<
-  TQueryFnData,
-  TError,
-  TData,
-  TQueryData,
-  TQueryKey extends QueryKey,
->(
-  options: StoreOrVal<
-    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
-  >,
-  Observer: typeof QueryObserver,
-  queryClient?: QueryClient,
-): CreateBaseQueryResult<TData, TError> {
-  /** Load query client */
-  const client = useQueryClient(queryClient)
-  const isRestoring = useIsRestoring()
-  /** Converts options to a svelte store if not already a store object */
-  const optionsStore = isSvelteStore(options) ? options : readable(options)
-
-  /** Creates a store that has the default options applied */
-  const defaultedOptionsStore = derived(
-    [optionsStore, isRestoring],
-    ([$optionsStore, $isRestoring]) => {
-      const defaultedOptions = client.defaultQueryOptions($optionsStore)
-      defaultedOptions._optimisticResults = $isRestoring
-        ? 'isRestoring'
-        : 'optimistic'
-      return defaultedOptions
-    },
-  )
-
-  /** Creates the observer */
-  const observer = new Observer<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
-  >(client, get(defaultedOptionsStore))
-
-  defaultedOptionsStore.subscribe(($defaultedOptions) => {
-    // Do not notify on updates because of changes in the options because
-    // these changes should already be reflected in the optimistic result.
-    observer.setOptions($defaultedOptions, { listeners: false })
-  })
-
-  const result = derived<
-    typeof isRestoring,
-    QueryObserverResult<TData, TError>
-  >(isRestoring, ($isRestoring, set) => {
-    const unsubscribe = $isRestoring
-      ? () => undefined
-      : observer.subscribe(notifyManager.batchCalls(set))
-    observer.updateResult()
-    return unsubscribe
-  })
-
-  /** Subscribe to changes in result and defaultedOptionsStore */
-  const { subscribe } = derived(
-    [result, defaultedOptionsStore],
-    ([$result, $defaultedOptionsStore]) => {
-      $result = observer.getOptimisticResult($defaultedOptionsStore)
-      return !$defaultedOptionsStore.notifyOnChangeProps
-        ? observer.trackResult($result)
-        : $result
-    },
-  )
-
-  return { subscribe }
-}
diff --git a/packages/svelte-query/src/createInfiniteQuery.ts b/packages/svelte-query/src/createInfiniteQuery.ts
index 71378002980..b12d556fa3f 100644
--- a/packages/svelte-query/src/createInfiniteQuery.ts
+++ b/packages/svelte-query/src/createInfiniteQuery.ts
@@ -1,5 +1,5 @@
 import { InfiniteQueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte.js'
 import type {
   DefaultError,
   InfiniteData,
@@ -10,7 +10,7 @@ import type {
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
-  StoreOrVal,
+  FunctionedParams,
 } from './types.js'
 
 export function createInfiniteQuery<
@@ -20,7 +20,7 @@ export function createInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: StoreOrVal<
+  options: FunctionedParams<
     CreateInfiniteQueryOptions<
       TQueryFnData,
       TError,
diff --git a/packages/svelte-query/src/createMutation.svelte.ts b/packages/svelte-query/src/createMutation.svelte.ts
new file mode 100644
index 00000000000..3f0dfcecc31
--- /dev/null
+++ b/packages/svelte-query/src/createMutation.svelte.ts
@@ -0,0 +1,71 @@
+import { onDestroy } from 'svelte'
+
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient.js'
+import type {
+  CreateMutateFunction,
+  CreateMutationOptions,
+  CreateMutationResult,
+  FunctionedParams,
+} from './types.js'
+
+import type { DefaultError, QueryClient } from '@tanstack/query-core'
+
+export function createMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: FunctionedParams<
+    CreateMutationOptions<TData, TError, TVariables, TContext>
+  >,
+  queryClient?: QueryClient,
+): CreateMutationResult<TData, TError, TVariables, TContext> {
+  const client = useQueryClient(queryClient)
+
+  const observer = $derived(
+    new MutationObserver<TData, TError, TVariables, TContext>(
+      client,
+      options(),
+    ),
+  )
+
+  const mutate = $state<
+    CreateMutateFunction<TData, TError, TVariables, TContext>
+  >((variables, mutateOptions) => {
+    observer.mutate(variables, mutateOptions).catch(noop)
+  })
+
+  $effect.pre(() => {
+    observer.setOptions(options())
+  })
+
+  const result = $state(observer.getCurrentResult())
+
+  const unsubscribe = observer.subscribe((val) => {
+    notifyManager.batchCalls(() => {
+      Object.assign(result, val)
+    })()
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  // @ts-expect-error
+  return new Proxy(result, {
+    get: (_, prop) => {
+      const r = {
+        ...result,
+        mutate,
+        mutateAsync: result.mutate,
+      }
+      if (prop == 'value') return r
+      // @ts-expect-error
+      return r[prop]
+    },
+  })
+}
+
+function noop() {}
diff --git a/packages/svelte-query/src/createMutation.ts b/packages/svelte-query/src/createMutation.ts
deleted file mode 100644
index 96198c3c1ff..00000000000
--- a/packages/svelte-query/src/createMutation.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { derived, get, readable } from 'svelte/store'
-import { MutationObserver, notifyManager } from '@tanstack/query-core'
-import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore, noop } from './utils.js'
-import type {
-  CreateMutateFunction,
-  CreateMutationOptions,
-  CreateMutationResult,
-  StoreOrVal,
-} from './types.js'
-import type { DefaultError, QueryClient } from '@tanstack/query-core'
-
-export function createMutation<
-  TData = unknown,
-  TError = DefaultError,
-  TVariables = void,
-  TContext = unknown,
->(
-  options: StoreOrVal<
-    CreateMutationOptions<TData, TError, TVariables, TContext>
-  >,
-  queryClient?: QueryClient,
-): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const client = useQueryClient(queryClient)
-
-  const optionsStore = isSvelteStore(options) ? options : readable(options)
-
-  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
-    client,
-    get(optionsStore),
-  )
-  let mutate: CreateMutateFunction<TData, TError, TVariables, TContext>
-
-  optionsStore.subscribe(($options) => {
-    mutate = (variables, mutateOptions) => {
-      observer.mutate(variables, mutateOptions).catch(noop)
-    }
-    observer.setOptions($options)
-  })
-
-  const result = readable(observer.getCurrentResult(), (set) => {
-    return observer.subscribe(notifyManager.batchCalls((val) => set(val)))
-  })
-
-  const { subscribe } = derived(result, ($result) => ({
-    ...$result,
-    mutate,
-    mutateAsync: $result.mutate,
-  }))
-
-  return { subscribe }
-}
diff --git a/packages/svelte-query/src/createQueries.ts b/packages/svelte-query/src/createQueries.svelte.ts
similarity index 85%
rename from packages/svelte-query/src/createQueries.ts
rename to packages/svelte-query/src/createQueries.svelte.ts
index f648ab62e7a..f5078e7b1ba 100644
--- a/packages/svelte-query/src/createQueries.ts
+++ b/packages/svelte-query/src/createQueries.svelte.ts
@@ -1,10 +1,8 @@
+import { untrack } from 'svelte'
 import { QueriesObserver, notifyManager } from '@tanstack/query-core'
-import { derived, get, readable } from 'svelte/store'
 import { useIsRestoring } from './useIsRestoring.js'
 import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore } from './utils.js'
-import type { Readable } from 'svelte/store'
-import type { StoreOrVal } from './types.js'
+import type { FunctionedParams } from './types.js'
 import type {
   DefaultError,
   DefinedQueryObserverResult,
@@ -210,68 +208,70 @@ export function createQueries<
     queries,
     ...options
   }: {
-    queries: StoreOrVal<[...QueriesOptions<T>]>
+    queries: FunctionedParams<[...QueriesOptions<T>]>
     combine?: (result: QueriesResults<T>) => TCombinedResult
   },
   queryClient?: QueryClient,
-): Readable<TCombinedResult> {
+): TCombinedResult {
   const client = useQueryClient(queryClient)
   const isRestoring = useIsRestoring()
 
-  const queriesStore = isSvelteStore(queries) ? queries : readable(queries)
+  const defaultedQueries = $derived(() => {
+    return queries().map((opts) => {
+      const defaultedOptions = client.defaultQueryOptions(opts)
+      // Make sure the results are already in fetching state before subscribing or updating options
+      defaultedOptions._optimisticResults = isRestoring()
+        ? 'isRestoring'
+        : 'optimistic'
+      return defaultedOptions as QueryObserverOptions
+    })
+  })
 
-  const defaultedQueriesStore = derived(
-    [queriesStore, isRestoring],
-    ([$queries, $isRestoring]) => {
-      return $queries.map((opts) => {
-        const defaultedOptions = client.defaultQueryOptions(
-          opts as QueryObserverOptions,
-        )
-        // Make sure the results are already in fetching state before subscribing or updating options
-        defaultedOptions._optimisticResults = $isRestoring
-          ? 'isRestoring'
-          : 'optimistic'
-        return defaultedOptions
-      })
-    },
-  )
   const observer = new QueriesObserver<TCombinedResult>(
     client,
-    get(defaultedQueriesStore),
+    defaultedQueries(),
     options as QueriesObserverOptions<TCombinedResult>,
   )
 
-  defaultedQueriesStore.subscribe(($defaultedQueries) => {
+  const [_, getCombinedResult, trackResult] = $derived(
+    observer.getOptimisticResult(
+      defaultedQueries(),
+      (options as QueriesObserverOptions<TCombinedResult>).combine,
+    ),
+  )
+
+  $effect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
     observer.setQueries(
-      $defaultedQueries,
+      defaultedQueries(),
       options as QueriesObserverOptions<TCombinedResult>,
       { listeners: false },
     )
   })
 
-  const result = derived([isRestoring], ([$isRestoring], set) => {
-    const unsubscribe = $isRestoring
-      ? () => undefined
-      : observer.subscribe(notifyManager.batchCalls(set))
+  let result = $state(getCombinedResult(trackResult()))
 
-    return () => unsubscribe()
-  })
+  $effect(() => {
+    if (isRestoring()) {
+      return () => null
+    }
+    untrack(() => {
+      // @ts-expect-error
+      Object.assign(result, getCombinedResult(trackResult()))
+    })
 
-  const { subscribe } = derived(
-    [result, defaultedQueriesStore],
-    // @ts-expect-error svelte-check thinks this is unused
-    ([$result, $defaultedQueriesStore]) => {
-      const [rawResult, combineResult, trackResult] =
-        observer.getOptimisticResult(
-          $defaultedQueriesStore,
+    return observer.subscribe((_result) => {
+      notifyManager.batchCalls(() => {
+        const res = observer.getOptimisticResult(
+          defaultedQueries(),
           (options as QueriesObserverOptions<TCombinedResult>).combine,
         )
-      $result = rawResult
-      return combineResult(trackResult())
-    },
-  )
+        // @ts-expect-error
+        Object.assign(result, res[1](res[2]()))
+      })()
+    })
+  })
 
-  return { subscribe }
+  return result
 }
diff --git a/packages/svelte-query/src/createQuery.ts b/packages/svelte-query/src/createQuery.ts
index 51a43c274c1..79b6782b2fe 100644
--- a/packages/svelte-query/src/createQuery.ts
+++ b/packages/svelte-query/src/createQuery.ts
@@ -1,11 +1,11 @@
 import { QueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte.js'
 import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
 import type {
   CreateQueryOptions,
   CreateQueryResult,
   DefinedCreateQueryResult,
-  StoreOrVal,
+  FunctionedParams,
 } from './types.js'
 import type {
   DefinedInitialDataOptions,
@@ -18,7 +18,7 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
+  options: FunctionedParams<
     DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
   >,
   queryClient?: QueryClient,
@@ -30,7 +30,7 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
+  options: FunctionedParams<
     UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
   >,
   queryClient?: QueryClient,
@@ -42,14 +42,14 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
+  options: FunctionedParams<
     CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   >,
   queryClient?: QueryClient,
 ): CreateQueryResult<TData, TError>
 
 export function createQuery(
-  options: StoreOrVal<CreateQueryOptions>,
+  options: FunctionedParams<CreateQueryOptions>,
   queryClient?: QueryClient,
 ) {
   return createBaseQuery(options, QueryObserver, queryClient)
diff --git a/packages/svelte-query/src/index.ts b/packages/svelte-query/src/index.ts
index 735cd89f593..1b74a9be912 100644
--- a/packages/svelte-query/src/index.ts
+++ b/packages/svelte-query/src/index.ts
@@ -8,20 +8,20 @@ export * from './types.js'
 export * from './context.js'
 
 export { createQuery } from './createQuery.js'
-export type { QueriesResults, QueriesOptions } from './createQueries.js'
+export type { QueriesResults, QueriesOptions } from './createQueries.svelte.js'
 export type {
   DefinedInitialDataOptions,
   UndefinedInitialDataOptions,
 } from './queryOptions.js'
 export { queryOptions } from './queryOptions.js'
-export { createQueries } from './createQueries.js'
+export { createQueries } from './createQueries.svelte.js'
 export { createInfiniteQuery } from './createInfiniteQuery.js'
 export { infiniteQueryOptions } from './infiniteQueryOptions.js'
-export { createMutation } from './createMutation.js'
-export { useMutationState } from './useMutationState.js'
+export { createMutation } from './createMutation.svelte.js'
+export { useMutationState } from './useMutationState.svelte.js'
 export { useQueryClient } from './useQueryClient.js'
-export { useIsFetching } from './useIsFetching.js'
-export { useIsMutating } from './useIsMutating.js'
+export { useIsFetching } from './useIsFetching.svelte.js'
+export { useIsMutating } from './useIsMutating.svelte.js'
 export { useIsRestoring } from './useIsRestoring.js'
 export { useHydrate } from './useHydrate.js'
 export { default as HydrationBoundary } from './HydrationBoundary.svelte'
diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts
index 4fd8bdb271c..8e7c2f4dd1b 100644
--- a/packages/svelte-query/src/types.ts
+++ b/packages/svelte-query/src/types.ts
@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte'
 import type {
   DefaultError,
   DefinedQueryObserverResult,
@@ -9,15 +10,13 @@ import type {
   MutationObserverOptions,
   MutationObserverResult,
   MutationState,
-  OmitKeyof,
+  QueryClient,
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
 
-/** Allows a type to be either the base object or a store of that object */
-export type StoreOrVal<T> = T | Readable<T>
+export type FunctionedParams<T> = () => T
 
 /** Options for createBaseQuery */
 export type CreateBaseQueryOptions<
@@ -32,7 +31,7 @@ export type CreateBaseQueryOptions<
 export type CreateBaseQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = Readable<QueryObserverResult<TData, TError>>
+> = QueryObserverResult<TData, TError>
 
 /** Options for createQuery */
 export type CreateQueryOptions<
@@ -69,13 +68,13 @@ export type CreateInfiniteQueryOptions<
 export type CreateInfiniteQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = Readable<InfiniteQueryObserverResult<TData, TError>>
+> = InfiniteQueryObserverResult<TData, TError>
 
 /** Options for createBaseQuery with initialData */
 export type DefinedCreateBaseQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = Readable<DefinedQueryObserverResult<TData, TError>>
+> = DefinedQueryObserverResult<TData, TError>
 
 /** Options for createQuery with initialData */
 export type DefinedCreateQueryResult<
@@ -89,9 +88,9 @@ export type CreateMutationOptions<
   TError = DefaultError,
   TVariables = void,
   TContext = unknown,
-> = OmitKeyof<
+> = Omit<
   MutationObserverOptions<TData, TError, TVariables, TContext>,
-  '_defaulted'
+  '_defaulted' | 'variables'
 >
 
 export type CreateMutateFunction<
@@ -128,7 +127,7 @@ export type CreateMutationResult<
   TError = DefaultError,
   TVariables = unknown,
   TContext = unknown,
-> = Readable<CreateBaseMutationResult<TData, TError, TVariables, TContext>>
+> = CreateBaseMutationResult<TData, TError, TVariables, TContext>
 
 type Override<TTargetA, TTargetB> = {
   [AKey in keyof TTargetA]: AKey extends keyof TTargetB
@@ -143,3 +142,8 @@ export type MutationStateOptions<TResult = MutationState> = {
     mutation: Mutation<unknown, DefaultError, unknown, unknown>,
   ) => TResult
 }
+
+export type QueryClientProviderProps = {
+  client: QueryClient
+  children: Snippet
+}
diff --git a/packages/svelte-query/src/useIsFetching.svelte.ts b/packages/svelte-query/src/useIsFetching.svelte.ts
new file mode 100644
index 00000000000..2296301a287
--- /dev/null
+++ b/packages/svelte-query/src/useIsFetching.svelte.ts
@@ -0,0 +1,23 @@
+import { onDestroy } from 'svelte'
+import { useQueryClient } from './useQueryClient.js'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
+
+export function useIsFetching(
+  filters?: QueryFilters,
+  queryClient?: QueryClient,
+): () => number {
+  const client = useQueryClient(queryClient)
+  const queryCache = client.getQueryCache()
+
+  const init = client.isFetching(filters)
+  let isFetching = $state(init)
+  $effect(() => {
+    const unsubscribe = queryCache.subscribe(() => {
+      isFetching = client.isFetching(filters)
+    })
+
+    onDestroy(unsubscribe)
+  })
+
+  return () => isFetching
+}
diff --git a/packages/svelte-query/src/useIsFetching.ts b/packages/svelte-query/src/useIsFetching.ts
deleted file mode 100644
index e7848961923..00000000000
--- a/packages/svelte-query/src/useIsFetching.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { notifyManager } from '@tanstack/query-core'
-import { readable } from 'svelte/store'
-import { useQueryClient } from './useQueryClient.js'
-import type { Readable } from 'svelte/store'
-import type { QueryClient, QueryFilters } from '@tanstack/query-core'
-
-export function useIsFetching(
-  filters?: QueryFilters,
-  queryClient?: QueryClient,
-): Readable<number> {
-  const client = useQueryClient(queryClient)
-  const cache = client.getQueryCache()
-  // isFetching is the prev value initialized on mount *
-  let isFetching = client.isFetching(filters)
-
-  const { subscribe } = readable(isFetching, (set) => {
-    return cache.subscribe(
-      notifyManager.batchCalls(() => {
-        const newIsFetching = client.isFetching(filters)
-        if (isFetching !== newIsFetching) {
-          // * and update with each change
-          isFetching = newIsFetching
-          set(isFetching)
-        }
-      }),
-    )
-  })
-
-  return { subscribe }
-}
diff --git a/packages/svelte-query/src/useIsMutating.ts b/packages/svelte-query/src/useIsMutating.svelte.ts
similarity index 77%
rename from packages/svelte-query/src/useIsMutating.ts
rename to packages/svelte-query/src/useIsMutating.svelte.ts
index 258e8fe98cb..5e7992a93ad 100644
--- a/packages/svelte-query/src/useIsMutating.ts
+++ b/packages/svelte-query/src/useIsMutating.svelte.ts
@@ -1,30 +1,29 @@
 import { notifyManager } from '@tanstack/query-core'
-import { readable } from 'svelte/store'
 import { useQueryClient } from './useQueryClient.js'
-import type { Readable } from 'svelte/store'
 import type { MutationFilters, QueryClient } from '@tanstack/query-core'
 
 export function useIsMutating(
   filters?: MutationFilters,
   queryClient?: QueryClient,
-): Readable<number> {
+): () => number {
   const client = useQueryClient(queryClient)
   const cache = client.getMutationCache()
   // isMutating is the prev value initialized on mount *
   let isMutating = client.isMutating(filters)
 
-  const { subscribe } = readable(isMutating, (set) => {
+  const num = $state({ isMutating })
+  $effect(() => {
     return cache.subscribe(
       notifyManager.batchCalls(() => {
         const newIisMutating = client.isMutating(filters)
         if (isMutating !== newIisMutating) {
           // * and update with each change
           isMutating = newIisMutating
-          set(isMutating)
+          num.isMutating = isMutating
         }
       }),
     )
   })
 
-  return { subscribe }
+  return () => num.isMutating
 }
diff --git a/packages/svelte-query/src/useIsRestoring.ts b/packages/svelte-query/src/useIsRestoring.ts
index c22d8af4020..f6ee9bb5648 100644
--- a/packages/svelte-query/src/useIsRestoring.ts
+++ b/packages/svelte-query/src/useIsRestoring.ts
@@ -1,6 +1,5 @@
 import { getIsRestoringContext } from './context.js'
-import type { Readable } from 'svelte/store'
 
-export function useIsRestoring(): Readable<boolean> {
+export function useIsRestoring(): () => boolean {
   return getIsRestoringContext()
 }
diff --git a/packages/svelte-query/src/useMutationState.svelte.ts b/packages/svelte-query/src/useMutationState.svelte.ts
new file mode 100644
index 00000000000..c517e64b480
--- /dev/null
+++ b/packages/svelte-query/src/useMutationState.svelte.ts
@@ -0,0 +1,56 @@
+import { replaceEqualDeep } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient.js'
+import type {
+  MutationCache,
+  MutationState,
+  QueryClient,
+} from '@tanstack/query-core'
+import type { MutationStateOptions } from './types.js'
+
+function getResult<TResult = MutationState>(
+  mutationCache: MutationCache,
+  options: MutationStateOptions<TResult>,
+): Array<TResult> {
+  return mutationCache
+    .findAll(options.filters)
+    .map(
+      (mutation): TResult =>
+        (options.select ? options.select(mutation) : mutation.state) as TResult,
+    )
+}
+
+export function useMutationState<TResult = MutationState>(
+  options: MutationStateOptions<TResult> = {},
+  queryClient?: QueryClient,
+): Array<TResult> {
+  const mutationCache = useQueryClient(queryClient).getMutationCache()
+  const result = $state(getResult(mutationCache, options))
+
+  $effect(() => {
+    const unsubscribe = mutationCache.subscribe(() => {
+      const nextResult = replaceEqualDeep(
+        result,
+        getResult(mutationCache, options),
+      )
+      if (result !== nextResult) {
+        Object.assign(result, nextResult)
+      }
+    })
+
+    return unsubscribe
+  })
+
+  /*  $effect(() => {
+    mutationCache.subscribe(() => {
+      const nextResult = replaceEqualDeep(
+        result.current,
+        getResult(mutationCache, optionsRef),
+      )
+      if (result.current !== nextResult) {
+        result = nextResult
+        //notifyManager.schedule(onStoreChange)
+      }
+    })
+  }) */
+  return result
+}
diff --git a/packages/svelte-query/src/useMutationState.ts b/packages/svelte-query/src/useMutationState.ts
deleted file mode 100644
index 0367eee5db4..00000000000
--- a/packages/svelte-query/src/useMutationState.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { readable } from 'svelte/store'
-import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
-import { useQueryClient } from './useQueryClient.js'
-import type {
-  MutationCache,
-  MutationState,
-  QueryClient,
-} from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
-import type { MutationStateOptions } from './types.js'
-
-function getResult<TResult = MutationState>(
-  mutationCache: MutationCache,
-  options: MutationStateOptions<TResult>,
-): Array<TResult> {
-  return mutationCache
-    .findAll(options.filters)
-    .map(
-      (mutation): TResult =>
-        (options.select ? options.select(mutation) : mutation.state) as TResult,
-    )
-}
-
-export function useMutationState<TResult = MutationState>(
-  options: MutationStateOptions<TResult> = {},
-  queryClient?: QueryClient,
-): Readable<Array<TResult>> {
-  const client = useQueryClient(queryClient)
-  const mutationCache = client.getMutationCache()
-
-  let result = getResult(mutationCache, options)
-
-  const { subscribe } = readable(result, (set) => {
-    return mutationCache.subscribe(
-      notifyManager.batchCalls(() => {
-        const nextResult = replaceEqualDeep(
-          result,
-          getResult(mutationCache, options),
-        )
-        if (result !== nextResult) {
-          result = nextResult
-          set(result)
-        }
-      }),
-    )
-  })
-
-  return { subscribe }
-}
diff --git a/packages/svelte-query/src/utils.ts b/packages/svelte-query/src/utils.ts
deleted file mode 100644
index 3ecc2ed8b32..00000000000
--- a/packages/svelte-query/src/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Readable } from 'svelte/store'
-import type { StoreOrVal } from './types.js'
-
-export function isSvelteStore<T extends object>(
-  obj: StoreOrVal<T>,
-): obj is Readable<T> {
-  return 'subscribe' in obj && typeof obj.subscribe === 'function'
-}
-
-export function noop() {}
diff --git a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
index 0c5a0629457..50f729b1e65 100644
--- a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
+++ b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { createQuery } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['hello'],
     queryFn: async () => {
       await sleep(5)
       return 'test'
     },
-  })
+  }))
 </script>
 
-<div>Data: {$query.data ?? 'undefined'}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
index dc2440ef94e..28411fd5ed9 100644
--- a/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
+++ b/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
@@ -4,7 +4,7 @@
   import ChildComponent from './ChildComponent.svelte'
   import type { QueryCache } from '@tanstack/query-core'
 
-  export let queryCache: QueryCache
+  let { queryCache }: { queryCache: QueryCache } = $props()
 
   const queryClient = new QueryClient({ queryCache })
 </script>
diff --git a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
index ce33e17b90f..5ae5a42579d 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
@@ -1,24 +1,32 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/index.js'
+  import { sleep } from '../utils.svelte.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
 
-  export let states: Writable<Array<QueryObserverResult>>
+  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
 
   const queryClient = new QueryClient()
 
   const query = createInfiniteQuery(
-    {
+    () => ({
       queryKey: ['test'],
-      queryFn: ({ pageParam }) => Number(pageParam),
+      queryFn: async ({ pageParam }) => {
+        await sleep(5)
+        return Number(pageParam)
+      },
       getNextPageParam: (lastPage) => lastPage + 1,
       initialPageParam: 0,
-    },
+    }),
     queryClient,
   )
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>Status: {$query.status}</div>
+<div>Status: {query.status}</div>
diff --git a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
index c96a4838425..9004370f089 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/index.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
 
-  export let states: Writable<Array<QueryObserverResult>>
+  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
 
   const queryClient = new QueryClient()
 
   const query = createInfiniteQuery(
-    {
+    () => ({
       queryKey: ['test'],
       queryFn: () => Promise.resolve({ count: 1 }),
       select: (data) => ({
@@ -18,11 +18,15 @@
       }),
       getNextPageParam: () => undefined,
       initialPageParam: 0,
-    },
+    }),
     queryClient,
   )
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>{$query.data?.pages.join(',')}</div>
+<div>{query.data?.pages.join(',')}</div>
diff --git a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
index b05763b2797..06995ef5c6b 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
+++ b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
@@ -1,18 +1,17 @@
 import { describe, expect, test } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
-import { get, writable } from 'svelte/store'
+import { ref } from '../utils.svelte.js'
 import BaseExample from './BaseExample.svelte'
 import SelectExample from './SelectExample.svelte'
-import type { Writable } from 'svelte/store'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createInfiniteQuery', () => {
   test('Return the correct states for a successful query', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(BaseExample, {
       props: {
-        states: statesStore,
+        states,
       },
     })
 
@@ -20,11 +19,9 @@ describe('createInfiniteQuery', () => {
       expect(rendered.queryByText('Status: success')).toBeInTheDocument()
     })
 
-    const states = get(statesStore)
+    expect(states.value).toHaveLength(2)
 
-    expect(states).toHaveLength(2)
-
-    expect(states[0]).toEqual({
+    expect(states.value[0]).toEqual({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -59,7 +56,7 @@ describe('createInfiniteQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[1]).toEqual({
+    expect(states.value[1]).toEqual({
       data: { pages: [0], pageParams: [0] },
       dataUpdatedAt: expect.any(Number),
       error: null,
@@ -96,11 +93,11 @@ describe('createInfiniteQuery', () => {
   })
 
   test('Select a part of the data', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(SelectExample, {
       props: {
-        states: statesStore,
+        states,
       },
     })
 
@@ -108,16 +105,14 @@ describe('createInfiniteQuery', () => {
       expect(rendered.queryByText('count: 1')).toBeInTheDocument()
     })
 
-    const states = get(statesStore)
-
-    expect(states).toHaveLength(2)
+    expect(states.value).toHaveLength(2)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       isSuccess: false,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: { pages: ['count: 1'] },
       isSuccess: true,
     })
diff --git a/packages/svelte-query/tests/createMutation/FailureExample.svelte b/packages/svelte-query/tests/createMutation/FailureExample.svelte
index 2c8a8a2c1b7..a2e59f3bc38 100644
--- a/packages/svelte-query/tests/createMutation/FailureExample.svelte
+++ b/packages/svelte-query/tests/createMutation/FailureExample.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
   import { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
 
-  export let mutationFn: (value: {
-    count: number
-  }) => Promise<{ count: number }>
+  let {
+    mutationFn,
+  }: { mutationFn: (value: { count: number }) => Promise<{ count: number }> } =
+    $props()
 
-  const count = writable(0)
+  let count = $state(0)
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({ mutationFn: mutationFn })
+  const mutation = createMutation(() => ({ mutationFn: mutationFn }))
 </script>
 
-<button on:click={() => $mutation.mutate({ count: ++$count })}>Mutate</button>
+<button onclick={() => mutation.mutate({ count: ++count })}>Mutate</button>
 
-<div>Data: {$mutation.data?.count}</div>
-<div>Status: {$mutation.status}</div>
-<div>Failure Count: {$mutation.failureCount}</div>
-<div>Failure Reason: {$mutation.failureReason}</div>
+<div>Data: {mutation.data?.count ?? 'undefined'}</div>
+<div>Status: {mutation.status}</div>
+<div>Failure Count: {mutation.failureCount}</div>
+<div>Failure Reason: {mutation.failureReason ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
index 7f338ede5d8..67e73b435a1 100644
--- a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
+++ b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
@@ -11,7 +11,7 @@
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({
+  const mutation = createMutation(() => ({
     mutationFn: (vars: { count: number }) => Promise.resolve(vars.count),
     onSuccess: (data) => {
       onSuccessMock(data)
@@ -19,9 +19,9 @@
     onSettled: (data) => {
       onSettledMock(data)
     },
-  })
+  }))
 </script>
 
-<button on:click={() => $mutation.mutate({ count: ++$count })}>Mutate</button>
+<button onclick={() => mutation.mutate({ count: ++$count })}>Mutate</button>
 
 <div>Count: {$count}</div>
diff --git a/packages/svelte-query/tests/createMutation/ResetExample.svelte b/packages/svelte-query/tests/createMutation/ResetExample.svelte
index cc8216e84f7..0e076ee0bc9 100644
--- a/packages/svelte-query/tests/createMutation/ResetExample.svelte
+++ b/packages/svelte-query/tests/createMutation/ResetExample.svelte
@@ -5,16 +5,16 @@
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({
+  const mutation = createMutation(() => ({
     mutationFn: () => {
       const err = new Error('Expected mock error')
       err.stack = ''
       return Promise.reject(err)
     },
-  })
+  }))
 </script>
 
-<button on:click={() => $mutation.reset()}>Reset</button>
-<button on:click={() => $mutation.mutate()}>Mutate</button>
+<button onclick={() => mutation.reset()}>Reset</button>
+<button onclick={() => mutation.mutate()}>Mutate</button>
 
-<div>Error: {$mutation.error?.message}</div>
+<div>Error: {mutation.error?.message ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createMutation/createMutation.test.ts b/packages/svelte-query/tests/createMutation/createMutation.test.ts
index d120655e314..f2186309cb7 100644
--- a/packages/svelte-query/tests/createMutation/createMutation.test.ts
+++ b/packages/svelte-query/tests/createMutation/createMutation.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { sleep } from '../utils.js'
+import { sleep } from '../utils.svelte.js'
 import ResetExample from './ResetExample.svelte'
 import OnSuccessExample from './OnSuccessExample.svelte'
 import FailureExample from './FailureExample.svelte'
@@ -103,6 +103,6 @@ describe('createMutation', () => {
     await waitFor(() => rendered.getByText('Status: success'))
     await waitFor(() => rendered.getByText('Data: 2'))
     await waitFor(() => rendered.getByText('Failure Count: 0'))
-    await waitFor(() => rendered.getByText('Failure Reason: null'))
+    await waitFor(() => rendered.getByText('Failure Reason: undefined'))
   })
 })
diff --git a/packages/svelte-query/tests/createQueries/BaseExample.svelte b/packages/svelte-query/tests/createQueries/BaseExample.svelte
index b9b5ae7c47a..9dd218c8ab5 100644
--- a/packages/svelte-query/tests/createQueries/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQueries/BaseExample.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
   import { createQueries } from '../../src/index.js'
   import type { QueryClient } from '@tanstack/query-core'
-  import type { QueriesOptions } from '../../src/index.js'
+  import type {
+    QueriesOptions,
+    QueriesResults,
+  } from '../../src/createQueries.svelte'
 
-  export let options: {
-    queries: [...QueriesOptions<any>]
-  }
-  export let queryClient: QueryClient
+  let {
+    options,
+    queryClient,
+  }: {
+    options: {
+      queries: () => [...QueriesOptions<any>]
+      combine?: (result: QueriesResults<Array<any>>) => any
+    }
+    queryClient: QueryClient
+  } = $props()
 
   const queries = createQueries(options, queryClient)
 </script>
 
-{#each $queries as query, index}
+{#each queries as query, index}
   <div>Status {index + 1}: {query.status}</div>
   <div>Data {index + 1}: {query.data}</div>
 {/each}
diff --git a/packages/svelte-query/tests/createQueries/CombineExample.svelte b/packages/svelte-query/tests/createQueries/CombineExample.svelte
index c8fa73696c0..4fb83f6c35f 100644
--- a/packages/svelte-query/tests/createQueries/CombineExample.svelte
+++ b/packages/svelte-query/tests/createQueries/CombineExample.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQueries } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
   import type { QueryClient } from '@tanstack/query-core'
 
   export let queryClient: QueryClient
@@ -9,13 +9,14 @@
 
   const queries = createQueries(
     {
-      queries: ids.map((id) => ({
-        queryKey: [id],
-        queryFn: async () => {
-          await sleep(5)
-          return id
-        },
-      })),
+      queries: () =>
+        ids.map((id) => ({
+          queryKey: [id],
+          queryFn: async () => {
+            await sleep(5)
+            return id
+          },
+        })),
       combine: (results) => {
         return {
           isPending: results.some((result) => result.isPending),
@@ -28,5 +29,5 @@
   )
 </script>
 
-<div>isPending: {$queries.isPending}</div>
-<div>Data: {$queries.data ?? 'undefined'}</div>
+<div>isPending: {queries.isPending}</div>
+<div>Data: {queries.data}</div>
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
index 36f4db2b207..aae12fefda2 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
@@ -1,8 +1,7 @@
 import { describe, expectTypeOf, test } from 'vitest'
-import { get } from 'svelte/store'
 import { skipToken } from '@tanstack/query-core'
 import { createQueries, queryOptions } from '../../src/index.js'
-import type { OmitKeyof, QueryObserverResult } from '@tanstack/query-core'
+import type { QueryObserverResult } from '@tanstack/query-core'
 import type { CreateQueryOptions } from '../../src/index.js'
 
 describe('createQueries', () => {
@@ -18,9 +17,9 @@ describe('createQueries', () => {
         wow: true,
       },
     })
-    const queryResults = createQueries({ queries: [options] })
+    const queryResults = createQueries({ queries: () => [options] })
 
-    const data = get(queryResults)[0].data
+    const data = queryResults[0].data
 
     expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
   })
@@ -28,11 +27,9 @@ describe('createQueries', () => {
   test('Allow custom hooks using UseQueryOptions', () => {
     type Data = string
 
-    const useCustomQueries = (
-      options?: OmitKeyof<CreateQueryOptions<Data>, 'queryKey' | 'queryFn'>,
-    ) => {
+    const useCustomQueries = (options?: CreateQueryOptions<Data>) => {
       return createQueries({
-        queries: [
+        queries: () => [
           {
             ...options,
             queryKey: ['todos-key'],
@@ -43,14 +40,14 @@ describe('createQueries', () => {
     }
 
     const query = useCustomQueries()
-    const data = get(query)[0].data
+    const data = query[0].data
 
     expectTypeOf(data).toEqualTypeOf<Data | undefined>()
   })
 
   test('TData should have correct type when conditional skipToken is passed', () => {
     const queryResults = createQueries({
-      queries: [
+      queries: () => [
         {
           queryKey: ['withSkipToken'],
           queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
@@ -58,7 +55,7 @@ describe('createQueries', () => {
       ],
     })
 
-    const firstResult = get(queryResults)[0]
+    const firstResult = queryResults[0]
 
     expectTypeOf(firstResult).toEqualTypeOf<
       QueryObserverResult<number, Error>
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test.ts b/packages/svelte-query/tests/createQueries/createQueries.test.ts
index c8efa1f08dd..bd0c098e700 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '../utils.js'
+import { sleep } from '../utils.svelte.js'
 import BaseExample from './BaseExample.svelte'
 import CombineExample from './CombineExample.svelte'
 
@@ -10,7 +10,7 @@ describe('createQueries', () => {
     const rendered = render(BaseExample, {
       props: {
         options: {
-          queries: [
+          queries: () => [
             {
               queryKey: ['key-1'],
               queryFn: async () => {
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index d7a824c26b0..030b205e57e 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -1,18 +1,28 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { createQuery } from '../../src/index.js'
   import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
-  import type { CreateQueryOptions, StoreOrVal } from '../../src/index.js'
+  import type { CreateQueryOptions, FunctionedParams } from '../../src/index.js'
 
-  export let options: StoreOrVal<CreateQueryOptions<any>>
-  export let queryClient: QueryClient
-  export let states: Writable<Array<QueryObserverResult>>
+  let {
+    options,
+    queryClient,
+    states,
+  }: {
+    options: FunctionedParams<CreateQueryOptions<any>>
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
   const query = createQuery(options, queryClient)
 
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<div>Status: {$query.status}</div>
-<div>Failure Count: {$query.failureCount}</div>
-<div>Data: {$query.data ?? 'undefined'}</div>
+<div>Status: {query.status}</div>
+<div>Failure Count: {query.failureCount}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
index 3d50a2d73c1..97beac8795c 100644
--- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte
+++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
@@ -1,31 +1,39 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { QueryClient } from '@tanstack/query-core'
-  import { derived, writable } from 'svelte/store'
   import { createQuery } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
 
-  export let states: Writable<Array<QueryObserverResult>>
+  let {
+    states,
+  }: {
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
   const queryClient = new QueryClient()
-  const count = writable(0)
+  let count = $state(0)
 
-  const options = derived(count, ($count) => ({
-    queryKey: ['test', $count],
-    queryFn: async () => {
-      await sleep(5)
-      return $count
-    },
-    enabled: $count === 0,
-  }))
+  const query = createQuery(
+    () => ({
+      queryKey: ['test', count],
+      queryFn: async () => {
+        await sleep(5)
+        return count
+      },
+      enabled: count === 0,
+    }),
+    queryClient,
+  )
 
-  const query = createQuery(options, queryClient)
-
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<button on:click={() => ($count += 1)}>Increment</button>
+<button onclick={() => (count += 1)}>Increment</button>
 
-<div>Data: {$query.data ?? 'undefined'}</div>
-<div>Count: {$count}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
+<div>Count: {count}</div>
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
index 5b9737e7319..4c6781682d2 100644
--- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -1,30 +1,39 @@
 <script lang="ts">
-  import { derived, writable } from 'svelte/store'
+  import { untrack } from 'svelte'
   import { createQuery, keepPreviousData } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
   import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
 
-  export let queryClient: QueryClient
-  export let states: Writable<Array<QueryObserverResult>>
+  let {
+    queryClient,
+    states,
+  }: {
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
-  const count = writable(0)
+  let count = $state(0)
 
-  const options = derived(count, ($count) => ({
-    queryKey: ['test', $count],
-    queryFn: async () => {
-      await sleep(5)
-      return $count
-    },
-    placeholderData: keepPreviousData,
-  }))
+  const query = createQuery(
+    () => ({
+      queryKey: ['test', count],
+      queryFn: async () => {
+        await sleep(5)
+        return count
+      },
+      placeholderData: keepPreviousData,
+    }),
+    queryClient,
+  )
 
-  const query = createQuery(options, queryClient)
-
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<button on:click={() => ($count += 1)}>setCount</button>
+<button onclick={() => (count += 1)}>setCount</button>
 
-<div>Status: {$query.status}</div>
-<div>Data: {$query.data ?? 'undefined'}</div>
+<div>Status: {query.status}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createQuery/RefetchExample.svelte b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
index 8a4adb4b5ff..45b445dd765 100644
--- a/packages/svelte-query/tests/createQuery/RefetchExample.svelte
+++ b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
@@ -1,32 +1,40 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { QueryClient } from '@tanstack/query-core'
-  import { derived, writable } from 'svelte/store'
   import { createQuery } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
-  import type { Writable } from 'svelte/store'
 
-  export let states: Writable<Array<QueryObserverResult>>
+  let {
+    states,
+  }: {
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
   const queryClient = new QueryClient()
-  const count = writable(0)
+  let count = $state(0)
 
-  const options = derived(count, ($count) => ({
-    queryKey: ['test'],
-    queryFn: async () => {
-      await sleep(5)
-      return ++$count
-    },
-  }))
+  const query = createQuery(
+    () => ({
+      queryKey: ['test'],
+      queryFn: async () => {
+        await sleep(5)
+        return ++count
+      },
+    }),
+    queryClient,
+  )
 
-  const query = createQuery(options, queryClient)
-
-  $: states.update((prev) => [...prev, $query])
+  $effect(() => {
+    // @ts-expect-error
+    // svelte-ignore state_snapshot_uncloneable
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+  })
 </script>
 
-<button on:click={() => queryClient.removeQueries({ queryKey: ['test'] })}
+<button onclick={() => queryClient.removeQueries({ queryKey: ['test'] })}
   >Remove</button
 >
-<button on:click={() => $query.refetch()}>Refetch</button>
+<button onclick={() => query.refetch()}>Refetch</button>
 
-<div>Data: {$query.data ?? 'undefined'}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test.ts b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
similarity index 76%
rename from packages/svelte-query/tests/createQuery/createQuery.test.ts
rename to packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
index 11b09fd69c5..f01a21db4fe 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
@@ -1,18 +1,16 @@
 import { describe, expect, test } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { derived, get, writable } from 'svelte/store'
 import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '../utils.js'
+import { ref, sleep } from '../utils.svelte.js'
 import BaseExample from './BaseExample.svelte'
 import DisabledExample from './DisabledExample.svelte'
 import PlaceholderData from './PlaceholderData.svelte'
 import RefetchExample from './RefetchExample.svelte'
-import type { Writable } from 'svelte/store'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createQuery', () => {
   test('Return the correct states for a successful query', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const options = {
       queryKey: ['test'],
@@ -24,9 +22,9 @@ describe('createQuery', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        options,
+        options: () => options,
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
@@ -34,11 +32,9 @@ describe('createQuery', () => {
       expect(rendered.queryByText('Status: success')).toBeInTheDocument()
     })
 
-    const states = get(statesStore)
+    expect(states.value).toHaveLength(2)
 
-    expect(states).toHaveLength(2)
-
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -65,7 +61,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: 'Success',
       dataUpdatedAt: expect.any(Number),
       error: null,
@@ -94,7 +90,7 @@ describe('createQuery', () => {
   })
 
   test('Return the correct states for an unsuccessful query', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const options = {
       queryKey: ['test'],
@@ -105,19 +101,17 @@ describe('createQuery', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        options,
+        options: () => options,
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
     await waitFor(() => rendered.getByText('Status: error'))
 
-    const states = get(statesStore)
-
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -144,7 +138,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -171,7 +165,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: new Error('Rejected'),
@@ -200,21 +194,21 @@ describe('createQuery', () => {
   })
 
   test('Accept a writable store for options', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
-    const optionsStore = writable({
+    const optionsStore = $state(() => ({
       queryKey: ['test'],
       queryFn: async () => {
         await sleep(5)
         return 'Success'
       },
-    })
+    }))
 
     const rendered = render(BaseExample, {
       props: {
         options: optionsStore,
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
@@ -224,12 +218,12 @@ describe('createQuery', () => {
   })
 
   test('Accept a derived store for options', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
-    const writableStore = writable('test')
+    const writableStore = $state('test')
 
-    const derivedStore = derived(writableStore, ($store) => ({
-      queryKey: [$store],
+    const derivedStore = $derived(() => ({
+      queryKey: [writableStore],
       queryFn: async () => {
         await sleep(5)
         return 'Success'
@@ -240,7 +234,7 @@ describe('createQuery', () => {
       props: {
         options: derivedStore,
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
@@ -250,15 +244,15 @@ describe('createQuery', () => {
   })
 
   test('Ensure reactivity when queryClient defaults are set', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
-    const writableStore = writable(1)
+    let writableStore = $state(1)
 
-    const derivedStore = derived(writableStore, ($store) => ({
-      queryKey: [$store],
+    const derivedStore = $derived(() => ({
+      queryKey: [writableStore],
       queryFn: async () => {
         await sleep(5)
-        return $store
+        return writableStore
       },
     }))
 
@@ -268,7 +262,7 @@ describe('createQuery', () => {
         queryClient: new QueryClient({
           defaultOptions: { queries: { staleTime: 60 * 1000 } },
         }),
-        states: statesStore,
+        states,
       },
     })
 
@@ -277,14 +271,14 @@ describe('createQuery', () => {
       expect(rendered.queryByText('Data: 2')).not.toBeInTheDocument()
     })
 
-    writableStore.set(2)
+    writableStore = 2
 
     await waitFor(() => {
       expect(rendered.queryByText('Data: 1')).not.toBeInTheDocument()
       expect(rendered.queryByText('Data: 2')).toBeInTheDocument()
     })
 
-    writableStore.set(1)
+    writableStore = 1
 
     await waitFor(() => {
       expect(rendered.queryByText('Data: 1')).toBeInTheDocument()
@@ -293,12 +287,12 @@ describe('createQuery', () => {
   })
 
   test('Keep previous data when placeholderData is set', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(PlaceholderData, {
       props: {
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
@@ -308,12 +302,10 @@ describe('createQuery', () => {
 
     await waitFor(() => rendered.getByText('Data: 1'))
 
-    const states = get(statesStore)
-
-    expect(states).toHaveLength(4)
+    expect(states.value).toHaveLength(4)
 
     // Initial
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       isFetching: true,
       isSuccess: false,
@@ -321,7 +313,7 @@ describe('createQuery', () => {
     })
 
     // Fetched
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
@@ -329,7 +321,7 @@ describe('createQuery', () => {
     })
 
     // Set state
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       data: 0,
       isFetching: true,
       isSuccess: true,
@@ -337,7 +329,7 @@ describe('createQuery', () => {
     })
 
     // New data
-    expect(states[3]).toMatchObject({
+    expect(states.value[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
@@ -346,11 +338,11 @@ describe('createQuery', () => {
   })
 
   test('Should not fetch when switching to a disabled query', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(DisabledExample, {
       props: {
-        states: statesStore,
+        states,
       },
     })
 
@@ -359,30 +351,28 @@ describe('createQuery', () => {
     fireEvent.click(rendered.getByRole('button', { name: /Increment/i }))
 
     await waitFor(() => {
-      rendered.getByText('Count: 1')
-      rendered.getByText('Data: undefined')
+      rendered.getByText('Count: 0')
+      rendered.getByText('Data: 0')
     })
 
-    const states = get(statesStore)
-
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
     // Fetch query
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       isFetching: true,
       isSuccess: false,
     })
 
     // Fetched query
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
     })
 
     // Switch to disabled query
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       data: undefined,
       isFetching: false,
       isSuccess: false,
@@ -390,11 +380,11 @@ describe('createQuery', () => {
   })
 
   test('Create a new query when refetching a removed query', async () => {
-    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(RefetchExample, {
       props: {
-        states: statesStore,
+        states,
       },
     })
 
@@ -406,16 +396,14 @@ describe('createQuery', () => {
     fireEvent.click(rendered.getByRole('button', { name: /Refetch/i }))
     await waitFor(() => rendered.getByText('Data: 2'))
 
-    const states = get(statesStore)
-
-    expect(states.length).toBe(4)
+    expect(states.value).toHaveLength(4)
     // Initial
-    expect(states[0]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+    expect(states.value[0]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
     // Fetched
-    expect(states[1]).toMatchObject({ data: 1 })
+    expect(states.value[1]).toMatchObject({ data: 1 })
     // Switch
-    expect(states[2]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+    expect(states.value[2]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
     // Fetched
-    expect(states[3]).toMatchObject({ data: 2 })
+    expect(states.value[3]).toMatchObject({ data: 2 })
   })
 })
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test-d.ts b/packages/svelte-query/tests/createQuery/createQuery.test-d.ts
index 79367584010..eb65c66306b 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test-d.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.test-d.ts
@@ -1,18 +1,16 @@
 import { describe, expectTypeOf, test } from 'vitest'
-import { get } from 'svelte/store'
 import { createQuery, queryOptions } from '../../src/index.js'
-import type { OmitKeyof } from '@tanstack/query-core'
 import type { CreateQueryOptions } from '../../src/index.js'
 
 describe('createQuery', () => {
   test('TData should always be defined when initialData is provided as an object', () => {
-    const query = createQuery({
+    const query = createQuery(() => ({
       queryKey: ['key'],
       queryFn: () => ({ wow: true }),
       initialData: { wow: true },
-    })
+    }))
 
-    expectTypeOf(get(query).data).toEqualTypeOf<{ wow: boolean }>()
+    expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean }>()
   })
 
   test('TData should be defined when passed through queryOptions', () => {
@@ -21,49 +19,47 @@ describe('createQuery', () => {
       queryFn: () => ({ wow: true }),
       initialData: { wow: true },
     })
-    const query = createQuery(options)
+    const query = createQuery(() => options)
 
-    expectTypeOf(get(query).data).toEqualTypeOf<{ wow: boolean }>()
+    expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean }>()
   })
 
   test('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
-    const query = createQuery({
+    const query = createQuery(() => ({
       queryKey: ['key'],
       queryFn: () => ({ wow: true }),
       initialData: () => ({ wow: true }),
-    })
+    }))
 
-    expectTypeOf(get(query).data).toEqualTypeOf<{ wow: boolean }>()
+    expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean }>()
   })
 
   test('TData should have undefined in the union when initialData is NOT provided', () => {
-    const query = createQuery({
+    const query = createQuery(() => ({
       queryKey: ['key'],
       queryFn: () => {
         return {
           wow: true,
         }
       },
-    })
+    }))
 
-    expectTypeOf(get(query).data).toEqualTypeOf<{ wow: boolean } | undefined>()
+    expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean } | undefined>()
   })
 
   test('Allow custom hooks using CreateQueryOptions', () => {
     type Data = string
 
-    const useCustomQuery = (
-      options?: OmitKeyof<CreateQueryOptions<Data>, 'queryKey' | 'queryFn'>,
-    ) => {
-      return createQuery({
+    const useCustomQuery = (options?: CreateQueryOptions<Data>) => {
+      return createQuery(() => ({
         ...options,
         queryKey: ['todos-key'],
         queryFn: () => Promise.resolve('data'),
-      })
+      }))
     }
 
     const query = useCustomQuery()
 
-    expectTypeOf(get(query).data).toEqualTypeOf<Data | undefined>()
+    expectTypeOf(query.data).toEqualTypeOf<Data | undefined>()
   })
 })
diff --git a/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts b/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts
index 45f98dd085a..8cec61e6ead 100644
--- a/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts
+++ b/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts
@@ -1,5 +1,4 @@
 import { describe, expectTypeOf, test } from 'vitest'
-import { get } from 'svelte/store'
 import { QueryClient } from '@tanstack/query-core'
 import { createInfiniteQuery, infiniteQueryOptions } from '../../src/index.js'
 import type { InfiniteData } from '@tanstack/query-core'
@@ -37,10 +36,10 @@ describe('queryOptions', () => {
       initialPageParam: 1,
     })
 
-    const query = createInfiniteQuery(options)
+    const query = createInfiniteQuery(() => options)
 
     // known issue: type of pageParams is unknown when returned from useInfiniteQuery
-    expectTypeOf(get(query).data).toEqualTypeOf<
+    expectTypeOf(query.data).toEqualTypeOf<
       InfiniteData<string, unknown> | undefined
     >()
   })
diff --git a/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts b/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts
index 8562a7c2278..f27b56823c7 100644
--- a/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts
+++ b/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts
@@ -1,5 +1,4 @@
 import { describe, expectTypeOf, test } from 'vitest'
-import { get } from 'svelte/store'
 import {
   QueriesObserver,
   QueryClient,
@@ -47,10 +46,10 @@ describe('queryOptions', () => {
     })
 
     const queries = createQueries({
-      queries: [options],
+      queries: () => [options],
     })
 
-    expectTypeOf(get(queries)[0].data).toEqualTypeOf<number | undefined>()
+    expectTypeOf(queries[0].data).toEqualTypeOf<number | undefined>()
   })
 
   test('Should tag the queryKey with the result type of the QueryFn', () => {
diff --git a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
index 0e0919bef18..5e67704dfd7 100644
--- a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { derived, writable } from 'svelte/store'
   import { createQuery, useIsFetching } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { sleep } from '../utils.svelte.js'
 
   const queryClient = new QueryClient()
-  const ready = writable(false)
+  let ready = $state(false)
 
   const isFetching = useIsFetching(undefined, queryClient)
 
-  const options = derived(ready, ($ready) => ({
-    queryKey: ['test'],
-    queryFn: async () => {
-      await sleep(5)
-      return 'test'
-    },
-    enabled: $ready,
-  }))
-
-  const query = createQuery(options, queryClient)
+  const query = createQuery(
+    () => ({
+      queryKey: ['test'],
+      queryFn: async () => {
+        await sleep(5)
+        return 'test'
+      },
+      enabled: ready,
+    }),
+    queryClient,
+  )
 </script>
 
-<button on:click={() => ($ready = true)}>setReady</button>
+<button onclick={() => (ready = true)}>setReady</button>
 
-<div>isFetching: {$isFetching}</div>
-<div>Data: {$query.data ?? 'undefined'}</div>
+<div>isFetching: {isFetching()}</div>
+<div>Data: {query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/useIsFetching/useIsFetching.test.ts b/packages/svelte-query/tests/useIsFetching/useIsFetching.test.ts
index 7ca6ca6322b..6420dfdfd30 100644
--- a/packages/svelte-query/tests/useIsFetching/useIsFetching.test.ts
+++ b/packages/svelte-query/tests/useIsFetching/useIsFetching.test.ts
@@ -1,5 +1,5 @@
 import { describe, test } from 'vitest'
-import { fireEvent, render } from '@testing-library/svelte'
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import BaseExample from './BaseExample.svelte'
 
 describe('useIsFetching', () => {
@@ -8,7 +8,10 @@ describe('useIsFetching', () => {
 
     await rendered.findByText('isFetching: 0')
     fireEvent.click(rendered.getByRole('button', { name: /setReady/i }))
-    await rendered.findByText('isFetching: 1')
-    await rendered.findByText('isFetching: 0')
+
+    waitFor(async () => {
+      await rendered.findByText('isFetching: 1')
+      await rendered.findByText('isFetching: 0')
+    })
   })
 })
diff --git a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
index b144393de44..42ae0416e7c 100644
--- a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { createMutation, useIsMutating } from '../../src/index.js'
-  import { sleep } from '../utils.js'
+  import { createMutation } from '../../src/createMutation.svelte'
+  import { sleep } from '../utils.svelte.js'
+  import { useIsMutating } from '../../src/useIsMutating.svelte'
 
   const queryClient = new QueryClient()
   const isMutating = useIsMutating(undefined, queryClient)
 
   const mutation = createMutation(
-    {
+    () => ({
       mutationKey: ['mutation-1'],
       mutationFn: async () => {
         await sleep(5)
         return 'data'
       },
-    },
+    }),
     queryClient,
   )
 </script>
 
-<button on:click={() => $mutation.mutate()}>Trigger</button>
+<button onclick={() => mutation.mutate()}>Trigger</button>
 
-<div>isMutating: {$isMutating}</div>
+<div>isMutating: {isMutating()}</div>
diff --git a/packages/svelte-query/tests/useMutationState/BaseExample.svelte b/packages/svelte-query/tests/useMutationState/BaseExample.svelte
index ce85130099f..b65cd413713 100644
--- a/packages/svelte-query/tests/useMutationState/BaseExample.svelte
+++ b/packages/svelte-query/tests/useMutationState/BaseExample.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import {
-    createMutation,
-    setQueryClientContext,
-    useMutationState,
-  } from '../../src/index.js'
+  import { setQueryClientContext } from '../../src/index.js'
+  import { createMutation } from '../../src/createMutation.svelte'
+  import { useMutationState } from '../../src/useMutationState.svelte'
   import type {
     CreateMutationOptions,
+    FunctionedParams,
     MutationStateOptions,
-  } from '../../src/types.js'
+  } from '../../src/index.js'
 
-  export let successMutationOpts: CreateMutationOptions
-  export let errorMutationOpts: CreateMutationOptions
-  export let mutationStateOpts: MutationStateOptions | undefined = undefined
+  let {
+    successMutationOpts,
+    errorMutationOpts,
+    mutationStateOpts,
+  }: {
+    successMutationOpts: FunctionedParams<CreateMutationOptions>
+    errorMutationOpts: FunctionedParams<CreateMutationOptions>
+    mutationStateOpts?: MutationStateOptions | undefined
+  } = $props()
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
@@ -21,16 +26,16 @@
   const errorMutation = createMutation(errorMutationOpts)
 
   const mutationState = useMutationState(mutationStateOpts)
-  $: statuses = $mutationState.map((state) => state.status)
+  let statuses = $derived(mutationState.map((state) => state.status))
 </script>
 
 <div data-testid="result">
   {JSON.stringify(statuses)}
 </div>
 
-<button data-testid="success" on:click={() => $successMutation.mutate()}>
+<button data-testid="success" onclick={() => successMutation.mutate()}>
   Click
 </button>
-<button data-testid="error" on:click={() => $errorMutation.mutate()}>
+<button data-testid="error" onclick={() => errorMutation.mutate()}>
   Click
 </button>
diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
index c2190cfb14f..1bf779b02e7 100644
--- a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
+++ b/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
@@ -12,15 +12,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
       },
     })
 
@@ -49,15 +49,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
 
         mutationStateOpts: {
           filters: { status: 'error' },
@@ -88,15 +88,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
 
         mutationStateOpts: {
           filters: { mutationKey: ['success'] },
diff --git a/packages/svelte-query/tests/utils.svelte.ts b/packages/svelte-query/tests/utils.svelte.ts
new file mode 100644
index 00000000000..c31dde03893
--- /dev/null
+++ b/packages/svelte-query/tests/utils.svelte.ts
@@ -0,0 +1,18 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}
+
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}
diff --git a/packages/svelte-query/tests/utils.ts b/packages/svelte-query/tests/utils.ts
deleted file mode 100644
index 1a3a619a227..00000000000
--- a/packages/svelte-query/tests/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function sleep(timeout: number): Promise<void> {
-  return new Promise((resolve, _reject) => {
-    setTimeout(resolve, timeout)
-  })
-}
diff --git a/packages/svelte-query/vite.config.ts b/packages/svelte-query/vite.config.ts
index 3f68d52480e..873c5976e7c 100644
--- a/packages/svelte-query/vite.config.ts
+++ b/packages/svelte-query/vite.config.ts
@@ -11,8 +11,12 @@ export default defineConfig({
     watch: false,
     environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
-    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
+    coverage: { enabled: false, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
-    restoreMocks: true,
+    alias: {
+      // This is needed for svelte-5 support
+      // https://github.com/testing-library/svelte-testing-library?tab=readme-ov-file#svelte-5-support
+      '@testing-library/svelte': '@testing-library/svelte/svelte5',
+    },
   },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e26452af63..14a2ea040db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,7 +80,7 @@ importers:
         version: 3.3.3
       prettier-plugin-svelte:
         specifier: ^3.2.6
-        version: 3.2.6(prettier@3.3.3)(svelte@4.2.18)
+        version: 3.2.6(prettier@3.3.3)(svelte@5.0.0-next.204)
       publint:
         specifier: ^0.2.9
         version: 0.2.9
@@ -1270,19 +1270,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1307,19 +1307,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1338,19 +1338,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1369,19 +1369,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1400,19 +1400,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1430,17 +1430,17 @@ importers:
         version: link:../../../packages/svelte-query-devtools
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@tsconfig/svelte':
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1459,19 +1459,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1490,13 +1490,13 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+        version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@sveltejs/kit':
         specifier: ^2.5.18
-        version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.40)
@@ -1504,11 +1504,11 @@ importers:
         specifier: ^8.4.40
         version: 8.4.40
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
       tailwindcss:
         specifier: ^3.4.7
         version: 3.4.7
@@ -1801,8 +1801,8 @@ importers:
   integrations/svelte-vite:
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@tanstack/svelte-query':
         specifier: workspace:*
         version: link:../../packages/svelte-query
@@ -1810,8 +1810,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/svelte-query-devtools
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       vite:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
@@ -2160,22 +2160,22 @@ importers:
     devDependencies:
       '@sveltejs/package':
         specifier: ^2.3.2
-        version: 2.3.2(svelte@4.2.18)(typescript@5.4.2)
+        version: 2.3.2(svelte@5.0.0-next.204)(typescript@5.4.2)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@testing-library/svelte':
         specifier: ^5.2.1
-        version: 5.2.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@25.0.0)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 5.2.1(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@24.1.1)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       eslint-plugin-svelte:
         specifier: ^2.43.0
-        version: 2.43.0(eslint@8.57.0)(svelte@4.2.18)
+        version: 2.43.0(eslint@8.57.0)(svelte@5.0.0-next.204)
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
 
   packages/svelte-query-devtools:
     dependencies:
@@ -2188,22 +2188,22 @@ importers:
     devDependencies:
       '@sveltejs/package':
         specifier: ^2.3.2
-        version: 2.3.2(svelte@4.2.18)(typescript@5.4.2)
+        version: 2.3.2(svelte@5.0.0-next.204)(typescript@5.4.2)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@tanstack/svelte-query':
         specifier: workspace:*
         version: link:../svelte-query
       eslint-plugin-svelte:
         specifier: ^2.43.0
-        version: 2.43.0(eslint@8.57.0)(svelte@4.2.18)
+        version: 2.43.0(eslint@8.57.0)(svelte@5.0.0-next.204)
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
 
   packages/svelte-query-persist-client:
     dependencies:
@@ -2213,25 +2213,25 @@ importers:
     devDependencies:
       '@sveltejs/package':
         specifier: ^2.3.2
-        version: 2.3.2(svelte@4.2.18)(typescript@5.4.2)
+        version: 2.3.2(svelte@5.0.0-next.204)(typescript@5.4.2)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        specifier: ^4.0.0-next.5
+        version: 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@tanstack/svelte-query':
         specifier: workspace:*
         version: link:../svelte-query
       '@testing-library/svelte':
         specifier: ^5.2.1
-        version: 5.2.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@25.0.0)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+        version: 5.2.1(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@24.1.1)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       eslint-plugin-svelte:
         specifier: ^2.43.0
-        version: 2.43.0(eslint@8.57.0)(svelte@4.2.18)
+        version: 2.43.0(eslint@8.57.0)(svelte@5.0.0-next.204)
       svelte:
-        specifier: ^4.2.18
-        version: 4.2.18
+        specifier: ^5.0.0-next.204
+        version: 5.0.0-next.204
       svelte-check:
         specifier: ^3.8.4
-        version: 3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)
+        version: 3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)
 
   packages/vue-query:
     dependencies:
@@ -5914,19 +5914,19 @@ packages:
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.3':
+    resolution: {integrity: sha512-kuGJ2CZ5lAw3gKF8Kw0AfKtUJWbwdlDHY14K413B0MCyrzvQvsKTorwmwZcky0+QqY6RnVIZ/5FttB9bQmkLXg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.1':
-    resolution: {integrity: sha512-rimpFEAboBBHIlzISibg94iP09k/KYdHgVhJlcsTfn7KMBhc70jFX/GRWkRdFCc2fdnk+4+Bdfej23cMDnJS6A==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.5':
+    resolution: {integrity: sha512-FBPD9Ahvcgdiy/ft1mbPZt7KjK//r96/1alkgb37qPGTNVcvaTqwvDIrfx9RHQ7JLLf3UdnBQYj/MrdKqIT9uw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
   '@svgr/babel-plugin-add-jsx-attribute@5.4.0':
@@ -7774,9 +7774,6 @@ packages:
   code-block-writer@12.0.0:
     resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   collection-visit@1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
     engines: {node: '>=0.10.0'}
@@ -8267,10 +8264,6 @@ packages:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-vendor@2.0.8:
     resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
 
@@ -9149,6 +9142,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -11480,9 +11476,6 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   mdn-data@2.0.4:
     resolution: {integrity: sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==}
 
@@ -12668,9 +12661,6 @@ packages:
   performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@0.2.1:
     resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
 
@@ -15293,8 +15283,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-check@3.8.5:
-    resolution: {integrity: sha512-3OGGgr9+bJ/+1nbPgsvulkLC48xBsqsgtc8Wam281H4G9F5v3mYGa2bHRsPuwHC5brKl4AxJH95QF73kmfihGQ==}
+  svelte-check@3.8.4:
+    resolution: {integrity: sha512-61aHMkdinWyH8BkkTX9jPLYxYzaAAz/FK/VQqdr2FiCQQ/q04WCwDlpGbHff1GdrMYTmW8chlTFvRWL9k0A8vg==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
@@ -15308,12 +15298,6 @@ packages:
       svelte:
         optional: true
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
   svelte-preprocess@5.1.4:
     resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
     engines: {node: '>= 16.0.0'}
@@ -15351,15 +15335,15 @@ packages:
       typescript:
         optional: true
 
-  svelte2tsx@0.7.15:
-    resolution: {integrity: sha512-91RbLJI448FR1UEZqXSS3ucVMERuWo8ACOhxfkBPK1CL2ocGMOC5bwc8tzFvb/Ji8NqZ7wmSGfvRebcUsiauKA==}
+  svelte2tsx@0.7.13:
+    resolution: {integrity: sha512-aObZ93/kGAiLXA/I/kP+x9FriZM+GboB/ReOIGmLNbVGEd2xC+aTCppm3mk1cc9I/z60VQf7b2QDxC3jOXu3yw==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@4.2.18:
-    resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==}
-    engines: {node: '>=16'}
+  svelte@5.0.0-next.204:
+    resolution: {integrity: sha512-njfhXGU9KgOy2sXj3zbGQlbHK3utupMtNQgOmlIh+G90UEGzYE+ILi9JmQG1BEuWta+N0/lDtN21AbMischZIQ==}
+    engines: {node: '>=18'}
 
   svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
@@ -17085,6 +17069,9 @@ packages:
     engines: {node: '>=8.0.0'}
     hasBin: true
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -22260,14 +22247,14 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.11
 
-  '@sveltejs/adapter-auto@3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
+  '@sveltejs/adapter-auto@3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
     dependencies:
-      '@sveltejs/kit': 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      '@sveltejs/kit': 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
+  '@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.0.0
@@ -22279,39 +22266,38 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.4
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
       tiny-glob: 0.2.9
       vite: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
 
-  '@sveltejs/package@2.3.2(svelte@4.2.18)(typescript@5.4.2)':
+  '@sveltejs/package@2.3.2(svelte@5.0.0-next.204)(typescript@5.4.2)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 4.2.18
-      svelte2tsx: 0.7.15(svelte@4.2.18)(typescript@5.4.2)
+      svelte: 5.0.0-next.204
+      svelte2tsx: 0.7.13(svelte@5.0.0-next.204)(typescript@5.4.2)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.3(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      '@sveltejs/vite-plugin-svelte': 4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       debug: 4.3.6(supports-color@6.1.0)
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
       vite: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
+  '@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.3(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       debug: 4.3.6(supports-color@6.1.0)
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.11
-      svelte: 4.2.18
-      svelte-hmr: 0.16.0(svelte@4.2.18)
+      svelte: 5.0.0-next.204
       vite: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
       vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     transitivePeerDependencies:
@@ -22477,10 +22463,10 @@ snapshots:
       '@types/react': types-react@19.0.0-rc.1
       '@types/react-dom': types-react-dom@19.0.0-rc.1
 
-  '@testing-library/svelte@5.2.1(svelte@4.2.18)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@25.0.0)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
+  '@testing-library/svelte@5.2.1(svelte@5.0.0-next.204)(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vitest@2.0.5(@types/node@22.0.2)(jsdom@24.1.1)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
     optionalDependencies:
       vite: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
       vitest: 2.0.5(@types/node@22.0.2)(jsdom@25.0.0)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
@@ -24814,14 +24800,6 @@ snapshots:
 
   code-block-writer@12.0.0: {}
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.5
-      acorn: 8.12.1
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   collection-visit@1.0.0:
     dependencies:
       map-visit: 1.0.0
@@ -25387,11 +25365,6 @@ snapshots:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.0
-
   css-vendor@2.0.8:
     dependencies:
       '@babel/runtime': 7.25.0
@@ -26418,7 +26391,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-svelte@2.43.0(eslint@8.57.0)(svelte@4.2.18):
+  eslint-plugin-svelte@2.43.0(eslint@8.57.0)(svelte@5.0.0-next.204):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -26431,9 +26404,9 @@ snapshots:
       postcss-safe-parser: 6.0.0(postcss@8.4.40)
       postcss-selector-parser: 6.1.1
       semver: 7.6.3
-      svelte-eslint-parser: 0.41.0(svelte@4.2.18)
+      svelte-eslint-parser: 0.41.0(svelte@5.0.0-next.204)
     optionalDependencies:
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
     transitivePeerDependencies:
       - ts-node
 
@@ -26563,6 +26536,11 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.5
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -29351,8 +29329,6 @@ snapshots:
 
   mdn-data@2.0.14: {}
 
-  mdn-data@2.0.30: {}
-
   mdn-data@2.0.4: {}
 
   mdurl@2.0.0: {}
@@ -31058,12 +31034,6 @@ snapshots:
 
   performance-now@2.1.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@0.2.1: {}
 
   picocolors@1.0.1: {}
@@ -32041,10 +32011,10 @@ snapshots:
 
   prepend-http@1.0.4: {}
 
-  prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18):
+  prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@5.0.0-next.204):
     dependencies:
       prettier: 3.3.3
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
 
   prettier@2.8.8:
     optional: true
@@ -34198,14 +34168,14 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.5(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18):
+  svelte-check@3.8.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       picocolors: 1.0.1
       sade: 1.8.1
-      svelte: 4.2.18
-      svelte-preprocess: 5.1.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)(typescript@5.3.3)
+      svelte: 5.0.0-next.204
+      svelte-preprocess: 5.1.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -34218,7 +34188,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-eslint-parser@0.41.0(svelte@4.2.18):
+  svelte-eslint-parser@0.41.0(svelte@5.0.0-next.204):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -34226,20 +34196,16 @@ snapshots:
       postcss: 8.4.40
       postcss-scss: 4.0.9(postcss@8.4.40)
     optionalDependencies:
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
 
-  svelte-hmr@0.16.0(svelte@4.2.18):
-    dependencies:
-      svelte: 4.2.18
-
-  svelte-preprocess@5.1.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.18)(typescript@5.3.3):
+  svelte-preprocess@5.1.4(@babel/core@7.25.2)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.204)(typescript@5.3.3):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.11
       sorcery: 0.11.1
       strip-indent: 3.0.0
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
     optionalDependencies:
       '@babel/core': 7.25.2
       less: 4.2.0
@@ -34248,29 +34214,28 @@ snapshots:
       sass: 1.77.8
       typescript: 5.3.3
 
-  svelte2tsx@0.7.15(svelte@4.2.18)(typescript@5.4.2):
+  svelte2tsx@0.7.13(svelte@5.0.0-next.204)(typescript@5.4.2):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 4.2.18
+      svelte: 5.0.0-next.204
       typescript: 5.4.2
 
-  svelte@4.2.18:
+  svelte@5.0.0-next.204:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.5
       acorn: 8.12.1
+      acorn-typescript: 1.4.13(acorn@8.12.1)
       aria-query: 5.3.0
       axobject-query: 4.1.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
       magic-string: 0.30.11
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
   svg-parser@2.0.4: {}
 
@@ -36496,6 +36461,8 @@ snapshots:
     optionalDependencies:
       commander: 9.5.0
 
+  zimmerframe@1.1.2: {}
+
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2