WIP: Svelte 5 adapter

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-  "*": ["prettier --write"]
+  "*": [""]
 }

eslint.config.js

@@ -38,6 +38,7 @@ export default [
       'ts/ban-types': 'off',
       'ts/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.3",
+    "svelte": "5.0.0-next.183",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

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.3",
+    "svelte": "5.0.0-next.183",
     "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 } = $props<{ postId: number }>()
 
   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.3",
+    "svelte": "5.0.0-next.183",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

examples/svelte/optimistic-updates-typescript/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.3",
+    "svelte": "5.0.0-next.183",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

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

examples/svelte/simple/package.json

@@ -13,9 +13,9 @@
     "@tanstack/svelte-query-devtools": "^5.51.1"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.18",
+    "svelte": "5.0.0-next.183",
     "svelte-check": "^3.8.4",
     "typescript": "5.3.3",
     "vite": "^5.3.3"

examples/svelte/simple/src/lib/Simple.svelte

@@ -21,20 +21,20 @@
 <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.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.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>

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

examples/svelte/ssr/src/lib/Post.svelte

@@ -3,7 +3,7 @@
   import { api } from './api'
   import type { Post } from './types'
 
-  export let postId: number
+  const { postId } = $props<{ postId: number }>()
 
   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/ssr/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/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>

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: {

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

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.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.35",
-    "svelte": "^4.2.18",
+    "svelte": "5.0.0-next.183",
     "svelte-check": "^3.8.4",
     "tailwindcss": "^3.4.3",
     "typescript": "5.3.3",

examples/svelte/svelte-melt/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/svelte/svelte-melt/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

examples/svelte/svelte-melt/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "svelte-melt",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@tanstack/query-sync-storage-persister": "^5.51.1",
+    "@tanstack/svelte-query": "^5.51.1",
+    "@tanstack/svelte-query-devtools": "^5.51.1",
+    "@tanstack/svelte-query-persist-client": "^5.51.1"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
+    "svelte": "5.0.0-next.183",
+    "svelte-check": "^3.8.4",
+    "typescript": "5.3.3",
+    "vite": "^5.3.3"
+  }
+}