GitHub

flags/sveltekit

APIs for working with feature flags in SvelteKit.

flag

Description: Declares a feature flag

A feature flag declared this way will automatically respect overrides set by Vercel Toolbar and integrate with Runtime Logs, Web Analytics, and more.

ParameterTypeDescription
keystringKey of the feature flag.
decidefunctionResolves the value of the feature flag.
description (Optional)stringDescription of the feature flag.
origin (Optional)stringThe URL where this feature flag can be managed.
options (Optional){ label?: string, value: any }[]Possible values a feature flag can resolve to, which are displayed in Vercel Toolbar.
identify (Optional)AdapterProvide an evaluation context which will be passed to decide.

The key, description, origin, and options appear in Vercel Toolbar.

flags.ts
import { flag } from 'flags/sveltekit';
 
export const showSummerSale = flag<boolean>({
  key: 'summer-sale',
  async decide() {
    return false;
  },
  origin: 'https://example.com/flags/summer-sale/',
  description: 'Show Summer Holiday Sale Banner, 20% off',
  options: [
    // options are not necessary for boolean flags, but we customize their labels here
    { value: false, label: 'Hide' },
    { value: true, label: 'Show' },
  ],
});

getProviderData

Description: Turns flags declared using flag into Vercel Toolbar compatible definitions.

ParameterTypeDescription
flagsRecord<string, Flag>A record where the values are feature flags. The keys are not used.

createHandle

Description: A handle hook that establishes context for flags, so they have access to the event object.

ParameterTypeDescription
options{ secret: string, flags?: Record<string, Flag> }The FLAGS_SECRET environment variable and a record of all the flags
src/hooks.server.ts
import { createHandle } from 'flags/sveltekit';
import { FLAGS_SECRET } from '$env/static/private';
import * as flags from '$lib/flags';
 
export const handle = createHandle({ secret: FLAGS_SECRET, flags });

Note that when composing createHandle with other handlers using SvelteKit's sequence utility then createHandle should come first. Only handlers after it will be able to access feature flags.

Precomputation

These APIs are relevant for precomputing feature flags. See the marketing pages guide to learn how to use it in SvelteKit.

precompute

Description: Evaluates multiple feature flags. Returns their values encoded to a single signed string.

ParameterTypeDescription
flagsfunction[]Flags
codestringPrecomputation code generated by the original precompute call.

Use this inside the API that is called from reroute, and when using ISR or prerendering, in Edge Middleware, too. Use it together with reroute/rewrite to pass a user-visible URL like /marketing to a static variant of the page, like /marketing/abc-123.

generatePermutations

Description: Calculates all precomputations of the options of the provided flags.

ParameterTypeDescription
flagsfunction[]Flags
filter (Optional)functionThis function is called with every possible precomputation of the flag's options. Return true to keep the option.
secret (Optional)stringThe secret used to sign the generated code. Defaults to $env/dynamic/private#env.FLAGS_SECRET

Use this when you're prerendering pages and therefore want to generate all combinations of flag values that a page needs at build time.

Example usage:

src/routes/[code]/+page.server.ts
import { generatePermutations } from 'flags/sveltekit';
 
export const prerender = true;
 
export async function entries() {
  const codes = await generatePermutations(precomputeFlags);
  return codes.map((code) => ({ code }));
}