From afaecc8923a4c8f0c985daf5b2c50d6ba5e19581 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Wed, 27 Nov 2024 22:16:08 +0000
Subject: [PATCH] refactor(svelte): merge props

---
 .../src/lib/components/avatar/avatar-fallback.svelte   |  6 ++++--
 .../src/lib/components/avatar/avatar-image.svelte      |  5 +++--
 .../lib/components/avatar/avatar-root-provider.svelte  |  5 ++++-
 .../src/lib/components/avatar/avatar-root.svelte       |  6 ++++--
 .../src/lib/components/avatar/examples/basic.svelte    |  2 +-
 .../src/lib/components/avatar/examples/context.svelte  |  2 +-
 .../components/avatar/examples/root-provider.svelte    | 10 ++++++----
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/lib/components/avatar/avatar-fallback.svelte b/packages/svelte/src/lib/components/avatar/avatar-fallback.svelte
index f731263ec7..e9f76c2e71 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-fallback.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-fallback.svelte
@@ -7,12 +7,14 @@
 
 <script lang="ts">
   import { useAvatarContext } from './use-avatar-context'
+  import { mergeProps } from '@zag-js/svelte'
 
   const props: AvatarFallbackProps = $props()
+
   const avatar = useAvatarContext()
-  // const mergedProps = mergeProps(() => avatar().getFallbackProps(), props)
+  const mergedProps = $derived(mergeProps(avatar().getFallbackProps(), props))
 </script>
 
-<div {...avatar().getFallbackProps()} {...props}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>
diff --git a/packages/svelte/src/lib/components/avatar/avatar-image.svelte b/packages/svelte/src/lib/components/avatar/avatar-image.svelte
index d588f29b7c..91a499aa16 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-image.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-image.svelte
@@ -7,10 +7,11 @@
 
 <script lang="ts">
   import { useAvatarContext } from './use-avatar-context'
+  import { mergeProps } from '@zag-js/svelte'
 
   const props: AvatarImageProps = $props()
   const avatar = useAvatarContext()
-  // const mergedProps = mergeProps(() => avatar().getImageProps(), props)
+  const mergedProps = $derived(mergeProps(avatar().getImageProps(), props))
 </script>
 
-<img {...avatar().getImageProps()} {...props} />
+<img {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/avatar/avatar-root-provider.svelte b/packages/svelte/src/lib/components/avatar/avatar-root-provider.svelte
index d91940c2b8..5227e042ba 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-root-provider.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-root-provider.svelte
@@ -13,14 +13,17 @@
 
 <script lang="ts">
   import { createSplitProps } from '$lib/utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
   import { AvatarProvider } from './use-avatar-context'
 
   const props: AvatarRootProviderProps = $props()
   const [{ value: avatar }, localProps] = createSplitProps<RootProviderProps>()(props, ['value'])
 
   AvatarProvider(avatar)
+
+  const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 </script>
 
-<div {...avatar().getRootProps()} {...localProps}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>
diff --git a/packages/svelte/src/lib/components/avatar/avatar-root.svelte b/packages/svelte/src/lib/components/avatar/avatar-root.svelte
index 6971cfda60..fe2a33b01a 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-root.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-root.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
   import { createSplitProps } from '../../utils/create-split-props'
   import { AvatarProvider } from './use-avatar-context'
   import { useAvatar } from './use-avatar.svelte'
@@ -17,12 +18,13 @@
     'ids',
     'onStatusChange',
   ])
+
   const avatar = useAvatar(useAvatarProps)
-  // const mergedProps = mergeProps(() => avatar().getRootProps(), localProps)
+  const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 
   AvatarProvider(avatar)
 </script>
 
-<div {...avatar().getRootProps()} {...localProps}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>
diff --git a/packages/svelte/src/lib/components/avatar/examples/basic.svelte b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
index b4b5c32a6b..fe7ce4684b 100644
--- a/packages/svelte/src/lib/components/avatar/examples/basic.svelte
+++ b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
@@ -4,5 +4,5 @@
 
 <Avatar.Root>
   <Avatar.Fallback>PA</Avatar.Fallback>
-  <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+  <Avatar.Image src="https://i.pravatar.cc/3000?u=a" alt="avatar" />
 </Avatar.Root>
diff --git a/packages/svelte/src/lib/components/avatar/examples/context.svelte b/packages/svelte/src/lib/components/avatar/examples/context.svelte
index 096a840aeb..6b278dab89 100644
--- a/packages/svelte/src/lib/components/avatar/examples/context.svelte
+++ b/packages/svelte/src/lib/components/avatar/examples/context.svelte
@@ -14,5 +14,5 @@
       </Avatar.Fallback>
     {/snippet}
   </Avatar.Context>
-  <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+  <Avatar.Image src="https://i.pravatar.cc/3000?u=b" alt="avatar" />
 </Avatar.Root>
diff --git a/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte b/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte
index ee8899ff27..bc255482e2 100644
--- a/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte
+++ b/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte
@@ -6,13 +6,15 @@
       console.log('status', status)
     },
   })
+
+  // biome-ignore lint/style/useConst: <explanation>
+  let counter = $state(0)
+  const src = $derived(`https://i.pravatar.cc/300?u=${counter}`)
 </script>
 
-<button onclick={() => avatar().setSrc('https://avatars.githubusercontent.com/u/6916170?v=4')}>
-  Change Avatar
-</button>
+<button onclick={() => counter++}>Change Avatar</button>
 
 <Avatar.RootProvider value={avatar}>
   <Avatar.Fallback>PA</Avatar.Fallback>
-  <Avatar.Image src="https://avatars.githubusercontent.com/u/1846056?v=4" alt="avatar" />
+  <Avatar.Image {src} alt="avatar" />
 </Avatar.RootProvider>