From c3a9eaeb85538c81b0780105b2dd08ff86e10bcc Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:20:40 +0000
Subject: [PATCH] fix: update components to use proper Svelte 5 runes syntax

Co-Authored-By: charis@supabase.io <charis@supabase.io>
---
 .../src/routes/+layout.svelte                         |  2 +-
 .../sveltekit-user-management/src/routes/+page.svelte |  8 ++++----
 .../src/routes/account/+page.svelte                   | 11 ++++++-----
 .../src/routes/account/Avatar.svelte                  | 10 ++++++----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte b/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
index debbe0eba71..e2104a5f8e5 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
+++ b/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>
diff --git a/examples/user-management/sveltekit-user-management/src/routes/+page.svelte b/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
index 822c1b23de2..16ec2297602 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
+++ b/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
 		}
diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
index a5220309f55..1411007bc95 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
+++ b/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()
 		}
diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
index edf126b1612..ca637e277f8 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
+++ b/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>