Write Props typing as separate type for improved clarity

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

@@ -2,7 +2,10 @@
   import { graphql } from '$houdini';
   import type { Svelte5ComponentQueryVariables } from './$houdini';
 
-  const { id }: { id: string } = $props();
+  interface Props {
+    id: string;
+  }
+  const { id }: Props = $props();
 
   export const _Svelte5ComponentQueryVariables: Svelte5ComponentQueryVariables = ({ props }) => {
     return {

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

@@ -2,7 +2,10 @@
   import type { PageData } from './$houdini';
   import UserDetailsSvelte5 from './UserDetailsSvelte5.svelte';
 
-  const { data }: {data: PageData} = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5UsersList } = $derived(data);
 </script>
 

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

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { fragment, graphql, type Svelte5UserDetails } from '$houdini';
 
-  const { user }: { user: Svelte5UserDetails } = $props();
+  interface Props {
+    user: Svelte5UserDetails;
+  }
+  const { user }: Props = $props();
 
   const userDetails = fragment(
     user,

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

@@ -2,7 +2,10 @@
   import { graphql } from '$houdini';
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5MutationGetData } = $derived(data);
 
   const changeNameMutation = graphql(`

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

@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5Pagination } = $derived(data);
 </script>
 

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

@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { PageData } from './$houdini';
 
-  const { data }: { data: PageData } = $props();
+  interface Props {
+    data: PageData;
+  }
+  const { data }: Props = $props();
   const { Svelte5SimpleSSR } = $derived(data);
 </script>
 

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

@@ -20,7 +20,10 @@ If your query is SSR'ed, you need to get the store from the PageData like so:
 <script lang="ts">
     import type { PageData } from './$houdini'
 
-    const { data }: { data: PageData } = $props();
+    interface Props {
+        data: PageData;
+    }
+    const { data }: Props = $props();
     const { MyProfile } = $derived(data);
 </script>
 
@@ -36,7 +39,10 @@ The only thing that changes with component queries is how your props are coming
     import { graphql } from '$houdini';
     import type { UserDetailsVariables } from './$houdini';
 
-    const { id }: { id: string } = $props();
+    interface Props {
+        id: string;
+    }
+    const { id }: Props = $props();
 
     export const _UserDetailsVariables: UserDetailsVariables = ({ props }) => {
         return {
@@ -64,7 +70,10 @@ Similar to component queries, the only thing that changes with fragments is how
 <script lang="ts">
     import { fragment, graphql, type UserCardFragment } from '$houdini';
 
-    const { user }: { user: UserCardFragment } = $props();
+    interface Props {
+        user: UserCardFragment
+    }
+    const { user }: Props = $props();
 
     const data = fragment(
         user,
@@ -103,5 +112,4 @@ Mutations are unchanged, simply use them as before:
 <button onclick={() => uncheckItem.mutate({ id: 'my-item' })}>
     Uncheck Item
 </button>
-
 ```