A tiny library for vastly improving context managament in Svelte apps by encapsulating the Context API.
npm install svelte-contextifyA tiny library for vastly improving context managament within your Svelte/SvelteKit apps by encapsulating the Context API.
- Removes the need for keys.
- Removes key collisions by using the Symbol API.
- Improves type safety when setting and getting context.
- Improves error handling when retrieving unset context.
Install through npm using your preferred package manager:
``bash`
npm i svelte-contextify
`bash`
pnpm add svelte-contextify
`bash`
yarn add svelte-contextify
`bash`
bun add svelte-contextify
See: source
Let's say we want to share the session of a user in our app through context, one might do that like so:
`ts
/* session.ts /
interface Session {
username: string;
}
export type { Session };
`
`html
`
`html
s
Welcome: {session.username}!
While this approach does work, it is flawed for two reasons:
1. We need to keep track of the context key (
) in atleast two different places.
2. We need to keep track of the Session type in atleast two different places.How svelte-contextify solves the problem
This library aims to solve the problem by handling the key and type inference _for_ you using the
createContext function.This allows you to refactor the code from above, into:
`ts
/* session.ts /import { createContext } from 'svelte-contextify';
interface Session {
username: string;
}
const {
get: getSession,
set: setSession
} = createContext({ defaultValue: { username: 'guest' } });
export { getSession, setSession };
export type { Session };
`html
`html
Welcome: {session.username}!
``As you can see this notably improved using context as we now:
- Don't need to define a key at all, which removes the need to keep the keys in sync.
- Only have to pass the type once when creating the context, which removes the need from keeping the types in sync.
This project is licensed under the Apache-2.0 License - see the LICENSE file for details.