- {#if $posts.status === 'pending'}
+ {#if posts.status === 'pending'}
Loading...
- {:else if $posts.status === 'error'}
-
Error: {$posts.error.message}
+ {:else if posts.status === 'error'}
+
Error: {posts.error.message}
{:else}
- {#each $posts.data as post}
+ {#each posts.data as post}
{/each}
- {#if $posts.isFetching}
+ {#if posts.isFetching}
Background Updating...
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index da5d841b0b..2cb76cd097 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 @@
-
+ {@render children()}
diff --git a/examples/svelte/basic/src/routes/[postId]/+page.svelte b/examples/svelte/basic/src/routes/[postId]/+page.svelte
index b68acc0bc0..2400baac2a 100644
--- a/examples/svelte/basic/src/routes/[postId]/+page.svelte
+++ b/examples/svelte/basic/src/routes/[postId]/+page.svelte
@@ -1,8 +1,7 @@
diff --git a/examples/svelte/basic/svelte.config.js b/examples/svelte/basic/svelte.config.js
index 2dee2d78a1..d6b43b0085 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 1a2da0f3f7..a46998ab2c 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.3",
"@sveltejs/kit": "^2.8.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.2",
- "svelte": "^4.2.18",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
+ "svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "5.7.2",
"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 c57658b1ef..d301f1b2a3 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 79c602e672..32f6e8971d 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
},
- })
+ }))
-{#if $query.isPending}
+{#if query.isPending}
Loading...
{/if}
-{#if $query.error}
-
Error: {$query.error.message}
+{#if query.error}
+
Error: {query.error.message}
{/if}
-{#if $query.isSuccess}
+{#if query.isSuccess}
- {#each $query.data.pages as { results }}
+ {#each query.data.pages as { results }}
{#each results as planet}
@@ -44,12 +44,12 @@
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 ef60a2f559..4b170dc01e 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 @@
-
+ {@render children()}
diff --git a/examples/svelte/load-more-infinite-scroll/svelte.config.js b/examples/svelte/load-more-infinite-scroll/svelte.config.js
index 0aa6cba937..d6b43b0085 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 1eee602d00..84039b7527 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.3",
"@sveltejs/kit": "^2.8.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.2",
- "svelte": "^4.2.18",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
+ "svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "5.7.2",
"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 ef60a2f559..4b170dc01e 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 @@
-
+ {@render children()}
diff --git a/examples/svelte/optimistic-updates/src/routes/+page.svelte b/examples/svelte/optimistic-updates/src/routes/+page.svelte
index af8738ffcc..feb5d1085c 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
('')
const client = useQueryClient()
@@ -36,12 +36,12 @@
}),
}).then((res) => res.json())
- const todos = createQuery({
+ const todos = createQuery(() => ({
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'] })
},
- })
+ }))
Optimistic Updates
@@ -87,36 +87,36 @@
-{#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}
- Updated At: {new Date($todos.data.ts).toLocaleTimeString()}
+ Updated At: {new Date(todos.data.ts).toLocaleTimeString()}
- {#each $todos.data.items as todo}
+ {#each todos.data.items as todo}
- {todo.text}
{/each}
{/if}
-{#if $todos.isFetching}
+{#if todos.isFetching}
'Background Updating...' : ' '
diff --git a/examples/svelte/optimistic-updates/svelte.config.js b/examples/svelte/optimistic-updates/svelte.config.js
index 2dee2d78a1..d6b43b0085 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 8a3f57bfea..dbda4d2a68 100644
--- a/examples/svelte/playground/package.json
+++ b/examples/svelte/playground/package.json
@@ -15,8 +15,8 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.2.3",
"@sveltejs/kit": "^2.8.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.2",
- "svelte": "^4.2.18",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
+ "svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "5.7.2",
"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 0000000000..18f0232ebb
--- /dev/null
+++ b/examples/svelte/playground/src/lib/stores.svelte.ts
@@ -0,0 +1,37 @@
+export function ref(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(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 2dcdd669a6..0000000000
--- 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(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 1b9267032c..76c2d0d277 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 @@
-
+ {@render children()}
diff --git a/examples/svelte/playground/src/routes/+page.svelte b/examples/svelte/playground/src/routes/+page.svelte
index 4830d01eb3..cec4a24208 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,
},
})
@@ -29,7 +29,7 @@
type="number"
min="0"
step="1000"
- bind:value={$staleTime}
+ bind:value={staleTime.value}
style="width: 100px"
/>
@@ -39,7 +39,7 @@
type="number"
min="0"
step="1000"
- bind:value={$gcTime}
+ bind:value={gcTime.value}
style="width: 100px"
/>
@@ -51,7 +51,7 @@
min="0"
max="1"
step=".05"
- bind:value={$errorRate}
+ bind:value={errorRate.value}
style="width: 100px"
/>
@@ -61,7 +61,7 @@
type="number"
min="1"
step="500"
- bind:value={$queryTimeMin}
+ bind:value={queryTimeMin.value}
style="width: 100px"
/>{' '}
@@ -71,7 +71,7 @@
type="number"
min="1"
step="500"
- bind:value={$queryTimeMax}
+ bind:value={queryTimeMax.value}
style="width: 100px"
/>