Introduce vue hooks

README.md

@@ -180,3 +180,45 @@ export default function Page() {
     );
 }
 ```
+
+## Use with Vue.js
+
+This library exposes a hook to use this library in a reactive manner with
+Vue.js. The below snippets give an example as to how you _could_ implement this
+library. It might differ for your usecase.
+
+#### `feature-flags.ts`
+
+This file contains all configuration for the feature flags
+
+```ts
+import { FeatureFlags } from "@theopensource-company/feature-flags";
+import { featureFlagsHookFactory } from "@theopensource-company/feature-flags/vue";
+
+export const featureFlags = new FeatureFlags({
+    schema: {
+        test: {
+            options: [true, false],
+        },
+    },
+});
+
+export const useFeatureFlags = featureFlagsHookFactory(featureFlags);
+```
+
+#### `SomePage.vue`
+
+Some page which needs feature flags
+
+```html
+<script>
+    import { useFeatureFlags } from 'feature-flags.ts';
+    const [flags, setFlags] = useFeatureFlags();
+</script>
+
+<template>
+    <button v-on:click="setFlags({ test: !flags.test })">
+        {{ flags.toString() }}
+    </button>
+</template>
+```

compile.ts

@@ -5,10 +5,17 @@ import project from "./project.json" assert { type: "json" };
 await emptyDir("./npm");
 
 await build({
-    entryPoints: ["./mod.ts", {
-        name: "./react",
-        path: "react.ts",
-    }],
+    entryPoints: [
+        "./mod.ts",
+        {
+            name: "./react",
+            path: "react.ts",
+        },
+        {
+            name: "./vue",
+            path: "vue.ts",
+        },
+    ],
     outDir: "./npm",
     shims: {
         // see JS docs for overview and more options

vue.ts

@@ -0,0 +1,31 @@
+import { onUnmounted, shallowRef } from "npm:vue";
+import { FeatureFlags, TFeatureFlags } from "./mod.ts";
+
+// deno-lint-ignore no-explicit-any
+type AnyFeatureFlags = FeatureFlags<any, any>;
+
+export function featureFlagsHookFactory<T extends AnyFeatureFlags>(
+    featureFlags: T,
+) {
+    return () => {
+        const state = shallowRef({ ...featureFlags.store });
+
+        const setState = (
+            updates: Partial<TFeatureFlags<(typeof featureFlags)["schema"]>>,
+        ) => {
+            const flags = Object.keys(updates) as (keyof typeof updates)[];
+            flags.forEach((flag) => {
+                const v = updates[flag];
+                if (FeatureFlags.isValidValue(v)) {
+                    featureFlags.set(flag, v);
+                }
+            });
+        };
+
+        const listener = () => state.value = { ...featureFlags.store };
+        featureFlags.subscribe(listener);
+        onUnmounted(() => featureFlags.unsubscribe(listener));
+
+        return [state, setState] as const;
+    };
+}