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

Author: lachlancollins

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

@@ -5,19 +5,19 @@
     createMutation,
   } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-  let value = ''
+  let intervalMs = $state(1000)
+  let value = $state<string>('')
 
   const client = useQueryClient()
 
   const endpoint = 'http://localhost:5173/api/data'
 
-  const 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
     refetchInterval: intervalMs,
-  })
+  }))
 
   const addMutation = createMutation({
     mutationFn: (value: string) =>

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

@@ -3,13 +3,13 @@ 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(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config

examples/svelte/basic/svelte.config.js

@@ -3,13 +3,13 @@ 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(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config

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

@@ -48,7 +48,7 @@ main {
   text-align: center;
 }
 
-button {
+.button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -59,11 +59,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+.button:hover {
   border-color: #646cff;
 }
-button:focus,
-button:focus-visible {
+.button:focus,
+.button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
@@ -75,7 +75,7 @@ button:focus-visible {
   a:hover {
     color: #747bff;
   }
-  button {
+  .button {
     background-color: #f9f9f9;
   }
 }

examples/svelte/load-more-infinite-scroll/svelte.config.js

@@ -3,13 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
   kit: {
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config

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

@@ -16,7 +16,7 @@
     ts: number
   }
 
-  let text = ''
+  let text = $state<string>('')
 
   const client = useQueryClient()
 

examples/svelte/optimistic-updates/svelte.config.js

@@ -3,13 +3,13 @@ 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(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 }
 
 export default config

examples/svelte/playground/src/lib/stores.svelte.ts

@@ -0,0 +1,37 @@
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}
+
+export const staleTime = ref(1000)
+export const gcTime = ref(3000)
+export const errorRate = ref(0.05)
+export const queryTimeMin = ref(1000)
+export const queryTimeMax = ref(2000)
+
+export const editingIndex = ref<number | null>(null)
+export const views = ref(['', 'fruit', 'grape'])
+
+let initialId = 0
+const initialList = [
+  'apple',
+  'banana',
+  'pineapple',
+  'grapefruit',
+  'dragonfruit',
+  'grapes',
+].map((d) => ({ id: initialId++, name: d, notes: 'These are some notes' }))
+
+export const list = ref(initialList)
+export const id = ref(initialId)
+
+export type Todos = typeof initialList
+export type Todo = Todos[0]

examples/svelte/playground/src/lib/stores.ts

@@ -6,15 +6,15 @@
     errorRate,
     queryTimeMin,
     queryTimeMax,
-  } from '../lib/stores'
+  } from '../lib/stores.svelte'
   import App from './App.svelte'
 
   const queryClient = useQueryClient()
 
   queryClient.setDefaultOptions({
     queries: {
-      staleTime: $staleTime,
-      gcTime: $gcTime,
+      staleTime: staleTime.value,
+      gcTime: gcTime.value,
     },
   })
 </script>
@@ -29,7 +29,7 @@
     type="number"
     min="0"
     step="1000"
-    bind:value={$staleTime}
+    bind:value={staleTime.value}
     style="width: 100px"
   />
 </div>
@@ -39,7 +39,7 @@
     type="number"
     min="0"
     step="1000"
-    bind:value={$gcTime}
+    bind:value={gcTime.value}
     style="width: 100px"
   />
 </div>
@@ -51,7 +51,7 @@
     min="0"
     max="1"
     step=".05"
-    bind:value={$errorRate}
+    bind:value={errorRate.value}
     style="width: 100px"
   />
 </div>
@@ -61,7 +61,7 @@
     type="number"
     min="1"
     step="500"
-    bind:value={$queryTimeMin}
+    bind:value={queryTimeMin.value}
     style="width: 100px"
   />{' '}
 </div>
@@ -71,7 +71,7 @@
     type="number"
     min="1"
     step="500"
-    bind:value={$queryTimeMax}
+    bind:value={queryTimeMax.value}
     style="width: 100px"
   />
 </div>

examples/svelte/playground/src/routes/+page.svelte

@@ -7,28 +7,29 @@
     list,
     id,
     type Todo,
-  } from '../lib/stores'
+  } from '../lib/stores.svelte'
 
   const queryClient = useQueryClient()
 
-  let name = ''
+  let name = $state('')
 
   const postTodo = async ({ name, notes }: Omit<Todo, 'id'>) => {
     console.info('postTodo', { name, notes })
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
-          if (Math.random() < $errorRate) {
+          if (Math.random() < errorRate.value) {
             return reject(
               new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2)),
             )
           }
-          const todo = { name, notes, id: $id }
-          id.set($id + 1)
-          list.set([...$list, todo])
+          const todo = { name, notes, id: id.value }
+          id.value = id.value + 1
+          list.value = [...list.value, todo]
           resolve(todo)
         },
-        $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin),
+        queryTimeMin.value +
+          Math.random() * (queryTimeMax.value - queryTimeMin.value),
       )
     })
   }
@@ -42,20 +43,20 @@
 </script>
 
 <div>
-  <input bind:value={name} disabled={$addMutation.status === 'pending'} />
+  <input bind:value={name} disabled={addMutation.status === 'pending'} />
 
   <button
-    onclick={() => $addMutation.mutate({ name, notes: name })}
-    disabled={$addMutation.status === 'pending' || !name}
+    onclick={() => addMutation.mutate({ name, notes: name })}
+    disabled={addMutation.status === 'pending' || !name}
   >
     Add Todo
   </button>
 
   <div>
-    {$addMutation.status === 'pending'
+    {addMutation.status === 'pending'
       ? 'Saving...'
-      : $addMutation.status === 'error'
-        ? $addMutation.error.message
+      : addMutation.status === 'error'
+        ? addMutation.error.message
         : 'Saved!'}
   </div>
 </div>

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

@@ -3,7 +3,7 @@
   import TodosList from './TodosList.svelte'
   import EditTodo from './EditTodo.svelte'
   import AddTodo from './AddTodo.svelte'
-  import { views, editingIndex } from '../lib/stores'
+  import { views, editingIndex } from '../lib/stores.svelte'
 
   const queryClient = useQueryClient()
 </script>
@@ -17,7 +17,7 @@
   <br />
   <hr />
 
-  {#each $views as view}
+  {#each views.value as view}
     <div>
       <TodosList initialFilter={view} />
       <br />
@@ -26,14 +26,14 @@
 
   <button
     onclick={() => {
-      views.set([...$views, ''])
+      views.value = [...views.value, '']
     }}
   >
     Add Filter List
   </button>
   <hr />
 
-  {#if $editingIndex !== null}
+  {#if editingIndex.value !== null}
     <EditTodo />
     <hr />
   {/if}