Upgrade playground components to Svelte 5

playgrounds/svelte5/resources/js/Components/Layout.svelte

@@ -1,5 +1,7 @@
 <script>
   import { inertia, page } from '@inertiajs/svelte'
+
+  let { children } = $props()
 </script>
 
 <nav class="flex items-center space-x-6 bg-slate-800 px-10 py-6 text-white">
@@ -12,5 +14,5 @@
 </nav>
 
 <main class="px-10 py-8">
-  <slot />
+  {@render children()}
 </main>

playgrounds/svelte5/resources/js/Pages/Article.svelte

@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
-  export let appName
+  let { appName } = $props()
 </script>
 
 <svelte:head>

playgrounds/svelte5/resources/js/Pages/Form.svelte

@@ -1,19 +1,20 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
   import { useForm } from '@inertiajs/svelte'
 
-  export let appName
+  let { appName } = $props()
 
   let form = useForm('NewUser', {
     name: '',
     company: '',
     role: '',
   })
 
-  function submit() {
+  function submit(e) {
+    e.preventDefault()
     $form.post('/user')
   }
 </script>
@@ -24,7 +25,7 @@
 
 <h1 class="text-3xl">Form</h1>
 
-<form on:submit|preventDefault={submit} class="mt-6 max-w-md space-y-4">
+<form onsubmit={submit} class="mt-6 max-w-md space-y-4">
   {#if $form.isDirty}
     <div class="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">There are unsaved changes!</div>
   {/if}
@@ -55,7 +56,7 @@
   <div>
     <label class="block" for="role">Role:</label>
     <select bind:value={$form.role} id="role" class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm">
-      <option />
+      <option></option>
       <option>User</option>
       <option>Admin</option>
       <option>Super</option>
@@ -68,6 +69,6 @@
     <button type="submit" disabled={$form.processing} class="rounded bg-slate-800 px-6 py-2 text-white">
       Submit
     </button>
-    <button type="button" on:click={() => $form.reset()}>Reset</button>
+    <button type="button" onclick={() => $form.reset()}>Reset</button>
   </div>
 </form>

playgrounds/svelte5/resources/js/Pages/Home.svelte

@@ -1,10 +1,11 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
   import { inertia } from '@inertiajs/svelte'
-  export let appName
+
+  let { appName } = $props()
 </script>
 
 <svelte:head>

playgrounds/svelte5/resources/js/Pages/Login.svelte

@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
-  export let appName
+  let { appName } = $props()
 </script>
 
 <svelte:head>

playgrounds/svelte5/resources/js/Pages/User.svelte

@@ -1,10 +1,9 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
-  export let appName
-  export let user
+  let { appName, user } = $props()
 </script>
 
 <svelte:head>

playgrounds/svelte5/resources/js/Pages/Users.svelte

@@ -1,10 +1,9 @@
-<script context="module">
+<script module>
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
 <script>
-  export let appName
-  export let users
+  let { appName, users } = $props()
 </script>
 
 <svelte:head>
@@ -23,7 +22,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each users as user}
+      {#each users as user (user.id)}
         <tr class="border-t">
           <td class="px-4 py-2">{user.id}</td>
           <td class="px-4 py-2">{user.name}</td>