fix(Steps): removed needless context

fix(Steps): variants are now reactive
N00nDay · Feb 5, 2023 · e875a33 · e875a33
1 parent a62353b
commit e875a33
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 88 deletions.
diff --git a/src/lib/components/steps/Description.svelte b/src/lib/components/steps/Description.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { STEPS_CONTEXT_ID } from './Steps.svelte';
-	import { STEPS_STEP_CONTEXT_ID } from './Step.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import type { Writable } from 'svelte/store';
@@ -11,29 +8,13 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: STEPS_CONTEXT_ID,
-		parent: 'Steps',
-		component: 'Steps.Step.Description'
-	});
-
-	useContext({
-		context_id: STEPS_STEP_CONTEXT_ID,
-		parent: 'Steps.Step',
-		component: 'Steps.Step.Description'
-	});
-
-	const {
-		currentStep,
-		variant
-	}: {
-		currentStep: Writable<number>;
-		variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text';
-	} = getContext(STEPS_CONTEXT_ID);
-	const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID);
+	const currentStep: Writable<number> = getContext('steps-currentStep');
+	const variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text' =
+		getContext('steps-variant');
+	const step: number = getContext('steps-step');
 
 	let defaultClass = '';
-	if (variant === 'circles-text') {
+	$: if (variant === 'circles-text') {
 		if ($currentStep > step) {
 			defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content';
 		} else if ($currentStep === step) {

diff --git a/src/lib/components/steps/Step.svelte b/src/lib/components/steps/Step.svelte
@@ -1,11 +1,5 @@
-<script lang="ts" context="module">
-	export const STEPS_STEP_CONTEXT_ID = 'steps-step-context-id';
-</script>
-
 <script lang="ts">
 	import { getContext, setContext } from 'svelte';
-	import { useContext } from '../../utils/useContext';
-	import { STEPS_CONTEXT_ID } from './Steps.svelte';
 	import { twMerge } from 'tailwind-merge';
 	import type { Writable } from 'svelte/store';
 	import { get_current_component } from 'svelte/internal';
@@ -17,23 +11,11 @@
 	export let href: string;
 	export let step: number;
 
-	useContext({
-		context_id: STEPS_CONTEXT_ID,
-		parent: 'Steps',
-		component: 'Steps.Step'
-	});
-
-	setContext(STEPS_STEP_CONTEXT_ID, {
-		step
-	});
+	setContext('steps-step', step);
 
-	const {
-		variant,
-		currentStep
-	}: {
-		variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text';
-		currentStep: Writable<number>;
-	} = getContext(STEPS_CONTEXT_ID);
+	const currentStep: Writable<number> = getContext('steps-currentStep');
+	const variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text' =
+		getContext('steps-variant');
 
 	let defaultClass = '';
 	$: if (variant === 'bullets') {

diff --git a/src/lib/components/steps/Steps.svelte b/src/lib/components/steps/Steps.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const STEPS_CONTEXT_ID = 'steps-context-id';
-</script>
-
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
@@ -13,14 +9,11 @@
 	let acitveStep = writable(currentStep);
 	$: $acitveStep = currentStep;
 
-	setContext(STEPS_CONTEXT_ID, {
-		steps: true,
-		variant,
-		currentStep: acitveStep
-	});
+	setContext('steps-variant', variant);
+	setContext('steps-currentStep', acitveStep);
 
 	let defaultClass = '';
-	if (variant === 'bullets') {
+	$: if (variant === 'bullets') {
 		defaultClass = 'flex items-center justify-center';
 	} else if (variant === 'bullets-text') {
 		defaultClass = 'py-12 px-4 sm:px-6 lg:px-8';

diff --git a/src/lib/components/steps/Summary.svelte b/src/lib/components/steps/Summary.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
-	import { STEPS_CONTEXT_ID } from './Steps.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: STEPS_CONTEXT_ID,
-		parent: 'Steps',
-		component: 'Steps.Summary'
-	});
-
 	const defaultClass = 'text-sm font-medium';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>

diff --git a/src/lib/components/steps/Title.svelte b/src/lib/components/steps/Title.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { STEPS_CONTEXT_ID } from './Steps.svelte';
-	import { STEPS_STEP_CONTEXT_ID } from './Step.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import type { Writable } from 'svelte/store';
@@ -11,29 +8,13 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: STEPS_CONTEXT_ID,
-		parent: 'Steps',
-		component: 'Steps.Step.Title'
-	});
-
-	useContext({
-		context_id: STEPS_STEP_CONTEXT_ID,
-		parent: 'Steps.Step',
-		component: 'Steps.Step.Title'
-	});
-
-	const {
-		currentStep,
-		variant
-	}: {
-		currentStep: Writable<number>;
-		variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text';
-	} = getContext(STEPS_CONTEXT_ID);
-	const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID);
+	const currentStep: Writable<number> = getContext('steps-currentStep');
+	const variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text' =
+		getContext('steps-variant');
+	const step: number = getContext('steps-step');
 
 	let defaultClass = '';
-	if (variant === 'bullets') {
+	$: if (variant === 'bullets') {
 		if ($currentStep > step) {
 			defaultClass = 'sr-only';
 		} else if ($currentStep === step) {