feat(variants): add support for feature variants with distribution #17

tylix · 2025-06-01T17:21:33Z

✅ PR Checklist

Please ensure the following before submitting your PR:

My commit message follows Conventional Commits
I’ve tested the changes and confirmed they work as expected
I’ve updated any relevant documentation
I’ve added tests (if applicable)

🔗 Linked Issue

No issue created

📖 Description

You can now create feature flags with multiple variants (for A/B/n testing).
Each user/session will get randomly (but persistently) assigned a variant, according to your configured distribution.
You can target UI/behavior to specific variants using both code (isEnabled('flag:variant')) and templates (v-feature="'flag:variant'").
The validation logic is improved and split for clarity: one validator checks flag naming and config, another checks for undeclared flags used in code.
Playground and docs updated to show off these features.

🚨 Breaking Changes

Yes
No

🧪 Type of Change

🧩 Additional Context

No additional context.

…dule

Copilot

Pull Request Overview

This PR adds support for feature variants by extending the feature flag mechanism. The key changes include:

Adding a new composable (useFeatureVariant) to retrieve and select feature flag variants.
Updating the vFeature directive to handle variant strings and control element visibility based on the selected variant.
Modifying scheduled flags filtering and integrating variant examples in the playground.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/runtime/directives/v-feature.ts	Refactored the directive to support an optional variant string in the flag value.
src/runtime/composables/useFeatureVariant.ts	Introduced a new composable to determine the appropriate variant based on distribution.
src/runtime/composables/useFeatureFlag.ts	Updated the isEnabled logic to account for scheduled flags with optional active dates.
playground/pages/scheduled.vue	Adjusted filtering logic for scheduled flags to include timing properties.
playground/pages/index.vue	Added UI examples for displaying and resetting feature variants.
playground/nuxt.config.ts	Added configuration for the new feature variant (checkoutUI) with distribution.

Comments suppressed due to low confidence (2)

src/runtime/composables/useFeatureFlag.ts:30

The conditional check bypasses time-based activation when either 'activeFrom' or 'activeUntil' is missing. Ensure this behavior is intended, and consider adding inline documentation to clarify the design rationale.

if (typeof flag === 'object' && flag.name === flagName && ((!flag?.activeFrom || !flag?.activeUntil) ? true : isFlagActiveNow(flag))) return true

src/runtime/composables/useFeatureVariant.ts:57

Ensure that the 'distribution' array provided in the configuration sums to 1; otherwise, the random variant selection may yield unexpected results. Consider normalizing the distribution values or adding a validation check.

for (let i = 0; i < variants.length; i++) {

… flag name checks

nicokempe

unrelated commit will be removed

nicokempe · 2025-06-02T09:49:24Z

src/runtime/composables/useFeatureVariant.ts

+  }
+
+  let selectedVariantIndex: number | null = null
+  const storedValue = localStorage.getItem(flagName)


@tylix localStorage works for client-side only, but it lacks SSR support and can’t be pre-evaluated on the server.

For more flexibility we could use:

useState() (https://nuxt.com/docs/getting-started/state-management) supports both SSR and client, scoped per session/render context.

useCookie() (https://nuxt.com/docs/api/composables/use-cookie) would be ideal if we want persistent variants tied to a user (e.g. across sessions).

Might be worth making this configurable via a persistence: 'state' | 'cookie' | 'local' setting in the Nuxt config.

This way, integrators can choose the storage strategy depending on their use case (e.g. temporary testing, logged-in users, or full A/B testing persistence).

… logic

… evaluation

…dule

…dation

…g variants

…r consistency in validation logic

nicokempe · 2025-08-27T21:50:51Z

@codex review

chatgpt-codex-connector

Codex Review: Here are some suggestions.

Reply with @codex fix comments to fix any unresolved comments.

About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you open a pull request for review, mark a draft as ready, or comment "@codex review". If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex fix this CI failure" or "@codex address that feedback".

chatgpt-codex-connector · 2025-08-27T21:54:27Z

src/runtime/composables/useFeatureVariant.ts

+  // 2. Retrieve flag configuration
+  const config: FeatureFlagsConfig = useRuntimeConfig().public.featureFlags
+  const env = config.environment
+  const flags: FeatureFlagInput[] = config.environments?.[env] || []
+
+  // Find the specific flag configuration
+  const flag = flags.find(


[P1] Variants never read from configured flag sets

The new useFeatureVariant composable is pulling declared flags from config.environments, but the rest of the codebase (and the updated type) now exposes them under flagSets. Because config.environments is undefined, the flags array is always empty and the subsequent search fails, so every call to isEnabled('feature:variant') will return false even when the flag is correctly configured. The code should reference config.flagSets[env] so that variants can be discovered.

Useful? React with 👍 / 👎.

nicokempe · 2025-08-28T11:56:47Z

Goal

@codex make code changes to this PR (based on an old codebase) so it works on the latest main and can be cleanly merged.

Steps

Rebase/Merge main into this branch.
Resolve conflicts:
- Use current main as baseline.
- Re-apply the PR’s changes on top.
- Adapt to renamed files, APIs, or types.
- Drop obsolete code.
Conform to standards:
- Lint & format.
- Pass tsc --noEmit with strict (no any).
- Centralize validation in ~/utils/validators.ts.
Fix/update tests
Update docs/PR description with notes on conflicts, API changes, and migration if needed.

Acceptance Criteria

✅ No merge conflicts.
✅ CI green (build, lint, tests, typing).
✅ No removed features without notes.
✅ Commits follow Conventional Commits.

Don’ts

❌ No @ts-ignore
❌ Never use the type "any"
❌ No unrelated refactors.

chatgpt-codex-connector · 2025-08-28T11:56:53Z

Goal

@codex make code changes to this PR (based on an old codebase) so it works on the latest main and can be cleanly merged.

Steps

Rebase/Merge main into this branch.

Resolve conflicts:

Use current main as baseline.

Re-apply the PR’s changes on top.

Adapt to renamed files, APIs, or types.

Drop obsolete code.

Conform to standards:

Lint & format.

Pass tsc --noEmit with strict (no any).

Centralize validation in ~/utils/validators.ts.

Fix/update tests

Update docs/PR description with notes on conflicts, API changes, and migration if needed.

Acceptance Criteria

✅ No merge conflicts.

✅ CI green (build, lint, tests, typing).

✅ No removed features without notes.

✅ Commits follow Conventional Commits.

Don’ts

❌ No @ts-ignore

❌ Never use the type "any"

❌ No unrelated refactors.

For now, I can only help with PRs you've created.

nicokempe · 2025-10-28T12:25:01Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2025-10-28T12:28:55Z

src/runtime/composables/useFeatureVariant.ts

+  // 2. Retrieve flag configuration
+  const config: FeatureFlagsConfig = useRuntimeConfig().public.featureFlags
+  const env = config.environment
+  const flags: FeatureFlagInput[] = config.environments?.[env] || []
+


Resolve variants from flagSets instead of environments

The new useFeatureVariant composable tries to load flags from config.environments, but the configuration object exposed at runtime uses the renamed flagSets key. As a result flags is always an empty array, flag becomes undefined, and every call to isEnabled('flag:variant') immediately warns that the flag has no variants and returns false, so variants never work. This should read from config.flagSets like the existing useFeatureFlag composable.

Useful? React with 👍 / 👎.

tylix added 4 commits May 29, 2025 03:21

refactor(v-feature): simplify feature flag directive using composable

03d345a

feat(v-feature): add support for feature variants with distribution

3599cca

fix(index): correct feature name in disabled message

c805e6e

Merge branch 'main' of https://github.com/tylix/nuxt-feature-flags-mo…

21a92bd

…dule

tylix requested a review from nicokempe as a code owner June 1, 2025 17:21

nicokempe requested a review from Copilot June 1, 2025 17:21

Copilot AI reviewed Jun 1, 2025

View reviewed changes

tylix added 3 commits June 1, 2025 19:23

style(playground): format code for improved readability

3ed283f

docs(readme): add A/B testing support for feature flags

944d9eb

feat(validation): add undeclared feature flags validation and improve…

a1ab8d3

… flag name checks

nicokempe requested changes Jun 2, 2025

View reviewed changes

nicokempe assigned tylix Jun 4, 2025

tylix force-pushed the main branch from c46c904 to a1ab8d3 Compare June 5, 2025 00:38

nicokempe requested changes Jun 5, 2025

View reviewed changes

tylix and others added 10 commits June 5, 2025 22:15

feat(variants): add persistence options and improve variant selection…

c64939f

… logic

feat(feature-flags): enhance variant handling in feature flag evaluation

d089bd0

Merge branch 'nicokempe:main' into main

3e28860

feat(useFeatureFlag): refine flag activation logic to improve variant…

9b99acb

… evaluation

Merge branch 'main' of https://github.com/tylix/nuxt-feature-flags-mo…

2076d6e

…dule

test(flagValidator): update tests to use undeclared feature flag vali…

3f05344

…dation

docs(useFeatureFlag): update documentation to include support for fla…

3232d35

…g variants

Merge branch 'main' into main

b69681c

refactor(undeclaredValidator): rename environments to flagSets fo…

72fdcd8

…r consistency in validation logic

fix(flagValidator): add missing newline at end of file

071d485

chatgpt-codex-connector bot reviewed Aug 27, 2025

View reviewed changes

Repository owner deleted a comment from chatgpt-codex-connector bot Aug 28, 2025

chatgpt-codex-connector bot reviewed Oct 28, 2025

View reviewed changes

Uh oh!

feat(variants): add support for feature variants with distribution #17

Are you sure you want to change the base?

feat(variants): add support for feature variants with distribution #17

Uh oh!

Conversation

tylix commented Jun 1, 2025 • edited by nicokempe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR Checklist

🔗 Linked Issue

📖 Description

🚨 Breaking Changes

🧪 Type of Change

🧩 Additional Context

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

nicokempe left a comment

Choose a reason for hiding this comment

Uh oh!

nicokempe Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

nicokempe commented Aug 27, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

nicokempe commented Aug 28, 2025

Goal

Steps

Acceptance Criteria

Don’ts

Uh oh!

chatgpt-codex-connector bot commented Aug 28, 2025

Goal

Steps

Acceptance Criteria

Don’ts

Uh oh!

nicokempe commented Oct 28, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tylix commented Jun 1, 2025 •

edited by nicokempe

Loading