# svelte-baked-cookie

> 🍪 Universal accessible hard-baked cookies for SvelteKit

Latest version **2.0.4** (published 2025-05-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install svelte-baked-cookie
pnpm add svelte-baked-cookie
yarn add svelte-baked-cookie
bun add svelte-baked-cookie
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2025-05-19 |
| First published | 2023-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jill64 |
| Maintainers | jill64 |
| Keywords | cookie, isomophism, library, sveltekit, type-safe |

## Links

- npm: https://www.npmjs.com/package/svelte-baked-cookie
- Repository: https://github.com/jill64/svelte-baked-cookie
- Homepage: https://github.com/jill64/svelte-baked-cookie#readme
- Issues: https://github.com/jill64/svelte-baked-cookie/issues
- npm.io page: https://npm.io/package/svelte-baked-cookie

## Dependencies (4)

- [cookie](https://npm.io/package/cookie.md) 1.0.2
- [ts-serde](https://npm.io/package/ts-serde.md) 1.0.9
- [@types/cookie](https://npm.io/package/@types/cookie.md) 1.0.0
- [@jill64/transform](https://npm.io/package/@jill64/transform.md) 1.0.5

## Recent versions

- 2.0.4 (latest) — 2025-05-19
- 2.0.3 — 2025-03-14
- 2.0.2 — 2025-01-21
- 2.0.1 — 2024-12-30
- 2.0.0 — 2024-12-30
- 1.1.4 — 2024-12-30
- 1.1.3 — 2024-12-30
- 1.1.2 — 2024-12-26
- 1.1.1 — 2024-12-10
- 1.1.0 — 2024-12-07
- 1.0.39 — 2024-11-25
- 1.0.38 — 2024-11-18
- 1.0.37 — 2024-10-07
- 1.0.36 — 2024-10-06
- 1.0.35 — 2024-10-06
- … 41 more at https://npm.io/package/svelte-baked-cookie/versions

## README

<!----- BEGIN GHOST DOCS HEADER ----->

# svelte-baked-cookie

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/svelte-baked-cookie"><img src="https://img.shields.io/npm/v/svelte-baked-cookie" alt="npm-version" /></a> <a href="https://npmjs.com/package/svelte-baked-cookie"><img src="https://img.shields.io/npm/l/svelte-baked-cookie" alt="npm-license" /></a> <a href="https://npmjs.com/package/svelte-baked-cookie"><img src="https://img.shields.io/npm/dm/svelte-baked-cookie" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/svelte-baked-cookie"><img src="https://img.shields.io/bundlephobia/min/svelte-baked-cookie" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-baked-cookie/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-baked-cookie/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-baked-cookie.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-baked-cookie.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🍪 Universal accessible hard-baked cookies for SvelteKit

## [Demo](https://svelte-baked-cookie.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

From a single schema, type-defined cookies can be accessed in any environment.

## Installation

```bash
npm i svelte-baked-cookie
```

## Usage

1.  Use the `bakery` function to define the cookie type and get `bake` and `rebake`.
    See [ts-serde](https://github.com/jill64/ts-serde#readme) for more information on type guard

```ts
// 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)
  // }
)
```

2. In the server, you can get a typed accessor by passing a `cookies` object obtained from `load`, etc. to the `bake` function.

```ts
// +layout.server.js
import { bake } from './bakery.js'

export const load = ({ cookies }) => {
  const { bakedCookies } = bake(cookies)

  // string
  const str = bakedCookies.key1

  // number
  const num = bakedCookies.key2

  // string[]
  bakedCookies.key3 = ['value', 'set', 'by', 'server']

  return {
    // ...
  }
}
```

3. On the client, the `rebake` function can be used directly to obtain a `writable` svelte-store of typed cookies.

```svelte
<!-- +page.svelte -->
<script>
  import { rebake } from './bakery.js'

  const cookies = rebake()

  // key1: string
  // key2: number
  // key3: string[]

  // string
  console.log(cookies.key1)

  // string
  cookies.key2 = 123

  // string[]
  cookies.key3 = ['value', 'set', 'by', 'client']
</script>
```

4. (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 cookie `pie` from +layout.server.js, etc. and make it the `dough` of `rebake` .

```ts
// +layout.server.ts
import { bake } from './bakery.js'

export const load = ({ cookies }) => {
  const { bakedCookies, pie } = bake(cookies)

  // ...

  return {
    pie
  }
}
```

```svelte
<!-- +layout.svelte -->
<script>
  import { rebake } from './bakery.js'

  let { data } = $props()

  let pie = $derived(data.pie)

  // key1: string
  // key2: number
  // key3: string[]
  let cookies = $derived(rebake(pie))
</script>
```

This is optional, but it provides full consistency and typed cookie access to the application.

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->

---
_Source: https://npm.io/package/svelte-baked-cookie · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._