svelte-baked-cookie
TypeScript icon, indicating that this package has built-in type declarations

1.0.37 • Public • Published

svelte-baked-cookie

npm-version npm-license npm-download-month npm-min-size ci.yml website

🍪 Universal accessible hard-baked cookies for SvelteKit

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

License

MIT

Dependents (2)

Package Sidebar

Install

npm i svelte-baked-cookie

Weekly Downloads

26,869

Version

1.0.37

License

MIT

Unpacked Size

10.2 kB

Total Files

9

Last publish

Collaborators

  • jill64