svelte-baked-cookie - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

package.json

 {
   "name": "svelte-baked-cookie",
   "description": "🍪 Universal accessible hard-baked cookies for SvelteKit",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "dist/index.js",
@@ -17,7 +17,3 @@ "type": "module",
   "files": [
-    "dist",
-    "!**/*.test.*",
-    "!**/*.spec.*",
-    "!*.test.*",
-    "!*.spec.*"
+    "dist"
   ],
@@ -37,3 +33,3 @@ "exports": {
     "url": "https://github.com/jill64/svelte-baked-cookie.git",
-    "image": "https://opengraph.githubassets.com/90d742ffc4220b7de94ffa4e7788782012bed39f30a64dc16766dee84d6db9d4/jill64/svelte-baked-cookie"
+    "image": "https://opengraph.githubassets.com/747be53581f52c4f976313aec941e9100f4a5e7c9e2600c9e99e7b1c533c53ac/jill64/svelte-baked-cookie"
   },
@@ -50,4 +46,4 @@ "publishConfig": {
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
+    "dev": "npm run package && vite dev",
+    "build": "npm run package && vite build",
     "preview": "npm run build && vite preview",
@@ -57,3 +53,3 @@ "prepack": "npm run build",
     "check": "svelte-kit sync && npx svelte-check",
-    "lint": "npm run check && npx eslint .",
+    "lint": "npm run package && npm run check && npx eslint .",
     "format": "npx @jill64/psx",
@@ -68,17 +64,17 @@ "test": "playwright test"
     "@jill64/eslint-config-svelte": "1.0.3",
+    "@jill64/npm-demo-layout": "0.5.3",
     "@jill64/playwright-config": "2.2.0",
     "@jill64/prettier-config": "1.0.0",
     "@jill64/sentry-sveltekit-cloudflare": "1.6.1",
-    "@jill64/svelte-dark-theme": "2.2.15",
-    "@jill64/svelte-tailwind": "1.0.0",
+    "@jill64/svelte-input": "1.6.1",
+    "@jill64/svelte-tailwind": "1.0.1",
+    "@jill64/universal-sanitizer": "1.0.0",
     "@playwright/test": "1.40.1",
     "@sveltejs/adapter-cloudflare": "3.0.0",
-    "svelte-highlight-switcher": "1.1.0",
     "@sveltejs/kit": "2.0.0",
+    "@sveltejs/vite-plugin-svelte": "3.0.1",
     "svelte": "4.2.8",
-    "svelte-highlight": "7.4.2",
     "typescript": "5.3.3",
     "vite": "5.0.9",
-    "vitest": "1.0.4",
-    "@sveltejs/vite-plugin-svelte": "3.0.1"
+    "vitest": "1.0.4"
   },
@@ -85,0 +81,0 @@ "dependencies": {

README.md

@@ -5,6 +5,133 @@ <!----- BEGIN GHOST DOCS HEADER ----->
 
-<!----- 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><!----- END GHOST DOCS BADGES ----->
+<!----- 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`.
+
+```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.get()
+
+  // number
+  const num = bakedCookies.key2.set()
+
+  // string[]
+  bakedCookies.key3.set(['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: 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>
+```
+
+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'
+
+  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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9983

increased by39%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

137

increased by1270%

No dependency changes