Remove unused $derive, add mutation e2e test

e2e/kit/src/lib/utils/routes.ts

@@ -117,4 +117,5 @@ export const routes = {
   Svelte5_Runes_Pagination: '/svelte5-runes/pagination',
   Svelte5_Runes_Fragment: '/svelte5-runes/fragment',
   Svelte5_Runes_Component: '/svelte5-runes/component',
+  Svelte5_Runes_Mutation: '/svelte5-runes/mutation'
 };

e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte

@@ -10,15 +10,13 @@
     };
   };
 
-  let result = $derived(
-    graphql(`
-      query Svelte5ComponentQuery($id: ID!) @load {
-        user(id: $id, snapshot: "svelte-5-component") {
-          name
-        }
+  const result = graphql(`
+    query Svelte5ComponentQuery($id: ID!) @load {
+      user(id: $id, snapshot: "svelte-5-component") {
+        name
       }
-    `)
-  );
+    }
+  `);
 </script>
 
 {$result.data?.user.name}

e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte

@@ -3,16 +3,14 @@
 
   const { user }: { user: Svelte5UserDetails } = $props();
 
-  const userDetails = $derived(
-    fragment(
-      user,
-      graphql(`
-        fragment Svelte5UserDetails on User {
-          name
-          birthDate
-        }
-      `)
-    )
+  const userDetails = fragment(
+    user,
+    graphql(`
+      fragment Svelte5UserDetails on User {
+        name
+        birthDate
+      }
+    `)
   );
 </script>
 

e2e/kit/src/routes/svelte5-runes/mutation/+page.gql

@@ -0,0 +1,5 @@
+query Svelte5MutationGetData {
+  user(id: "1", snapshot: "svelte-5-mutation") {
+    name
+  }
+}

e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { graphql } from '$houdini';
+  import type { PageData } from './$houdini';
+
+  const { data }: { data: PageData } = $props();
+  const { Svelte5MutationGetData } = $derived(data);
+
+  const changeNameMutation = graphql(`
+    mutation Svelte5MutationChangeName($name: String!) {
+      updateUser(id: "1", name: $name, snapshot: "svelte-5-mutation") {
+        id
+        name
+      }
+    }
+  `);
+
+  const changeName = () => {
+    changeNameMutation.mutate({
+      name: 'Seppe'
+    });
+  };
+</script>
+
+<div id="result">{$Svelte5MutationGetData.data?.user.name}</div>
+
+<button id="mutate" onclick={changeName}>rename</button>

e2e/kit/src/routes/svelte5-runes/mutation/spec.ts

@@ -0,0 +1,15 @@
+import test from '@playwright/test';
+import { routes } from '../../../lib/utils/routes';
+import { expect_1_gql, expect_to_be, goto } from '../../../lib/utils/testsHelper';
+
+test.describe('Svelte 5 runes mutation', () => {
+  test('run mutation', async ({ page }) => {
+    await goto(page, routes.Svelte5_Runes_Mutation);
+
+    await expect_to_be(page, 'Bruce Willis');
+
+    await expect_1_gql(page, 'button[id=mutate]');
+
+    await expect_to_be(page, 'Seppe');
+  });
+});

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

@@ -5,15 +5,17 @@ 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.
+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`.
 
 # 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:
+Updating your code to make use of runes is pretty straight-forward. Houdini still makes use of Svelte Stores, so your code will continue to work as normal.
+Here are some examples of how to use Houdini with svelte runes:
 
 ## Route queries
 
+If your query is SSR'ed, you need to get the store from the PageData like so:
+
 ```svelte:typescriptToggle=true
 <script lang="ts">
     import type { PageData } from './$houdini'
@@ -27,74 +29,75 @@ Here are some examples of how to use runes with Houdini:
 
 ## Component queries
 
+The only thing that changes with component queries is how your props are coming in to your component:
+
 ```svelte:typescriptToggle=true
 <script lang="ts">
+    import { graphql } from '$houdini';
     import type { UserDetailsVariables } from './$houdini';
 
     const { id }: { id: string } = $props();
 
-    export const _UserDetailsVariables: UserDetailsVariables = ({props}) => {
+    export const _UserDetailsVariables: UserDetailsVariables = ({ props }) => {
         return {
             id: props.id
         }
     }
 
-    const store = $derived(
-        graphql(`
-            query UserDetails($id: ID!) {
-                user(id: $id) {
-                    name
-                }
+    const store = graphql(`
+        query UserDetails($id: ID!) {
+            user(id: $id) {
+                name
             }
-        `)
-    );
+        }
+    `);
 </script>
 
 <p>{$store.data?.user.name}</p>
 ```
 
 ## Fragments
 
+Similar to component queries, the only thing that changes with fragments is how you get the fragment from your props:
+
 ```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
-                }
-            `)
-        )
-    )
+    const data = fragment(
+        user,
+        graphql(`
+            fragment UserCardFragment on User {
+                name
+                age
+            }
+        `)
+    );
 </script>
 
 <p>{$data.name} is {$data.age} years old!</p>
 ```
 
 ## Mutations
 
+Mutations are unchanged, simply use them as before:
+
 ```svelte:typescriptToggle=true
 <script lang="ts">
     import { graphql } from '$houdini';
 
-    const uncheckItem = $derived(
-        graphql(`
-            mutation UncheckItem($id: ID!) {
-                uncheckItem(item: $id) {
-                    item {
-                        id
-                        completed
-                    }
+    const uncheckItem = graphql(`
+        mutation UncheckItem($id: ID!) {
+            uncheckItem(item: $id) {
+                item {
+                    id
+                    completed
                 }
             }
-        `)
-    )
+        }
+    `);
 </script>
 
 <button onclick={() => uncheckItem.mutate({ id: 'my-item' })}>