fix: update components to use proper Svelte 5 runes syntax

Co-Authored-By: charis@supabase.io <charis@supabase.io>

examples/user-management/sveltekit-user-management/src/routes/+layout.svelte

@@ -23,5 +23,5 @@
 </svelte:head>
 
 <div class="container" style="padding: 50px 0 100px 0">
-	<slot />
+	{@render $$slots.default()}
 </div>

examples/user-management/sveltekit-user-management/src/routes/+page.svelte

@@ -2,14 +2,14 @@
 <script lang="ts">
 	import { enhance } from '$app/forms'
 	import { state as svelteState, props as svelteProps } from 'svelte'
-	import type { ActionData, SubmitFunction } from './$types.js'
+	import type { ActionData } from './$types'
 
-	let { form } = $svelteProps<{ form: ActionData }>()
+	let { form } = $svelteProps<{ form?: ActionData | null }>()
 	let loading = $svelteState(false)
 
-	const handleSubmit: SubmitFunction = () => {
+	const handleSubmit = () => {
 		loading = true
-		return async ({ update }) => {
+		return async ({ update }: { update: () => void }) => {
 			update()
 			loading = false
 		}

examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte

@@ -5,7 +5,7 @@
 	import type { SubmitFunction } from '@sveltejs/kit'
 	import Avatar from './Avatar.svelte'
 
-	let { data, form } = $svelteProps()
+	let { data, form } = $svelteProps<{ data: any; form?: any }>()
 	let { session, supabase, profile } = data
 
 	let profileForm = $svelteState<HTMLFormElement | null>(null)
@@ -15,16 +15,17 @@
 	let website = $svelteState(profile?.website ?? '')
 	let avatarUrl = $svelteState(profile?.avatar_url ?? '')
 
-	const handleSubmit: SubmitFunction = () => {
+	const handleSubmit = () => {
 		loading = true
-		return async () => {
+		return async ({ update }: { update: () => void }) => {
 			loading = false
+			update()
 		}
 	}
 
-	const handleSignOut: SubmitFunction = () => {
+	const handleSignOut = () => {
 		loading = true
-		return async ({ update }) => {
+		return async ({ update }: { update: () => void }) => {
 			loading = false
 			update()
 		}

examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte

@@ -12,7 +12,7 @@
 
 	let avatarUrl = $svelteState<string | null>(null)
 	let uploading = $svelteState(false)
-	let files = $svelteState<FileList | null>(null)
+	let fileInput = $svelteState<HTMLInputElement | null>(null)
 
 	const dispatch = createEventDispatcher()
 
@@ -33,9 +33,11 @@
 		}
 	}
 
-	const uploadAvatar = async () => {
+	const uploadAvatar = async (event: Event) => {
 		try {
 			uploading = true
+			const input = event.target as HTMLInputElement
+			const files = input.files
 
 			if (!files || files.length === 0) {
 				throw new Error('You must select an image to upload.')
@@ -91,8 +93,8 @@
 			type="file"
 			id="single"
 			accept="image/*"
-			bind:files={files}
-			onchange={uploadAvatar}
+			bind:this={fileInput}
+			on:change={uploadAvatar}
 			disabled={uploading}
 		/>
 	</div>