From 3c9dcc9b67213f12a02294c2de644e3dec4408ee Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Thu, 17 Feb 2022 16:42:19 -0800
Subject: [PATCH] Move to using writable<T> syntax

---
 src/lib/components/description/DescriptionProvider.svelte | 4 ++--
 src/lib/components/dialog/Dialog.svelte                   | 2 +-
 src/lib/components/disclosure/Disclosure.svelte           | 4 ++--
 src/lib/components/disclosure/DisclosureButton.svelte     | 3 +--
 src/lib/components/label/LabelProvider.svelte             | 2 +-
 src/lib/components/label/label.test.ts                    | 2 +-
 src/lib/components/listbox/Listbox.svelte                 | 2 +-
 src/lib/components/menu/Menu.svelte                       | 4 ++--
 src/lib/components/popover/Popover.svelte                 | 4 ++--
 src/lib/components/radio-group/RadioGroup.svelte          | 2 +-
 src/lib/components/switch/SwitchGroup.svelte              | 2 +-
 src/lib/components/tabs/TabGroup.svelte                   | 2 +-
 src/lib/components/tabs/TabPanel.svelte                   | 3 +--
 src/lib/components/transitions/TransitionChild.svelte     | 5 ++---
 src/lib/components/transitions/TransitionRoot.svelte      | 5 ++---
 15 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/description/DescriptionProvider.svelte b/src/lib/components/description/DescriptionProvider.svelte
index d22a2bd..47c2619 100644
--- a/src/lib/components/description/DescriptionProvider.svelte
+++ b/src/lib/components/description/DescriptionProvider.svelte
@@ -17,12 +17,12 @@
 
 <script lang="ts">
   import { getContext, setContext } from "svelte";
-  import type { Readable, Writable } from "svelte/store";
+  import type { Readable } from "svelte/store";
   import { writable } from "svelte/store";
   export let name: string;
   export let slotProps = {};
   let descriptionIds: string[] = [];
-  let contextStore: Writable<DescriptionContext> = writable({
+  let contextStore = writable<DescriptionContext>({
     name,
     slotProps,
     props: $$restProps,
diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
index 5a35786..e0924ac 100644
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -128,7 +128,7 @@
 
   let titleId: StateDefinition["titleId"];
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     titleId,
     dialogState,
     setTitleId(id?: string) {
diff --git a/src/lib/components/disclosure/Disclosure.svelte b/src/lib/components/disclosure/Disclosure.svelte
index 901385d..b4e939a 100644
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -66,7 +66,7 @@
   let panelStore: StateDefinition["panelStore"] = writable(null);
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     buttonId,
     panelId,
     disclosureState,
@@ -111,7 +111,7 @@
     });
   }
 
-  let openClosedState: Writable<State> = writable(
+  let openClosedState = writable<State>(
     computeOpenClosedState(disclosureState)
   );
 
diff --git a/src/lib/components/disclosure/DisclosureButton.svelte b/src/lib/components/disclosure/DisclosureButton.svelte
index 6d928ce..d5df723 100644
--- a/src/lib/components/disclosure/DisclosureButton.svelte
+++ b/src/lib/components/disclosure/DisclosureButton.svelte
@@ -7,7 +7,6 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
   const forwardEvents = forwardEventsBuilder(get_current_component());
@@ -25,7 +24,7 @@
   $: isWithinPanel =
     panelContext === null ? false : panelContext === $api.panelId;
 
-  let ourStore: Writable<HTMLElement | null> = writable(null);
+  let ourStore = writable<HTMLElement | null>(null);
   $: if (!isWithinPanel) ourStore = buttonStore;
 
   function handleClick() {
diff --git a/src/lib/components/label/LabelProvider.svelte b/src/lib/components/label/LabelProvider.svelte
index d59bec9..d58038f 100644
--- a/src/lib/components/label/LabelProvider.svelte
+++ b/src/lib/components/label/LabelProvider.svelte
@@ -20,7 +20,7 @@
   export let name: string;
   export let slotProps = {};
   let labelIds: string[] = [];
-  let contextStore: Writable<LabelContext> = writable({
+  let contextStore = writable<LabelContext>({
     name,
     slotProps,
     props: $$restProps,
diff --git a/src/lib/components/label/label.test.ts b/src/lib/components/label/label.test.ts
index d8fc5d9..466621f 100644
--- a/src/lib/components/label/label.test.ts
+++ b/src/lib/components/label/label.test.ts
@@ -138,7 +138,7 @@ it("should be possible to render a Label with an `as` prop", async () => {
 });
 
 it("should be possible to change the props of a Label", async () => {
-  let classStore: Writable<string | null> = writable(null);
+  let classStore = writable<string | null>(null);
   let { container } = render(svelte`
   <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index 1cc69b7..0ca69ea 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -92,7 +92,7 @@
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeOptionIndex: StateDefinition["activeOptionIndex"] = null;
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     listboxState,
     value,
     labelRef,
diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
index ebe43e2..72b251a 100644
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -67,7 +67,7 @@
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeItemIndex: StateDefinition["activeItemIndex"] = null;
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     menuState,
     buttonStore,
     itemsStore: itemsStore,
@@ -189,7 +189,7 @@
     if (!event.defaultPrevented) $buttonStore?.focus({ preventScroll: true });
   }
 
-  let openClosedState: Writable<State> | undefined = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(menuState, {
diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
index f539f58..582a683 100644
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -69,7 +69,7 @@
   let panel: StateDefinition["panel"] = writable(null);
   let button: StateDefinition["button"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     popoverState,
     buttonId,
     panelId,
@@ -100,7 +100,7 @@
   });
   setContext(POPOVER_CONTEXT_NAME, api);
 
-  let openClosedState: Writable<State> = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(popoverState, {
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index 1b4ac05..c5838b6 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -70,7 +70,7 @@
     change: any;
   }>();
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     options,
     value,
     disabled,
diff --git a/src/lib/components/switch/SwitchGroup.svelte b/src/lib/components/switch/SwitchGroup.svelte
index b9f0d68..c027187 100644
--- a/src/lib/components/switch/SwitchGroup.svelte
+++ b/src/lib/components/switch/SwitchGroup.svelte
@@ -26,7 +26,7 @@
 
   let switchStore: StateDefinition["switchStore"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     switchStore,
   });
   setContext(SWITCH_CONTEXT_NAME, api);
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index f533b1d..aacabf8 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -70,7 +70,7 @@
 
   const dispatch = createEventDispatcher();
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     selectedIndex,
     orientation: vertical ? "vertical" : "horizontal",
     activation: manual ? "manual" : "auto",
diff --git a/src/lib/components/tabs/TabPanel.svelte b/src/lib/components/tabs/TabPanel.svelte
index 2d085bf..8312554 100644
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -7,14 +7,13 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render, { Features } from "$lib/utils/Render.svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
-  let elementRef: Writable<HTMLElement | null> = writable(null);
+  let elementRef = writable<HTMLElement | null>(null);
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;
 
diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index b323b02..e795f92 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createEventDispatcher, onMount, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
@@ -60,7 +59,7 @@
   $: strategy =
     $$props.unmount === false ? RenderStrategy.Hidden : RenderStrategy.Unmount;
 
-  let nesting: Writable<NestingContextValues> = writable(
+  let nesting = writable<NestingContextValues>(
     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.
@@ -174,7 +173,7 @@
   }
 
   setContext(NESTING_CONTEXT_NAME, nesting);
-  let openClosedState: Writable<State> = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: openClosedState.set(
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 27749bd..0e38963 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
@@ -69,14 +68,14 @@
   }
   let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
 
-  let nestingBag: Writable<NestingContextValues> = writable(
+  let nestingBag = writable<NestingContextValues>(
     useNesting(() => {
       state = TreeStates.Hidden;
     })
   );
 
   let initial = true;
-  let transitionBag: Writable<TransitionContextValues> = writable();
+  let transitionBag = writable<TransitionContextValues>();
   $: transitionBag.set({
     show: !!shouldShow,
     appear: appear || !initial,