fix: update Avatar component to use event dispatch for URL changes

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

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

@@ -31,6 +31,10 @@
 			update()
 		}
 	}
+
+	const handleUrlChange = (event: CustomEvent<string>) => {
+		avatarUrl.set(event.detail)
+	}
 </script>
 
 <div class="form-widget">
@@ -41,14 +45,15 @@
 		use:enhance={handleSubmit}
 		bind:this={profileForm}
 	>
-        <Avatar
-            {supabase}
-            bind:url={avatarUrl}
-            size={10}
-            on:upload={() => {
-                profileForm.requestSubmit();
-            }}
-        />
+		<Avatar
+			{supabase}
+			urlProp={avatarUrl}
+			size={10}
+			on:urlChange={handleUrlChange}
+			on:upload={() => {
+				profileForm.requestSubmit();
+			}}
+		/>
 		<div>
 			<label for="email">Email</label>
 			<input id="email" type="text" value={session.user.email} disabled />

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

@@ -13,7 +13,20 @@
 	const currentUrl = $svelteState(urlProp)
 	let fileInput: HTMLInputElement | null = null
 
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher<{
+		urlChange: string;
+		upload: void;
+	}>()
+
+	$svelteEffect(() => {
+		// Update currentUrl when urlProp changes
+		currentUrl.set(urlProp)
+	})
+
+	$svelteEffect(() => {
+		// Dispatch urlChange event when currentUrl changes
+		dispatch('urlChange', currentUrl)
+	})
 
 	const downloadImage = async (path: string) => {
 		try {
@@ -79,7 +92,7 @@
 			style="height: {size}em; width: {size}em;"
 		/>
 	{:else}
-		<div class="avatar no-image" style="height: {size}em; width: {size}em;"></div>
+		<div class="avatar no-image" style="height: {size}em; width: {size}em;" />
 	{/if}
 	<input type="hidden" name="avatarUrl" value={currentUrl} />