🍪 Universal accessible hard-baked cookies for SvelteKit
From a single schema, type-defined cookies can be accessed in any environment.
npm i svelte-baked-cookie
- Use the
bakery
function to define the cookie type and getbake
andrebake
. See ts-serde for more information on type guard
// bakery.js
import { bakery } from 'svelte-baked-cookie'
import { json, number, string } from 'svelte-baked-cookie/serde'
export const { bake, rebake } = bakery(
{
key1: string,
key2: number,
key3: json(
(x): x is string[] =>
Array.isArray(x) && x.every((y) => typeof y === 'string'),
[]
)
}
// {
// CookieSetOptions: (optional)
// }
)
- In the server, you can get a typed accessor by passing a
cookies
object obtained fromload
, etc. to thebake
function.
// +layout.server.js
import { bake } from './bakery.js'
export const load = ({ cookies }) => {
const { bakedCookies } = bake(cookies)
// string
const str = bakedCookies.key1.get()
// number
const num = bakedCookies.key2.set()
// string[]
bakedCookies.key3.set(['value', 'set', 'by', 'server'])
return {
// ...
}
}
- On the client, the
rebake
function can be used directly to obtain awritable
svelte-store of typed cookies.
<!-- +page.svelte -->
<script>
import { rebake } from './bakery.js'
const cookies = rebake()
// key1: Writable<string>
// key2: Writable<number>
// key3: Writable<string[]>
const { key1, key2, key3 } = cookies
// string
$: console.log($key1)
// string
$: $key2 = 123
// or
$: key2.set(123)
// string[]
$: $key3 = ['value', 'set', 'by', 'client']
// or
$: key3.set(['value', 'set', 'by', 'client'])
</script>
- (optional): When using SSRs, this may not be sufficient.
When rendering svelte components on the server, the server's cookie cannot be accessed directly, which may result in display flickering.
To solve this, you need to pass the cookiepie
from +layout.server.js, etc. and make it thedough
ofrebake
.
// +layout.server.ts
import { bake } from './bakery.js'
export const load = ({ cookies }) => {
const { bakedCookies, pie } = bake(cookies)
// ...
return {
pie
}
}
<!-- +layout.svelte -->
<script>
import { rebake } from './bakery.js'
export let data
$: ({ pie } = data)
$: cookies = rebake(pie)
// key1: Writable<string>
// key2: Writable<number>
// key3: Writable<string[]>
$: { key1, key2, key3 } = cookies
</script>
This is optional, but it provides full consistency and typed cookie access to the application.