feat: refactored vue sdk into same format as react

Author: Swiftwork

.vscode/settings.json

@@ -20,6 +20,9 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

packages/vue-sdk/README.md

@@ -66,12 +66,12 @@ If using Nuxt, wrap `<ReflagProvider>` in `<ClientOnly>`. `<ReflagProvider>` onl
 <script setup lang="ts">
 import { useFlag } from "@reflag/vue-sdk";
 
-const { isEnabled } = useFlag("huddle");
+const { isEnabled } = useFlag("huddles");
 </script>
 
 <template>
   <div v-if="isEnabled">
-    <button>Start huddle!</button>
+    <button>Start huddles!</button>
   </div>
 </template>
 ```
@@ -169,7 +169,7 @@ ReflagProvider lets you define a template to be shown while ReflagProvider is in
     :company="{ id: 'acme_inc', plan: 'pro' }"
   >
     <template #loading>Loading...</template>
-    <StartHuddleButton />
+    <StartHuddlesButton />
   </ReflagProvider>
 </template>
 ```
@@ -193,7 +193,7 @@ const bootstrappedFlags = {
     company: { id: "company456", name: "Acme Inc", plan: "enterprise" },
   },
   flags: {
-    huddle: {
+    huddles: {
       isEnabled: true,
       config: {
         key: "enhanced",
@@ -209,7 +209,7 @@ const bootstrappedFlags = {
     :publishable-key="publishableKey"
     :flags="bootstrappedFlags"
   >
-    <StartHuddleButton />
+    <StartHuddlesButton />
   </ReflagBootstrappedProvider>
 </template>
 ```
@@ -271,14 +271,14 @@ Example:
 <script setup lang="ts">
 import { useFlag } from "@reflag/vue-sdk";
 
-const { isEnabled, track, requestFeedback, config } = useFlag("huddle");
+const { isEnabled, track, requestFeedback, config } = useFlag("huddles");
 </script>
 
 <template>
   <div v-if="isLoading">Loading...</div>
   <div v-else-if="!isEnabled">Flag not available</div>
   <div v-else>
-    <button @click="track()">Start huddle!</button>
+    <button @click="track()">Start huddles!</button>
     <button
       @click="
         (e) =>
@@ -316,8 +316,8 @@ const track = useTrack();
 
 <template>
   <div>
-    <button @click="track('Huddle Started', { huddleType: 'voice' })">
-      Start voice huddle!
+    <button @click="track('Huddles Started', { huddlesType: 'voice' })">
+      Start voice huddles!
     </button>
   </div>
 </template>
@@ -344,7 +344,7 @@ const requestFeedback = useRequestFeedback();
     @click="
       (e) =>
         requestFeedback({
-          flagKey: 'huddle-flag',
+          flagKey: 'huddles',
           title: 'How satisfied are you with file uploads?',
           position: {
             type: 'POPOVER',
@@ -452,10 +452,41 @@ import { onMounted } from "vue";
 
 const client = useClient();
 
-onMounted(() => {
-  client.value.on("check", (evt) => {
-    console.log(`The flag ${evt.key} is ${evt.value} for user.`);
-  });
+console.log(client.getContext());
+</script>
+
+<template>
+  <!-- your component content -->
+</template>
+```
+
+### `useClientEvent()`
+
+Vue composable for listening to Reflag client events. This composable automatically handles mounting and unmounting of event listeners.
+
+Available events include:
+
+- `flagsUpdated`: Triggered when flags are updated
+- `track`: Triggered when tracking events are sent
+- `feedback`: Triggered when feedback is sent
+
+```vue
+<script setup lang="ts">
+import { useClientEvent } from "@reflag/vue-sdk";
+
+// Listen to flag updates
+useClientEvent("flagsUpdated", () => {
+  console.log("Flags have been updated");
+});
+
+// Listen to tracking events
+useClientEvent("track", (event) => {
+  console.log("Tracking event:", event);
+});
+
+// Listen to feedback events
+useClientEvent("feedback", (event) => {
+  console.log("Feedback event:", event);
 });
 </script>
 
@@ -464,6 +495,28 @@ onMounted(() => {
 </template>
 ```
 
+You can also provide a specific client instance if needed:
+
+```vue
+<script setup lang="ts">
+import { ReflagClient } from "@reflag/browser-sdk";
+
+const myReflagClient = new ReflagClient();
+
+useClientEvent(
+  "flagsUpdated",
+  () => {
+    console.log("flags updated");
+  },
+  myReflagClient,
+);
+</script>
+
+<template>
+  <!-- your component content -->
+</template>
+```
+
 ### `useIsLoading()`
 
 Returns a `Ref<boolean>` to indicate if Reflag has finished loading.

packages/vue-sdk/dev/plain/App.vue

@@ -8,7 +8,7 @@ import FlagsList from "./components/FlagsList.vue";
 import MissingKeyMessage from "./components/MissingKeyMessage.vue";
 import RequestFeedback from "./components/RequestFeedback.vue";
 import Section from "./components/Section.vue";
-import StartHuddleButton from "./components/StartHuddleButton.vue";
+import StartHuddlesButton from "./components/StartHuddlesButton.vue";
 import Track from "./components/Track.vue";
 
 // Initial context
@@ -53,7 +53,7 @@ const isBootstrapped = computed(() => {
   >
     <template #loading>......loading......</template>
     <h1>Vue SDK (Bootstrapped)</h1>
-    <StartHuddleButton />
+    <StartHuddlesButton />
     <Track />
     <RequestFeedback />
 
@@ -75,7 +75,7 @@ const isBootstrapped = computed(() => {
   >
     <template #loading>......loading......</template>
     <h1>Vue SDK</h1>
-    <StartHuddleButton />
+    <StartHuddlesButton />
     <Track />
     <RequestFeedback />
 

packages/vue-sdk/dev/plain/components/Events.vue

@@ -25,14 +25,14 @@ function trackEvent(evt: TrackEvent) {
 }
 
 onMounted(() => {
-  client.value.on("check", checkEvent);
-  client.value.on("flagsUpdated", featuresUpdatedEvent);
-  client.value.on("track", trackEvent);
+  client.on("check", checkEvent);
+  client.on("flagsUpdated", featuresUpdatedEvent);
+  client.on("track", trackEvent);
 });
 onUnmounted(() => {
-  client.value.off("check", checkEvent);
-  client.value.off("flagsUpdated", featuresUpdatedEvent);
-  client.value.off("track", trackEvent);
+  client.off("check", checkEvent);
+  client.off("flagsUpdated", featuresUpdatedEvent);
+  client.off("track", trackEvent);
 });
 </script>
 

packages/vue-sdk/dev/plain/components/FlagsList.vue

@@ -10,7 +10,7 @@
         style="list-style-type: none; padding: 0"
       >
         <li
-          v-for="[flagKey, feature] in flagEntries"
+          v-for="[flagKey, flag] in flagEntries"
           :key="flagKey"
           style="
             margin-bottom: 10px;
@@ -24,21 +24,19 @@
             <span
               :style="{
                 color:
-                  (feature.isEnabledOverride ?? feature.isEnabled)
-                    ? 'green'
-                    : 'red',
+                  (flag.isEnabledOverride ?? flag.isEnabled) ? 'green' : 'red',
               }"
             >
               {{
-                (feature.isEnabledOverride ?? feature.isEnabled)
+                (flag.isEnabledOverride ?? flag.isEnabled)
                   ? "Enabled"
                   : "Disabled"
               }}
             </span>
 
             <!-- Reset button if override is active -->
             <button
-              v-if="feature.isEnabledOverride !== null"
+              v-if="flag.isEnabledOverride !== null"
               style="margin-left: 10px; padding: 2px 8px; font-size: 12px"
               @click="() => resetOverride(flagKey)"
             >
@@ -48,15 +46,21 @@
             <!-- Toggle checkbox -->
             <input
               type="checkbox"
-              :checked="feature.isEnabledOverride ?? feature.isEnabled"
+              :checked="flag.isEnabledOverride ?? flag.isEnabled"
               style="margin-left: auto"
-              @change="(e) => toggleFlag(flagKey, e.target.checked)"
+              @change="
+                (e) => {
+                  const isChecked = e.target.checked;
+                  const isEnabledOverride = flag.isEnabledOverride !== null;
+                  toggleFlag(flagKey, !isEnabledOverride ? isChecked : null);
+                }
+              "
             />
           </div>
 
           <!-- Show config if available -->
           <div
-            v-if="feature.config && feature.config.key"
+            v-if="flag.config && flag.config.key"
             style="margin-top: 5px; font-size: 12px; color: #666"
           >
             <strong>Config:</strong>
@@ -68,7 +72,7 @@
                 border-radius: 2px;
                 overflow: auto;
               "
-              >{{ JSON.stringify(feature.config.payload, null, 2) }}</pre
+              >{{ JSON.stringify(flag.config.payload, null, 2) }}</pre
             >
           </div>
         </li>
@@ -79,9 +83,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
-import { useClient } from "../../../src";
+import { useClient, useClientEvent } from "../../../src";
 
 import Section from "./Section.vue";
 
@@ -90,38 +94,29 @@ const flagsData = ref({});
 
 // Update flags data when flags are updated
 function updateFlags() {
-  if (client.value) {
-    flagsData.value = client.value.getFlags();
-  }
+  flagsData.value = client.getFlags();
 }
 
 // Initial load
-updateFlags();
+onMounted(() => {
+  updateFlags();
+});
 
-// Listen for flag updates
-if (client.value) {
-  client.value.on("flagsUpdated", updateFlags);
-  onBeforeUnmount(() => {
-    client.value?.off("flagsUpdated", updateFlags);
-  });
-}
+// Update flags data when flags are updated
+useClientEvent("flagsUpdated", updateFlags);
 
 const flagEntries = computed(() => {
   return Object.entries(flagsData.value);
 });
 
 function resetOverride(flagKey: string) {
-  if (client.value) {
-    client.value.getFlag(flagKey).setIsEnabledOverride(null);
-    updateFlags();
-  }
+  client.getFlag(flagKey).setIsEnabledOverride(null);
+  updateFlags();
 }
 
 function toggleFlag(flagKey: string, checked: boolean) {
-  if (client.value) {
-    // Use simplified logic similar to React implementation
-    client.value.getFlag(flagKey).setIsEnabledOverride(checked);
-    updateFlags();
-  }
+  // Use simplified logic similar to React implementation
+  client.getFlag(flagKey).setIsEnabledOverride(checked);
+  updateFlags();
 }
 </script>

…v/plain/components/StartHuddleButton.vue …/plain/components/StartHuddlesButton.vuepackages/vue-sdk/dev/plain/components/StartHuddleButton.vue renamed to packages/vue-sdk/dev/plain/components/StartHuddlesButton.vue packages/vue-sdk/dev/plain/components/StartHuddleButton.vue renamed to packages/vue-sdk/dev/plain/components/StartHuddlesButton.vue

@@ -4,17 +4,17 @@ import { useFlag } from "../../../src";
 import Section from "./Section.vue";
 
 const { isLoading, isEnabled, config, requestFeedback, track } =
-  useFlag("huddle");
+  useFlag("huddles");
 </script>
 <template>
-  <Section title="Huddle">
+  <Section title="Huddles">
     <div style="display: flex; gap: 10px; flex-wrap: wrap">
-      <div>Huddle enabled: {{ isEnabled }}</div>
+      <div>huddles enabled: {{ isEnabled }}</div>
       <div v-if="isLoading">Loading...</div>
       <div v-else style="display: flex; gap: 10px; flex-wrap: wrap">
         <div>
           <button @click="track()">
-            {{ config?.payload?.buttonTitle ?? "Start Huddle (track event)" }}
+            {{ config?.payload?.buttonTitle ?? "Start Huddles (track event)" }}
           </button>
         </div>
         <div>

packages/vue-sdk/dev/plain/components/Track.vue

@@ -8,7 +8,7 @@ const track = useTrack();
 
 <template>
   <Section title="Custom track event">
-    <button @click="track('Huddle Started', { huddleType: 'voice' })">
+    <button @click="track('Huddles Started', { huddlesType: 'voice' })">
       Send custom track event
     </button>
   </Section>