From 7719c1e3977180c1de55131dfa4f2aec29c60542 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Mon, 12 Dec 2022 17:55:14 -0600
Subject: [PATCH] fix(List): removed context overhead

---
 src/lib/components/list/Avatar.svelte      | 15 ++++-----------
 src/lib/components/list/Item.svelte        |  9 +--------
 src/lib/components/list/List.svelte        |  9 +--------
 src/lib/components/list/Placeholder.svelte | 15 ++-------------
 4 files changed, 8 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/list/Avatar.svelte b/src/lib/components/list/Avatar.svelte
index 4e427a8b..2848cf68 100644
--- a/src/lib/components/list/Avatar.svelte
+++ b/src/lib/components/list/Avatar.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const LIST_ITEM_LEADING_AVATAR_CONTEXT_ID = 'list-item-leading-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(LIST_ITEM_LEADING_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/list/Item.svelte b/src/lib/components/list/Item.svelte
index ffd6e669..b1df734f 100644
--- a/src/lib/components/list/Item.svelte
+++ b/src/lib/components/list/Item.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
-	import { LIST_CONTEXT_ID } from './List.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -9,12 +7,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: LIST_CONTEXT_ID,
-		parent: 'List',
-		component: 'List.Item'
-	});
-	const { bordered }: { bordered: boolean } = getContext(LIST_CONTEXT_ID);
+	const bordered: boolean = getContext('list-bordered');
 
 	let defaultClass = 'flex py-4';
 	if (bordered) {
diff --git a/src/lib/components/list/List.svelte b/src/lib/components/list/List.svelte
index 95670dbe..5ca10e92 100644
--- a/src/lib/components/list/List.svelte
+++ b/src/lib/components/list/List.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const LIST_CONTEXT_ID = 'list-context-name';
-</script>
-
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte';
@@ -15,10 +11,7 @@
 	export let bordered = false;
 	export let edgeToEdge = false;
 
-	setContext(LIST_CONTEXT_ID, {
-		list: true,
-		bordered: bordered || edgeToEdge
-	});
+	setContext('list-bordered', bordered || edgeToEdge);
 
 	let defaultClass = '';
 	const defaultDividedClass = 'divide-y divide-light-border dark:divide-dark-border';
diff --git a/src/lib/components/list/Placeholder.svelte b/src/lib/components/list/Placeholder.svelte
index 7289e215..b4048b0d 100644
--- a/src/lib/components/list/Placeholder.svelte
+++ b/src/lib/components/list/Placeholder.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { LIST_ITEM_LEADING_AVATAR_CONTEXT_ID } from './Avatar.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
@@ -14,17 +12,8 @@
 
 	export let loading = false;
 
-	useContext({
-		context_id: LIST_ITEM_LEADING_AVATAR_CONTEXT_ID,
-		parent: 'List.Item.Leading.Avatar',
-		component: 'List.Item.Leading.Avatar.Placeholder'
-	});
-
-	const {
-		shape,
-		size
-	}: { shape: 'circle' | 'rounded' | 'square'; size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } =
-		getContext(LIST_ITEM_LEADING_AVATAR_CONTEXT_ID);
+	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 = '';