From f10504254570fdbfa984bc28a8793edc2a676239 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sun, 19 Dec 2021 01:08:50 -0800
Subject: [PATCH] Clean up store types & initial values

Treating these as Readable for better safety from consuming code

Fixes #10
---
 .../description/DescriptionProvider.svelte    |  4 ++--
 src/lib/components/dialog/Dialog.svelte       |  4 ++--
 .../components/disclosure/Disclosure.svelte   | 21 ++++++++++++-------
 src/lib/components/listbox/Listbox.svelte     |  4 ++--
 src/lib/components/menu/Menu.svelte           |  4 ++--
 src/lib/components/popover/Popover.svelte     |  6 +++---
 src/lib/components/portal/PortalGroup.svelte  |  4 ++--
 .../components/radio-group/RadioGroup.svelte  |  4 ++--
 src/lib/components/switch/Switch.svelte       |  9 +++-----
 src/lib/components/tabs/TabGroup.svelte       |  4 ++--
 .../transitions/TransitionChild.svelte        |  3 +--
 .../transitions/TransitionRoot.svelte         |  9 ++++----
 src/lib/internal/StackContextProvider.svelte  |  4 ++--
 src/lib/internal/open-closed.ts               |  4 ++--
 src/routes/listbox/_PeopleList.svelte         |  2 --
 15 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/description/DescriptionProvider.svelte b/src/lib/components/description/DescriptionProvider.svelte
index 3339223..ae54d52 100644
--- a/src/lib/components/description/DescriptionProvider.svelte
+++ b/src/lib/components/description/DescriptionProvider.svelte
@@ -8,7 +8,7 @@
 
   const DESCRIPTION_CONTEXT_NAME = "headlessui-description-context";
   export function useDescriptionContext():
-    | Writable<DescriptionContext>
+    | Readable<DescriptionContext>
     | undefined {
     return getContext(DESCRIPTION_CONTEXT_NAME);
   }
@@ -16,7 +16,7 @@
 
 <script lang="ts">
   import { getContext, setContext } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   export let name: string;
   let descriptionIds: string[] = [];
   let contextStore: Writable<DescriptionContext> = writable({
diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
index a595712..fe83a54 100644
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -26,7 +26,7 @@
 
   export function useDialogContext(
     component: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     let context = getContext(DIALOG_CONTEXT_NAME) as
       | Writable<StateDefinition>
       | undefined;
@@ -41,7 +41,7 @@
 
 <script lang="ts">
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { useId } from "$lib/hooks/use-id";
   import { useInertOthers } from "$lib/hooks/use-inert-others";
diff --git a/src/lib/components/disclosure/Disclosure.svelte b/src/lib/components/disclosure/Disclosure.svelte
index fa2524d..8cb3510 100644
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { getContext, setContext } from "svelte";
   export enum DisclosureStates {
     Open,
@@ -26,7 +26,7 @@
 
   export function useDisclosureContext(
     component: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     let context: Writable<StateDefinition> | undefined = getContext(
       DISCLOSURE_CONTEXT_NAME
     );
@@ -93,13 +93,20 @@
     };
   });
 
-  let openClosedState: Writable<State> | undefined = writable();
+  function computeOpenClosedState(disclosureState: DisclosureStates) {
+    return match(disclosureState, {
+      [DisclosureStates.Open]: State.Open,
+      [DisclosureStates.Closed]: State.Closed,
+    });
+  }
+
+  let openClosedState: Writable<State> = writable(
+    computeOpenClosedState(disclosureState)
+  );
+
   useOpenClosedProvider(openClosedState);
 
-  $: $openClosedState = match(disclosureState, {
-    [DisclosureStates.Open]: State.Open,
-    [DisclosureStates.Closed]: State.Closed,
-  });
+  $: $openClosedState = computeOpenClosedState(disclosureState);
 </script>
 
 <div {...$$restProps}>
diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index 9bda937..896abfe 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -38,7 +38,7 @@
   const LISTBOX_CONTEXT_NAME = "headlessui-listbox-context";
   export function useListboxContext(
     component: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     let context: Writable<StateDefinition> | undefined =
       getContext(LISTBOX_CONTEXT_NAME);
 
@@ -58,7 +58,7 @@
     calculateActiveIndex,
   } from "$lib/utils/calculate-active-index";
   import { createEventDispatcher, getContext, setContext } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   export let disabled = false;
diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
index 26ed780..38dba7c 100644
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -4,7 +4,7 @@
     calculateActiveIndex,
   } from "$lib/utils/calculate-active-index";
   import { getContext, setContext } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { match } from "$lib/utils/match";
   import { ActionArray, useActions } from "$lib/hooks/use-actions";
@@ -36,7 +36,7 @@
 
   export function useMenuContext(
     componentName: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     let context: Writable<StateDefinition> | undefined =
       getContext(MENU_CONTEXT_NAME);
 
diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
index ee9e32b..436c7ce 100644
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -28,7 +28,7 @@
   const POPOVER_CONTEXT_NAME = "headlessui-popover-context";
   export function usePopoverContext(
     component: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     let context = getContext(POPOVER_CONTEXT_NAME) as
       | Writable<StateDefinition>
       | undefined;
@@ -51,7 +51,7 @@
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { usePopoverGroupContext } from "./PopoverGroup.svelte";
   import { getContext, setContext, onMount } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { ActionArray, useActions } from "$lib/hooks/use-actions";
 
   export let use: ActionArray = [];
@@ -93,7 +93,7 @@
   });
   setContext(POPOVER_CONTEXT_NAME, api);
 
-  let openClosedState: Writable<State> | undefined = writable();
+  let openClosedState: Writable<State> = writable(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(popoverState, {
diff --git a/src/lib/components/portal/PortalGroup.svelte b/src/lib/components/portal/PortalGroup.svelte
index ba58b6f..f567b60 100644
--- a/src/lib/components/portal/PortalGroup.svelte
+++ b/src/lib/components/portal/PortalGroup.svelte
@@ -1,10 +1,10 @@
 <script lang="ts" context="module">
   import { getContext, setContext } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable } from "svelte/store";
   const PORTAL_GROUP_CONTEXT_NAME = "headlessui-portal-group-context";
 
   export function usePortalGroupContext():
-    | Writable<HTMLElement | null>
+    | Readable<HTMLElement | null>
     | undefined {
     return getContext(PORTAL_GROUP_CONTEXT_NAME);
   }
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index 38b5422..84766e7 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -2,7 +2,7 @@
   import DescriptionProvider from "$lib/components/description/DescriptionProvider.svelte";
   import LabelProvider from "$lib/components/label/LabelProvider.svelte";
   import { createEventDispatcher, getContext, setContext } from "svelte";
-  import { Writable, writable } from "svelte/store";
+  import { Readable, Writable, writable } from "svelte/store";
   import { Focus, focusIn, FocusResult } from "$lib/utils/focus-management";
   import { Keys } from "$lib/utils/keyboard";
   import { useId } from "$lib/hooks/use-id";
@@ -29,7 +29,7 @@
   const RADIO_GROUP_CONTEXT_NAME = "headlessui-radio-group-context";
   export function useRadioGroupContext(
     component: string
-  ): Writable<StateDefinition> {
+  ): Readable<StateDefinition> {
     const context = getContext(RADIO_GROUP_CONTEXT_NAME) as
       | Writable<StateDefinition>
       | undefined;
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index 2094dfb..a870b29 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
   import { useSwitchContext } from "./SwitchGroup.svelte";
-  import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
+  import { useLabelContext } from "$lib/components/label/LabelProvider.svelte";
   import { 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";
-  import type { Writable } from "svelte/store";
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
   export let checked = false;
   let api = useSwitchContext();
-  let labelContext: Writable<LabelContext> | undefined = getContext(
-    "headlessui-label-context"
-  );
+  let labelContext = useLabelContext();
   let descriptionContext = useDescriptionContext();
   let id = `headlessui-switch-${useId()}`;
   $: switchStore = $api?.switchStore;
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index b83cf9b..be51ddb 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -6,7 +6,7 @@
     setContext,
   } from "svelte";
 
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
 
   export type StateDefinition = {
     // State
@@ -27,7 +27,7 @@
 
   const TABS_CONTEXT_NAME = "headlessui-tabs-context";
 
-  export function useTabsContext(component: string): Writable<StateDefinition> {
+  export function useTabsContext(component: string): Readable<StateDefinition> {
     let context: Writable<StateDefinition> | undefined =
       getContext(TABS_CONTEXT_NAME);
 
diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index 35b37ac..184b07e 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -39,8 +39,7 @@
 
   let isTransitioning = false;
 
-  let nesting: Writable<NestingContextValues> = writable();
-  nesting.set(
+  let nesting: Writable<NestingContextValues> = writable(
     useNesting(() => {
       // When all children have been unmounted we can only hide ourselves if and only if we are not
       // transitioning ourselves. Otherwise we would unmount before the transitions are finished.
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 4da5500..567a530 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -22,7 +22,7 @@
   export function hasTransitionContext() {
     return getContext(TRANSITION_CONTEXT_NAME) !== undefined;
   }
-  export function useTransitionContext(): Writable<TransitionContextValues> {
+  export function useTransitionContext(): Readable<TransitionContextValues> {
     let context = getContext(TRANSITION_CONTEXT_NAME) as
       | Writable<TransitionContextValues>
       | undefined;
@@ -35,7 +35,7 @@
     return context;
   }
 
-  export function useParentNesting(): Writable<NestingContextValues> {
+  export function useParentNesting(): Readable<NestingContextValues> {
     let context = getContext(NESTING_CONTEXT_NAME) as
       | Writable<NestingContextValues>
       | undefined;
@@ -105,7 +105,7 @@
 <script lang="ts">
   import { getContext, onMount, setContext } from "svelte";
 
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { RenderStrategy } from "$lib/utils/Render.svelte";
@@ -149,8 +149,7 @@
   }
   let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
 
-  let nestingBag: Writable<NestingContextValues> = writable();
-  nestingBag.set(
+  let nestingBag: Writable<NestingContextValues> = writable(
     useNesting(() => {
       state = TreeStates.Hidden;
     })
diff --git a/src/lib/internal/StackContextProvider.svelte b/src/lib/internal/StackContextProvider.svelte
index 82dbaa1..eb74e75 100644
--- a/src/lib/internal/StackContextProvider.svelte
+++ b/src/lib/internal/StackContextProvider.svelte
@@ -9,13 +9,13 @@
 
 <script lang="ts">
   import { getContext, onDestroy, setContext } from "svelte";
-  import { writable, Writable } from "svelte/store";
+  import { Readable, writable, Writable } from "svelte/store";
   type OnUpdate = (message: StackMessage, element: HTMLElement) => void;
 
   export let onUpdate: OnUpdate | undefined;
   export let element: HTMLElement | null;
 
-  let parentUpdateStore: Writable<OnUpdate> | undefined =
+  let parentUpdateStore: Readable<OnUpdate> | undefined =
     getContext(STACK_CONTEXT_NAME);
   let notifyStore: Writable<OnUpdate> = writable(() => {});
   setContext(STACK_CONTEXT_NAME, notifyStore);
diff --git a/src/lib/internal/open-closed.ts b/src/lib/internal/open-closed.ts
index 25cf781..ec4508b 100644
--- a/src/lib/internal/open-closed.ts
+++ b/src/lib/internal/open-closed.ts
@@ -1,5 +1,5 @@
 import { getContext, setContext } from "svelte";
-import type { Writable } from "svelte/store";
+import type { Readable, Writable } from "svelte/store";
 
 export enum State {
   Open,
@@ -11,7 +11,7 @@ export function hasOpenClosed() {
   return useOpenClosed() !== undefined;
 }
 
-export function useOpenClosed(): Writable<State> | undefined {
+export function useOpenClosed(): Readable<State> | undefined {
   return getContext(OPEN_CLOSED_CONTEXT_NAME);
 }
 
diff --git a/src/routes/listbox/_PeopleList.svelte b/src/routes/listbox/_PeopleList.svelte
index 4f0edea..c4b1c71 100644
--- a/src/routes/listbox/_PeopleList.svelte
+++ b/src/routes/listbox/_PeopleList.svelte
@@ -7,8 +7,6 @@
     ListboxOptions,
   } from "$lib";
 
-  import { onMount } from "svelte";
-
   function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
   }