Reverts previous commit, fixes prop types

- Previous commit only reset loading status and reloaded the image correctly
  if the `src` prop was changed. If `delayMs` wash change, the loading
  status was reset, but `onload()` never fired. Reverting to using `getters`
- Add `MaybeGetter` to Avatar props

Author: jzylks

docs/src/api.json

@@ -574,7 +574,7 @@
       },
       {
         "name": "onLoadingStatusChange",
-        "type": "((value: 'loading' | 'loaded' | 'error') => void) | undefined",
+        "type": "MaybeGetter<((value: 'loading' | 'loaded' | 'error') => void) | undefined>",
         "description": "Callback fired when the loading status changes",
         "defaultValue": "undefined",
         "optional": true
@@ -596,6 +596,6 @@
         "type": "{\n  readonly \"data-melt-avatar-fallback\": \"\"\n  readonly style: string | undefined\n  readonly hidden: boolean | undefined\n}"
       }
     ],
-    "propsAlt": "export type AvatarProps = {\n  /**\n   * The source of the image to display.\n   */\n  src?: string;\n\n  /**\n   * The amount of time in milliseconds to wait before displaying the image.\n   *\n   * @default 0\n   */\n  delayMs?: number;\n\n  /**\n   * A callback invoked when the loading status store of the avatar changes.\n   */\n  onLoadingStatusChange?: (value: ImageLoadingStatus) => void;\n};"
+    "propsAlt": "export type AvatarProps = {\n  /**\n   * The source of the image to display.\n   */\n  src?: MaybeGetter<string | undefined>;\n\n  /**\n   * The amount of time in milliseconds to wait before displaying the image.\n   *\n   * @default 0\n   */\n  delayMs?: MaybeGetter<number | undefined>;\n\n  /**\n   * A callback invoked when the loading status store of the avatar changes.\n   */\n  onLoadingStatusChange?: MaybeGetter<(value: ImageLoadingStatus) => void | undefined>;\n};"
   }
 }

packages/melt/src/lib/builders/Avatar.svelte.ts

@@ -3,6 +3,7 @@ import { Synced } from "$lib/Synced.svelte";
 import { createDataIds } from "$lib/utils/identifiers";
 import { styleAttr } from "$lib/utils/attribute";
 import { inBrowser } from "$lib/utils/browser";
+import { MaybeGetter } from "$lib/types";
 
 const identifiers = createDataIds("avatar", ["image", "fallback"]);
 
@@ -12,19 +13,19 @@ export type AvatarProps = {
 	/**
 	 * The source of the image to display.
 	 */
-	src?: string;
+	src?: MaybeGetter<string | undefined>;
 
 	/**
 	 * The amount of time in milliseconds to wait before displaying the image.
 	 *
 	 * @default 0
 	 */
-	delayMs?: number;
+	delayMs?: MaybeGetter<number | undefined>;
 
 	/**
 	 * A callback invoked when the loading status store of the avatar changes.
 	 */
-	onLoadingStatusChange?: (value: ImageLoadingStatus) => void;
+	onLoadingStatusChange?: MaybeGetter<(value: ImageLoadingStatus) => void | undefined>;
 };
 
 export class Avatar {

packages/melt/src/lib/components/Avatar.svelte

@@ -2,14 +2,15 @@
 	import { Avatar, type AvatarProps } from "../builders/Avatar.svelte";
 	import { type Snippet } from "svelte";
 	import type { ComponentProps } from "../types";
+	import { getters } from "$lib/builders";
 
 	type Props = ComponentProps<AvatarProps> & {
 		children: Snippet<[Avatar]>;
 	};
 
 	let { children, ...rest }: Props = $props();
 
-	const avatar = $derived(new Avatar({ ...rest }));
+	const avatar = new Avatar(getters({ ...rest }));
 </script>
 
 {@render children(avatar)}