mirror of
https://github.com/vercel/flags.git
synced 2026-09-19 03:49:23 +08:00
christopherkindl
44ba55f7ce
* Precompute install-audience flag for the hero switcher The home hero's "For humans / For agents" tab was tracked in React state, so every reload snapped back to the default tab and broke the "page is static without layout shift" promise. Model it as a precomputed flag like the other hero flags: - Add `installAudienceFlag` (`'humans' | 'agents'`, cookie key `install-audience`, default `'agents'`) and include it in `rootFlags` so `generatePermutations` covers both variants - Read the flag on the server and publish it via `FlagValues` - New `InstallCommand` client wrapper renders `CommandPromptRoot` with the server value and, on click, writes the cookie + calls `router.refresh()` (optimistic override pattern mirroring `FlagToggle`) Result: the proxy's `precompute(rootFlags)` reads the cookie, rewrites to the matching `[code]`, and SSR renders the correct tab from the start — reloads stay on the user's choice with no client-only state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Update layout.tsx --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { flag } from 'flags/next';
|
|
|
|
export const enableBannerFlag = flag({
|
|
key: 'enable-banner-flag',
|
|
description: 'Full-width callout at the top',
|
|
options: [false, true],
|
|
decide({ cookies }) {
|
|
const on = cookies.get(this.key)?.value;
|
|
return on !== undefined;
|
|
},
|
|
});
|
|
|
|
export const enableDitheredHeroFlag = flag({
|
|
key: 'enable-dithered-hero-flag',
|
|
description: 'Keep it dithered',
|
|
options: [false, true],
|
|
decide({ cookies }) {
|
|
const on = cookies.get(this.key)?.value;
|
|
return on !== undefined;
|
|
},
|
|
});
|
|
|
|
export const enableHeroTextFlag = flag<string>({
|
|
key: 'swap-hero-text',
|
|
description: 'Toggle between headline options for A/B testing',
|
|
options: [
|
|
'The feature flags toolkit',
|
|
'Ship faster with feature flags',
|
|
'Flag features, ship apps faster',
|
|
],
|
|
decide({ cookies }) {
|
|
const cookieValue = cookies.get(this.key)?.value;
|
|
return cookieValue && this.options?.includes(cookieValue)
|
|
? cookieValue
|
|
: (this.options![0] as string);
|
|
},
|
|
});
|
|
|
|
export const installAudienceFlag = flag<'humans' | 'agents'>({
|
|
key: 'install-audience',
|
|
description: 'Default tab of the hero install-command switcher',
|
|
options: ['humans', 'agents'],
|
|
decide({ cookies }) {
|
|
const cookieValue = cookies.get(this.key)?.value;
|
|
return cookieValue === 'humans' || cookieValue === 'agents'
|
|
? cookieValue
|
|
: 'agents';
|
|
},
|
|
});
|
|
|
|
export const rootFlags = [
|
|
enableBannerFlag,
|
|
enableHeroTextFlag,
|
|
enableDitheredHeroFlag,
|
|
installAudienceFlag,
|
|
] as const;
|