fix: Vue Integration

packages/vue/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@tryabby/vue",
+  "version": "1.0.0",
+  "description": "Vue integration for Abby",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:*",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.1",
+    "@vitest/coverage-v8": "^0.34.0",
+    "@types/node": "^14.14.41",
+    "typescript": "^5.0.0",
+    "vitest": "^0.34.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  },
+  "keywords": [
+    "abby",
+    "vue",
+    "feature-flags",
+    "a/b-testing"
+  ],
+  "author": "",
+  "license": "MIT"
+}

packages/vue/src/__tests__/use-abby.spec.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useAbby } from "../use-abby";
+import * as core from "@tryabby/core";
+
+vi.mock("@tryabby/core");
+
+describe("useAbby", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with variant", () => {
+    const mockConfig = { tests: { test1: {} } };
+    const mockActFn = vi.fn();
+
+    vi.mocked(core.getVariant).mockReturnValue("control");
+    vi.mocked(core.getAct).mockReturnValue(mockActFn);
+
+    const result = useAbby(mockConfig as any, "test1");
+
+    expect(result.variant.value).toBe("control");
+    expect(result.onAct).toBeDefined();
+  });
+
+  it("should call act function with data", () => {
+    const mockConfig = { tests: { test1: {} } };
+    const mockActFn = vi.fn();
+
+    vi.mocked(core.getVariant).mockReturnValue("treatment");
+    vi.mocked(core.getAct).mockReturnValue(mockActFn);
+
+    const result = useAbby(mockConfig as any, "test1");
+    const data = { userId: "123" };
+
+    result.onAct(data);
+
+    expect(mockActFn).toHaveBeenCalledWith("test1", data);
+  });
+
+  it("should throw error when config is missing", () => {
+    expect(() => useAbby(null as any, "test1")).toThrow(
+      "Abby config is required"
+    );
+  });
+
+  it("should throw error when test name is missing", () => {
+    const mockConfig = { tests: {} };
+
+    expect(() => useAbby(mockConfig as any, "" as any)).toThrow(
+      "Test name is required"
+    );
+  });
+
+  it("should handle core errors gracefully", () => {
+    const mockConfig = { tests: { test1: {} } };
+
+    vi.mocked(core.getVariant).mockImplementation(() => {
+      throw new Error("Test not found");
+    });
+
+    expect(() => useAbby(mockConfig as any, "test1")).toThrow(
+      'Failed to initialize useAbby for test "test1"'
+    );
+  });
+
+  it("should warn when act function is not available", () => {
+    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const mockConfig = { tests: { test1: {} } };
+
+    vi.mocked(core.getVariant).mockReturnValue("control");
+    vi.mocked(core.getAct).mockReturnValue(undefined as any);
+
+    const result = useAbby(mockConfig as any, "test1");
+    result.onAct({});
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Act function not available in Abby config"
+    );
+
+    consoleWarnSpy.mockRestore();
+  });
+
+  it("should return readonly ref", () => {
+    const mockConfig = { tests: { test1: {} } };
+    const mockActFn = vi.fn();
+
+    vi.mocked(core.getVariant).mockReturnValue("control");
+    vi.mocked(core.getAct).mockReturnValue(mockActFn);
+
+    const result = useAbby(mockConfig as any, "test1");
+
+    expect(() => {
+      result.variant.value = "treatment" as any;
+    }).toThrow();
+  });
+});

packages/vue/src/__tests__/use-feature-flag.spec.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useFeatureFlag } from "../use-feature-flag";
+import * as core from "@tryabby/core";
+
+vi.mock("@tryabby/core");
+
+describe("useFeatureFlag", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with enabled state", () => {
+    const mockConfig = { featureFlags: { flag1: {} } };
+
+    vi.mocked(core.getFeatureFlag).mockReturnValue(true);
+
+    const result = useFeatureFlag(mockConfig as any, "flag1");
+
+    expect(result.isEnabled.value).toBe(true);
+  });
+
+  it("should initialize with disabled state", () => {
+    const mockConfig = { featureFlags: { flag1: {} } };
+
+    vi.mocked(core.getFeatureFlag).mockReturnValue(false);
+
+    const result = useFeatureFlag(mockConfig as any, "flag1");
+
+    expect(result.isEnabled.value).toBe(false);
+  });
+
+  it("should throw error when config is missing", () => {
+    expect(() => useFeatureFlag(null as any, "flag1")).toThrow(
+      "Abby config is required"
+    );
+  });
+
+  it("should throw error when flag name is missing", () => {
+    const mockConfig = { featureFlags: {} };
+
+    expect(() => useFeatureFlag(mockConfig as any, "" as any)).toThrow(
+      "Feature flag name is required"
+    );
+  });
+
+  it("should handle core errors gracefully", () => {
+    const mockConfig = { featureFlags: { flag1: {} } };
+
+    vi.mocked(core.getFeatureFlag).mockImplementation(() => {
+      throw new Error("Flag not found");
+    });
+
+    expect(() => useFeatureFlag(mockConfig as any, "flag1")).toThrow(
+      'Failed to initialize useFeatureFlag for flag "flag1"'
+    );
+  });
+
+  it("should return readonly ref", () => {
+    const mockConfig = { featureFlags: { flag1: {} } };
+
+    vi.mocked(core.getFeatureFlag).mockReturnValue(true);
+
+    const result = useFeatureFlag(mockConfig as any, "flag1");
+
+    expect(() => {
+      result.isEnabled.value = false as any;
+    }).toThrow();
+  });
+});

packages/vue/src/__tests__/use-remote-config.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useRemoteConfig } from "../use-remote-config";
+import * as core from "@tryabby/core";
+
+vi.mock("@tryabby/core");
+
+describe("useRemoteConfig", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with config value", () => {
+    const mockConfig = { remoteConfig: { key1: {} } };
+    const configValue = { setting: "value" };
+
+    vi.mocked(core.getRemoteConfig).mockReturnValue(configValue);
+
+    const result = useRemoteConfig(mockConfig as any, "key1");
+
+    expect(result.value.value).toEqual(configValue);
+  });
+
+  it("should handle string values", () => {
+    const mockConfig = { remoteConfig: { key1: {} } };
+
+    vi.mocked(core.getRemoteConfig).mockReturnValue("string-value");
+
+    const result = useRemoteConfig<string>(mockConfig as any, "key1");
+
+    expect(result.value.value).toBe("string-value

packages/vue/src/index.ts

@@ -0,0 +1,8 @@
+export { useAbby } from "./use-abby";
+export { useFeatureFlag } from "./use-feature-flag";
+export { useRemoteConfig } from "./use-remote-config";
+export type {
+  UseAbbyReturn,
+  UseFeatureFlagReturn,
+  UseRemoteConfigReturn,
+} from "./types";

packages/vue/src/types.ts

@@ -0,0 +1,15 @@
+import type { AbbyConfig, GetVariantReturn } from "@tryabby/core";
+import type { Readonly, Ref } from "vue";
+
+export interface UseAbbyReturn<T extends AbbyConfig> {
+  variant: Readonly<Ref<GetVariantReturn<T>>>;
+  onAct: (data?: Record<string, unknown>) => void;
+}
+
+export interface UseFeatureFlagReturn {
+  isEnabled: Readonly<Ref<boolean>>;
+}
+
+export interface UseRemoteConfigReturn<T = unknown> {
+  value: Readonly<Ref<T>>;
+}

packages/vue/src/use-abby.ts

@@ -0,0 +1,48 @@
+import type { AbbyConfig } from "@tryabby/core";
+import { getVariant, getAct } from "@tryabby/core";
+import { computed, readonly, ref, type Ref } from "vue";
+import type { UseAbbyReturn } from "./types";
+
+/**
+ * Composable for A/B testing with Abby
+ * @param config - Abby configuration
+ * @param name - Test name
+ * @returns Variant and onAct function
+ * @throws If test name is not found in config
+ */
+export function useAbby<T extends AbbyConfig>(
+  config: T,
+  name: keyof T["tests"]
+): UseAbbyReturn<T> {
+  if (!config) {
+    throw new Error("Abby config is required");
+  }
+
+  if (!name) {
+    throw new Error("Test name is required");
+  }
+
+  const testName = String(name);
+
+  try {
+    const variant = ref(getVariant(config, testName)) as Ref<any>;
+    const actFn = getAct(config);
+
+    const onAct = (data?: Record<string, unknown>) => {
+      if (!actFn) {
+        console.warn("Act function not available in Abby config");
+        return;
+      }
+      actFn(testName, data);
+    };
+
+    return {
+      variant: readonly(variant),
+      onAct,
+    };
+  } catch (error) {
+    throw new Error(
+      `Failed to initialize useAbby for test "${testName}": ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}

packages/vue/src/use-feature-flag.ts

@@ -0,0 +1,40 @@
+import type { AbbyConfig } from "@tryabby/core";
+import { getFeatureFlag } from "@tryabby/core";
+import { readonly, ref, type Ref } from "vue";
+import type { UseFeatureFlagReturn } from "./types";
+
+/**
+ * Composable for feature flags with Abby
+ * @param config - Abby configuration
+ * @param name - Feature flag name
+ * @returns isEnabled ref
+ * @throws If feature flag name is not found in config
+ */
+export function useFeatureFlag<T extends AbbyConfig>(
+  config: T,
+  name: keyof T["featureFlags"]
+): UseFeatureFlagReturn {
+  if (!config) {
+    throw new Error("Abby config is required");
+  }
+
+  if (!name) {
+    throw new Error("Feature flag name is required");
+  }
+
+  const flagName = String(name);
+
+  try {
+    const isEnabled = ref(
+      getFeatureFlag(config, flagName)
+    ) as Ref<boolean>;
+
+    return {
+      isEnabled: readonly(isEnabled),
+    };
+  } catch (error) {
+    throw new Error(
+      `Failed to initialize useFeatureFlag for flag "${flagName}": ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}