Skip to content

Commit 56f67c7

Browse files
zhihengGetlachlancollins
zhihengGet
authored and
lachlancollins
committed
WIP: Svelte 5 adapter (#6981)
docs(svelte-5-adapter): force runes mode for all examples (#7800) * docs(examples): force runes mode for all examples * Fix simple example mounting * Fix type feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples fix(svelte-5-adapter): function for `createMutation` options (#7805) * fix(svelte-5-adapter): require function for createMutation options * Fix type errors refactor(svelte-5-adapter): simplify createBaseQuery (#7808) * refactor: simplify createBaseQuery * Don't take snapshot of queryKey chore(svelte-5-adapter): tidy-up functions (#7809) * chore(svelte-5-adapter): tidy-up functions * Fix types * Update svelte Fix import extensions chore: ignore state_snapshot_uncloneable in tests Fix merge
1 parent 1eebfc9 commit 56f67c7

File tree

124 files changed

+1478
-1313
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+1478
-1313
lines changed

‎eslint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default [
4040
'@typescript-eslint/no-empty-function': 'off',
4141
'@typescript-eslint/no-unsafe-function-type': 'off',
4242
'no-case-declarations': 'off',
43+
'prefer-const': 'off',
4344
},
4445
},
4546
{

‎examples/svelte/auto-refetching/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^3.2.3",
1717
"@sveltejs/kit": "^2.8.2",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.2",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
19+
"svelte": "^5.0.0",
2020
"svelte-check": "^4.0.0",
2121
"typescript": "5.7.2",
2222
"vite": "^5.3.5"

‎examples/svelte/auto-refetching/src/routes/+layout.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
55
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
66
7+
const { children } = $props()
8+
79
const queryClient = new QueryClient({
810
defaultOptions: {
911
queries: {
@@ -15,7 +17,7 @@
1517

1618
<QueryClientProvider client={queryClient}>
1719
<main>
18-
<slot />
20+
{@render children()}
1921
</main>
2022
<SvelteQueryDevtools />
2123
</QueryClientProvider>

‎examples/svelte/auto-refetching/src/routes/+page.svelte

+19-21
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,30 @@
55
createMutation,
66
} from '@tanstack/svelte-query'
77
8-
let intervalMs = 1000
9-
let value = ''
8+
let intervalMs = $state(1000)
9+
let value = $state<string>('')
1010
1111
const client = useQueryClient()
1212
1313
const endpoint = 'http://localhost:5173/api/data'
1414
15-
$: todos = createQuery<{ items: string[] }>({
15+
const todos = createQuery<{ items: string[] }>(() => ({
1616
queryKey: ['refetch'],
1717
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
1818
// Refetch the data every second
1919
refetchInterval: intervalMs,
20-
})
20+
}))
2121
22-
const addMutation = createMutation({
22+
const addMutation = createMutation(() => ({
2323
mutationFn: (value: string) =>
2424
fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
2525
onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
26-
})
26+
}))
2727
28-
const clearMutation = createMutation({
28+
const clearMutation = createMutation(() => ({
2929
mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
3030
onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
31-
})
31+
}))
3232
</script>
3333

3434
<h1>Auto Refetch with stale-time set to 1s</h1>
@@ -49,46 +49,44 @@
4949
margin-left:.5rem;
5050
width:.75rem;
5151
height:.75rem;
52-
background: {$todos.isFetching ? 'green' : 'transparent'};
53-
transition: {!$todos.isFetching ? 'all .3s ease' : 'none'};
52+
background: {todos.isFetching ? 'green' : 'transparent'};
53+
transition: {!todos.isFetching ? 'all .3s ease' : 'none'};
5454
border-radius: 100%;
5555
transform: scale(1.5)"
5656
></span>
5757
</div>
5858
</label>
5959
<h2>Todo List</h2>
6060
<form
61-
on:submit={(e) => {
61+
onsubmit={(e) => {
6262
e.preventDefault()
6363
e.stopPropagation()
64-
$addMutation.mutate(value, {
64+
addMutation.mutate(value, {
6565
onSuccess: () => (value = ''),
6666
})
6767
}}
6868
>
6969
<input placeholder="enter something" bind:value />
7070
</form>
7171

72-
{#if $todos.isPending}
72+
{#if todos.isPending}
7373
Loading...
7474
{/if}
75-
{#if $todos.error}
75+
{#if todos.error}
7676
An error has occurred:
77-
{$todos.error.message}
77+
{todos.error.message}
7878
{/if}
79-
{#if $todos.isSuccess}
79+
{#if todos.isSuccess}
8080
<ul>
81-
{#each $todos.data.items as item}
81+
{#each todos.data.items as item}
8282
<li>{item}</li>
8383
{/each}
8484
</ul>
8585
<div>
86-
<button on:click={() => $clearMutation.mutate(undefined)}>
87-
Clear All
88-
</button>
86+
<button onclick={() => clearMutation.mutate(undefined)}> Clear All </button>
8987
</div>
9088
{/if}
91-
{#if $todos.isFetching}
89+
{#if todos.isFetching}
9290
<div style="color:darkgreen; font-weight:700">
9391
'Background Updating...' : ' '
9492
</div>

‎examples/svelte/auto-refetching/svelte.config.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
33

44
/** @type {import('@sveltejs/kit').Config} */
55
const config = {
6-
// Consult https://github.com/sveltejs/svelte-preprocess
7-
// for more information about preprocessors
86
preprocess: vitePreprocess(),
9-
107
kit: {
118
adapter: adapter(),
129
},
10+
compilerOptions: {
11+
runes: true,
12+
},
1313
}
1414

1515
export default config

‎examples/svelte/basic/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"devDependencies": {
1818
"@sveltejs/adapter-auto": "^3.2.3",
1919
"@sveltejs/kit": "^2.8.2",
20-
"@sveltejs/vite-plugin-svelte": "^3.1.2",
21-
"svelte": "^4.2.18",
20+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
21+
"svelte": "^5.0.0",
2222
"svelte-check": "^4.0.0",
2323
"typescript": "5.7.2",
2424
"vite": "^5.3.5"

‎examples/svelte/basic/src/lib/Post.svelte

+10-10
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@
33
import { getPostById } from './data'
44
import type { Post } from './types'
55
6-
export let postId: number
6+
const { postId }: { postId: number } = $props()
77
8-
const post = createQuery<Post>({
8+
const post = createQuery<Post>(() => ({
99
queryKey: ['post', postId],
1010
queryFn: () => getPostById(postId),
11-
})
11+
}))
1212
</script>
1313

1414
<div>
1515
<div>
1616
<a class="button" href="/"> Back </a>
1717
</div>
18-
{#if !postId || $post.isPending}
18+
{#if !postId || post.isPending}
1919
<span>Loading...</span>
2020
{/if}
21-
{#if $post.error}
22-
<span>Error: {$post.error.message}</span>
21+
{#if post.error}
22+
<span>Error: {post.error.message}</span>
2323
{/if}
24-
{#if $post.isSuccess}
25-
<h1>{$post.data.title}</h1>
24+
{#if post.isSuccess}
25+
<h1>{post.data.title}</h1>
2626
<div>
27-
<p>{$post.data.body}</p>
27+
<p>{post.data.body}</p>
2828
</div>
29-
<div>{$post.isFetching ? 'Background Updating...' : ' '}</div>
29+
<div>{post.isFetching ? 'Background Updating...' : ' '}</div>
3030
{/if}
3131
</div>

‎examples/svelte/basic/src/lib/Posts.svelte

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@
99
const posts = createQuery<
1010
{ id: number; title: string; body: string }[],
1111
Error
12-
>({
12+
>(() => ({
1313
queryKey: ['posts', limit],
1414
queryFn: () => getPosts(limit),
15-
})
15+
}))
1616
</script>
1717

1818
<div>
1919
<div>
20-
{#if $posts.status === 'pending'}
20+
{#if posts.status === 'pending'}
2121
<span>Loading...</span>
22-
{:else if $posts.status === 'error'}
23-
<span>Error: {$posts.error.message}</span>
22+
{:else if posts.status === 'error'}
23+
<span>Error: {posts.error.message}</span>
2424
{:else}
2525
<ul>
26-
{#each $posts.data as post}
26+
{#each posts.data as post}
2727
<article>
2828
<a
2929
href={`/${post.id}`}
@@ -38,7 +38,7 @@
3838
</article>
3939
{/each}
4040
</ul>
41-
{#if $posts.isFetching}
41+
{#if posts.isFetching}
4242
<div style="color:darkgreen; font-weight:700">
4343
Background Updating...
4444
</div>

‎examples/svelte/basic/src/routes/+layout.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
import { PersistQueryClientProvider } from '@tanstack/svelte-query-persist-client'
77
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
88
9+
const { children } = $props()
10+
911
const queryClient = new QueryClient({
1012
defaultOptions: {
1113
queries: {
@@ -21,7 +23,7 @@
2123

2224
<PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
2325
<main>
24-
<slot />
26+
{@render children()}
2527
</main>
2628
<SvelteQueryDevtools />
2729
</PersistQueryClientProvider>

‎examples/svelte/basic/src/routes/[postId]/+page.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts">
22
import Post from '$lib/Post.svelte'
3-
import type { PageData } from './$types'
43
5-
export let data: PageData
4+
const { data } = $props()
65
</script>
76

87
<Post postId={data.postId} />

‎examples/svelte/basic/svelte.config.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
33

44
/** @type {import('@sveltejs/kit').Config} */
55
const config = {
6-
// Consult https://github.com/sveltejs/svelte-preprocess
7-
// for more information about preprocessors
86
preprocess: vitePreprocess(),
9-
107
kit: {
118
adapter: adapter(),
129
},
10+
compilerOptions: {
11+
runes: true,
12+
},
1313
}
1414

1515
export default config

‎examples/svelte/load-more-infinite-scroll/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^3.2.3",
1717
"@sveltejs/kit": "^2.8.2",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.2",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
19+
"svelte": "^5.0.0",
2020
"svelte-check": "^4.0.0",
2121
"typescript": "5.7.2",
2222
"vite": "^5.3.5"

‎examples/svelte/load-more-infinite-scroll/src/app.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ main {
4848
text-align: center;
4949
}
5050

51-
button {
51+
.button {
5252
border-radius: 8px;
5353
border: 1px solid transparent;
5454
padding: 0.6em 1.2em;
@@ -59,11 +59,11 @@ button {
5959
cursor: pointer;
6060
transition: border-color 0.25s;
6161
}
62-
button:hover {
62+
.button:hover {
6363
border-color: #646cff;
6464
}
65-
button:focus,
66-
button:focus-visible {
65+
.button:focus,
66+
.button:focus-visible {
6767
outline: 4px auto -webkit-focus-ring-color;
6868
}
6969

@@ -75,7 +75,7 @@ button:focus-visible {
7575
a:hover {
7676
color: #747bff;
7777
}
78-
button {
78+
.button {
7979
background-color: #f9f9f9;
8080
}
8181
}

‎examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte

+11-11
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
const fetchPlanets = async ({ pageParam = 1 }) =>
77
await fetch(`${endPoint}/planets/?page=${pageParam}`).then((r) => r.json())
88
9-
const query = createInfiniteQuery({
9+
const query = createInfiniteQuery(() => ({
1010
queryKey: ['planets'],
1111
queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
1212
initialPageParam: 1,
@@ -20,18 +20,18 @@
2020
}
2121
return undefined
2222
},
23-
})
23+
}))
2424
</script>
2525

26-
{#if $query.isPending}
26+
{#if query.isPending}
2727
Loading...
2828
{/if}
29-
{#if $query.error}
30-
<span>Error: {$query.error.message}</span>
29+
{#if query.error}
30+
<span>Error: {query.error.message}</span>
3131
{/if}
32-
{#if $query.isSuccess}
32+
{#if query.isSuccess}
3333
<div>
34-
{#each $query.data.pages as { results }}
34+
{#each query.data.pages as { results }}
3535
{#each results as planet}
3636
<div class="card">
3737
<div class="card-body">
@@ -44,12 +44,12 @@
4444
</div>
4545
<div>
4646
<button
47-
on:click={() => $query.fetchNextPage()}
48-
disabled={!$query.hasNextPage || $query.isFetchingNextPage}
47+
onclick={() => query.fetchNextPage()}
48+
disabled={!query.hasNextPage || query.isFetchingNextPage}
4949
>
50-
{#if $query.isFetching}
50+
{#if query.isFetching}
5151
Loading more...
52-
{:else if $query.hasNextPage}
52+
{:else if query.hasNextPage}
5353
Load More
5454
{:else}Nothing more to load{/if}
5555
</button>

‎examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
55
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
66
7+
const { children } = $props()
8+
79
const queryClient = new QueryClient({
810
defaultOptions: {
911
queries: {
@@ -15,7 +17,7 @@
1517

1618
<QueryClientProvider client={queryClient}>
1719
<main>
18-
<slot />
20+
{@render children()}
1921
</main>
2022
<SvelteQueryDevtools />
2123
</QueryClientProvider>

0 commit comments

Comments
 (0)