fix(Menu): removed needless context and fixed naming of existing context

N00nDay · Dec 30, 2022 · 4a5e493 · 4a5e493
1 parent 87aa7c5
commit 4a5e493
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 65 deletions.
diff --git a/src/lib/components/menu/Group.svelte b/src/lib/components/menu/Group.svelte
@@ -1,14 +1,8 @@
-<script lang="ts" context="module">
-	export const MENU_GROUP_CONTEXT_ID = 'menu-group-context-id';
-</script>
-
 <script lang="ts">
 	import HoverBackground from '../HoverBackground.svelte';
 	import { slide, scale, type TransitionConfig } from 'svelte/transition';
 	import { getContext, setContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
-	import { MENU_CONTEXT_ID } from './Menu.svelte';
-	import { useContext } from '$lib/utils/useContext';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
 	import { chevron_down } from '../../icons';
@@ -24,24 +18,10 @@
 	let active = false;
 	let collapsable: HTMLDivElement;
 
-	useContext({
-		context_id: MENU_CONTEXT_ID,
-		parent: 'Menu',
-		component: 'Menu.Group'
-	});
-
-	setContext(MENU_GROUP_CONTEXT_ID, {
-		group: true,
-		groupKey: key
-	});
+	setContext('menu-group-key', key);
 
-	const {
-		menuCollapse,
-		activeItem
-	}: {
-		menuCollapse: Writable<boolean>;
-		activeItem: Writable<string>;
-	} = getContext(MENU_CONTEXT_ID);
+	const menuCollapse: Writable<boolean> = getContext('menu-collapse');
+	const activeItem: Writable<string> = getContext('menu-active-item');
 
 	$: menuActive = $activeItem.includes(key);
 

diff --git a/src/lib/components/menu/GroupItem.svelte b/src/lib/components/menu/GroupItem.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
 	import HoverBackground from '../HoverBackground.svelte';
 	import { getContext } from 'svelte';
-	import { MENU_CONTEXT_ID } from './Menu.svelte';
-	import { MENU_GROUP_CONTEXT_ID } from './Group.svelte';
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
-	import { useContext } from '$lib/utils/useContext';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
@@ -16,27 +13,9 @@
 	export let label: string;
 	export let key: string;
 
-	useContext({
-		context_id: MENU_CONTEXT_ID,
-		parent: 'Menu',
-		component: 'Menu.Group.Item'
-	});
-
-	useContext({
-		context_id: MENU_GROUP_CONTEXT_ID,
-		parent: 'Menu.Group',
-		component: 'Menu.Group.Item'
-	});
-
-	const {
-		menuCollapse,
-		activeItem
-	}: {
-		menuCollapse: Writable<boolean>;
-		activeItem: Writable<string>;
-	} = getContext(MENU_CONTEXT_ID);
-
-	const { groupKey }: { groupKey: string } = getContext(MENU_GROUP_CONTEXT_ID);
+	const menuCollapse: Writable<boolean> = getContext('menu-collapse');
+	const activeItem: Writable<string> = getContext('menu-active-item');
+	const groupKey: { groupKey: string } = getContext('menu-group-key');
 
 	$: active = $activeItem === `${groupKey}-${key}`;
 

diff --git a/src/lib/components/menu/Item.svelte b/src/lib/components/menu/Item.svelte
@@ -3,7 +3,6 @@
 	import HoverBackground from '../HoverBackground.svelte';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
-	import { MENU_CONTEXT_ID } from './Menu.svelte';
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -15,13 +14,8 @@
 	export let href: string;
 	export let key: string;
 
-	const {
-		menuCollapse,
-		activeItem
-	}: {
-		menuCollapse: Writable<boolean>;
-		activeItem: Writable<string>;
-	} = getContext(MENU_CONTEXT_ID);
+	const menuCollapse: Writable<boolean> = getContext('menu-collapse');
+	const activeItem: Writable<string> = getContext('menu-active-item');
 
 	$: active = $activeItem === key;
 

diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const MENU_CONTEXT_ID = 'menu-context-id';
-</script>
-
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
@@ -22,12 +18,9 @@
 	let activeItem = writable(active);
 	$: activeItem.set(active);
 
-	setContext(MENU_CONTEXT_ID, {
-		menu: true,
-		menuCollapse,
-		collapsedWidth,
-		activeItem
-	});
+	setContext('menu-collapse', menuCollapse);
+	// setContext('menu-collapsed-width', collapsedWidth);
+	setContext('menu-active-item', activeItem);
 
 	let defaultClass = 'space-y-1 transition-all duration-300';
 	$: if ($menuCollapse) {