chore: update svelte examples and tests from runes PR

Author: lachlancollins

docs/framework/react/devtools.md

@@ -74,7 +74,7 @@ function App() {
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
   - Defaults to `bottom-right`

docs/framework/solid/devtools.md

@@ -68,7 +68,7 @@ function App() {
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-right`

docs/framework/svelte/devtools.md

@@ -61,7 +61,7 @@ Place the following code as high in your Svelte app as you can. The closer it is
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
   - Defaults to `bottom-right`

docs/framework/svelte/reactivity.md

@@ -11,13 +11,11 @@ In the below example, the `refetchInterval` option is set from the variable `int
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  const endpoint = 'http://localhost:5173/api/data'
-
   let intervalMs = 1000
 
   const query = createQuery({
     queryKey: ['refetch'],
-    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+    queryFn: async () => await fetch('/api/data').then((r) => r.json()),
     refetchInterval: intervalMs,
   })
 </script>
@@ -32,14 +30,12 @@ To solve this, we can convert `intervalMs` into a writable store. The query opti
   import { derived, writable } from 'svelte/store'
   import { createQuery } from '@tanstack/svelte-query'
 
-  const endpoint = 'http://localhost:5173/api/data'
-
   const intervalMs = writable(1000)
 
   const query = createQuery(
     derived(intervalMs, ($intervalMs) => ({
       queryKey: ['refetch'],
-      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+      queryFn: async () => await fetch('/api/data').then((r) => r.json()),
       refetchInterval: $intervalMs,
     })),
   )

docs/framework/vue/devtools.md

@@ -61,7 +61,7 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 
 ### Options
 
-- `initialIsOpen: Boolean`
+- `initialIsOpen: boolean`
   - Set this `true` if you want the dev tools to default to being open.
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-right`.

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

@@ -10,7 +10,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   $: todos = createQuery<{ items: string[] }>({
     queryKey: ['refetch'],
@@ -21,7 +21,9 @@
 
   const addMutation = createMutation({
     mutationFn: (value: string) =>
-      fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
+      fetch(`${endpoint}?add=${encodeURIComponent(value)}`).then((r) =>
+        r.json(),
+      ),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
   })
 
@@ -31,7 +33,7 @@
   })
 </script>
 
-<h1>Auto Refetch with stale-time set to 1s</h1>
+<h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
 
 <p>
   This example is best experienced on your own machine, where you can open

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

@@ -3,10 +3,7 @@ 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(),
   },

examples/svelte/basic/svelte.config.js

@@ -3,10 +3,7 @@ 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(),
   },

examples/svelte/optimistic-updates/src/routes/+page.svelte

@@ -20,7 +20,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   const fetchTodos = async (): Promise<Todos> =>
     await fetch(endpoint).then((r) => r.json())

examples/svelte/optimistic-updates/src/routes/api/data/+server.ts

@@ -6,7 +6,7 @@ type Todo = {
   text: string
 }
 
-const items: Todo[] = []
+const items: Array<Todo> = []
 
 /** @type {import('./$types').RequestHandler} */
 export const GET: RequestHandler = async (req) => {