@anterprize/fturex 0.0.1

package/dist/types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Configuration for the FtureX Client
+ */
+export interface FtureXConfiguration {
+    /**
+     * Base URL of the feature toggle API
+     */
+    baseUrl: string;
+    /**
+     * Application API key for authentication
+     */
+    appKey: string;
+    /**
+     * Enable sending statistics to the API
+     * @default true
+     */
+    sendStatistics?: boolean;
+}
+/**
+ * Cache options for feature toggles
+ */
+export interface FeatureCacheOptions {
+    /**
+     * Interval in seconds to refresh the feature manifest from the API
+     * @default 30
+     */
+    refreshIntervalSeconds?: number;
+    /**
+     * Enable persisting the manifest to localStorage
+     * @default true
+     */
+    enableLocalStoragePersistence?: boolean;
+    /**
+     * Key used for localStorage persistence
+     * @default 'feature-toggle-cache'
+     */
+    localStorageKey?: string;
+}
+/**
+ * Context properties for feature evaluation
+ */
+export interface ContextProperties {
+    [key: string]: string;
+}
+/**
+ * A single condition rule as returned by the server manifest
+ */
+export interface ConditionRule {
+    contextProperty: string;
+    operator: string;
+    value?: string;
+    conditionGroupValues?: string[];
+    /**
+     * Logical operator connecting this rule to the NEXT one.
+     * 'AND' (default when absent) — both this and the next rule must match.
+     * 'OR' — either this AND-segment or the next must match.
+     * Ignored on the last rule in the array.
+     */
+    logicAfter?: 'AND' | 'OR';
+}
+/**
+ * A single feature entry in the manifest
+ */
+export interface ManifestEntry {
+    name: string;
+    enabled: boolean;
+    conditions: ConditionRule[];
+}
+/**
+ * Full feature manifest returned by GET /feature/manifest
+ */
+export interface FeatureManifest {
+    features: ManifestEntry[];
+}
+/**
+ * Statistics for a feature
+ */
+export interface FeatureStatistics {
+    featureName: string;
+    hitCount: number;
+    enabledCount: number;
+    disabledCount: number;
+    lastAccessed: Date;
+}
+/**
+ * Statistics report sent to the API
+ */
+export interface StatisticsReport {
+    appKey: string;
+    features: FeatureStatistics[];
+    reportTimestamp: Date;
+}
+/**
+ * Describes how the flag value was determined.
+ * Follows OTel semantic conventions for feature flags.
+ */
+export type EvaluationReason = 'static' | 'targeting_match' | 'default' | 'error' | 'stale' | 'disabled';
+/**
+ * Context passed to hooks for each flag evaluation.
+ */
+export interface HookContext {
+    flagKey: string;
+    evaluationContext?: ContextProperties;
+    defaultValue: boolean;
+}
+/**
+ * Result of a feature flag evaluation, passed to hooks.
+ */
+export interface EvaluationResult {
+    value: boolean;
+    reason: EvaluationReason;
+}
+/**
+ * Hook interface for observing feature flag evaluations.
+ * Implement this to add custom telemetry, logging, or analytics.
+ * All methods are optional.
+ */
+export interface FtureXHook {
+    before?(context: HookContext): void | Promise<void>;
+    after?(context: HookContext, result: EvaluationResult): void | Promise<void>;
+    error?(context: HookContext, error: unknown): void | Promise<void>;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/vue/index.d.ts

@@ -0,0 +1 @@
+export { FeatureToggleClientKey, useFeatureToggle, useFeatureToggles } from './useFeatureToggle.js';

package/dist/vue/index.js

@@ -0,0 +1,2 @@
+export { FeatureToggleClientKey, useFeatureToggle, useFeatureToggles } from './useFeatureToggle.js';
+// FeatureToggle.vue SFC måste importeras direkt: import FeatureToggle from '@anterprize/fturex/vue/FeatureToggle.vue'

package/dist/vue/useFeatureToggle.d.ts

@@ -0,0 +1,32 @@
+import { Ref, InjectionKey } from 'vue';
+import { FtureXClient } from '../FtureXClient.js';
+import { ContextProperties } from '../types.js';
+export declare const FeatureToggleClientKey: InjectionKey<FtureXClient>;
+/**
+ * Vue composable for checking feature toggles.
+ * Re-evaluates automatically whenever the client refreshes its manifest,
+ * so the UI updates without a page reload.
+ *
+ * @param featureName - Name of the feature to check
+ * @param context - Optional context properties for the feature check
+ * @returns Reactive object with isEnabled, loading, and error states
+ */
+export declare function useFeatureToggle(featureName: string, context?: ContextProperties): {
+    isEnabled: Ref<boolean, boolean>;
+    loading: Ref<boolean, boolean>;
+    error: Ref<Error | null, Error | null>;
+    refresh: () => Promise<void>;
+};
+/**
+ * Vue composable for checking multiple feature toggles at once.
+ * Re-evaluates automatically whenever the client refreshes its manifest.
+ *
+ * @param featureNames - Array of feature names to check
+ * @returns Reactive object with features map, loading state, and error
+ */
+export declare function useFeatureToggles(featureNames: string[]): {
+    features: Ref<Record<string, boolean>, Record<string, boolean>>;
+    loading: Ref<boolean, boolean>;
+    error: Ref<Error | null, Error | null>;
+    refresh: () => Promise<void>;
+};

package/dist/vue/useFeatureToggle.js

@@ -0,0 +1,104 @@
+import { ref, inject, onMounted, onUnmounted } from 'vue';
+export const FeatureToggleClientKey = Symbol('FeatureToggleClient');
+/**
+ * Vue composable for checking feature toggles.
+ * Re-evaluates automatically whenever the client refreshes its manifest,
+ * so the UI updates without a page reload.
+ *
+ * @param featureName - Name of the feature to check
+ * @param context - Optional context properties for the feature check
+ * @returns Reactive object with isEnabled, loading, and error states
+ */
+export function useFeatureToggle(featureName, context) {
+    const client = inject(FeatureToggleClientKey);
+    const isEnabled = ref(false);
+    const loading = ref(true);
+    const error = ref(null);
+    const evaluate = async () => {
+        if (!client) {
+            error.value = new Error('FeatureToggleClient not provided. Use app.provide() to provide the client.');
+            loading.value = false;
+            return;
+        }
+        try {
+            loading.value = true;
+            const enabled = context
+                ? await client.isEnabledWithContext(featureName, context)
+                : await client.isEnabled(featureName);
+            isEnabled.value = enabled;
+            error.value = null;
+        }
+        catch (err) {
+            error.value = err;
+            isEnabled.value = false;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    onMounted(() => {
+        client?.on('update', evaluate);
+        client?.on('ready', evaluate);
+        evaluate();
+    });
+    onUnmounted(() => {
+        client?.off('update', evaluate);
+        client?.off('ready', evaluate);
+    });
+    return {
+        isEnabled,
+        loading,
+        error,
+        refresh: evaluate
+    };
+}
+/**
+ * Vue composable for checking multiple feature toggles at once.
+ * Re-evaluates automatically whenever the client refreshes its manifest.
+ *
+ * @param featureNames - Array of feature names to check
+ * @returns Reactive object with features map, loading state, and error
+ */
+export function useFeatureToggles(featureNames) {
+    const client = inject(FeatureToggleClientKey);
+    const features = ref({});
+    const loading = ref(true);
+    const error = ref(null);
+    const evaluate = async () => {
+        if (!client) {
+            error.value = new Error('FeatureToggleClient not provided. Use app.provide() to provide the client.');
+            loading.value = false;
+            return;
+        }
+        try {
+            loading.value = true;
+            const results = {};
+            await Promise.all(featureNames.map(async (name) => {
+                results[name] = await client.isEnabled(name);
+            }));
+            features.value = results;
+            error.value = null;
+        }
+        catch (err) {
+            error.value = err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    onMounted(() => {
+        client?.on('update', evaluate);
+        client?.on('ready', evaluate);
+        evaluate();
+    });
+    onUnmounted(() => {
+        client?.off('update', evaluate);
+        client?.off('ready', evaluate);
+    });
+    return {
+        features,
+        loading,
+        error,
+        refresh: evaluate
+    };
+}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@anterprize/fturex",
+  "version": "0.0.1",
+  "description": "Feature toggle client for React, Vue, Angular and Svelte applications",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue/index.js",
+      "types": "./dist/vue/index.d.ts"
+    },
+    "./vue/FeatureToggle.vue": "./src/vue/FeatureToggle.vue",
+    "./angular": {
+      "import": "./dist/angular/index.js",
+      "types": "./dist/angular/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./dist/svelte/index.js",
+      "types": "./dist/svelte/index.d.ts"
+    },
+    "./opentelemetry": {
+      "import": "./dist/opentelemetry/index.js",
+      "types": "./dist/opentelemetry/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "jest",
+    "lint": "eslint src/**/*.ts"
+  },
+  "keywords": [
+    "feature-toggle",
+    "feature-flag",
+    "feature-flags",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "typescript"
+  ],
+  "author": "Anterprize",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": ">=15.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "svelte": ">=4.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/core": "^17.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.5.2",
+    "@types/react": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "react": "^18.0.0",
+    "rxjs": "^7.8.0",
+    "svelte": "^5.55.1",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.0.0",
+    "vue": "^3.5.32"
+  },
+  "files": [
+    "dist",
+    "src/vue/FeatureToggle.vue",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Anterprize/fturex-sdk"
+  }
+}

package/src/vue/FeatureToggle.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="loading">
+    <slot name="loading"></slot>
+  </div>
+  <div v-else-if="error">
+    <slot name="error" :error="error"></slot>
+  </div>
+  <div v-else>
+    <slot v-if="isEnabled"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFeatureToggle } from "./useFeatureToggle.js";
+import { ContextProperties } from "../types.js";
+
+interface Props {
+  featureName: string;
+  context?: ContextProperties;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const { isEnabled, loading, error } = useFeatureToggle(
+  props.featureName,
+  props.context,
+);
+</script>