WIP: Svelte 5 adapter (#6981)

Author: zhihengGet

eslint.config.js

@@ -38,6 +38,7 @@ export default [
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
       'no-case-declarations': 'off',
+      'prefer-const': 'off',
     },
   },
 ]

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.0",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
+    "svelte": "5.0.0-next.192",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

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>

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

@@ -12,7 +12,7 @@
 
   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
@@ -49,46 +49,44 @@
           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(2)"
     ></span>
   </div>
 </label>
 <h2>Todo List</h2>
 <form
-  on:submit={(e) => {
+  onsubmit={(e) => {
     e.preventDefault()
     e.stopPropagation()
-    $addMutation.mutate(value, {
+    addMutation.mutate(value, {
       onSuccess: () => (value = ''),
     })
   }}
 >
   <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>

examples/svelte/basic/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
+    "svelte": "5.0.0-next.192",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

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

@@ -3,7 +3,7 @@
   import { getPostById } from './data'
   import type { Post } from './types'
 
-  export let postId: number
+  const { postId }: { postId: number } = $props()
 
   const post = createQuery<Post>({
     queryKey: ['post', postId],
@@ -15,17 +15,17 @@
   <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>

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

@@ -17,13 +17,13 @@
 
 <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>

examples/svelte/basic/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>

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} />

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.0",
-    "svelte": "^4.2.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
+    "svelte": "5.0.0-next.192",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"