ALT import { Database } from "bun:sqlite"; const db = new Database("db.sqlite"); class Cache { get(key: string) { return db .query( "SELECT `value` FROM cache WHERE key = ? LIMIT 1", ) .get(key)?.value; } set(key: string, value: string) { db.query( "INSERT OR REPLACE INTO cache (`key`, `value`) VALUES (?, ?)", ).run(key, value); } } const cache = new Cache(); cache.get("svelte"); // output: 5.0.0-next.166 cache.set("svelte", "latest"); // 🧡

ALT <script> export let open; const { elements: { trigger, content, arrow }, states, } = createTooltip({ open, onOpenChange: ({ curr, next }) => { open = next; return next; }, }); $: states.open.set(open); </script> <button use:melt={$trigger}>Trigger</button> {#if open} <div use:melt={$content}> <div use:melt={$arrow} /> <p>Hello world!</p> </div> {/if}

ALT <script> let { open } = $props(); const tooltip = new Tooltip({ open: { get: () => open, set: (v) => (open = v), }, }); </script> <button {...tooltip.trigger()}>Trigger</button> {#if open} <div {...tooltip.content()}> <div {...tooltip.arrow()} /> <p>Hello world!</p> </div> {/if}

ALT <SmartAwait promise={sleep(300).then(() => 'Done')} delay={290} minSpinnerDuration={500}> Empty state <div slot="spinner"> <!-- Spinner --> Spinner </div> <div slot="resolved" let:value> {value} </div> <div slot="rejected" let:value> {value} </div> </SmartAwait>

ALT <script lang="ts" generics="T extends unknown"> import { untrack } from 'svelte'; function ensure_positive(n: number) { if (n < 0) throw new Error('Expected a positive number'); } const { delay: spinner_delay = 200, minSpinnerDuration = 100, promise, } = $props<{ promise: Promise<T>; delay: number; minSpinnerDuration: number; }>(); $effect.pre(() => { ensure_positive(spinner_delay); ensure_positive(minSpinnerDuration); }); let promise_state = $state<'empty' | 'spinner' | 'resolved' | 'rejected'>('empty'); let resolved_value = $state<T>(); let rejected_value = $state<any>(); let spinner_timeout: NodeJS.Timeout, padding_timeout: NodeJS.Timeout; $effect(() => { let settled = false; const check_and_set = (new_state: typeof promise_state) => () => !settled && untrack(() => (promise_state = new_state)); spinner_timeout = setTimeout(check_and_set('spinner'), spinner_delay); promise .then((v) => { clearTimeout(spinner_timeout); padd

ALT type Primitive = string | null | symbol | boolean | number | undefined | bigint; function is_primitive(val: any): val is Primitive { return val !== Object(val) || val === null; }; function persisted<T>(key: string, initial: T) { const existing = localStorage.getItem(key); const primitive = is_primitive(initial); const parsed_value = existing ? JSON.parse(existing) : initial; let state = $state<T extends Primitive ? { value: T } : T>( primitive ? { value: parsed_value } : parsed_value, ); $effect.root(() => { $effect(() => { // @ts-ignore localStorage.setItem(key, JSON.stringify(primitive ? state.value : state)); }); }); return state; } // Usage: const theme = persisted('theme', 'dark') theme.value === 'light' theme.value = 'light' const preferences = persisted('preferences', { reduced: true, dark: false }); preferences.reduced = false // No need of preferences.value.reduced