wip on vue sdk

removed some hooks + useBucket throws if plugin isn't installed

Author: roncohen

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "license": "MIT",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "packages/vue-sdk/example"
   ],
   "scripts": {
     "dev": "lerna run dev --parallel",

packages/eslint-config/base.js

@@ -17,6 +17,7 @@ module.exports = [
       "**/*.jsx",
       "**/*.ts",
       "**/*.tsx",
+      "**/*.vue",
     ],
     plugins: {
       import: importsPlugin,

packages/vue-sdk/README.md

@@ -0,0 +1 @@
+# vue-sdk

packages/vue-sdk/eslint.config.js

@@ -0,0 +1,8 @@
+const base = require("@bucketco/eslint-config/base");
+const pluginVue = require("eslint-plugin-vue");
+
+module.exports = [
+  ...base,
+  { ignores: ["dist/", "example/"] },
+  ...pluginVue.configs["flat/recommended"],
+];

packages/vue-sdk/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bucketco/vue-sdk",
+  "version": "1.0.0",
+  "description": "Vue SDK for Bucket",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "test": "vitest -c vite.config.mjs",
+    "test:ci": "vitest run -c vite.config.mjs --reporter=default --reporter=junit --outputFile=junit.xml",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:ci": "eslint --output-file eslint-report.json --format json .",
+    "prettier": "prettier --check .",
+    "format": "yarn lint --fix && yarn prettier --write",
+    "preversion": "yarn lint && yarn prettier && yarn vitest run -c vite.config.mjs && yarn build"
+  },
+  "keywords": [
+    "vue",
+    "bucket",
+    "sdk",
+    "feature flags"
+  ],
+  "author": "Bucket",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@bucketco/browser-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/tsconfig": "^0.5.1",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.5",
+    "vite-plugin-dts": "^4.0.0-beta.2",
+    "vue": "^3.0.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bucketco/bucket-javascript-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bucketco/bucket-javascript-sdk/issues"
+  },
+  "homepage": "https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/vue-sdk/README.md"
+}

packages/vue-sdk/src/BucketPlugin.ts

@@ -0,0 +1,177 @@
+// BucketPlugin.ts
+import { reactive, ref } from "vue";
+import type { App, InjectionKey } from "vue";
+import type {
+  CompanyContext,
+  Feedback,
+  FeedbackOptions,
+  FlagsOptions,
+  RequestFeedbackOptions,
+  UserContext,
+} from "@bucketco/browser-sdk";
+import { BucketClient } from "@bucketco/browser-sdk";
+
+import { version } from "../package.json";
+
+const SDK_VERSION = `vue-sdk/${version}`;
+
+type OtherContext = Record<string, any>;
+
+export interface Flags {}
+
+export type BucketFlags = keyof (keyof Flags extends never
+  ? Record<string, boolean>
+  : Flags);
+
+export type FlagsResult = { [k in BucketFlags]?: boolean };
+
+export interface BucketState {
+  flags: FlagsResult;
+  isLoading: boolean;
+  user: UserContext | null;
+  company: CompanyContext | null;
+  otherContext: OtherContext | null;
+}
+
+export interface BucketPluginOptions {
+  publishableKey: string;
+  flagOptions?: Omit<FlagsOptions, "fallbackFlags"> & {
+    fallbackFlags?: BucketFlags[];
+  };
+  feedback?: FeedbackOptions;
+  host?: string;
+  sseHost?: string;
+  debug?: boolean;
+}
+
+type ProvideType = {
+  state: BucketState;
+  track: (eventName: string, attributes?: Record<string, any>) => Promise<void>;
+  sendFeedback: (opts: Omit<Feedback, "userId" | "companyId">) => Promise<void>;
+  requestFeedback: (
+    opts: Omit<RequestFeedbackOptions, "userId" | "companyId">,
+  ) => void;
+};
+
+export const BucketInjectionKey = Symbol() as InjectionKey<ProvideType>;
+
+export const BucketPlugin = {
+  install(app: App, options: BucketPluginOptions) {
+    const bucketState = reactive<BucketState>({
+      flags: {},
+      isLoading: true,
+      user: null,
+      company: null,
+      otherContext: null,
+    });
+
+    const client = ref<BucketClient | null>(null);
+
+    const updateClient = () => {
+      if (client.value) {
+        client.value.stop();
+      }
+
+      client.value = new BucketClient(
+        options.publishableKey,
+        {
+          user: bucketState.user ?? undefined,
+          company: bucketState.company ?? undefined,
+          otherContext: bucketState.otherContext ?? undefined,
+        },
+        {
+          host: options.host,
+          sseHost: options.sseHost,
+          flags: {
+            ...options.flagOptions,
+            onUpdatedFlags: (flags) => {
+              bucketState.flags = flags;
+            },
+          },
+          feedback: options.feedback,
+          logger: options.debug ? console : undefined,
+          sdkVersion: SDK_VERSION,
+        },
+      );
+
+      client.value
+        .initialize()
+        .then(() => {
+          bucketState.flags = client.value!.getFlags() ?? {};
+          bucketState.isLoading = false;
+
+          // Update user attributes
+          const { id: userId, ...userAttributes } = bucketState.user || {};
+          if (userId) {
+            client.value!.user(userAttributes).catch(() => {
+              // ignore rejections. Logged inside
+            });
+          }
+
+          // Update company attributes
+          const { id: companyId, ...companyAttributes } =
+            bucketState.company || {};
+          if (companyId) {
+            client.value!.company(companyAttributes).catch(() => {
+              // ignore rejections. Logged inside
+            });
+          }
+        })
+        .catch(() => {
+          // initialize cannot actually throw, but this fixes lint warnings
+        });
+    };
+
+    const track = async (
+      eventName: string,
+      attributes?: Record<string, any>,
+    ) => {
+      if (!bucketState.user?.id) {
+        console.error("User is required to send events");
+        return;
+      }
+      await client.value?.track(eventName, attributes);
+    };
+
+    const sendFeedback = async (
+      opts: Omit<Feedback, "userId" | "companyId">,
+    ) => {
+      if (!bucketState.user?.id) {
+        console.error("User is required to send feedback");
+        return;
+      }
+      await client.value?.feedback({
+        ...opts,
+        userId: String(bucketState.user.id),
+        companyId: bucketState.company?.id
+          ? String(bucketState.company.id)
+          : undefined,
+      });
+    };
+
+    const requestFeedback = (
+      opts: Omit<RequestFeedbackOptions, "userId" | "companyId">,
+    ) => {
+      if (!bucketState.user?.id) {
+        console.error("User is required to request feedback");
+        return;
+      }
+      client.value?.requestFeedback({
+        ...opts,
+        userId: String(bucketState.user.id),
+        companyId: bucketState.company?.id
+          ? String(bucketState.company.id)
+          : undefined,
+      });
+    };
+
+    app.provide(BucketInjectionKey, {
+      state: bucketState,
+      track,
+      sendFeedback,
+      requestFeedback,
+    });
+
+    updateClient();
+  },
+};

packages/vue-sdk/src/BucketProvider.vue

@@ -0,0 +1,29 @@
+<!-- BucketProvider.vue -->
+<template>
+  <slot v-if="!isLoading || !loadingComponent" />
+  <component :is="loadingComponent" v-else />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useBucket } from "./useBucket";
+
+export default defineComponent({
+  name: "BucketProvider",
+  props: {
+    loadingComponent: {
+      type: [Object, Function, String],
+      default: null,
+    },
+  },
+  setup() {
+    const bucket = useBucket();
+    const isLoading = computed(() => (bucket ? bucket?.state.isLoading : true));
+
+    return {
+      isLoading,
+    };
+  },
+});
+</script>

packages/vue-sdk/src/index.ts

@@ -0,0 +1,4 @@
+export { BucketPlugin } from "./BucketPlugin";
+export * from "./useBucket";
+import BucketProvider from "./BucketProvider.vue";
+export { BucketProvider };

packages/vue-sdk/src/useBucket.ts

@@ -0,0 +1,47 @@
+import { computed, inject } from "vue";
+import { BucketInjectionKey } from "./BucketPlugin";
+import type { BucketFlags } from "./BucketPlugin";
+
+export function useBucket() {
+  const bucket = inject(BucketInjectionKey);
+  if (!bucket) {
+    throw new Error("Bucket not found. Make sure to provide the BucketPlugin.");
+  }
+  return bucket
+}
+
+export function useFlagIsEnabled(flagKey: BucketFlags) {
+  const bucket = useBucket();
+  return computed(() => bucket.state.flags[flagKey] ?? false);
+}
+
+export function useFlag(key: BucketFlags) {
+  const bucket = useBucket();
+  return computed(() => ({
+    isLoading: bucket.state.isLoading,
+    isEnabled: bucket.state.flags[key] ?? false,
+  }));
+}
+
+export function useFlags() {
+  const bucket = useBucket();
+  return computed(() => ({
+    isLoading: bucket.state.isLoading,
+    flags: bucket.state.flags,
+  }));
+}
+
+export function useTrack() {
+  const bucket = useBucket();
+  return bucket.track;
+}
+
+export function useRequestFeedback() {
+  const bucket = useBucket();
+  return bucket.requestFeedback;
+}
+
+export function useSendFeedback() {
+  const bucket = useBucket();
+  return bucket.sendFeedback;
+}

packages/vue-sdk/src/vue.d.ts

@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}