refactor(test-app): use $props in Svelte5 components

Refactor all test-app Svelte components to use the $props() helper for prop access instead of Svelte's export let syntax. This aligns with the new recommended pattern for prop handling in Svelte5 and improves consistency across the codebase. Also updates some state and effect usage to match Svelte5 idioms.

Author: brodienguyen

packages/svelte5/test-app/Layouts/NestedLayout.svelte

@@ -2,7 +2,8 @@
   import { onMount } from 'svelte'
   import { page } from '@inertiajs/svelte5'
 
-  let createdAt: number | null = null
+  const { children } = $props()
+  let createdAt = $state<number | null>(null)
 
   onMount(() => {
     window._inertia_nested_layout_id = crypto.randomUUID()
@@ -21,6 +22,6 @@
   <span>Nested Layout</span>
   <span>{createdAt}</span>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>

packages/svelte5/test-app/Layouts/SiteLayout.svelte

@@ -2,7 +2,8 @@
   import { onMount } from 'svelte'
   import { page } from '@inertiajs/svelte5'
 
-  let createdAt: number | null = null
+  const { children } = $props()
+  let createdAt = $state<number | null>(null)
 
   onMount(() => {
     window._inertia_layout_id = crypto.randomUUID()
@@ -21,6 +22,6 @@
   <span>Site Layout</span>
   <span>{createdAt}</span>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>

packages/svelte5/test-app/Pages/Article.svelte

@@ -6,7 +6,8 @@
     document.documentElement.style.scrollBehavior = 'smooth'
   }
 
-  export let scrollLog: number[] = []
+  let { scrollLog = [] }: { scrollLog?: number[] } = $props()
+  let scrollLogState = $state(scrollLog)
 
   const handleScrollEvent = () => {
     scrollLog = [...scrollLog, document.documentElement.scrollTop]

packages/svelte5/test-app/Pages/DeferredProps/Page1.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { Deferred, inertia } from '@inertiajs/svelte5'
 
-  export let foo: { text: string } | undefined
-  export let bar: { text: string } | undefined
+  const { foo, bar }: { foo?: { text: string }; bar?: { text: string } } = $props()
 </script>
 
 <Deferred data="foo">

packages/svelte5/test-app/Pages/Dump.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { beforeUpdate } from 'svelte'
   import { page } from '@inertiajs/svelte5'
   import type { Method } from '@inertiajs/core'
   import type { MulterFile } from '../types'
 
-  export let headers: Record<string, string>
-  export let method: Method
-  export let form: Record<string, unknown>
-  export let files: MulterFile[] | object = {}
-  export let url: string
-  export let query: Record<string, unknown>
+  const { headers, method, form, files = {}, url, query }: {
+    headers: Record<string, string>;
+    method: Method;
+    form: Record<string, unknown>;
+    files?: MulterFile[] | object;
+    url: string;
+    query: Record<string, unknown>;
+  } = $props()
 
   const dump = {
     headers,
@@ -21,7 +22,8 @@
     $page: page,
   }
 
-  beforeUpdate(() => {
+  // Set window dump for testing
+  $effect(() => {
     window._inertia_request_dump = dump
   })
 </script>

packages/svelte5/test-app/Pages/Links/AsWarning.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte5'
 
-  export let method
+  const { method } = $props()
 </script>
 
 <div>

packages/svelte5/test-app/Pages/Links/AsWarningFalse.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte5'
 
-  export let method
+  const { method } = $props()
 </script>
 
 <div>

packages/svelte5/test-app/Pages/Links/CancelSyncRequest.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte5'
 
-  export let page: number
+  const { page }: { page: number } = $props()
 </script>
 
 <h1 style="font-size: 40px;">

packages/svelte5/test-app/Pages/Links/PreserveScroll.svelte

@@ -6,7 +6,7 @@
   import { inertia } from '@inertiajs/svelte5'
   import type { Page } from '@inertiajs/core'
 
-  export let foo: string = 'default'
+  const { foo = 'default' }: { foo?: string } = $props()
 
   const preserveCallback = (page: Page) => {
     console.log(JSON.stringify(page))

packages/svelte5/test-app/Pages/Links/PreserveScrollFalse.svelte

@@ -6,7 +6,7 @@
   import { inertia } from '@inertiajs/svelte5'
   import type { Page } from '@inertiajs/core'
 
-  export let foo: string = 'default'
+  const { foo = 'default' }: { foo?: string } = $props()
 
   const preserveCallback = (page: Page) => {
     console.log(JSON.stringify(page))