svelte-kv Svelte Themes

Svelte Kv

Ease SvelteKit & Cloudflare KV workflow, where you may call Cloudflare's API during local development and utilize the platform object when deployed

๐Ÿ•‰ @feelinglovelynow/svelte-kv

๐Ÿ’Ž Install

pnpm add @feelinglovelynow/svelte-kv

๐Ÿ™ Description

  • From SvelteKit documentation: platform.env is only available in the final build and not in dev mode
  • This package brings ease to SvelteKit & Cloudflare KV development allowing you to call Cloudflare's API during local development and utilize the platform object when deployed

๐Ÿ’š Add svelteKVOptions to your code base

import { PUBLIC_ENVIRONMENT } from '$env/static/public'
import { enumSvelteKVPoint } from '@feelinglovelynow/svelte-kv'
import { CLOUDFLARE_KV_API_TOKEN, CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_KV_NAMESPACE_ID } from '$env/static/private'

export default {
  doJSONParse: true, // on .get() would you love a JSON.parse() to happen
  doJSONStringify: true, // on .put() would you love a JSON.stringify() to happen
  accountId: CLOUDFLARE_ACCOUNT_ID, // Found @ Cloudflare Dashboard > Workers & Pages > Overview
  apiToken: CLOUDFLARE_KV_API_TOKEN, // Found @ Cloudflare Dashboard > Workers & Pages > Manage API Tokens
  namespace: 'CACHE', // Found @ Cloudflare Dashboard > Workers & Pages > KV
  namespaceId: CLOUDFLARE_KV_NAMESPACE_ID, // Found @ Cloudflare Dashboard > Workers & Pages > KV > Click namespace
  point: PUBLIC_ENVIRONMENT === 'local' ? enumSvelteKVPoint.api : enumSvelteKVPoint.platform, // Would you love .get() and .put() to use api or platform - PUBLIC_ENVIRONMENT is defined via @feelinglovelynow/env-write
}

๐Ÿ’› Put Example

import type { RequestHandler } from './$types'
import { serverCatch } from '$lib/global/catch'
import { SvelteKV } from '@feelinglovelynow/svelte-kv'
import svelteKVOptions from '$lib/global/svelteKVOptions'


export const GET = (async ({ locals, platform }) => {
  try {
    const svelteKV = new SvelteKV({ ...svelteKVOptions, platform })
    await svelteKV.put('key', [ 'value', 'hello', 'world' ])
  } catch (e) {
    return serverCatch(e) // from @feelinglovelynow/svelte-catch
  }
}) satisfies RequestHandler

๐Ÿงก Get Example

import type { LayoutServerLoad } from './$types'
import { pageServerCatch } from '$lib/global/catch'
import { SvelteKV } from '@feelinglovelynow/svelte-kv'
import svelteKVOptions from '$lib/global/svelteKVOptions'


export const load = (async ({ platform }) => {
  try {
    const svelteKV = new SvelteKV({ ...svelteKVOptions, platform })

    const [ sources, products ] = await Promise.all([
      svelteKV.get('sources'),
      svelteKV.get('products')
    ])
  } catch (e) {
    return pageServerCatch(e) // from @feelinglovelynow/svelte-catch
  }
}) satisfies LayoutServerLoad

๐ŸŽ All Our Packages

  1. @feelinglovelynow/datetime-local: NPM โ‹… Github
  2. @feelinglovelynow/dgraph: NPM โ‹… Github
  3. @feelinglovelynow/env-write: NPM โ‹… Github
  4. @feelinglovelynow/get-form-entries: NPM โ‹… Github
  5. @feelinglovelynow/get-relative-time: NPM โ‹… Github
  6. @feelinglovelynow/global-style: NPM โ‹… Github
  7. @feelinglovelynow/jwt: NPM โ‹… Github
  8. @feelinglovelynow/loop-backwards: NPM โ‹… Github
  9. @feelinglovelynow/slug: NPM โ‹… Github
  10. @feelinglovelynow/svelte-catch: NPM โ‹… Github
  11. @feelinglovelynow/svelte-kv: NPM โ‹… Github
  12. @feelinglovelynow/svelte-loading-anchor: NPM โ‹… Github
  13. @feelinglovelynow/svelte-modal: NPM โ‹… Github
  14. @feelinglovelynow/svelte-turnstile: NPM โ‹… Github
  15. @feelinglovelynow/toast: NPM โ‹… Github

Top categories

Loading Svelte Themes