feat: expose appConfigurationClient instance globally

Author: Anton Lilleby

README.md

@@ -33,44 +33,48 @@ Replace 'your-azure-configuration-readonly-connection-string' with your actual c
 
 You can use the `vue3-app-configuration` plugin in your Vue components in two ways: using an async non-reactive method or a non-blocking reactive method.
 
-### Non-Reactive Usage
+### Reactive Usage
 
 ```html
 <script setup lang="ts">
-  import { onMounted, ref } from "vue";
   import { useFeatureFlags } from "vue3-app-configuration";
 
   const { getFeatureFlag } = useFeatureFlags();
 
-  onMounted(async () => {
-    const isFeatureEnabled = await getFeatureFlag(
-      "your-feature-flag-name",
-      "your-label"
-    );
-  });
+  const isFeatureEnabled = 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>
 ```
 
-### Reactive Usage
+### Non-Reactive Usage
 
 ```html
 <script setup lang="ts">
+  import { onMounted } from "vue";
   import { useFeatureFlags } from "vue3-app-configuration";
 
-  const { getFeatureFlagRef } = useFeatureFlags();
+  const { getFeatureFlagAsync } = useFeatureFlags();
 
-  const isFeatureEnabled = getFeatureFlagRef(
-    "your-feature-flag-name",
-    "your-label"
-  );
+  onMounted(async () => {
+    const isFeatureEnabled = await getFeatureFlagAsync(
+      "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>
 ```
 
+## AppConfigurationClient
+
+The AppConfigurationClient instance is exposed at `this.featureFlagsManager.appConfigurationClient`.
+
 Inspired by
 
 - [@azure/app-configuration](https://www.npmjs.com/package/@azure/app-configuration)

dist/index.d.mts

@@ -1,16 +1,15 @@
-import { InjectionKey, App, Ref } from 'vue';
+import { AppConfigurationClient } from '@azure/app-configuration';
+import { App, Ref } from 'vue';
 
-type TypeGetFeatureFlag = (name: string, label?: string) => Promise<boolean>;
-type TypeGetFeatureFlagRef = (name: string, label?: string) => Ref<boolean>;
+type TypeAppConfigurationClient = AppConfigurationClient | null;
+type TypeGetFeatureFlag = (name: string, label?: string) => Ref<boolean>;
+type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<boolean>;
 interface IFeatureFlagsManager {
+    appConfigurationClient: TypeAppConfigurationClient;
     getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagRef: TypeGetFeatureFlagRef;
+    getFeatureFlagAsync: TypeGetFeatureFlagAsync;
 }
-declare const FeatureFlagsManagerKey: InjectionKey<{
-    getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagRef: TypeGetFeatureFlagRef;
-}>;
 declare function AppConfigurationPlugin(app: App, connectionString?: string): void;
 declare const useFeatureFlags: () => IFeatureFlagsManager;
 
-export { AppConfigurationPlugin, FeatureFlagsManagerKey, useFeatureFlags };
+export { AppConfigurationPlugin, useFeatureFlags };

dist/index.d.ts

@@ -1,16 +1,15 @@
-import { InjectionKey, App, Ref } from 'vue';
+import { AppConfigurationClient } from '@azure/app-configuration';
+import { App, Ref } from 'vue';
 
-type TypeGetFeatureFlag = (name: string, label?: string) => Promise<boolean>;
-type TypeGetFeatureFlagRef = (name: string, label?: string) => Ref<boolean>;
+type TypeAppConfigurationClient = AppConfigurationClient | null;
+type TypeGetFeatureFlag = (name: string, label?: string) => Ref<boolean>;
+type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<boolean>;
 interface IFeatureFlagsManager {
+    appConfigurationClient: TypeAppConfigurationClient;
     getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagRef: TypeGetFeatureFlagRef;
+    getFeatureFlagAsync: TypeGetFeatureFlagAsync;
 }
-declare const FeatureFlagsManagerKey: InjectionKey<{
-    getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagRef: TypeGetFeatureFlagRef;
-}>;
 declare function AppConfigurationPlugin(app: App, connectionString?: string): void;
 declare const useFeatureFlags: () => IFeatureFlagsManager;
 
-export { AppConfigurationPlugin, FeatureFlagsManagerKey, useFeatureFlags };
+export { AppConfigurationPlugin, useFeatureFlags };

dist/index.js

@@ -27,59 +27,61 @@ import {
   parseFeatureFlag
 } from "@azure/app-configuration";
 import { inject, ref } from "vue";
-var FeatureFlagsManagerKey = Symbol("FeatureFlagsManager");
+var FeatureFlagsManagerKey = Symbol(
+  "FeatureFlagsManager"
+);
 var featureFlagsManager = (connectionString) => {
-  let client = null;
+  let appConfigurationClient = null;
   if (connectionString) {
-    client = new AppConfigurationClient(connectionString);
+    appConfigurationClient = new AppConfigurationClient(connectionString);
   }
-  const getFeatureFlag = (name, label) => __async(void 0, null, function* () {
-    if (!client)
-      return false;
+  const getFeatureFlag = (name, label) => {
+    const isEnabled = ref(false);
+    if (!appConfigurationClient)
+      return isEnabled;
     try {
-      const response = yield client.getConfigurationSetting({
+      appConfigurationClient.getConfigurationSetting({
         key: `${featureFlagPrefix}${name}`,
         label
+      }).then((response) => {
+        if (!isFeatureFlag(response))
+          return isEnabled;
+        isEnabled.value = parseFeatureFlag(response).value.enabled;
+        return isEnabled;
       });
-      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, label) => {
-    const isEnabled = ref(false);
-    if (!client)
-      return isEnabled;
+    return isEnabled;
+  };
+  const getFeatureFlagAsync = (name, label) => __async(void 0, null, function* () {
+    if (!appConfigurationClient)
+      return false;
     try {
-      client.getConfigurationSetting({
+      const response = yield appConfigurationClient.getConfigurationSetting({
         key: `${featureFlagPrefix}${name}`,
         label
-      }).then((response) => {
-        if (!isFeatureFlag(response))
-          return isEnabled;
-        isEnabled.value = parseFeatureFlag(response).value.enabled;
-        return isEnabled;
       });
+      if (!isFeatureFlag(response))
+        return false;
+      return parseFeatureFlag(response).value.enabled;
     } catch (error) {
       console.error(
         "[App Configuration Plugin] Error retrieving feature flag.",
         error
       );
+      return false;
     }
-    return isEnabled;
-  };
-  return { getFeatureFlag, getFeatureFlagRef };
+  });
+  return { appConfigurationClient, getFeatureFlag, getFeatureFlagAsync };
 };
 function AppConfigurationPlugin(app, connectionString) {
   const manager = featureFlagsManager(connectionString);
   app.provide(FeatureFlagsManagerKey, manager);
-  app.config.globalProperties.$featureFlags = manager;
+  app.config.globalProperties.featureFlagsManager = manager;
 }
 var useFeatureFlags = () => {
   const featureFlagsManager2 = inject(
@@ -94,7 +96,6 @@ var useFeatureFlags = () => {
 };
 export {
   AppConfigurationPlugin,
-  FeatureFlagsManagerKey,
   useFeatureFlags
 };
 //# sourceMappingURL=index.mjs.map