SvelteKit

npm install @avsbhq/svelte @avsbhq/node

# .envPUBLIC_AVSB_SDK_KEY=sdk_production_ttqm0eaj4vth1krcb2xn

// src/hooks.server.tsimport { AvsbServer } from '@avsbhq/node'import { withAvsbHooks } from '@avsbhq/svelte/sveltekit'import { PUBLIC_AVSB_SDK_KEY } from '$env/static/public'import type { Handle } from '@sveltejs/kit'const avsb = new AvsbServer({ sdkKey: PUBLIC_AVSB_SDK_KEY })export const handle: Handle = withAvsbHooks(  ({ event, resolve }) => resolve(event),  {    serverClient: avsb,    resolveContext: (event) => ({      kind: 'user',      key: event.cookies.get('uid') ?? 'anonymous',    }),  })

import { sequence } from '@sveltejs/kit/hooks'import { authHandle, contextFor } from './hooks/auth'export const handle: Handle = sequence(  authHandle,  withAvsbHooks(({ event, resolve }) => resolve(event), {    serverClient: avsb,    resolveContext: (event) => contextFor(event.locals.user),  }))

import type { WithAvsbHooksOptions } from '@avsbhq/svelte/sveltekit'const resolveContext: WithAvsbHooksOptions['resolveContext'] = (event) =>  event.url.pathname.startsWith('/healthz')    ? null    : { kind: 'user', key: event.cookies.get('uid') ?? 'anonymous' }

// src/app.d.tsdeclare global {  namespace App {    interface Locals {      // Your own auth hook's locals. Shown here because the sequence()      // example above reads `event.locals.user`.      user?: { id: string; plan?: string }      // Optional: withAvsbHooks sets no locals on a request whose      // resolveContext returned null. Make it required only if yours never does.      avsb?: import('@avsbhq/svelte/sveltekit').AvsbLocals    }  }}export {}

// src/routes/+layout.server.tsimport type { RequestEvent } from '@avsbhq/svelte/sveltekit'import type { LayoutServerLoad } from './$types'export const load: LayoutServerLoad = ({ locals, cookies }: RequestEvent) => ({  // The datafile: this is what <AvsbProvider bootstrap={...}> takes.  avsbBootstrap: locals.avsb?.bootstrap ?? null,  // The same visitor resolveContext used, so the provider buckets identically.  userId: cookies.get('uid') ?? 'anonymous',  // Server-evaluated values, if you want the markup decided on the server.  newCheckout:    locals.avsb?.client.getBoolFlag('new_checkout_flow', false).value ?? false,})

// src/routes/pricing/+page.server.tsimport type { PageServerLoad } from './$types'export const load: PageServerLoad = ({ locals }: RequestEvent) => {  const plans = locals.avsb?.client.getJsonFlag<string[]>('pricing-plans', [    'starter',    'pro',  ]).value  return { plans: plans ?? ['starter', 'pro'] }}

// src/routes/api/quote/+server.tsimport { json } from '@sveltejs/kit'import type { RequestHandler } from './$types'export const GET: RequestHandler = ({ locals }: RequestEvent) => {  const discount = locals.avsb?.client.getNumberFlag('quote_discount', 0).value ?? 0  return json({ discount })}

// src/routes/+layout.server.ts (the same load as above, exposure deferred)import { DecideOption } from '@avsbhq/node'import type { LayoutServerLoad } from './$types'export const load: LayoutServerLoad = ({ locals }: RequestEvent) => ({  // Read now, count later.  newCheckout:    locals.avsb?.client.getBoolFlag('new_checkout_flow', false, {      decideOptions: [DecideOption.DISABLE_EXPOSURE],    }).value ?? false,})

// src/routes/checkout/+page.server.tsexport const load: PageServerLoad = ({ locals }: RequestEvent) => {  locals.avsb?.client.manualExposure('new_checkout_flow')  return {}}

<script lang="ts">  import { getExposure } from '@avsbhq/svelte'  import { onMount } from 'svelte'  const expose = getExposure()  onMount(() => expose('new_checkout_flow'))</script>

<!-- src/routes/+layout.svelte --><script lang="ts">  import AvsbProvider from '@avsbhq/svelte/AvsbProvider.svelte'  import { PUBLIC_AVSB_SDK_KEY } from '$env/static/public'  let { data, children } = $props()</script><AvsbProvider  sdkKey={PUBLIC_AVSB_SDK_KEY}  context={{ kind: 'user', key: data.userId }}  bootstrap={data.avsbBootstrap}>  {@render children()}</AvsbProvider>

<!-- src/lib/CheckoutButton.svelte --><script lang="ts">  import { boolFlag, getTrack, getExposure } from '@avsbhq/svelte'  import { onMount } from 'svelte'  const checkout = boolFlag('new_checkout_flow', false)  const track = getTrack()  const expose = getExposure()  onMount(() => expose('new_checkout_flow'))</script><button onclick={() => track('checkout_started', { value: 99 })}>  {$checkout.value ? 'Start checkout (new)' : 'Buy now'}</button>

<script lang="ts">  import { boolFlagState } from '@avsbhq/svelte/runes'  const checkout = boolFlagState('new_checkout_flow', false)</script>{#if checkout.current.isEnabled()}  <NewCheckout />{/if}

<!-- AvsbProvider.svelte, the part that matters here -->const { cleanup } = createAvsbContext(options)onDestroy(cleanup)

// Everything @avsbhq/svelte/sveltekit exports.import type { Handle, RequestEvent } from '@avsbhq/svelte/sveltekit'import type {  DecideOption,  DecisionLog,  EvalContext,  Flag,  FlagDatafile,} from '@avsbhq/core'function withAvsbHooks(handle: Handle, options: WithAvsbHooksOptions): Handlefunction getAvsbBootstrap(serverClient: AvsbServerClient): FlagDatafile | nullfunction bindAvsbClient(  serverClient: AvsbServerClient,  context: EvalContext): AvsbBoundClientinterface WithAvsbHooksOptions {  /** Your AvsbServer instance from @avsbhq/node. */  serverClient: AvsbServerClient  /** Return null to skip A vs B for this request; no locals are set. */  resolveContext: (event: RequestEvent) => EvalContext | null}interface AvsbLocals {  /** The context this request was evaluated for. */  evalContext: EvalContext  /** Flag reads bound to that context. */  client: AvsbBoundClient  /** The datafile, or null when the server client has not loaded one yet. */  bootstrap: FlagDatafile | null}interface AvsbServerClient {  forUser(context: EvalContext): AvsbBoundClient  getDatafile(): FlagDatafile | null}interface AvsbBoundClient {  getFlag<T>(flagKey: string, defaultValue: T, options?: AvsbBoundReadOptions): Flag<T>  getBoolFlag(flagKey: string, defaultValue: boolean, options?: AvsbBoundReadOptions): Flag<boolean>  getStringFlag(flagKey: string, defaultValue: string, options?: AvsbBoundReadOptions): Flag<string>  getNumberFlag(flagKey: string, defaultValue: number, options?: AvsbBoundReadOptions): Flag<number>  getJsonFlag<T>(flagKey: string, defaultValue: T, options?: AvsbBoundReadOptions): Flag<T>  getAllFlags(options?: AvsbBoundAllFlagsOptions): Record<string, Flag>  /** Record that the visitor was shown this decision. */  manualExposure(flagKey: string): void  getContext(): EvalContext}interface AvsbBoundReadOptions {  /** Per-call decide options, e.g. [DecideOption.DISABLE_EXPOSURE]. */  decideOptions?: DecideOption[]  /** Append this evaluation to a decision log. */  decisionLog?: DecisionLog}interface AvsbBoundAllFlagsOptions extends AvsbBoundReadOptions {  /** Record an exposure for every flag evaluated. Default false. */  fireExposures?: boolean}// `Handle` and `RequestEvent` are SvelteKit's own types, re-exported here.