fix: update components to handle props immutability correctly

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

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>

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>

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()
 		}
 	}

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">