@flipfeatureflag/vue 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import { App, Ref } from 'vue';
+import { FlipFlagClient, FlipFlagClientOptions, FlagsStatus, SdkFlagEvaluation } from '@flipfeatureflag/core';
+export { FlipFlagClient, FlipFlagClientOptions } from '@flipfeatureflag/core';
+
+interface FlipFlagPluginOptions {
+    client?: FlipFlagClient;
+    config?: FlipFlagClientOptions;
+}
+declare function createFlipFlag(options: FlipFlagPluginOptions): {
+    install(app: App): void;
+};
+declare function useFlipFlagClient(): FlipFlagClient;
+declare function useFlagsStatus(): FlagsStatus;
+declare function useFlag(flagKey: string, defaultValue?: boolean): Ref<boolean>;
+declare function useVariant(flagKey: string, defaultValue?: SdkFlagEvaluation["value"]): Ref<SdkFlagEvaluation>;
+
+export { type FlipFlagPluginOptions, createFlipFlag, useFlag, useFlagsStatus, useFlipFlagClient, useVariant };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { App, Ref } from 'vue';
+import { FlipFlagClient, FlipFlagClientOptions, FlagsStatus, SdkFlagEvaluation } from '@flipfeatureflag/core';
+export { FlipFlagClient, FlipFlagClientOptions } from '@flipfeatureflag/core';
+
+interface FlipFlagPluginOptions {
+    client?: FlipFlagClient;
+    config?: FlipFlagClientOptions;
+}
+declare function createFlipFlag(options: FlipFlagPluginOptions): {
+    install(app: App): void;
+};
+declare function useFlipFlagClient(): FlipFlagClient;
+declare function useFlagsStatus(): FlagsStatus;
+declare function useFlag(flagKey: string, defaultValue?: boolean): Ref<boolean>;
+declare function useVariant(flagKey: string, defaultValue?: SdkFlagEvaluation["value"]): Ref<SdkFlagEvaluation>;
+
+export { type FlipFlagPluginOptions, createFlipFlag, useFlag, useFlagsStatus, useFlipFlagClient, useVariant };

package/dist/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FlipFlagClient: () => import_core.FlipFlagClient,
+  createFlipFlag: () => createFlipFlag,
+  useFlag: () => useFlag,
+  useFlagsStatus: () => useFlagsStatus,
+  useFlipFlagClient: () => useFlipFlagClient,
+  useVariant: () => useVariant
+});
+module.exports = __toCommonJS(index_exports);
+var import_vue = require("vue");
+var import_js = require("@flipfeatureflag/js");
+var import_core = require("@flipfeatureflag/core");
+var clientKey = /* @__PURE__ */ Symbol("FlipFlagClient");
+var statusKey = /* @__PURE__ */ Symbol("FlipFlagStatus");
+function createFlipFlag(options) {
+  return {
+    install(app) {
+      const client = options.client ?? (options.config ? (0, import_js.createClient)(options.config) : null);
+      if (!client) {
+        throw new Error("flipFeatureFlag plugin requires client or config");
+      }
+      const status = (0, import_vue.reactive)({ ...client.getStatus() });
+      const handleUpdate = () => {
+        Object.assign(status, client.getStatus());
+      };
+      client.on("ready", handleUpdate);
+      client.on("update", handleUpdate);
+      client.on("error", handleUpdate);
+      void client.start();
+      app.provide(clientKey, client);
+      app.provide(statusKey, (0, import_vue.readonly)(status));
+    }
+  };
+}
+function useFlipFlagClient() {
+  const client = (0, import_vue.inject)(clientKey, null);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlag plugin");
+  }
+  return client;
+}
+function useFlagsStatus() {
+  const status = (0, import_vue.inject)(statusKey, null);
+  if (!status) {
+    throw new Error("useFlagsStatus must be used within flipFeatureFlag plugin");
+  }
+  return status;
+}
+function useFlag(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const state = (0, import_vue.ref)(client.isEnabled(flagKey, defaultValue));
+  const update = () => {
+    state.value = client.isEnabled(flagKey, defaultValue);
+  };
+  client.on("update", update);
+  (0, import_vue.onUnmounted)(() => client.off("update", update));
+  return state;
+}
+function useVariant(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const state = (0, import_vue.ref)(client.getVariant(flagKey, defaultValue));
+  const update = () => {
+    state.value = client.getVariant(flagKey, defaultValue);
+  };
+  client.on("update", update);
+  (0, import_vue.onUnmounted)(() => client.off("update", update));
+  return state;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlipFlagClient,
+  createFlipFlag,
+  useFlag,
+  useFlagsStatus,
+  useFlipFlagClient,
+  useVariant
+});

package/dist/index.mjs

@@ -0,0 +1,68 @@
+// src/index.ts
+import { inject, reactive, readonly, ref, onUnmounted } from "vue";
+import { createClient as createBrowserClient } from "@flipfeatureflag/js";
+import { FlipFlagClient } from "@flipfeatureflag/core";
+var clientKey = /* @__PURE__ */ Symbol("FlipFlagClient");
+var statusKey = /* @__PURE__ */ Symbol("FlipFlagStatus");
+function createFlipFlag(options) {
+  return {
+    install(app) {
+      const client = options.client ?? (options.config ? createBrowserClient(options.config) : null);
+      if (!client) {
+        throw new Error("flipFeatureFlag plugin requires client or config");
+      }
+      const status = reactive({ ...client.getStatus() });
+      const handleUpdate = () => {
+        Object.assign(status, client.getStatus());
+      };
+      client.on("ready", handleUpdate);
+      client.on("update", handleUpdate);
+      client.on("error", handleUpdate);
+      void client.start();
+      app.provide(clientKey, client);
+      app.provide(statusKey, readonly(status));
+    }
+  };
+}
+function useFlipFlagClient() {
+  const client = inject(clientKey, null);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlag plugin");
+  }
+  return client;
+}
+function useFlagsStatus() {
+  const status = inject(statusKey, null);
+  if (!status) {
+    throw new Error("useFlagsStatus must be used within flipFeatureFlag plugin");
+  }
+  return status;
+}
+function useFlag(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const state = ref(client.isEnabled(flagKey, defaultValue));
+  const update = () => {
+    state.value = client.isEnabled(flagKey, defaultValue);
+  };
+  client.on("update", update);
+  onUnmounted(() => client.off("update", update));
+  return state;
+}
+function useVariant(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const state = ref(client.getVariant(flagKey, defaultValue));
+  const update = () => {
+    state.value = client.getVariant(flagKey, defaultValue);
+  };
+  client.on("update", update);
+  onUnmounted(() => client.off("update", update));
+  return state;
+}
+export {
+  FlipFlagClient,
+  createFlipFlag,
+  useFlag,
+  useFlagsStatus,
+  useFlipFlagClient,
+  useVariant
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@flipfeatureflag/vue",
+  "version": "0.1.1",
+  "description": "flipFeatureFlag Vue SDK",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external vue"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "dependencies": {
+    "@flipfeatureflag/core": "0.1.0",
+    "@flipfeatureflag/js": "0.1.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,87 @@
+import { App, inject, InjectionKey, reactive, readonly, ref, onUnmounted, Ref } from "vue";
+import { FlipFlagClient, FlipFlagClientOptions, FlagsStatus, SdkFlagEvaluation } from "@flipfeatureflag/core";
+import { createClient as createBrowserClient } from "@flipfeatureflag/js";
+
+const clientKey: InjectionKey<FlipFlagClient> = Symbol("FlipFlagClient");
+const statusKey: InjectionKey<FlagsStatus> = Symbol("FlipFlagStatus");
+
+export interface FlipFlagPluginOptions {
+  client?: FlipFlagClient;
+  config?: FlipFlagClientOptions;
+}
+
+export function createFlipFlag(options: FlipFlagPluginOptions) {
+  return {
+    install(app: App) {
+      const client = options.client ?? (options.config ? createBrowserClient(options.config) : null);
+      if (!client) {
+        throw new Error("flipFeatureFlag plugin requires client or config");
+      }
+
+      const status = reactive<FlagsStatus>({ ...client.getStatus() });
+
+      const handleUpdate = () => {
+        Object.assign(status, client.getStatus());
+      };
+
+      client.on("ready", handleUpdate);
+      client.on("update", handleUpdate);
+      client.on("error", handleUpdate);
+
+      void client.start();
+
+      app.provide(clientKey, client);
+      app.provide(statusKey, readonly(status));
+    },
+  };
+}
+
+export function useFlipFlagClient(): FlipFlagClient {
+  const client = inject(clientKey, null);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlag plugin");
+  }
+  return client;
+}
+
+export function useFlagsStatus(): FlagsStatus {
+  const status = inject(statusKey, null);
+  if (!status) {
+    throw new Error("useFlagsStatus must be used within flipFeatureFlag plugin");
+  }
+  return status;
+}
+
+export function useFlag(flagKey: string, defaultValue = false): Ref<boolean> {
+  const client = useFlipFlagClient();
+  const state = ref(client.isEnabled(flagKey, defaultValue));
+
+  const update = () => {
+    state.value = client.isEnabled(flagKey, defaultValue);
+  };
+
+  client.on("update", update);
+  onUnmounted(() => client.off("update", update));
+
+  return state;
+}
+
+export function useVariant(
+  flagKey: string,
+  defaultValue: SdkFlagEvaluation["value"] = false,
+): Ref<SdkFlagEvaluation> {
+  const client = useFlipFlagClient();
+  const state = ref(client.getVariant(flagKey, defaultValue));
+
+  const update = () => {
+    state.value = client.getVariant(flagKey, defaultValue);
+  };
+
+  client.on("update", update);
+  onUnmounted(() => client.off("update", update));
+
+  return state;
+}
+
+export type { FlipFlagClientOptions } from "@flipfeatureflag/core";
+export { FlipFlagClient } from "@flipfeatureflag/core";

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}