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>