From fedbdcf0f0d8e07d21fb35ea7839c153b5df3c8c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 20:06:14 +0000
Subject: [PATCH] fix: update components to handle props immutability correctly

Co-Authored-By: charis@supabase.io <charis@supabase.io>
---
 .../src/routes/+layout.svelte                 | 14 +++++-----
 .../src/routes/+page.svelte                   | 10 +++----
 .../src/routes/account/+page.svelte           | 24 ++++++++---------
 .../src/routes/account/Avatar.svelte          | 27 ++++++++++---------
 4 files changed, 40 insertions(+), 35 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 774b29c93c4..2cdbb3b8017 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
@@ -2,20 +2,22 @@
 <script lang="ts">
 	import '../styles.css'
 	import { invalidate } from '$app/navigation'
-	import { props } from 'svelte'
+	import { props as svelteProps, effect as svelteEffect } from 'svelte'
 
-	const data = $props<{ supabase: any; session: any }>()
+	const data = $svelteProps<{ supabase: any; session: any }>()
 	const { supabase, session } = data
 
-	$: {
+	$svelteEffect(() => {
 		const { data: authData } = supabase.auth.onAuthStateChange((event, _session) => {
 			if (_session?.expires_at !== session?.expires_at) {
 				invalidate('supabase:auth')
 			}
 		})
 
-		authData.subscription.unsubscribe()
-	}
+		return () => {
+			authData.subscription.unsubscribe()
+		}
+	})
 </script>
 
 <svelte:head>
@@ -23,5 +25,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 17664d16a63..aeaf9c97aac 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
@@ -2,16 +2,16 @@
 <script lang="ts">
 	import { enhance } from '$app/forms'
 	import type { ActionData } from './$types'
-	import { props, state } from 'svelte'
+	import { props as svelteProps, state as svelteState } from 'svelte'
 
-	const form = $props<{ message?: string; success?: boolean; email?: string; errors?: { email?: string } } | null>()
-	const loading = $state(false)
+	const form = $svelteProps<{ message?: string; success?: boolean; email?: string; errors?: { email?: string } } | null>()
+	const loading = $svelteState(false)
 
 	const handleSubmit = () => {
-		loading = true
+		loading.set(true)
 		return async ({ update }: { update: () => void }) => {
 			update()
-			loading = false
+			loading.set(false)
 		}
 	}
 </script>
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 d6c3a09435e..6134688fc3b 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
@@ -3,31 +3,31 @@
 	import { enhance } from '$app/forms'
 	import type { SubmitFunction } from '@sveltejs/kit'
 	import Avatar from './Avatar.svelte'
-	import { props, state } from 'svelte'
+	import { props as svelteProps, state as svelteState } from 'svelte'
 
-	const data = $props<{ session: any; supabase: any; profile: any }>()
-	const form = $props<any>()
+	const data = $svelteProps<{ session: any; supabase: any; profile: any }>()
+	const form = $svelteProps<any>()
 
 	const { session, supabase, profile } = data
 	let profileForm: HTMLFormElement | null = null
-	const loading = $state(false)
-	const fullName = $state(profile?.full_name ?? '')
-	const username = $state(profile?.username ?? '')
-	const website = $state(profile?.website ?? '')
-	const avatarUrl = $state(profile?.avatar_url ?? '')
+	const loading = $svelteState(false)
+	const fullName = $svelteState(profile?.full_name ?? '')
+	const username = $svelteState(profile?.username ?? '')
+	const website = $svelteState(profile?.website ?? '')
+	const avatarUrl = $svelteState(profile?.avatar_url ?? '')
 
 	const handleSubmit = () => {
-		loading = true
+		loading.set(true)
 		return async ({ update }: { update: () => void }) => {
-			loading = false
+			loading.set(false)
 			update()
 		}
 	}
 
 	const handleSignOut = () => {
-		loading = true
+		loading.set(true)
 		return async ({ update }: { update: () => void }) => {
-			loading = false
+			loading.set(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 63685acfe5a..a4dccbd3f90 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
@@ -2,14 +2,15 @@
 <script lang="ts">
 	import type { SupabaseClient } from '@supabase/supabase-js'
 	import { createEventDispatcher } from 'svelte'
-	import { props, state } from 'svelte'
+	import { props as svelteProps, state as svelteState, effect as svelteEffect } from 'svelte'
 
-	const size = $props<number>(10)
-	const url = $props<string>('')
-	const supabase = $props<SupabaseClient>()
+	const size = $svelteProps<number>(10)
+	const urlProp = $svelteProps<string>('')
+	const supabase = $svelteProps<SupabaseClient>()
 
-	const avatarUrl = $state<string | null>(null)
-	const uploading = $state(false)
+	const avatarUrl = $svelteState<string | null>(null)
+	const uploading = $svelteState(false)
+	const currentUrl = $svelteState(urlProp)
 	let fileInput: HTMLInputElement | null = null
 
 	const dispatch = createEventDispatcher()
@@ -23,7 +24,7 @@
 			}
 
 			const imageUrl = URL.createObjectURL(imageData)
-			avatarUrl = imageUrl
+			avatarUrl.set(imageUrl)
 		} catch (error) {
 			if (error instanceof Error) {
 				console.log('Error downloading image: ', error.message)
@@ -33,7 +34,7 @@
 
 	const uploadAvatar = async (event: Event) => {
 		try {
-			uploading = true
+			uploading.set(true)
 			const input = event.target as HTMLInputElement
 			const files = input.files
 
@@ -51,7 +52,7 @@
 				throw error
 			}
 
-			url = filePath
+			currentUrl.set(filePath)
 			setTimeout(() => {
 				dispatch('upload')
 			}, 100)
@@ -60,11 +61,13 @@
 				alert(error.message)
 			}
 		} finally {
-			uploading = false
+			uploading.set(false)
 		}
 	}
 
-	$: if (url) downloadImage(url)
+	$svelteEffect(() => {
+		if (currentUrl) downloadImage(currentUrl)
+	})
 </script>
 
 <div>
@@ -78,7 +81,7 @@
 	{:else}
 		<div class="avatar no-image" style="height: {size}em; width: {size}em;"></div>
 	{/if}
-	<input type="hidden" name="avatarUrl" value={url} />
+	<input type="hidden" name="avatarUrl" value={currentUrl} />
 
 	<div style="width: {size}em;">
 		<label class="button primary block" for="single">