docs: Adds a note for each store that uses context

packages/skeleton/src/lib/index.ts

@@ -4,9 +4,9 @@
 
 export type { AutocompleteOption } from './components/Autocomplete/types.js';
 export type { ConicStop } from './components/ConicGradient/types.js';
-export type { DrawerSettings } from './utilities/Drawer/types.js';
-export type { ModalSettings, ModalComponent } from './utilities/Modal/types.js';
-export type { ToastSettings } from './utilities/Toast/types.js';
+export type { DrawerSettings, DrawerStore } from './utilities/Drawer/types.js';
+export type { ModalSettings, ModalComponent, ModalStore } from './utilities/Modal/types.js';
+export type { ToastSettings, ToastStore } from './utilities/Toast/types.js';
 export type { TableSource } from './components/Table/types.js';
 export type { PaginationSettings } from './components/Paginator/types.js';
 export type { PopupSettings } from './utilities/Popup/types.js';

packages/skeleton/src/lib/utilities/Drawer/stores.ts

@@ -9,13 +9,17 @@ const DRAWER_STORE_KEY = 'drawerStore';
 /**
  * Retrieves the `drawerStore`.
  *
+ * This can *ONLY* be called from the **top level** of components!
+ *
  * @example
- * ```ts
- * import { getDrawerStore } from "@skeletonlabs/skeleton";
+ * ```svelte
+ * <script>
+ * 	import { getDrawerStore } from "@skeletonlabs/skeleton";
  *
- * const drawerStore = getDrawerStore();
+ * 	const drawerStore = getDrawerStore();
  *
- * drawerStore.open();
+ * 	drawerStore.open();
+ * </script>
  * ```
  */
 export function getDrawerStore(): DrawerStore {
@@ -38,7 +42,7 @@ export function initializeDrawerStore(): DrawerStore {
 	return setContext(DRAWER_STORE_KEY, drawerStore);
 }
 
-type DrawerStore = ReturnType<typeof drawerService>;
+export type DrawerStore = ReturnType<typeof drawerService>;
 function drawerService() {
 	const { subscribe, set, update } = writable<DrawerSettings>({});
 	return {

packages/skeleton/src/lib/utilities/Drawer/types.ts

@@ -1,5 +1,7 @@
 // Drawer Types
 
+export type { DrawerStore } from './stores.js';
+
 export interface DrawerSettings {
 	open?: boolean;
 	/** A unique identifier, useful for setting contents. */

packages/skeleton/src/lib/utilities/Modal/stores.ts

@@ -9,13 +9,17 @@ const MODAL_STORE_KEY = 'modalStore';
 /**
  * Retrieves the `modalStore`.
  *
+ * This can *ONLY* be called from the **top level** of components!
+ *
  * @example
- * ```ts
- * import { getmodalStore } from "@skeletonlabs/skeleton";
+ * ```svelte
+ * <script>
+ * 	import { getmodalStore } from "@skeletonlabs/skeleton";
  *
- * const modalStore = getModalStore();
+ * 	const modalStore = getModalStore();
  *
- * modalStore.trigger({ type: "alert", title: "Welcome!" });
+ * 	modalStore.trigger({ type: "alert", title: "Welcome!" });
+ * </script>
  * ```
  */
 export function getModalStore(): ModalStore {
@@ -38,7 +42,7 @@ export function initializeModalStore(): ModalStore {
 	return setContext(MODAL_STORE_KEY, modalStore);
 }
 
-type ModalStore = ReturnType<typeof modalService>;
+export type ModalStore = ReturnType<typeof modalService>;
 function modalService() {
 	const { subscribe, set, update } = writable<ModalSettings[]>([]);
 	return {

packages/skeleton/src/lib/utilities/Modal/types.ts

@@ -1,5 +1,7 @@
 // Modal Types
 
+export type { ModalStore } from './stores.js';
+
 export interface ModalComponent {
 	/** Import and provide your component reference. */
 	ref: any;

packages/skeleton/src/lib/utilities/Toast/stores.ts

@@ -11,13 +11,17 @@ const TOAST_STORE_KEY = 'toastStore';
 /**
  * Retrieves the `toastStore`.
  *
+ * This can *ONLY* be called from the **top level** of components!
+ *
  * @example
- * ```ts
- * import { getToastStore } from "@skeletonlabs/skeleton";
+ * ```svelte
+ * <script>
+ * 	import { getToastStore } from "@skeletonlabs/skeleton";
  *
- * const toastStore = getToastStore();
+ * 	const toastStore = getToastStore();
  *
- * toastStore.open({ message: "Welcome!" });
+ * 	toastStore.open({ message: "Welcome!" });
+ * </script>
  * ```
  */
 export function getToastStore(): ToastStore {
@@ -46,7 +50,7 @@ function randomUUID(): string {
 	return Number(random).toString(32);
 }
 
-type ToastStore = ReturnType<typeof toastService>;
+export type ToastStore = ReturnType<typeof toastService>;
 function toastService() {
 	const { subscribe, set, update } = writable<Toast[]>([]);
 

packages/skeleton/src/lib/utilities/Toast/types.ts

@@ -1,5 +1,7 @@
 // Toast interface types
 
+export type { ToastStore } from './stores.js';
+
 export interface ToastSettings {
 	/** Provide the toast message. Supports HTML. */
 	message: string;

sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte

@@ -17,7 +17,7 @@
 		name: 'Drawers',
 		description: 'Displays an overlay panel that attaches to any side of the screen.',
 		imports: ['Drawer', 'getDrawerStore'],
-		types: ['DrawerSettings'],
+		types: ['DrawerSettings', 'DrawerStore'],
 		source: 'utilities/Drawer',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/',
 		components: [{ sveld: sveldDrawer }],
@@ -79,14 +79,7 @@
 					</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<!-- prettier-ignore -->
-				<p>
-					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
-				</p>
-				<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
-				<p>Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).</p>
-				<CodeBlock language="html" code={`<Drawer />\n\n<!-- <AppShell>...</AppShell> -->`} />
-				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
+				<p>There are a several steps involved to utilize this feature. Please refer to the documented instruction below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -100,22 +93,24 @@
 				and reusable via a Svelte writable store. Do not reimplement this component for each route page.
 			</p>
 		</aside>
-		<!-- Drawer Component -->
 		<section class="space-y-4">
-			<h2 class="h2">Drawer Component</h2>
+			<h2 class="h2">Prerequisites</h2>
+			<h3 class="h3">Initialize Stores</h3>
+			<!-- prettier-ignore -->
+			<p>
+				Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
+			</p>
+			<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
+			<h3 class="h3">Drawer Component</h3>
 			<p>Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).</p>
-			<CodeBlock
-				language="html"
-				code={`
-<Drawer>(contents)</Drawer>
-
-<!-- <AppShell>...</AppShell> -->
-				`}
-			/>
+			<CodeBlock language="html" code={`<Drawer />\n\n<!-- <AppShell>...</AppShell> -->`} />
 		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Drawer Store</h2>
-			<p>Import this anywhere you wish to control the Drawer. Provides an interface to control the drawer component.</p>
+			<p>Provides an interface to control the drawer component.</p>
+			<blockquote class="blockquote">
+				NOTE: To retrieve the store, <code class="code">getDrawerStore</code> must be invoked at the <u>top level</u> of your component!
+			</blockquote>
 			<CodeBlock language="ts" code={`import { getDrawerStore } from "@skeletonlabs/skeleton";\n\nconst drawerStore = getDrawerStore();`} />
 			<h3 class="h3">Open</h3>
 			<CodeBlock language="ts" code={`drawerStore.open();`} />

sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte

@@ -26,7 +26,7 @@
 		name: 'Modals',
 		description: 'High priority dialogs and modals using a dynamic queue system.',
 		imports: ['Modal', 'getModalStore'],
-		types: ['ModalSettings', 'ModalComponent'],
+		types: ['ModalSettings', 'ModalComponent', 'ModalStore'],
 		source: 'utilities/Modal',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/',
 		components: [{ sveld: sveldModal }],
@@ -106,7 +106,7 @@
 			component: c,
 			title: 'Custom Form Component',
 			body: 'Complete the form below and then press submit.',
-			response: (r: any) => console.log('response:', r)
+			response: (r) => console.log('response:', r)
 		};
 		modalStore.trigger(modal);
 	}
@@ -117,7 +117,7 @@
 			component: 'exampleList',
 			title: 'Custom List Component',
 			body: 'Make your selection then press submit.',
-			response: (r: any) => console.log('response:', r)
+			response: (r) => console.log('response:', r)
 		};
 		modalStore.trigger(modal);
 	}
@@ -149,21 +149,7 @@
 				<button class="btn variant-filled" on:click={modalDemo}>Show Modal</button>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<!-- prettier-ignore -->
-				<p>
-					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
-				</p>
-				<CodeBlock
-					language="typescript"
-					code={`
-import { Modal, initializeStores } from "@skeletonlabs/skeleton";
-
-initializeStores();
-`}
-				/>
-				<p>Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).</p>
-				<CodeBlock language="html" code={`<Modal />\n\n<!-- <AppShell>...</AppShell> -->`} />
-				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
+				<p>There are a several steps involved to utilize this feature. Please refer to the documented instruction below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -180,23 +166,26 @@ initializeStores();
 			</p>
 		</aside>
 		<section class="space-y-4">
-			<h2 class="h2">Modal Component</h2>
+			<h2 class="h2">Prerequisites</h2>
+			<h3 class="h3">Initialize Stores</h3>
+			<!-- prettier-ignore -->
+			<p>
+				Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
+			</p>
+			<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
+			<h3 class="h3">Modal Component</h3>
 			<p>Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).</p>
-			<CodeBlock
-				language="html"
-				code={`
-<Modal />
-
-<!-- <AppShell>...</AppShell> -->
-				`}
-			/>
+			<CodeBlock language="html" code={`<Modal />\n\n<!-- <AppShell>...</AppShell> -->`} />
 		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Modal Store</h2>
 			<p>
 				When you wish to trigger a modal, import the <code class="code">getModalStore</code> function and invoke it to retrieve the
 				<code class="code">modalStore</code>, which is a Svelte store that acts as the modal queue.
 			</p>
+			<blockquote class="blockquote">
+				NOTE: To retrieve the store, <code class="code">getModalStore</code> must be invoked at the <u>top level</u> of your component!
+			</blockquote>
 			<CodeBlock
 				language="ts"
 				code={`

sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte

@@ -17,7 +17,7 @@
 		name: 'Toasts',
 		description: 'Simple notifications utilizing a dynamic queue system.',
 		imports: ['Toast', 'getToastStore'],
-		types: ['ToastSettings'],
+		types: ['ToastSettings', 'ToastStore'],
 		source: 'utilities/Toast',
 		components: [{ sveld: sveldToast }],
 		transitionIn: 'fly',
@@ -141,14 +141,7 @@
 				</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<!-- prettier-ignore -->
-				<p>
-					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
-				</p>
-				<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
-				<p>Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).</p>
-				<CodeBlock language="html" code={`<Toast />\n\n<!-- <AppShell>...</AppShell> -->`} />
-				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
+				<p>There are a several steps involved to utilize this feature. Please refer to the documented instruction below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>
@@ -162,23 +155,26 @@
 				and reusable via a Svelte writable store. Do not reimplement this component for each route page.
 			</p>
 		</aside>
-		<!-- Toast Component -->
 		<section class="space-y-4">
-			<h2 class="h2">Toast Component</h2>
+			<h2 class="h2">Prerequisites</h2>
+			<h3 class="h3">Initialize Stores</h3>
+			<!-- prettier-ignore -->
+			<p>
+				Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
+			</p>
+			<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
+			<h3 class="h3">Toast Component</h3>
 			<p>Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).</p>
-			<CodeBlock
-				language="html"
-				code={`
-<Toast />
-
-<!-- <AppShell>...</AppShell> -->
-				`}
-			/>
+			<CodeBlock language="html" code={`<Toast />\n\n<!-- <AppShell>...</AppShell> -->`} />
+			<p>We'll cover triggering this feature on-demand in the documentation below.</p>
 		</section>
 		<!-- Toast Store -->
 		<section class="space-y-4">
 			<h2 class="h2">Toast Store</h2>
 			<p>The Toast Store acts as a queue for your toast messages.</p>
+			<blockquote class="blockquote">
+				NOTE: To retrieve the store, <code class="code">getToastStore</code> must be invoked at the <u>top level</u> of your component!
+			</blockquote>
 			<CodeBlock
 				language="ts"
 				code={`import { getToastStore } from '@skeletonlabs/skeleton';\n\nconst toastStore = getToastStore();