@avsbhq/vue 1.0.0

package/dist/index.js

@@ -0,0 +1,519 @@
+// src/AvsbProvider.ts
+import {
+  defineComponent,
+  ref,
+  provide,
+  onMounted,
+  onUnmounted,
+  h
+} from "vue";
+import { AvsbClient } from "@avsbhq/browser";
+
+// src/context.ts
+import { inject } from "vue";
+var AvsbInjectionKey = /* @__PURE__ */ Symbol("avsb-injection-key");
+function useAvsbContext() {
+  const v = inject(AvsbInjectionKey);
+  if (v === void 0) {
+    throw new Error(
+      '[avsb] composables must be used inside <AvsbProvider> or app.use(AvsbPlugin). Wrap your component tree with <AvsbProvider sdkKey="..." context={...}> or install the plugin.'
+    );
+  }
+  return v;
+}
+
+// src/AvsbProvider.ts
+var AvsbProvider = defineComponent({
+  name: "AvsbProvider",
+  props: {
+    // Mode B — caller passes a pre-built client
+    client: {
+      type: Object,
+      default: void 0
+    },
+    // Mode A — sdkKey is the minimum required field from AvsbClientOptions
+    sdkKey: {
+      type: String,
+      default: void 0
+    }
+  },
+  // Accept any additional option props (pollingInterval, bootstrap, etc.)
+  // via inheritAttrs + $attrs so callers can pass the full AvsbClientOptions
+  // surface without enumerating every field as a prop.
+  inheritAttrs: false,
+  setup(props, { slots, attrs }) {
+    const injectedClient = props.client ?? null;
+    const isInjectionMode = injectedClient !== null;
+    let ownedClient = null;
+    if (!isInjectionMode) {
+      if (!props.sdkKey) {
+        throw new Error(
+          "[avsb] <AvsbProvider> requires either a `client` prop (Mode B) or a `sdkKey` prop (Mode A)."
+        );
+      }
+      const opts = {
+        sdkKey: props.sdkKey,
+        ...attrs
+      };
+      ownedClient = new AvsbClient(opts);
+    }
+    const activeClient = isInjectionMode ? injectedClient : ownedClient;
+    const status = ref("loading");
+    const error = ref(void 0);
+    provide(AvsbInjectionKey, {
+      get client() {
+        return activeClient;
+      },
+      get status() {
+        return status.value;
+      },
+      get error() {
+        return error.value;
+      }
+    });
+    let cancelled = false;
+    let unsubscribeError;
+    onMounted(() => {
+      if (!activeClient) return;
+      activeClient.onReady().then(() => {
+        if (!cancelled) status.value = "ready";
+      }).catch((err) => {
+        if (!cancelled) {
+          status.value = "error";
+          error.value = err instanceof Error ? err : new Error(String(err));
+        }
+      });
+      if (typeof activeClient.on === "function") {
+        unsubscribeError = activeClient.on("error", (e) => {
+          if (!cancelled) {
+            status.value = "error";
+            error.value = e;
+          }
+        });
+      }
+    });
+    onUnmounted(() => {
+      cancelled = true;
+      unsubscribeError?.();
+      if (!isInjectionMode && ownedClient) {
+        ownedClient.close().catch(() => {
+        });
+        ownedClient = null;
+      }
+    });
+    return () => slots.default?.();
+  },
+  render() {
+    return h("div");
+  }
+});
+
+// src/plugin.ts
+import { ref as ref2 } from "vue";
+import { AvsbClient as AvsbClient2 } from "@avsbhq/browser";
+var AvsbPlugin = {
+  install(app, options) {
+    const injectedClient = "client" in options && options.client ? options.client : null;
+    const isInjectionMode = injectedClient !== null;
+    let activeClient;
+    if (isInjectionMode) {
+      activeClient = injectedClient;
+    } else {
+      const opts = options;
+      activeClient = new AvsbClient2(opts);
+    }
+    const status = ref2("loading");
+    const error = ref2(void 0);
+    app.provide(AvsbInjectionKey, {
+      get client() {
+        return activeClient;
+      },
+      get status() {
+        return status.value;
+      },
+      get error() {
+        return error.value;
+      }
+    });
+    activeClient.onReady().then(() => {
+      status.value = "ready";
+    }).catch((err) => {
+      status.value = "error";
+      error.value = err instanceof Error ? err : new Error(String(err));
+    });
+    if (typeof activeClient.on === "function") {
+      activeClient.on("error", (e) => {
+        status.value = "error";
+        error.value = e;
+      });
+    }
+    if (!isInjectionMode) {
+      app.unmount = new Proxy(app.unmount, {
+        apply(target, thisArg, args) {
+          activeClient.close().catch(() => {
+          });
+          return Reflect.apply(target, thisArg, args);
+        }
+      });
+    }
+  }
+};
+
+// src/composables/useFlag.ts
+import {
+  ref as ref3,
+  computed,
+  onMounted as onMounted2,
+  onUnmounted as onUnmounted2,
+  watchEffect,
+  isRef
+} from "vue";
+import { notFoundFlag } from "@avsbhq/core";
+function useFlag(flagKey, defaultValue) {
+  const { client } = useAvsbContext();
+  const noClientSentinel = notFoundFlag(defaultValue, "no client");
+  const flagRef = ref3(
+    client !== null && typeof client.getSnapshot === "function" ? client.getSnapshot(
+      isRef(flagKey) ? flagKey.value : flagKey,
+      defaultValue
+    ) : noClientSentinel
+  );
+  let unsub;
+  function resubscribe() {
+    unsub?.();
+    unsub = void 0;
+    if (!client || typeof client.subscribe !== "function") return;
+    const key = isRef(flagKey) ? flagKey.value : flagKey;
+    if (typeof client.getSnapshot === "function") {
+      flagRef.value = client.getSnapshot(key, defaultValue);
+    }
+    unsub = client.subscribe(key, () => {
+      if (typeof client.getSnapshot === "function") {
+        flagRef.value = client.getSnapshot(
+          isRef(flagKey) ? flagKey.value : flagKey,
+          defaultValue
+        );
+      }
+    });
+  }
+  let stopWatcher;
+  onMounted2(() => {
+    if (isRef(flagKey)) {
+      stopWatcher = watchEffect(() => {
+        void flagKey.value;
+        resubscribe();
+      });
+    } else {
+      resubscribe();
+    }
+  });
+  onUnmounted2(() => {
+    stopWatcher?.();
+    unsub?.();
+  });
+  return computed(() => flagRef.value);
+}
+
+// src/composables/useFlagValue.ts
+import { computed as computed2 } from "vue";
+function useFlagValue(flagKey, defaultValue) {
+  const flag = useFlag(flagKey, defaultValue);
+  return computed2(() => flag.value.value);
+}
+
+// src/composables/useBoolFlag.ts
+import {
+  ref as ref4,
+  computed as computed3,
+  onMounted as onMounted3,
+  onUnmounted as onUnmounted3
+} from "vue";
+import { notFoundFlag as notFoundFlag2 } from "@avsbhq/core";
+function useBoolFlag(flagKey, defaultValue) {
+  const { client } = useAvsbContext();
+  const noClientSentinel = notFoundFlag2(defaultValue, "no client");
+  const flagRef = ref4(
+    client !== null && typeof client.getBoolFlag === "function" ? client.getBoolFlag(flagKey, defaultValue) : noClientSentinel
+  );
+  let unsub;
+  onMounted3(() => {
+    if (!client || typeof client.subscribe !== "function") return;
+    if (typeof client.getBoolFlag === "function") {
+      flagRef.value = client.getBoolFlag(flagKey, defaultValue);
+    }
+    unsub = client.subscribe(flagKey, () => {
+      if (typeof client.getBoolFlag === "function") {
+        flagRef.value = client.getBoolFlag(flagKey, defaultValue);
+      }
+    });
+  });
+  onUnmounted3(() => {
+    unsub?.();
+  });
+  return computed3(() => flagRef.value);
+}
+
+// src/composables/useStringFlag.ts
+import {
+  ref as ref5,
+  computed as computed4,
+  onMounted as onMounted4,
+  onUnmounted as onUnmounted4
+} from "vue";
+import { notFoundFlag as notFoundFlag3 } from "@avsbhq/core";
+function useStringFlag(flagKey, defaultValue) {
+  const { client } = useAvsbContext();
+  const noClientSentinel = notFoundFlag3(defaultValue, "no client");
+  const flagRef = ref5(
+    client !== null && typeof client.getStringFlag === "function" ? client.getStringFlag(flagKey, defaultValue) : noClientSentinel
+  );
+  let unsub;
+  onMounted4(() => {
+    if (!client || typeof client.subscribe !== "function") return;
+    if (typeof client.getStringFlag === "function") {
+      flagRef.value = client.getStringFlag(flagKey, defaultValue);
+    }
+    unsub = client.subscribe(flagKey, () => {
+      if (typeof client.getStringFlag === "function") {
+        flagRef.value = client.getStringFlag(flagKey, defaultValue);
+      }
+    });
+  });
+  onUnmounted4(() => {
+    unsub?.();
+  });
+  return computed4(() => flagRef.value);
+}
+
+// src/composables/useNumberFlag.ts
+import {
+  ref as ref6,
+  computed as computed5,
+  onMounted as onMounted5,
+  onUnmounted as onUnmounted5
+} from "vue";
+import { notFoundFlag as notFoundFlag4 } from "@avsbhq/core";
+function useNumberFlag(flagKey, defaultValue) {
+  const { client } = useAvsbContext();
+  const noClientSentinel = notFoundFlag4(defaultValue, "no client");
+  const flagRef = ref6(
+    client !== null && typeof client.getNumberFlag === "function" ? client.getNumberFlag(flagKey, defaultValue) : noClientSentinel
+  );
+  let unsub;
+  onMounted5(() => {
+    if (!client || typeof client.subscribe !== "function") return;
+    if (typeof client.getNumberFlag === "function") {
+      flagRef.value = client.getNumberFlag(flagKey, defaultValue);
+    }
+    unsub = client.subscribe(flagKey, () => {
+      if (typeof client.getNumberFlag === "function") {
+        flagRef.value = client.getNumberFlag(flagKey, defaultValue);
+      }
+    });
+  });
+  onUnmounted5(() => {
+    unsub?.();
+  });
+  return computed5(() => flagRef.value);
+}
+
+// src/composables/useJsonFlag.ts
+import {
+  ref as ref7,
+  computed as computed6,
+  onMounted as onMounted6,
+  onUnmounted as onUnmounted6
+} from "vue";
+import { notFoundFlag as notFoundFlag5 } from "@avsbhq/core";
+function useJsonFlag(flagKey, defaultValue) {
+  const { client } = useAvsbContext();
+  const noClientSentinel = notFoundFlag5(defaultValue, "no client");
+  const flagRef = ref7(
+    client !== null && typeof client.getJsonFlag === "function" ? client.getJsonFlag(flagKey, defaultValue) : noClientSentinel
+  );
+  let unsub;
+  onMounted6(() => {
+    if (!client || typeof client.subscribe !== "function") return;
+    if (typeof client.getJsonFlag === "function") {
+      flagRef.value = client.getJsonFlag(flagKey, defaultValue);
+    }
+    unsub = client.subscribe(flagKey, () => {
+      if (typeof client.getJsonFlag === "function") {
+        flagRef.value = client.getJsonFlag(flagKey, defaultValue);
+      }
+    });
+  });
+  onUnmounted6(() => {
+    unsub?.();
+  });
+  return computed6(() => flagRef.value);
+}
+
+// src/composables/useAllFlags.ts
+import {
+  ref as ref8,
+  computed as computed7,
+  onMounted as onMounted7,
+  onUnmounted as onUnmounted7
+} from "vue";
+function useAllFlags() {
+  const { client } = useAvsbContext();
+  const snapshotRef = ref8(
+    client !== null && typeof client.getAllFlags === "function" ? client.getAllFlags() : {}
+  );
+  let unsub;
+  onMounted7(() => {
+    if (!client || typeof client.on !== "function") return;
+    if (typeof client.getAllFlags === "function") {
+      snapshotRef.value = client.getAllFlags();
+    }
+    unsub = client.on("flagChange", () => {
+      if (typeof client.getAllFlags === "function") {
+        snapshotRef.value = client.getAllFlags();
+      }
+    });
+  });
+  onUnmounted7(() => {
+    unsub?.();
+  });
+  return computed7(() => snapshotRef.value);
+}
+
+// src/composables/useFlagReady.ts
+import { computed as computed8 } from "vue";
+function useFlagReady() {
+  const context = useAvsbContext();
+  return computed8(() => context.status === "ready");
+}
+
+// src/composables/useAvsbClient.ts
+function useAvsbClient() {
+  const { client } = useAvsbContext();
+  return client;
+}
+
+// src/composables/useIdentify.ts
+import { ref as ref9 } from "vue";
+function useIdentify() {
+  const { client } = useAvsbContext();
+  const clientRef = ref9(client);
+  clientRef.value = client;
+  function identify(ctx) {
+    const c = clientRef.value;
+    if (!c || typeof c.identify !== "function") return;
+    c.identify(ctx);
+  }
+  return identify;
+}
+
+// src/composables/useAlias.ts
+import { ref as ref10 } from "vue";
+function useAlias() {
+  const { client } = useAvsbContext();
+  const clientRef = ref10(client);
+  clientRef.value = client;
+  async function alias(prev, next) {
+    const c = clientRef.value;
+    if (!c || typeof c.alias !== "function") return;
+    await c.alias(prev, next);
+  }
+  return alias;
+}
+
+// src/composables/useTrack.ts
+import { ref as ref11 } from "vue";
+function useTrack() {
+  const { client } = useAvsbContext();
+  const clientRef = ref11(client);
+  clientRef.value = client;
+  function track(eventKey, payload) {
+    const c = clientRef.value;
+    if (!c || typeof c.track !== "function") return;
+    c.track(eventKey, payload);
+  }
+  return track;
+}
+
+// src/pinia.ts
+import { defineStore } from "pinia";
+import { ref as ref12, computed as computed9 } from "vue";
+import { inject as inject2 } from "vue";
+var useAvsbStore = defineStore("avsb", () => {
+  const injectedContext = inject2(AvsbInjectionKey);
+  const _client = ref12(injectedContext?.client ?? null);
+  const _status = ref12(
+    injectedContext?.status ?? "loading"
+  );
+  const _error = ref12(injectedContext?.error);
+  if (injectedContext) {
+  }
+  const client = computed9(
+    () => injectedContext ? injectedContext.client : _client.value
+  );
+  const status = computed9(
+    () => injectedContext ? injectedContext.status : _status.value
+  );
+  const error = computed9(
+    () => injectedContext ? injectedContext.error : _error.value
+  );
+  function setClient(c) {
+    _client.value = c;
+    _status.value = "loading";
+    _error.value = void 0;
+    if (!c) return;
+    c.onReady().then(() => {
+      _status.value = "ready";
+    }).catch((err) => {
+      _status.value = "error";
+      _error.value = err instanceof Error ? err : new Error(String(err));
+    });
+  }
+  function identify(ctx) {
+    const c = client.value;
+    if (!c || typeof c.identify !== "function") return;
+    c.identify(ctx);
+  }
+  function track(eventKey, payload) {
+    const c = client.value;
+    if (!c || typeof c.track !== "function") return;
+    c.track(eventKey, payload);
+  }
+  async function alias(prev, next) {
+    const c = client.value;
+    if (!c || typeof c.alias !== "function") return;
+    await c.alias(prev, next);
+  }
+  function reset() {
+    const c = client.value;
+    if (!c || typeof c.reset !== "function") return;
+    c.reset();
+  }
+  return {
+    client,
+    status,
+    error,
+    setClient,
+    identify,
+    track,
+    alias,
+    reset
+  };
+});
+export {
+  AvsbInjectionKey,
+  AvsbPlugin,
+  AvsbProvider,
+  useAlias,
+  useAllFlags,
+  useAvsbClient,
+  useAvsbStore,
+  useBoolFlag,
+  useFlag,
+  useFlagReady,
+  useFlagValue,
+  useIdentify,
+  useJsonFlag,
+  useNumberFlag,
+  useStringFlag,
+  useTrack
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@avsbhq/vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/main1479/a-vs-b.git",
+    "directory": "packages/avsb-vue"
+  },
+  "homepage": "https://github.com/main1479/a-vs-b/tree/main/packages/avsb-vue#readme",
+  "peerDependencies": {
+    "vue": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "pinia": { "optional": true }
+  },
+  "dependencies": {
+    "@avsbhq/core": "1.0.0",
+    "@avsbhq/browser": "1.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^14.0.0",
+    "pinia": "^2.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "vitest": "^1.6.0",
+    "vue": "^3.4.0"
+  }
+}