svelte-baked-cookie

svelte-baked-cookie

🍪 Universal accessible hard-baked cookies for SvelteKit

Demo

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

Installation

npm i svelte-baked-cookie

Usage

1. Use the bakery function to define the cookie type and get bake and rebake.

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

1. In the server, you can get a typed accessor by passing a cookies object obtained from load, etc. to the bake 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 {
    // ...
  }
}

1. On the client, the rebake function can be used directly to obtain a writable 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>

1. (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 .

// +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.