fix(InputNumber): removed context overhead

fix(Layout): removed context overhead
N00nDay · Dec 12, 2022 · 6721691 · 6721691
1 parent 14d16bd
commit 6721691
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 116 deletions.
diff --git a/src/lib/components/input-number/InputNumber.svelte b/src/lib/components/input-number/InputNumber.svelte
@@ -7,6 +7,7 @@
 	import { setContext } from 'svelte';
 	import Icon from '../icon';
 	import { error as errorIcon } from '../../icons';
+	import { writable, type Writable } from 'svelte/store';
 
 	export let name: string;
 	export let error: string | undefined = undefined;
@@ -18,15 +19,15 @@
 	export let step = '1';
 	export let readonly = false;
 
+	let currentError: Writable<string | undefined> = writable(error);
+	$: currentError.set(error);
+
 	function onlyNumeric(e: KeyboardEvent) {
 		if (!e.key.match(/^[0-9]+$/)) e.preventDefault();
 	}
 
-	setContext(INPUT_NUMBER_CONTEXT_ID, {
-		inputNumber: true,
-		name,
-		error
-	});
+	setContext('name', name);
+	setContext('error', currentError);
 </script>
 
 <div class={$$props.class}>

diff --git a/src/lib/components/input-number/Label.svelte b/src/lib/components/input-number/Label.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
-	import { useContext } from '../../utils/useContext';
-	import { INPUT_NUMBER_CONTEXT_ID } from './InputNumber.svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
+	import type { Writable } from 'svelte/store';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: INPUT_NUMBER_CONTEXT_ID,
-		parent: 'InputNumber',
-		component: 'InputNumber.Label'
-	});
-
-	const { name, error }: { name: string; error: string } = getContext(INPUT_NUMBER_CONTEXT_ID);
+	const name: string = getContext('name');
+	const error: Writable<string> = getContext('error');
 
 	let defaultClass = 'block text-sm font-medium';
-	if (error) {
+	if ($error) {
 		defaultClass = defaultClass + ' text-danger';
 	} else {
 		defaultClass = defaultClass + ' text-light-secondary-content dark:text-dark-secondary-content';

diff --git a/src/lib/components/layout/Body.svelte b/src/lib/components/layout/Body.svelte
@@ -1,33 +1,14 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
-	import { useContext } from '../../utils/useContext';
-	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { getContext } from 'svelte/internal';
 	import type { Writable } from 'svelte/store';
-	import { LAYOUT_CONTENT_CONTEXT_ID } from './Content.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: LAYOUT_CONTEXT_ID,
-		parent: 'Layout',
-		component: 'Layout.Content.Body'
-	});
-
-	useContext({
-		context_id: LAYOUT_CONTENT_CONTEXT_ID,
-		parent: 'Layout.Content',
-		component: 'Layout.Content.Body'
-	});
-
-	const {
-		collapsed
-	}: {
-		collapsed: Writable<boolean>;
-	} = getContext(LAYOUT_CONTENT_CONTEXT_ID);
+	const collapsed: Writable<boolean> = getContext('layout-collapsed');
 
 	let defaultClass = 'w-full h-full';
 	if ($collapsed) {

diff --git a/src/lib/components/layout/Content.svelte b/src/lib/components/layout/Content.svelte
@@ -1,10 +1,4 @@
-<script lang="ts" context="module">
-	export const LAYOUT_CONTENT_CONTEXT_ID = 'layout-content-context-id';
-</script>
-
 <script lang="ts">
-	import { useContext } from '../../utils/useContext';
-	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { setContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import { writable } from 'svelte/store';
@@ -26,18 +20,9 @@
 	$: cWidth.set(collapsedWidth);
 	$: eWidth.set(expandedWidth);
 
-	useContext({
-		context_id: LAYOUT_CONTEXT_ID,
-		parent: 'Layout',
-		component: 'Layout.Content'
-	});
-
-	setContext(LAYOUT_CONTENT_CONTEXT_ID, {
-		content: true,
-		collapsed: sidebarCollapsed,
-		collapsedWidth: cWidth,
-		expandedWidth: eWidth
-	});
+	setContext('layout-collapsed', sidebarCollapsed);
+	setContext('collapsedWidth', cWidth);
+	setContext('expandedWidth', eWidth);
 
 	const defaultClass = 'flex flex-row w-full h-full items-start justify-start';
 	$: finalClass = twMerge(defaultClass, $$props.class);

diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
@@ -1,27 +1,11 @@
-<script lang="ts" context="module">
-	export const LAYOUT_HEADER_CONTEXT_ID = 'layout-header-context-id';
-</script>
-
 <script lang="ts">
-	import { setContext } from 'svelte';
-	import { useContext } from '../../utils/useContext';
-	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { twMerge } from 'tailwind-merge';
 	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: LAYOUT_CONTEXT_ID,
-		parent: 'Layout',
-		component: 'LayoutHeader'
-	});
-	setContext(LAYOUT_HEADER_CONTEXT_ID, {
-		header: true
-	});
-
 	const defaultClass =
 		'flex sticky top-[var(--sat)] z-10 pt-3 pb-2 pl-[calc(var(--sal)+1rem)] pr-[calc(var(--sar)+1rem)] w-full flex-row h-16 min-h-[64px] max-h-16 flex-shrink items-center bg-light-surface dark:bg-dark-surface text-light-content dark:text-dark-content shadow-md dark:shadow-black flex-1';
 	$: finalClass = twMerge(defaultClass, $$props.class);

diff --git a/src/lib/components/layout/HeaderExtra.svelte b/src/lib/components/layout/HeaderExtra.svelte
@@ -1,25 +1,11 @@
 <script lang="ts">
-	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
-	import { LAYOUT_HEADER_CONTEXT_ID } from './Header.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { twMerge } from 'tailwind-merge';
 	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: LAYOUT_CONTEXT_ID,
-		parent: 'Layout',
-		component: 'Header.Extra'
-	});
-	useContext({
-		context_id: LAYOUT_HEADER_CONTEXT_ID,
-		parent: 'Layout.Header',
-		component: 'Header.Extra'
-	});
-
 	const defaultClass = 'flex-grow flex flex-row items-center justify-end';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>

diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const LAYOUT_CONTEXT_ID = 'layout-context-id';
-</script>
-
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
@@ -22,11 +18,8 @@
 		}
 	}
 
-	setContext(LAYOUT_CONTEXT_ID, {
-		layout: true,
-		sideBarWidth,
-		toggleSidebarWidth
-	});
+	setContext('sideBarWidth', sideBarWidth);
+	setContext('toggleSidebarWidth', toggleSidebarWidth);
 
 	const defaultClass = 'w-full h-full flex flex-col';
 	$: finalClass = twMerge(defaultClass, $$props.class);

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-	import { useContext } from '../../utils/useContext';
-	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { twMerge } from 'tailwind-merge';
-	import { LAYOUT_CONTENT_CONTEXT_ID } from './Content.svelte';
 	import type { Writable } from 'svelte/store';
 	import { getContext } from 'svelte';
 	import { get_current_component } from 'svelte/internal';
@@ -11,27 +8,9 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: LAYOUT_CONTEXT_ID,
-		parent: 'Layout',
-		component: 'Layout.Content.Sidebar'
-	});
-
-	useContext({
-		context_id: LAYOUT_CONTENT_CONTEXT_ID,
-		parent: 'Layout.Content',
-		component: 'Layout.Content.Sidebar'
-	});
-
-	const {
-		collapsed,
-		collapsedWidth,
-		expandedWidth
-	}: {
-		collapsed: Writable<boolean>;
-		collapsedWidth: Writable<string>;
-		expandedWidth: Writable<string>;
-	} = getContext(LAYOUT_CONTENT_CONTEXT_ID);
+	const collapsed: Writable<boolean> = getContext('layout-collapsed');
+	const collapsedWidth: Writable<string> = getContext('collapsedWidth');
+	const expandedWidth: Writable<string> = getContext('expandedWidth');
 
 	const defaultClass = 'hidden h-full lg:flex lg:flex-shrink-0 relative';
 	$: finalClass = twMerge(defaultClass, $$props.class);