feat: option for prefetching before app mount

Author: Anton Lilleby

README.md

@@ -10,7 +10,11 @@ npm install vue3-app-configuration
 
 ## Get started
 
-To use vue3-app-configuration, you need to initialize it in your main application file, typically main.ts or main.js.
+To integrate vue3-app-configuration into your application, you'll need to initialize it in your main application file, usually named main.ts or main.js. You can either fetch your feature flags before or after the app has mounted, depending on your specific requirements and preferences.
+
+## After the app has mounted (non-blocking)
+
+In this setup, feature flags are reactive and synchronous.
 
 ```ts
 import { createApp } from "vue";
@@ -19,54 +23,49 @@ import { AppConfigurationPlugin } from "vue3-app-configuration";
 
 const app = createApp(App);
 
-app.use(
-  AppConfigurationPlugin,
-  "your-azure-configuration-readonly-connection-string"
-);
+app.use(AppConfigurationPlugin, {
+  connectionString: "your-azure-configuration-readonly-connection-string",
+  cacheEnabled: true, // optional, defaults to true
+  flagsToPrefetchOptimistic: [{ name: "featureFlag1" }], // optional
+});
 
 app.mount("#app");
 ```
 
-Replace 'your-azure-configuration-readonly-connection-string' with your actual connection string. For help with setting up a connection string and using feature flags in Azure, check out this guide: [Feature Flags in Vue with Azure App Configuration](https://www.tvaidyan.com/2022/07/14/feature-flags-in-vue-with-azure-app-configuration).
-
-## Using in Vue Components
-
-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.
+## Before the app has mounted (blocking)
 
-### Reactive Usage
+In this setup, feature flags are also reactive, but fetched before your application mounts.
 
-```html
-<script setup lang="ts">
-  import { useFeatureFlags } from "vue3-app-configuration";
+```ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import { AppConfigurationPluginAsync } from "vue3-app-configuration";
 
-  const { getFeatureFlag } = useFeatureFlags();
+const app = createApp(App);
 
-  const { isFeatureEnabled, featureDescription } = getFeatureFlag(
-    "your-feature-flag-name",
-    "your-label"
-  );
-</script>
+app.use(AppConfigurationPluginAsync, {
+  connectionString: "your-azure-configuration-readonly-connection-string",
+  flagsToPrefetch: [{ name: "featureFlag1" }],
+});
 
-<template>
-  <p v-if="isFeatureEnabled">{{ featureDescription }}</p>
-  <p v-else>This feature is disabled</p>
-</template>
+AppConfigurationPluginAsync.isReady().then(() => {
+  app.mount("#app");
+});
 ```
 
-### Non-Reactive Usage
+Remember to replace 'your-azure-configuration-readonly-connection-string' with your actual connection string. For help with setting up a connection string and using feature flags in Azure, check out this guide: [Feature Flags in Vue with Azure App Configuration](https://www.tvaidyan.com/2022/07/14/feature-flags-in-vue-with-azure-app-configuration).
+
+## Vue component usage
 
 ```html
 <script setup lang="ts">
-  import { onMounted } from "vue";
   import { useFeatureFlags } from "vue3-app-configuration";
 
-  const { getFeatureFlagAsync } = useFeatureFlags();
+  const { getFeatureFlag } = useFeatureFlags();
 
-  onMounted(async () => {
-    const { isFeatureEnabled, featureDescription } = await getFeatureFlagAsync(
-      "your-feature-flag-name",
-      "your-label"
-    );
+  const { isFeatureEnabled, featureDescription } = getFeatureFlag({
+    name: "your-feature-flag-name",
+    label: "your-feature-flag-label", // optional
   });
 </script>
 ```
@@ -75,7 +74,7 @@ You can use the `vue3-app-configuration` plugin in your Vue components in two wa
 
 The AppConfigurationClient instance is exposed at `this.featureFlagsManager.appConfigurationClient`.
 
-Inspired by
+## Inspired by
 
 - [@azure/app-configuration](https://www.npmjs.com/package/@azure/app-configuration)
 - [vue3-application-insights](https://www.npmjs.com/package/vue3-application-insights)

dist/index.d.mts

@@ -1,21 +1,34 @@
 import { AppConfigurationClient } from '@azure/app-configuration';
 import { App, Ref } from 'vue';
 
-type TypeAppConfigurationClient = AppConfigurationClient | null;
-type TypeGetFeatureFlag = (name: string, label?: string) => {
+type FlagOptionsType = {
+    name: string;
+    label?: string;
+};
+type GetFeatureFlagType = (params: FlagOptionsType) => {
     isFeatureEnabled: Ref<boolean>;
     featureDescription: Ref<string>;
 };
-type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<{
-    isFeatureEnabled: boolean;
-    featureDescription: string;
-}>;
 interface IFeatureFlagsManager {
-    appConfigurationClient: TypeAppConfigurationClient;
-    getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagAsync: TypeGetFeatureFlagAsync;
+    appConfigurationClient: AppConfigurationClientType;
+    getFeatureFlag: GetFeatureFlagType;
 }
-declare function AppConfigurationPlugin(app: App, connectionString?: string): void;
+type AppConfigurationClientType = AppConfigurationClient | null;
+declare const AppConfigurationPlugin: {
+    install: (app: App, options: {
+        connectionString?: string;
+        cacheEnabled?: boolean;
+        flagsToPrefetchOptmistic?: FlagOptionsType[];
+    }) => void;
+};
+declare const AppConfigurationPluginAsync: {
+    _installPromise: Promise<void> | null;
+    install: (app: App, options: {
+        connectionString?: string;
+        flagsToPrefetch?: FlagOptionsType[];
+    }) => void;
+    isReady: () => Promise<void>;
+};
 declare const useFeatureFlags: () => IFeatureFlagsManager;
 
-export { AppConfigurationPlugin, useFeatureFlags };
+export { AppConfigurationPlugin, AppConfigurationPluginAsync, useFeatureFlags };

dist/index.d.ts

@@ -1,21 +1,34 @@
 import { AppConfigurationClient } from '@azure/app-configuration';
 import { App, Ref } from 'vue';
 
-type TypeAppConfigurationClient = AppConfigurationClient | null;
-type TypeGetFeatureFlag = (name: string, label?: string) => {
+type FlagOptionsType = {
+    name: string;
+    label?: string;
+};
+type GetFeatureFlagType = (params: FlagOptionsType) => {
     isFeatureEnabled: Ref<boolean>;
     featureDescription: Ref<string>;
 };
-type TypeGetFeatureFlagAsync = (name: string, label?: string) => Promise<{
-    isFeatureEnabled: boolean;
-    featureDescription: string;
-}>;
 interface IFeatureFlagsManager {
-    appConfigurationClient: TypeAppConfigurationClient;
-    getFeatureFlag: TypeGetFeatureFlag;
-    getFeatureFlagAsync: TypeGetFeatureFlagAsync;
+    appConfigurationClient: AppConfigurationClientType;
+    getFeatureFlag: GetFeatureFlagType;
 }
-declare function AppConfigurationPlugin(app: App, connectionString?: string): void;
+type AppConfigurationClientType = AppConfigurationClient | null;
+declare const AppConfigurationPlugin: {
+    install: (app: App, options: {
+        connectionString?: string;
+        cacheEnabled?: boolean;
+        flagsToPrefetchOptmistic?: FlagOptionsType[];
+    }) => void;
+};
+declare const AppConfigurationPluginAsync: {
+    _installPromise: Promise<void> | null;
+    install: (app: App, options: {
+        connectionString?: string;
+        flagsToPrefetch?: FlagOptionsType[];
+    }) => void;
+    isReady: () => Promise<void>;
+};
 declare const useFeatureFlags: () => IFeatureFlagsManager;
 
-export { AppConfigurationPlugin, useFeatureFlags };
+export { AppConfigurationPlugin, AppConfigurationPluginAsync, useFeatureFlags };