Skip to content

Commit e62e83a

Browse files
zhihengGetlachlancollins
zhihengGet
authored and
lachlancollins
committed
WIP: Svelte 5 adapter (#6981)
1 parent 99f1250 commit e62e83a

File tree

128 files changed

+3518
-1336
lines changed

Some content is hidden

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

128 files changed

+3518
-1336
lines changed

‎eslint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default [
3838
'@typescript-eslint/ban-types': 'off',
3939
'@typescript-eslint/no-empty-function': 'off',
4040
'no-case-declarations': 'off',
41+
'prefer-const': 'off',
4142
},
4243
},
4344
]

‎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.2",
1717
"@sveltejs/kit": "^2.5.18",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.0",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
19+
"svelte": "5.0.0-next.192",
2020
"svelte-check": "^3.8.4",
2121
"typescript": "5.3.3",
2222
"vite": "^5.3.3"

‎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

+12-14
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
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
@@ -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(2)"
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/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.2",
1919
"@sveltejs/kit": "^2.5.18",
20-
"@sveltejs/vite-plugin-svelte": "^3.1.0",
21-
"svelte": "^4.2.18",
20+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
21+
"svelte": "5.0.0-next.192",
2222
"svelte-check": "^3.8.4",
2323
"typescript": "5.3.3",
2424
"vite": "^5.3.3"

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { getPostById } from './data'
44
import type { Post } from './types'
55
6-
export let postId: number
6+
const { postId }: { postId: number } = $props()
77
88
const post = createQuery<Post>({
99
queryKey: ['post', postId],
@@ -15,17 +15,17 @@
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

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
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/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.2",
1717
"@sveltejs/kit": "^2.5.18",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.0",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
19+
"svelte": "5.0.0-next.192",
2020
"svelte-check": "^3.8.4",
2121
"typescript": "5.3.3",
2222
"vite": "^5.3.3"

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@
2323
})
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>

‎examples/svelte/optimistic-updates/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^3.2.2",
1717
"@sveltejs/kit": "^2.5.18",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.0",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
19+
"svelte": "5.0.0-next.192",
2020
"svelte-check": "^3.8.4",
2121
"typescript": "5.3.3",
2222
"vite": "^5.3.3"

‎examples/svelte/optimistic-updates/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/optimistic-updates/src/routes/+page.svelte

+10-10
Original file line numberDiff line numberDiff line change
@@ -87,36 +87,36 @@
8787
</p>
8888

8989
<form
90-
on:submit={(e) => {
90+
onsubmit={(e) => {
9191
e.preventDefault()
9292
e.stopPropagation()
93-
$addTodoMutation.mutate(text)
93+
addTodoMutation.mutate(text)
9494
}}
9595
>
9696
<div>
9797
<input type="text" bind:value={text} />
98-
<button disabled={$addTodoMutation.isPending}>Create</button>
98+
<button disabled={addTodoMutation.isPending}>Create</button>
9999
</div>
100100
</form>
101101

102-
{#if $todos.isPending}
102+
{#if todos.isPending}
103103
Loading...
104104
{/if}
105-
{#if $todos.error}
105+
{#if todos.error}
106106
An error has occurred:
107-
{$todos.error.message}
107+
{todos.error.message}
108108
{/if}
109-
{#if $todos.isSuccess}
109+
{#if todos.isSuccess}
110110
<div class="mb-4">
111-
Updated At: {new Date($todos.data.ts).toLocaleTimeString()}
111+
Updated At: {new Date(todos.data.ts).toLocaleTimeString()}
112112
</div>
113113
<ul>
114-
{#each $todos.data.items as todo}
114+
{#each todos.data.items as todo}
115115
<li>{todo.text}</li>
116116
{/each}
117117
</ul>
118118
{/if}
119-
{#if $todos.isFetching}
119+
{#if todos.isFetching}
120120
<div style="color:darkgreen; font-weight:700">
121121
'Background Updating...' : ' '
122122
</div>

‎examples/svelte/playground/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^3.2.2",
1717
"@sveltejs/kit": "^2.5.18",
18-
"@sveltejs/vite-plugin-svelte": "^3.1.0",
19-
"svelte": "^4.2.18",
18+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
19+
"svelte": "5.0.0-next.192",
2020
"svelte-check": "^3.8.4",
2121
"typescript": "5.3.3",
2222
"vite": "^5.3.3"

‎examples/svelte/playground/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: {
@@ -19,7 +21,7 @@
1921

2022
<QueryClientProvider client={queryClient}>
2123
<div id="app">
22-
<slot />
24+
{@render children()}
2325
</div>
2426
<SvelteQueryDevtools />
2527
</QueryClientProvider>

‎examples/svelte/playground/src/routes/AddTodo.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<input bind:value={name} disabled={$addMutation.status === 'pending'} />
4646

4747
<button
48-
on:click={() => $addMutation.mutate({ name, notes: name })}
48+
onclick={() => $addMutation.mutate({ name, notes: name })}
4949
disabled={$addMutation.status === 'pending' || !name}
5050
>
5151
Add Todo

0 commit comments

Comments
 (0)