@vercel/flags/sveltekit Reference
The reference for the @vercel/flags/sveltekit submoduleThe @vercel/flags/sveltekit submodule implements the Feature Flags pattern for SvelteKit.
To learn more about the Flags pattern:
Flags Architectural Patterns
Architectural patterns for working with feature flags
Using Flags in SvelteKit
Learn how to set up and use the @vercel/flags/sveltekit submodule for SvelteKit.
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.
| Parameter | Type | Description |
|---|---|---|
key | string | Key of the feature flag. |
decide | function | Resolves the value of the feature flag. |
description (Optional) | string | Description of the feature flag. |
origin (Optional) | string | The 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. |
The key, description, origin, and options appear in Vercel Toolbar.
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' },
],
});Description: Turns flags declared using flag into Vercel Toolbar compatible definitions.
| Parameter | Type | Description |
|---|---|---|
flags | Record<string, Flag> | A record where the values are feature flags. The keys are not used. |
Description: A handle hook that establishes context for flags, so they have access to the event object.
| Parameter | Type | Description |
|---|---|---|
options | { secret: string, flags?: Record<string, Flag> } | The FLAGS_SECRET environment variable and a record of all the flags |
import { createHandle } from '@vercel/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.
Was this helpful?