feat: Add Vue integration for Abby with feature parity to React

.hintrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "typescript-config/consistent-casing": "off",
+    "typescript-config/strict": "off"
+  }
+}

.history/packages/react/src/index_20240529172407.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./context";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/react/src/index_20240530155809.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./context";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/react/src/index_20240530162245.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./context";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/vue/dist/useAbby.d_20240530164028.ts

@@ -0,0 +1,4 @@
+export declare function useAbby(experimentName: string): {
+    variant: import("vue").Ref<any>;
+    onAct: any;
+};

.history/packages/vue/dist/useAbby.d_20240530164251.ts

@@ -0,0 +1,4 @@
+export declare function useAbby(experimentName: string): {
+    variant: import("vue").Ref<any>;
+    onAct: any;
+};

.history/packages/vue/dist/useAbby.d_20240530164253.ts

@@ -0,0 +1,17 @@
+import { ref, onMounted } from 'vue';
+import { createAbby } from '@tryabby/core';
+import type { ABTestReturnValue } from '@tryabby/core';
+
+export function useAbby(experimentName: string): ABTestReturnValue {
+  const abby = createAbby();
+  const variant = ref<string | null>(null);
+
+  onMounted(() => {
+    variant.value = abby.getVariant(experimentName);
+  });
+
+  return {
+    variant,
+    onAct: abby.onAct
+  };
+}

.history/packages/vue/dist/useAbby.d_20240530164259.ts

@@ -0,0 +1,5 @@
+export declare function useAbby(experimentName: string): {
+    variant: import("vue").Ref<any>;
+    onAct: any;
+};
+a

.history/packages/vue/dist/useAbby.d_20240530164303.ts

@@ -0,0 +1,4 @@
+export declare function useAbby(experimentName: string): {
+    variant: import("vue").Ref<any>;
+    onAct: any;
+};

.history/packages/vue/package_20240530163311.json

@@ -0,0 +1,47 @@
+{
+  "name": "vue",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:^",
+    "@vue/compiler-sfc": "^3.4.27",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "~5.4.2",
+    "vite": "^5.2.8",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.11"
+  }
+}

.history/packages/vue/package_20240530163408.json

@@ -0,0 +1,48 @@
+{
+  "name": "vue",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:^",
+    "@vue/compiler-sfc": "^3.4.27",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "~5.4.2",
+    "vite": "^5.2.8",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.11"
+  }
+}
+a

.history/packages/vue/package_20240530163417.json

@@ -0,0 +1,20 @@
+{
+  "name": "@tryabby/vue",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@tryabby/core": "^1.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.0.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "jest": "^26.0.0",
+    "@types/jest": "^26.0.0"
+  }
+}

.history/packages/vue/src/context_20240530162009.tsx

@@ -0,0 +1,20 @@
+import { inject, provide, reactive } from 'vue';
+
+const AbbySymbol = Symbol();
+
+export function provideAbby(abby) {
+    const state = reactive({
+        flags: abby.getFeatureFlags(),
+        tests: abby.getTests(),
+    });
+
+    provide(AbbySymbol, state);
+}
+
+export function useFeatureFlag(flagName) {
+    const abby = inject(AbbySymbol);
+    if (!abby) {
+        throw new Error("useFeatureFlag must be used within a component that provides Abby data.");
+    }
+    return abby.flags[flagName];
+}

.history/packages/vue/src/index_20240530163802.ts

@@ -0,0 +1,3 @@
+export { useAbby } from './useAbby';
+export { useFeatureFlag } from './useFeatureFlag';
+export { useRemoteConfig } from './useRemoteConfig';

.history/packages/vue/src/main_20240530155710.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

.history/packages/vue/src/main_20240530155817.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

.history/packages/vue/src/main_20240530155819.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./context";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/vue/src/main_20240530162023.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./context";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/vue/src/main_20240530162028.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/vue/src/main_20240530162037.ts

@@ -0,0 +1,2 @@
+export { createAbby, type withDevtoolsFunction, type ABTestReturnValue } from "./packages/vue/src/context.tsx";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";

.history/packages/vue/src/main_20240530162052.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

.history/packages/vue/src/main_20240530162113.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

.history/packages/vue/src/useAbby_20240530163549.ts

@@ -0,0 +1,15 @@
+import { onMounted, ref } from 'vue';
+import { getCurrentVariant, onAct } from '@tryabby/core';
+
+export function useAbby(experimentName: string) {
+  const variant = ref<string | null>(null);
+
+  onMounted(() => {
+    variant.value = getCurrentVariant(experimentName);
+  });
+
+  return {
+    variant,
+    onAct
+  };
+}

.history/packages/vue/src/useAbby_20240530163710.ts

@@ -0,0 +1,16 @@
+import { onMounted, ref } from 'vue';
+import { getCurrentVariant, onAct } from '@tryabby/core';
+
+export function useAbby(experimentName: string) {
+  const variant = ref<string | null>(null);
+
+  onMounted(() => {
+    variant.value = getCurrentVariant(experimentName);
+  });
+
+  return {
+    variant,
+    onAct
+  };
+}
+a

.history/packages/vue/src/useAbby_20240530163712.ts

@@ -0,0 +1,15 @@
+import { onMounted, ref } from 'vue';
+import { getVariant, onAct } from '@tryabby/core';
+
+export function useAbby(experimentName: string) {
+  const variant = ref<string | null>(null);
+
+  onMounted(() => {
+    variant.value = getVariant(experimentName);
+  });
+
+  return {
+    variant,
+    onAct
+  };
+}

.history/packages/vue/src/useFeatureFlag_20240530163740.ts

@@ -0,0 +1,14 @@
+import { onMounted, ref } from 'vue';
+import { getFlag } from '@tryabby/core';
+
+export function useFeatureFlag(flagName: string) {
+  const flagValue = ref<boolean | null>(null);
+
+  onMounted(() => {
+    flagValue.value = getFlag(flagName);
+  });
+
+  return {
+    flagValue
+  };
+}

.history/packages/vue/src/useRemoteConfig_20240530163751.ts

@@ -0,0 +1,14 @@
+import { onMounted, ref } from 'vue';
+import { getConfig } from '@tryabby/core';
+
+export function useRemoteConfig(configName: string) {
+  const configValue = ref<any>(null);
+
+  onMounted(() => {
+    configValue.value = getConfig(configName);
+  });
+
+  return {
+    configValue
+  };
+}

.history/packages/vue/tests/useAbby.test_20240530163906.ts

@@ -0,0 +1,16 @@
+import { useAbby } from '../src/useAbby';
+import { mount } from '@vue/test-utils';
+
+test('useAbby returns correct variant', () => {
+  const experimentName = 'test-experiment';
+  const wrapper = mount({
+    template: '<div>{{ variant }}</div>',
+    setup() {
+      const { variant } = useAbby(experimentName);
+      return { variant };
+    }
+  });
+
+  // Mock the result to match your expectations
+  expect(wrapper.text()).toBe('variant-A'); // Assuming 'variant-A' is the expected result
+});

.history/packages/vue/tsconfig_20240530155710.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "compilerOptions": {
+    "module": "NodeNext"
+  }
+}

.history/packages/vue/tsconfig_20240530160123.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "compilerOptions": {
+    "module": "NodeNext"
+  }
+}