Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/vue/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist
node_modules
30 changes: 30 additions & 0 deletions packages/vue/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# @tryabby/vue

Vue 3 SDK for Abby. Consumes `@tryabby/core`.

## Acceptance (GitHub issue #68)

- Package lives in `packages/vue`
- Package name is `@tryabby/vue`
- Consumes `@tryabby/core`
- TypeScript, same type quality as the React SDK
- `useAbby` → current variant + `onAct`
- `useFeatureFlag` → flag value
- `useRemoteConfig` → remote config value
- Tests for types and code

## Usage

```ts
import { createAbby } from "@tryabby/vue";

export const { useAbby, useFeatureFlag, useRemoteConfig, AbbyProvider, install } =
createAbby({
projectId: "…",
environments: ["production"],
currentEnvironment: "production",
tests: { homepage: { variants: ["A", "B"] } },
flags: ["newCheckout"],
remoteConfig: { heroCopy: "String" },
});
```
46 changes: 46 additions & 0 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"name": "@tryabby/vue",
"version": "1.0.0",
"description": "Vue 3 SDK for Abby feature flags, remote config and A/B tests",
"main": "dist/index.js",
"files": ["dist"],
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"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"
},
"homepage": "https://docs.tryabby.com",
"keywords": ["vue", "feature-flags", "ab-testing", "abby"],
"author": "",
"license": "ISC",
"peerDependencies": {
"vue": "^3.3.0"
},
"dependencies": {
"@tryabby/core": "workspace:*",
"js-cookie": "^3.0.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@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.38"
}
}
74 changes: 74 additions & 0 deletions packages/vue/src/StorageService.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import {
type IStorageService,
type StorageServiceOptions,
getABStorageKey,
getFFStorageKey,
getRCStorageKey,
} from "@tryabby/core";
import Cookie from "js-cookie";

const DEFAULT_COOKIE_AGE = 365;

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
: DEFAULT_COOKIE_AGE,
});
}

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, {
expires: DEFAULT_COOKIE_AGE,
});
}

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, {
expires: DEFAULT_COOKIE_AGE,
});
}

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();
Loading