feat: Add reactive flag

Author: Anton Lilleby

README.md

@@ -4,7 +4,7 @@ Vue 3 plugin that provides an easy way to manage feature flags in your Vue appli
 
 ## Installation
 
-```console
+```
 npm install vue3-app-configuration
 ```
 
@@ -15,12 +15,12 @@ To use vue3-app-configuration, you need to initialize it in your main Vue applic
 ```ts
 import { createApp } from "vue";
 import App from "./App.vue";
-import AppConfigurationPlguin from "vue3-app-configuration";
+import { AppConfigurationPlugin } from "vue3-app-configuration";
 
 const app = createApp(App);
 
 app.use(
-  AppConfigurationPlguin,
+  AppConfigurationPlugin,
   "your-azure-configuration-readonly-connection-string"
 );
 
@@ -31,28 +31,54 @@ Replace 'your-azure-configuration-readonly-connection-string' with your actual c
 
 ## Using in Vue Components
 
-Inject the feature flags manager and use it to check feature flags:
+The plugin provides two methods: getFeatureFlag for a non-reactive, one-time check, and getFeatureFlagReactive for a reactive, continuously updated check.
+
+### Using getFeatureFlagReactive
 
-```js
+For a ref check of the feature flag:
+
+```html
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue';
-import { FeatureFlagsManagerKey } from 'vue3-app-configuration';
+  import { inject } from "vue";
+  import { FeatureFlagsManagerKey } from "vue3-app-configuration";
 
-const isFeatureEnabled = ref(false);
-const featureFlagsManager = inject(FeatureFlagsManagerKey);
+  const { getFeatureFlag } = inject(FeatureFlagsManagerKey);
 
-onMounted(async () => {
-  if (featureFlagsManager) {
-    isFeatureEnabled.value = await featureFlagsManager.getFeatureFlag('your-feature-flag-name');
-  }
-});
+  const isFeatureEnabled = getFeatureFlagRef(
+    "your-feature-flag-name",
+    "your-label"
+  );
 </script>
 
 <template>
   <p v-if="isFeatureEnabled">This feature is enabled!</p>
   <p v-else>This feature is disabled.</p>
 </template>
+```
+
+### Using getFeatureFlag
+
+For a one-time check of the feature flag:
+
+```html
+<script setup lang="ts">
+  import { inject, onMounted } from "vue";
+  import { FeatureFlagsManagerKey } from "vue3-app-configuration";
+
+  const { getFeatureFlag } = inject(FeatureFlagsManagerKey);
+  const isFeatureEnabled = ref(false);
+
+  onMounted(async () => {
+    isFeatureEnabled.value = await getFeatureFlag(
+      "your-feature-flag-name', 'your-label"
+    );
+  });
 </script>
+
+<template>
+  <p v-if="isFeatureEnabled">This feature is enabled!</p>
+  <p v-else>This feature is disabled.</p>
+</template>
 ```
 
 Inspired by [@azure/app-configuration](https://www.npmjs.com/package/@azure/app-configuration), [vue3-application-insights](https://www.npmjs.com/package/vue3-application-insights) and

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-app-configuration",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A Vue 3 plugin for integrating Azure App Configuration, including feature flags management.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package.json

@@ -1,15 +1,28 @@
-import { App, InjectionKey } from "vue";
 import {
   AppConfigurationClient,
   featureFlagPrefix,
   isFeatureFlag,
   parseFeatureFlag,
 } from "@azure/app-configuration";
+import { ref, type App, type InjectionKey, type Ref } from "vue";
 
 interface FeatureFlagsManager {
   getFeatureFlag(name: string, label?: string): Promise<boolean>;
+  getFeatureFlagRef(name: string, label?: string): Ref<boolean>;
 }
 
+type GetFeatureFlagFunction = (
+  name: string,
+  label?: string
+) => Promise<boolean>;
+
+type GetFeatureFlagRefFunction = (name: string, label?: string) => Ref<boolean>;
+
+const FeatureFlagsManagerKey: InjectionKey<{
+  getFeatureFlag: GetFeatureFlagFunction;
+  getFeatureFlagRef: GetFeatureFlagRefFunction;
+}> = Symbol("FeatureFlagsManager");
+
 const featureFlagsManager = (
   connectionString?: string
 ): FeatureFlagsManager => {
@@ -19,39 +32,53 @@ const featureFlagsManager = (
     client = new AppConfigurationClient(connectionString);
   }
 
-  return {
-    async getFeatureFlag(name: string, label?: string) {
-      if (!client) {
-        console.warn(
-          "[App Configuration Plugin] AppConfigurationClient is not initialized."
-        );
-        return false;
-      }
-      try {
-        const response = await client.getConfigurationSetting({
-          key: `${featureFlagPrefix}${name}`,
-          label,
-        });
+  const getFeatureFlag = async (
+    name: string,
+    label?: string
+  ): Promise<boolean> => {
+    if (!client) return false;
+    try {
+      const response = await client.getConfigurationSetting({
+        key: `${featureFlagPrefix}${name}`,
+        label,
+      });
+      if (!isFeatureFlag(response)) return false;
+      return parseFeatureFlag(response).value.enabled;
+    } catch (error) {
+      console.error(
+        "[App Configuration Plugin] Error retrieving feature flag.",
+        error
+      );
+      return false;
+    }
+  };
 
+  const getFeatureFlagRef = (name: string, label?: string): Ref<boolean> => {
+    const isEnabled = ref(false);
+
+    if (!client) return isEnabled;
+
+    client
+      .getConfigurationSetting({ key: `${featureFlagPrefix}${name}`, label })
+      .then((response) => {
         if (!isFeatureFlag(response)) return false;
-        return parseFeatureFlag(response).value.enabled;
-      } catch (error) {
+        isEnabled.value = parseFeatureFlag(response).value.enabled;
+      })
+      .catch((error) => {
         console.error(
-          "[App Configuration Plugin] Error fetching feature flag.",
+          "[App Configuration Plugin] Error retrieving feature flag",
           error
         );
-        return false;
-      }
-    },
+      });
+
+    return isEnabled;
   };
-};
 
-const FeatureFlagsManagerKey: InjectionKey<FeatureFlagsManager> = Symbol(
-  "FeatureFlagsManager"
-);
+  return { getFeatureFlag, getFeatureFlagRef };
+};
 
 function AppConfigurationPlugin(app: App, connectionString?: string) {
   app.provide(FeatureFlagsManagerKey, featureFlagsManager(connectionString));
 }
 
-export { FeatureFlagsManagerKey, AppConfigurationPlugin };
+export { AppConfigurationPlugin, FeatureFlagsManagerKey };