feat(flags): add framework integration for nuxt

.github/workflows/playwright.yml

@@ -11,7 +11,7 @@ on:
     branches: ["*"]
 jobs:
   test:
-    timeout-minutes: 5
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

package.json

@@ -49,7 +49,8 @@
     "publint": "0.3.14",
     "turbo": "2.3.3",
     "typescript": "^5.3.3",
-    "typescript-eslint": "8.46.1"
+    "typescript-eslint": "8.46.1",
+    "unstorage": "1.17.2"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/flags/.attw.json

@@ -0,0 +1,3 @@
+{
+  "excludeEntrypoints": ["flags/nuxt", "flags/nuxt/runtime"]
+}

packages/flags/README.md

@@ -2,9 +2,9 @@
 
 # Flags SDK
 
-The feature flags toolkit for Next.js and SvelteKit.
+The feature flags toolkit for Next.js, Nuxt, and SvelteKit.
 
-From the creators of Next.js, the Flags SDK is a free open-source library that gives you the tools you need to use feature flags in Next.js and SvelteKit applications.
+From the creators of Next.js, the Flags SDK is a free open-source library that gives you the tools you need to use feature flags in Next.js, Nuxt, and SvelteKit applications.
 
 - Works with any flag provider, custom setups or no flag provider at all
 - Compatible with App Router, Pages Router, and Edge Middleware

packages/flags/package.json

@@ -1,11 +1,13 @@
 {
   "name": "flags",
   "version": "4.0.2",
-  "description": "Flags SDK by Vercel - The feature flags toolkit for Next.js and SvelteKit",
+  "description": "Flags SDK by Vercel - The feature flags toolkit for Next.js, Nuxt and SvelteKit",
   "keywords": [
     "feature flags",
     "Next.js",
+    "Nuxt",
     "react",
+    "vue",
     "toolbar",
     "overrides",
     "SvelteKit"
@@ -30,6 +32,8 @@
       "import": "./dist/next.js",
       "require": "./dist/next.cjs"
     },
+    "./nuxt": "./dist/nuxt.js",
+    "./nuxt/runtime": "./dist/nuxt/runtime/index.js",
     "./analytics": {
       "import": "./dist/analytics.js",
       "require": "./dist/analytics.cjs"
@@ -54,6 +58,12 @@
         "dist/next.d.ts",
         "dist/next.d.cts"
       ],
+      "nuxt": [
+        "dist/nuxt.d.ts"
+      ],
+      "nuxt/runtime": [
+        "dist/nuxt/runtime.d.ts"
+      ],
       "react": [
         "dist/react.d.ts",
         "dist/react.d.cts"
@@ -79,25 +89,31 @@
   },
   "dependencies": {
     "@edge-runtime/cookies": "^5.0.2",
-    "jose": "^5.2.1"
+    "exsolve": "^1.0.8",
+    "jose": "^5.2.1",
+    "std-env": "^3.10.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.17.3",
+    "@nuxt/test-utils": "3.20.1",
     "@types/node": "20.11.17",
     "@types/react": "18.2.55",
     "@vitejs/plugin-react": "4.2.1",
+    "h3": "1.15.4",
     "msw": "2.6.4",
     "next": "15.1.4",
+    "nuxt": "4.2.1",
     "react": "canary",
     "tsup": "8.0.1",
     "typescript": "5.6.3",
-    "vite": "5.1.1",
+    "vite": "7.2.2",
     "vitest": "1.4.0"
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.7.0",
     "@sveltejs/kit": "*",
     "next": "*",
+    "nuxt": ">=3.0.0",
     "react": "*",
     "react-dom": "*"
   },
@@ -111,6 +127,9 @@
     "next": {
       "optional": true
     },
+    "nuxt": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

packages/flags/src/lib/serialization.ts

@@ -50,14 +50,14 @@ function splitUint8Array(
 /**
  * Common subset of the flag type used in here
  */
-type Flag = {
+export type CommonFlag<T = any> = {
   key: string;
-  options?: FlagOption<any>[];
+  options?: FlagOption<T>[];
 };
 
 export async function deserialize(
   code: string,
-  flags: readonly Flag[],
+  flags: readonly CommonFlag[],
   secret: string,
 ): Promise<Record<string, JsonValue>> {
   // TODO what happens when verification fails?
@@ -151,8 +151,8 @@ function joinUint8Arrays(array1: Uint8Array, array2: Uint8Array): Uint8Array {
   return combined;
 }
 export async function serialize(
-  flagSet: Record<Flag['key'], JsonValue>,
-  flags: readonly Flag[],
+  flagSet: Record<CommonFlag['key'], JsonValue>,
+  flags: readonly CommonFlag[],
   secret: string,
 ) {
   const unlistedValues: JsonValue[] = [];

packages/flags/src/next/precompute.ts

@@ -1,5 +1,6 @@
 import type { JsonValue } from '..';
 import * as s from '../lib/serialization';
+import { cartesianIterator, combineFlags } from '../shared';
 import type { Flag } from './types';
 
 type FlagsArray = readonly Flag<any, any>[];
@@ -40,7 +41,7 @@ export async function precompute<T extends FlagsArray>(
  * @returns - A record where the keys are flag keys and the values are flag values.
  */
 export function combine(flags: FlagsArray, values: ValuesArray) {
-  return Object.fromEntries(flags.map((flag, i) => [flag.key, values[i]]));
+  return combineFlags(flags, values);
 }
 
 /**
@@ -150,12 +151,6 @@ export async function getPrecomputed<T extends JsonValue>(
   }
 }
 
-// see https://stackoverflow.com/a/44344803
-function* cartesianIterator<T>(items: T[][]): Generator<T[]> {
-  const remainder = items.length > 1 ? cartesianIterator(items.slice(1)) : [[]];
-  for (const r of remainder) for (const h of items.at(0)!) yield [h, ...r];
-}
-
 /**
  * Generates all permutations given a list of feature flags based on the options declared on each flag.
  * @param flags - The list of feature flags

packages/flags/src/nuxt/implementation.d.ts

@@ -0,0 +1,20 @@
+declare module '#flags-implementation' {
+  import type { H3Event } from 'h3';
+  import type { Identify, JsonValue } from 'flags';
+
+  export function getState<ValueType>(
+    key: string,
+    event?: H3Event,
+  ): { value: ValueType };
+  export function getStore<T>(event?: H3Event): T;
+
+  export function getEvent(): H3Event | undefined;
+
+  export interface FlagStore {
+    event: H3Event;
+    secret: string;
+    params: Record<string, string | string[]>;
+    usedFlags: Record<string, Promise<JsonValue>>;
+    identifiers: Map<Identify<unknown>, ReturnType<Identify<unknown>>>;
+  }
+}