breaking: Refactor global stores for Modal, Toast, and Drawer

[AdrianGonz97]

Linked Issue

Closes #522

Description

This PR aims to fix the SSR related issues that comes with stores that are defined in the global scope. To fix this, we'll be using Svelte's context API as a means of attaching these stores to the component tree for safe keeping.

Store Initialization

The first change is how these utility stores are initialized. As we are using contexts now, we need to initialize and set the contexts for these stores in the root layout file.

We provide a utility function, initializeStores(), that will handle the initialization for the users:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { Toast, Modal, Drawer, initializeStores } from "@skeletonlabs/skeleton";
	
	initializeStores();
</script>

<Toast />
<Modal />
<Drawer />

Retrieving Stores

Stores for Modal, Toast, and Drawer are now accessed through a function that will retrieve their respective stores.

import { getToastStore, getDrawerStore, getModalStore } from "@skeletonlabs/skeleton";

const toastStore = getToastStore();
const drawerStore = getDrawerStore();
const modalStore = getModalStore();

...and that's it! It's a pretty minor, yet effective change that clears up all of the nasty SSR issues that these particular stores have been troubling us with.

As a bonus, these stores can now be safely used at the top level of components without any fear of the server's store persisting its state:

<script lang="ts">
	import { toastStore } from '@skeletonlabs/skeleton';

	toastStore.trigger({
		message: 'Howdy!',
		autohide: false
	});
</script>

<!-- ... -->

Changsets

Instructions: Changesets automate our changelog. If you modify files in /packages/skeleton, run pnpm changeset in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be minor while chores and bugfixes should be patch. Please prefix the changeset message with feat:, bugfix: or chore:.

Checklist

Please read and apply all contribution requirements.

• This PR targets the dev branch (NEVER master)
• Documentation reflects all relevant changes
• Branch is prefixed with: docs/, feat/, chore/, bugfix/
• Ensure Svelte and Typescript linting is current - run pnpm check
• Ensure Prettier linting is current - run pnpm format
• All test cases are passing - run pnpm test
• Includes a changeset (if relevant; see above)

[changeset-bot]

🦋 Changeset detected

Latest commit: 2eea63b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@skeletonlabs/skeleton	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
skeleton-docs	✅ Ready (Inspect)	Visit Preview	Aug 9, 2023 5:54pm

[endigo9740]

Seems good at at glance @AdrianGonz97. I'll test it out this week and we'll aim to get this in for the v2 release. Thank you for updating the docs already as well!

[endigo9740]

@AdrianGonz97 I always like to add context for WHY you're implementing something in the instruction, so I've modified this bit in the featured example for drawers, modals, and toasts:

I think with this I'm good with moving forward and merging this.