Svelte has recently introduced [runes](https://svelte.dev/blog/runes) with the new Svelte 5 release, which reimagines how we handle state and reactivity. I won’t dive deeply into runes and how they work, but the new Svelte 5 changes enable some really elegant implementations, especially when working across JavaScript/TypeScript files. ## What Do I Mean by Global State? Global state is a centralized store of data that can be accessed across multiple components or scopes. ## How Does Svelte 5 Handle This? Using runes, we can create a reactive global state by placing a `$state()` rune inside a `.svelte.ts` or `.svelte.js` file. ### How We Use `$state`: ```ts let count = $state(0); ``` However, there are some caveats. We can’t simply declare a "variable" in a `.svelte.ts` file and import it—it’s never **that** simple! 😃 --- Let’s start by making a simple incrementing counter: ```ts let count = $state(0); export const getCounter = () => { const increment = () => { count += 1; }; return { get count() { return count; }, increment }; }; ``` This code creates a function that provides a counter context, allowing us to increment and retrieve the value. --- Here’s how we would use this function context inside a component: ```ts ``` This is fairly elegant, but what if we need a more complex implementation? For instance, how about managing toast popups? ### Toast Popup Example This example demonstrates how to create a state that is easily accessible, allowing us to add and delete toasts across any component safely. ```typescript import { getContext, onDestroy, setContext } from 'svelte'; type ToastLevel = 'info' | 'success' | 'warn' | 'error'; interface Toast { id: string; message: string; level: ToastLevel; } export class ToastState { toasts = $state([]); toastMap = new Map(); constructor() { onDestroy(() => { for (const timeout of this.toastMap.values()) { clearTimeout(timeout); } this.toastMap.clear(); }); } add(message: string, level: ToastLevel, showDuration = 5000) { const id = crypto.randomUUID(); this.toasts.push({ id, message, level, }); this.toastMap.set( id, window.setTimeout(() => { this.delete(id); }, showDuration) as number ); } delete(id: string) { const timeout = this.toastMap.get(id); if (timeout) { window.clearTimeout(timeout); } this.toasts = this.toasts.filter((toast) => toast.id !== id); } } export const setToastState = () => { return setContext('TOAST', new ToastState()); }; export const getToastState = () => { return getContext>('TOAST'); }; ``` All we need now is a component to render the toasts. Whenever a new toast is added, the `toasts` array is fully reactive and will render any new toasts that are appended to it! ```ts

{#each toastState.toasts as toast}

{/each}

``` This write-up showcases how elegant Svelte can be for writing clean and reusable code. My goal isn’t to explain every minute detail but rather to highlight Svelte’s capabilities and leave the rest of the learning to you!

svelte5-global-state