feat: add @tryabby/vue integration (#68)

.changeset/tryabby-vue-integration.md

@@ -0,0 +1,5 @@
+---
+"@tryabby/vue": minor
+---
+
+Add `@tryabby/vue`, a Vue 3 & Nuxt integration for Abby. It ships fully-typed `useAbby`, `useFeatureFlag`, and `useRemoteConfig` composables, an `AbbyProvider` plugin for data loading/SSR, and non-reactive getters — with the same API surface and type quality as the React and Svelte packages.

packages/vue/.gitignore

@@ -0,0 +1 @@
+dist

packages/vue/README.md

@@ -0,0 +1,127 @@
+# @tryabby/vue
+
+The official [Abby](https://www.tryabby.com) integration for **Vue 3** and **Nuxt**.
+
+It gives you fully-typed composables for A/B tests, feature flags and remote config, with the same API surface and type quality as the React and Svelte packages.
+
+## Installation
+
+```bash
+npm install @tryabby/vue
+# or
+pnpm add @tryabby/vue
+```
+
+## Quick start
+
+Create your Abby instance once and export the composables from it:
+
+```ts
+// abby.ts
+import { createAbby } from "@tryabby/vue";
+
+export const {
+  useAbby,
+  useFeatureFlag,
+  useRemoteConfig,
+  AbbyProvider,
+  getFeatureFlagValue,
+  getRemoteConfig,
+  getABTestValue,
+} = createAbby({
+  projectId: "<YOUR_PROJECT_ID>",
+  currentEnvironment: import.meta.env.MODE,
+  environments: ["development", "production"],
+  tests: {
+    "footer-test": { variants: ["old", "new"] },
+  },
+  flags: ["new-dashboard"],
+  remoteConfig: { theme: "String" },
+});
+```
+
+Register the `AbbyProvider` plugin on your app. It loads your project data on
+the client (and accepts server-fetched `initialData` for SSR):
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import { AbbyProvider } from "./abby";
+
+createApp(App).use(AbbyProvider).mount("#app");
+```
+
+## Composables
+
+### `useAbby`
+
+Returns the reactive variant for a test and an `onAct` callback to report an
+interaction. The variant is a `ComputedRef`, so it works in templates directly.
+
+```vue
+<script setup lang="ts">
+import { useAbby } from "./abby";
+
+const { variant, onAct } = useAbby("footer-test");
+</script>
+
+<template>
+  <NewFooter v-if="variant === 'new'" @click="onAct" />
+  <OldFooter v-else @click="onAct" />
+</template>
+```
+
+You can also pass a lookup object to map each variant to a value:
+
+```ts
+const { variant } = useAbby("footer-test", { old: 0, new: 1 });
+// variant.value is 0 | 1
+```
+
+### `useFeatureFlag`
+
+```vue
+<script setup lang="ts">
+import { useFeatureFlag } from "./abby";
+
+const showDashboard = useFeatureFlag("new-dashboard"); // Ref<boolean>
+</script>
+```
+
+### `useRemoteConfig`
+
+```vue
+<script setup lang="ts">
+import { useRemoteConfig } from "./abby";
+
+const theme = useRemoteConfig("theme"); // Ref<string>
+</script>
+```
+
+## Non-reactive helpers
+
+For places outside of a component's reactive scope (route guards, plain
+modules, event handlers) the instance also exposes plain getters:
+
+- `getFeatureFlagValue(name)` – the current value of a feature flag
+- `getRemoteConfig(name)` – the current value of a remote config entry
+- `getABTestValue(name, lookup?)` – the currently selected variant of a test
+- `getVariants(name)` – all variants of a test
+- `getABResetFunction(name)` – resets the persisted variant of a test
+- `updateUserProperties(user)` – updates user properties for targeting
+
+## Nuxt / SSR
+
+To avoid hydration mismatches, `useAbby` renders an empty variant on the server
+and resolves the real variant on mount. When you fetch project data on the
+server, hand it to the provider so flags and remote config are available during
+the first render:
+
+```ts
+app.use(AbbyProvider, { initialData });
+```
+
+## License
+
+ISC

packages/vue/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tryabby/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 & Nuxt integration for Abby",
+  "main": "dist/index.js",
+  "files": ["dist"],
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "homepage": "https://docs.tryabby.com",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "dev": "pnpm run build --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": ["abby", "vue", "nuxt", "feature-flags", "ab-testing"],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^20.0.3",
+    "msw": "^0.49.1",
+    "node-fetch": "^3.3.0",
+    "tsconfig": "workspace:*",
+    "tsup": "^6.5.0",
+    "typescript": "5.5.4",
+    "vite": "5.4.0",
+    "vitest": "2.0.5",
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:*",
+    "js-cookie": "^3.0.5"
+  }
+}

packages/vue/src/StorageService.ts

@@ -0,0 +1,68 @@
+import {
+  type IStorageService,
+  type StorageServiceOptions,
+  getABStorageKey,
+  getFFStorageKey,
+  getRCStorageKey,
+} from "@tryabby/core";
+import Cookie from "js-cookie";
+
+class ABStorageService implements IStorageService {
+  get(projectId: string, testName: string): string | null {
+    const retrievedValue = Cookie.get(getABStorageKey(projectId, testName));
+    if (!retrievedValue) return null;
+
+    return retrievedValue;
+  }
+
+  set(
+    projectId: string,
+    testName: string,
+    value: string,
+    options?: StorageServiceOptions
+  ): void {
+    Cookie.set(getABStorageKey(projectId, testName), value, {
+      expires: options?.expiresInDays ? options.expiresInDays : 365,
+    });
+  }
+
+  remove(projectId: string, testName: string): void {
+    Cookie.remove(getABStorageKey(projectId, testName));
+  }
+}
+
+class FFStorageService implements IStorageService {
+  get(projectId: string, flagName: string): string | null {
+    const retrievedValue = Cookie.get(getFFStorageKey(projectId, flagName));
+    if (!retrievedValue) return null;
+
+    return retrievedValue;
+  }
+
+  set(projectId: string, flagName: string, value: string): void {
+    Cookie.set(getFFStorageKey(projectId, flagName), value);
+  }
+
+  remove(projectId: string, flagName: string): void {
+    Cookie.remove(getFFStorageKey(projectId, flagName));
+  }
+}
+
+class RCStorageService implements IStorageService {
+  get(projectId: string, key: string): string | null {
+    const retrievedValue = Cookie.get(getRCStorageKey(projectId, key));
+    return retrievedValue ?? null;
+  }
+
+  set(projectId: string, key: string, value: string): void {
+    Cookie.set(getRCStorageKey(projectId, key), value);
+  }
+
+  remove(projectId: string, key: string): void {
+    Cookie.remove(getRCStorageKey(projectId, key));
+  }
+}
+
+export const TestStorageService = new ABStorageService();
+export const FlagStorageService = new FFStorageService();
+export const RemoteConfigStorageService = new RCStorageService();