fix(List): removed context overhead

N00nDay · Dec 12, 2022 · 7719c1e · 7719c1e
1 parent 6721691
commit 7719c1e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 40 deletions.
diff --git 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
@@ -1,20 +1,13 @@
 <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';
 	export let use: ActionArray = [];
 	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
@@ -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
@@ -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 = '';