From 543c1263e3f44e6b5e088ba5181e7e7adc40c316 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Wed, 15 Dec 2021 10:31:14 -0800
Subject: [PATCH] Also fix label/description context usage

---
 src/lib/components/description/Description.svelte     |  9 +++------
 .../components/description/DescriptionProvider.svelte | 11 +++++++++--
 src/lib/components/label/Label.svelte                 |  9 +++------
 src/lib/components/label/LabelProvider.svelte         |  9 +++++++--
 src/lib/components/switch/Switch.svelte               |  9 +++++----
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/description/Description.svelte b/src/lib/components/description/Description.svelte
index 1c198eb..cdcbae9 100644
--- a/src/lib/components/description/Description.svelte
+++ b/src/lib/components/description/Description.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
   import { useId } from "$lib/hooks/use-id";
-  import { getContext, onMount } from "svelte";
-  import type { Writable } from "svelte/store";
-  import type { DescriptionContext } from "./DescriptionProvider.svelte";
+  import { onMount } from "svelte";
+  import { useDescriptionContext } from "./DescriptionProvider.svelte";
   const id = `headlessui-description-${useId()}`;
-  let contextStore: Writable<DescriptionContext> | undefined = getContext(
-    "headlessui-description-context"
-  );
+  let contextStore = useDescriptionContext();
   if (!contextStore) {
     throw new Error(
       "You used a <Description /> component, but it is not inside a relevant parent."
diff --git a/src/lib/components/description/DescriptionProvider.svelte b/src/lib/components/description/DescriptionProvider.svelte
index 1bba8d5..38b2b5e 100644
--- a/src/lib/components/description/DescriptionProvider.svelte
+++ b/src/lib/components/description/DescriptionProvider.svelte
@@ -5,10 +5,17 @@
     register: (value: string) => void;
     descriptionIds?: string;
   }
+
+  const DESCRIPTION_CONTEXT_NAME = "DescriptionContext";
+  export function useDescriptionContext():
+    | Writable<DescriptionContext>
+    | undefined {
+    return getContext(DESCRIPTION_CONTEXT_NAME);
+  }
 </script>
 
 <script lang="ts">
-  import { setContext } from "svelte";
+  import { getContext, setContext } from "svelte";
   import { writable, Writable } from "svelte/store";
   export let name: string;
   let descriptionIds = [];
@@ -17,7 +24,7 @@
     register,
     props: $$restProps,
   });
-  setContext("headlessui-description-context", contextStore);
+  setContext(DESCRIPTION_CONTEXT_NAME, contextStore);
 
   $: contextStore.set({
     name,
diff --git a/src/lib/components/label/Label.svelte b/src/lib/components/label/Label.svelte
index a728f8e..3d757c1 100644
--- a/src/lib/components/label/Label.svelte
+++ b/src/lib/components/label/Label.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
   import { useId } from "$lib/hooks/use-id";
-  import { getContext, onMount } from "svelte";
-  import type { Writable } from "svelte/store";
-  import type { LabelContext } from "./LabelProvider.svelte";
+  import { onMount } from "svelte";
+  import { useLabelContext } from "./LabelProvider.svelte";
   const id = `headlessui-label-${useId()}`;
   export let passive = false;
-  let contextStore: Writable<LabelContext> | undefined = getContext(
-    "headlessui-label-context"
-  );
+  let contextStore = useLabelContext();
   if (!contextStore) {
     throw new Error(
       "You used a <Label /> component, but it is not inside a relevant parent."
diff --git a/src/lib/components/label/LabelProvider.svelte b/src/lib/components/label/LabelProvider.svelte
index 8725caa..6df97f6 100644
--- a/src/lib/components/label/LabelProvider.svelte
+++ b/src/lib/components/label/LabelProvider.svelte
@@ -5,10 +5,15 @@
     register: (value: string) => void;
     labelIds?: string;
   }
+
+  const LABEL_CONTEXT_NAME = "LabelContext";
+  export function useLabelContext(): Writable<LabelContext> | undefined {
+    return getContext(LABEL_CONTEXT_NAME);
+  }
 </script>
 
 <script lang="ts">
-  import { setContext } from "svelte";
+  import { getContext, setContext } from "svelte";
   import { writable, Writable } from "svelte/store";
   export let name: string;
   let labelIds = [];
@@ -17,7 +22,7 @@
     register,
     props: $$restProps,
   });
-  setContext("headlessui-label-context", contextStore);
+  setContext(LABEL_CONTEXT_NAME, contextStore);
 
   $: contextStore.set({
     name,
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index a4a313f..834e78c 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { useSwitchContext } from "./SwitchGroup.svelte";
   import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
-  import type { DescriptionContext } from "$lib/components/description/DescriptionProvider.svelte";
+  import {
+    DescriptionContext,
+    useDescriptionContext,
+  } from "$lib/components/description/DescriptionProvider.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
   import { getContext, createEventDispatcher } from "svelte";
@@ -13,9 +16,7 @@
   let labelContext: Writable<LabelContext> | undefined = getContext(
     "headlessui-label-context"
   );
-  let descriptionContext: Writable<DescriptionContext> | undefined = getContext(
-    "headlessui-description-context"
-  );
+  let descriptionContext = useDescriptionContext();
   let id = `headlessui-switch-${useId()}`;
   $: switchStore = $api?.switchStore;
   let internalSwitchRef = null;