Wanted a type safe get and set context in Svelte kit with reactivity across the page and component but scoped to per layout.
- You enter the type in the
/context
folder as I did with src/lib/context/sample.ts - And in any page and component inside the
/sample
folder you can access the value with magic of svelte
import { PageCtx } from '$lib/context';
const pageCtx = new PageCtx("sample");
const title = pageCtx.get("title");
- If you input the wrong page name it will throw error
new PageCtx("correct-name")
- If you enter a wrong key to
get
orset
it will throw errorpageCtx.get("correct-key")
- If the value of the object didn't match the type, it will throw error
$title=true
- If there is a missing key, during the setup of
.set()
in+layout.svelte
it will throw error