From 8188ccfc3c2cc920612cd1a64ac71eb8558da59a Mon Sep 17 00:00:00 2001
From: Seppe Dekeyser <seppe.dekeyser@hotmail.com>
Date: Sat, 18 May 2024 23:18:11 +0200
Subject: [PATCH] Remove unused $derive, add mutation e2e test

---
 e2e/kit/src/lib/utils/routes.ts               |  1 +
 .../component/Svelte5Component.svelte         | 14 ++--
 .../fragment/UserDetailsSvelte5.svelte        | 18 +++--
 .../routes/svelte5-runes/mutation/+page.gql   |  5 ++
 .../svelte5-runes/mutation/+page.svelte       | 26 +++++++
 .../src/routes/svelte5-runes/mutation/spec.ts | 15 ++++
 site/src/routes/guides/svelte-5/+page.svx     | 69 ++++++++++---------
 7 files changed, 97 insertions(+), 51 deletions(-)
 create mode 100644 e2e/kit/src/routes/svelte5-runes/mutation/+page.gql
 create mode 100644 e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
 create mode 100644 e2e/kit/src/routes/svelte5-runes/mutation/spec.ts

diff --git a/e2e/kit/src/lib/utils/routes.ts b/e2e/kit/src/lib/utils/routes.ts
index 2253ada498..7759e897cd 100644
--- a/e2e/kit/src/lib/utils/routes.ts
+++ b/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'
 };
diff --git a/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte b/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte
index fb45b481f0..f0d0d8321d 100644
--- a/e2e/kit/src/routes/svelte5-runes/component/Svelte5Component.svelte
+++ b/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}
diff --git a/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte b/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte
index 8071956f71..b6b0bd6321 100644
--- a/e2e/kit/src/routes/svelte5-runes/fragment/UserDetailsSvelte5.svelte
+++ b/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>
 
diff --git a/e2e/kit/src/routes/svelte5-runes/mutation/+page.gql b/e2e/kit/src/routes/svelte5-runes/mutation/+page.gql
new file mode 100644
index 0000000000..1082ce59d5
--- /dev/null
+++ b/e2e/kit/src/routes/svelte5-runes/mutation/+page.gql
@@ -0,0 +1,5 @@
+query Svelte5MutationGetData {
+  user(id: "1", snapshot: "svelte-5-mutation") {
+    name
+  }
+}
diff --git a/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte b/e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
new file mode 100644
index 0000000000..ffb328b8c0
--- /dev/null
+++ b/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>
diff --git a/e2e/kit/src/routes/svelte5-runes/mutation/spec.ts b/e2e/kit/src/routes/svelte5-runes/mutation/spec.ts
new file mode 100644
index 0000000000..4a66ce5932
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/site/src/routes/guides/svelte-5/+page.svx b/site/src/routes/guides/svelte-5/+page.svx
index bff5f908d5..632f43f6eb 100644
--- a/site/src/routes/guides/svelte-5/+page.svx
+++ b/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,27 +29,28 @@ 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>
@@ -55,23 +58,23 @@ Here are some examples of how to use runes with Houdini:
 
 ## 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>
@@ -79,22 +82,22 @@ Here are some examples of how to use runes with Houdini:
 
 ## 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' })}>