Fix broken test, add section in docs with examples

e2e/kit/src/routes/lists/all/+page.svelte

@@ -13,8 +13,8 @@
   $: browser && limit && updateQS();
 
   async function updateQS() {
-    $page.url.searchParams.set('limit', limit.toString());
-    const newUrl = $page.url.href;
+    const newUrl = new URL($page.url);
+    newUrl.searchParams.set('limit', limit.toString());
     await invalidate(newUrl);
     await goto(newUrl, { replaceState: true, keepFocus: true });
   }

site/src/routes/guides/+page.svx

@@ -22,6 +22,7 @@ This section contains posts that cover fundamental principles to help you build
 - [Uploading Files](/guides/uploading-files) - A guide on handling file uploads via mutations
 - [Persisted Queries](/guides/persisted-queries) - A guide on persisted queries (including APQ)
 - [Typescript](/guides/typescript) - An overview of the TypeScript API
+- [Svelte 5 Runes](/guides/svelte-5) - A guide to using Houdini with Svelte 5 Runes
 - [Contributing Guide](/guides/contributing) - A guide written for people looking to contribute to Houdini
 - [Architecture](/guides/architecture) - An overview of Houdini's architecture for people building plugins
 

site/src/routes/guides/index.json

@@ -13,6 +13,7 @@
 		"uploading-files",
 		"persisted-queries",
 		"typescript",
+		"svelte-5",
 		"contributing",
 		"architecture"
 	]

site/src/routes/guides/svelte-5/+page.svx

@@ -0,0 +1,104 @@
+---
+title: Svelte 5
+description: Using Houdini with Svelte 5 runes
+---
+
+# Setting up
+
+Houdini works out of the box with Svelte 5, both in legacy mode or in runes mode. All you need to do is bump the Houdini version in your `package.json` and you should be good to go.
+
+# Using runes
+
+Updating your code to make use of runes is pretty straight-forward. Simply wrap your query/fragment/mutation definition in a `$derived()` rune and you should be good to go.
+Here are some examples of how to use runes with Houdini:
+
+## Route queries
+
+```svelte:typescriptToggle=true
+<script lang="ts">
+    import type { PageData } from './$houdini'
+
+    const { data }: { data: PageData } = $props();
+    const { MyProfile } = $derived(data);
+</script>
+
+<p>Welcome, {$MyProfile.data?.user.name}!</p>
+```
+
+## Component queries
+
+```svelte:typescriptToggle=true
+<script lang="ts">
+    import type { UserDetailsVariables } from './$houdini';
+
+    const { id }: { id: string } = $props();
+
+    export const _UserDetailsVariables: UserDetailsVariables = ({props}) => {
+        return {
+            id: props.id
+        }
+    }
+
+    const store = $derived(
+        graphql(`
+            query UserDetails($id: ID!) {
+                user(id: $id) {
+                    name
+                }
+            }
+        `)
+    );
+</script>
+
+<p>{$store.data?.user.name}</p>
+```
+
+## Fragments
+
+```svelte:typescriptToggle=true
+<script lang="ts">
+    import { fragment, graphql, type UserCardFragment } from '$houdini';
+
+    const { user }: { user: UserCardFragment } = $props();
+
+    const data = $derived(
+        fragment(
+            user,
+            graphql(`
+                fragment UserCardFragment on User {
+                    name
+                    age
+                }
+            `)
+        )
+    )
+</script>
+
+<p>{$data.name} is {$data.age} years old!</p>
+```
+
+## Mutations
+
+```svelte:typescriptToggle=true
+<script lang="ts">
+    import { graphql } from '$houdini';
+
+    const uncheckItem = $derived(
+        graphql(`
+            mutation UncheckItem($id: ID!) {
+                uncheckItem(item: $id) {
+                    item {
+                        id
+                        completed
+                    }
+                }
+            }
+        `)
+    )
+</script>
+
+<button onclick={() => uncheckItem.mutate({ id: 'my-item' })}>
+    Uncheck Item
+</button>
+
+```

site/src/routes/guides/typescript/+page.svx

@@ -48,7 +48,7 @@ declare namespace App {
 
 When working with Houdini's [generated load functions](/api/query#automatic-loading) (whether in a route or component), you can import type definition for your variable functions and hooks from `./$houdini` (a relative import):
 
-```typescript:title=src/routes/myProifle/+page.ts
+```typescript:title=src/routes/myProfile/+page.ts
 import { graphql } from '$houdini'
 import type { AfterLoadEvent } from './$houdini'
 
@@ -70,7 +70,7 @@ export function _houdini_afterLoad({ data }: AfterLoadEvent) {
 Your `PageData` type will also come from `./$houdini` since SvelteKit's generated type definitions don't know about the generated load:
 
 ```svelte:title=src/routes/myProfile/+page.svelte -->
-<script>
+<script lang="ts">
 	import { PageData } from './$houdini'
 
 	export let data: PageData