Clean up store types & initial values

Treating these as Readable for better safety from consuming code

Fixes #10

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({

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";

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) {
-  useOpenClosedProvider(openClosedState);
+    return match(disclosureState, {
-
-  $: $openClosedState = match(disclosureState, {
       [DisclosureStates.Open]: State.Open,
       [DisclosureStates.Closed]: State.Closed,
     });
+  }
+
+  let openClosedState: Writable<State> = writable(
+    computeOpenClosedState(disclosureState)
+  );
+
+  useOpenClosedProvider(openClosedState);
+
+  $: $openClosedState = computeOpenClosedState(disclosureState);
 </script>
 
 <div {...$$restProps}>

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;

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);
 

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, {

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);
   }

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;

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 { createEventDispatcher } from "svelte";
-  import type { Writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   export let checked = false;
   let api = useSwitchContext();
-  let labelContext: Writable<LabelContext> | undefined = getContext(
+  let labelContext = useLabelContext();
-    "headlessui-label-context"
-  );
   let descriptionContext = useDescriptionContext();
   let id = `headlessui-switch-${useId()}`;
   $: switchStore = $api?.switchStore;

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);
 

src/lib/components/transitions/TransitionChild.svelte

@@ -39,8 +39,7 @@
 
   let isTransitioning = false;
 
-  let nesting: Writable<NestingContextValues> = writable();
+  let nesting: Writable<NestingContextValues> = writable(
-  nesting.set(
     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.

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();
+  let nestingBag: Writable<NestingContextValues> = writable(
-  nestingBag.set(
     useNesting(() => {
       state = TreeStates.Hidden;
     })

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);

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);
 }
 

src/routes/listbox/_PeopleList.svelte

@@ -7,8 +7,6 @@
     ListboxOptions,
   } from "$lib";
 
-  import { onMount } from "svelte";
-
   function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
   }