fix(Avatar): cleaned up context

N00nDay · Oct 23, 2022 · 4392f3b · 4392f3b
1 parent c800798
commit 4392f3b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 46 deletions.
diff --git a/src/lib/components/avatar/Avatar.svelte b/src/lib/components/avatar/Avatar.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const AVATAR_CONTEXT_ID = 'avatar-context-id';
-</script>
-
 <script lang="ts">
 	import { setContext, onMount } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
@@ -22,13 +18,10 @@
 	let failed = false;
 	let loading = true;
 
-	setContext(AVATAR_CONTEXT_ID, {
-		avatar: true,
-		src,
-		alt,
-		shape,
-		size
-	});
+	setContext('avatar-src', src);
+	setContext('avatar-alt', alt);
+	setContext('avatar-shape', shape);
+	setContext('avatar-size', size);
 
 	let defaultClass = '';
 	let containerDefaultClass = '';

diff --git a/src/lib/components/avatar/Indicator.svelte b/src/lib/components/avatar/Indicator.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte/internal';
-	import { AVATAR_CONTEXT_ID } from './Avatar.svelte';
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -11,17 +9,8 @@
 
 	export let placement: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' = 'top-right';
 
-	useContext({
-		context_id: AVATAR_CONTEXT_ID,
-		parent: 'Avatar',
-		component: 'Avatar.Indicator'
-	});
-
-	const {
-		shape,
-		size
-	}: { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; shape: 'circle' | 'rounded' | 'square' } =
-		getContext(AVATAR_CONTEXT_ID);
+	const shape: 'circle' | 'rounded' | 'square' = getContext('avatar-shape');
+	const size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = getContext('avatar-size');
 
 	let defaultClass = '';
 	if (placement === 'top-right') {

diff --git a/src/lib/components/avatar/Placeholder.svelte b/src/lib/components/avatar/Placeholder.svelte
@@ -1,12 +1,6 @@
-<script lang="ts" context="module">
-	export const AVATAR_PLACEHOLDER_CONTEXT_ID = 'avatar-placeholder-context-id';
-</script>
-
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { AVATAR_CONTEXT_ID } from './Avatar.svelte';
-	import { useContext } from '../../utils/useContext';
-	import { getContext, setContext } from 'svelte/internal';
+	import { getContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
 	import { account } from '../../icons';
@@ -18,21 +12,8 @@
 
 	export let loading = false;
 
-	useContext({
-		context_id: AVATAR_CONTEXT_ID,
-		parent: 'Avatar',
-		component: 'Avatar.Placeholder'
-	});
-
-	const {
-		shape,
-		size
-	}: { shape: 'circle' | 'rounded' | 'square'; size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } =
-		getContext(AVATAR_CONTEXT_ID);
-
-	setContext(AVATAR_PLACEHOLDER_CONTEXT_ID, {
-		placeholder: true
-	});
+	const shape: 'circle' | 'rounded' | 'square' = getContext('avatar-shape');
+	const size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = getContext('avatar-size');
 
 	let iconContainerClass = 'absolute text-light-icon dark:text-dark-icon h-full w-full';
 	let iconSize = '';