flipflag-sdk 1.1.0

package/dist/vue.js

@@ -0,0 +1,718 @@
+'use strict';
+
+var vue = require('vue');
+
+class FlipFlagSDK {
+    constructor(config) {
+        this.cache = new Map();
+        this.defaultBaseUrl = "https://app.flipflag.ru/api";
+        this.stateListeners = new Set();
+        this.config = {
+            baseUrl: this.defaultBaseUrl,
+            cacheTimeout: 30000, // 30 seconds
+            retryAttempts: 3,
+            retryDelay: 1000, // 1 second
+            pullInterval: 60000, // 1 minute
+            ...config,
+        };
+        this.state = {
+            flags: {},
+            abTests: {},
+            lastFetch: null,
+            isLoading: false,
+            error: null,
+        };
+        // Start automatic pulling if pullInterval is set
+        if (this.config.pullInterval && this.config.pullInterval > 0) {
+            this.startPulling();
+        }
+    }
+    /**
+     * Identify user for A/B testing and user-specific flags
+     */
+    identifyUser(options) {
+        this.config.userId = options.userId;
+        // Clear A/B test cache since user changed
+        this.clearABTestCache();
+        // If we have a user, we might want to refresh immediately
+        if (this.config.pullInterval && this.config.pullInterval > 0) {
+            this.pullData();
+        }
+    }
+    /**
+     * Get current SDK state
+     */
+    getState() {
+        return { ...this.state };
+    }
+    /**
+     * Subscribe to state changes
+     */
+    subscribe(callback) {
+        this.stateListeners.add(callback);
+        // Return unsubscribe function
+        return () => {
+            this.stateListeners.delete(callback);
+        };
+    }
+    /**
+     * Get a feature flag value from current state
+     */
+    getFlagValue(flagName) {
+        var _a;
+        return (_a = this.state.flags[flagName]) !== null && _a !== void 0 ? _a : false;
+    }
+    /**
+     * Get A/B test variant from current state
+     */
+    getABTestVariant(testName) {
+        return this.state.abTests[testName] || null;
+    }
+    /**
+     * Start automatic data pulling
+     */
+    startPulling() {
+        if (this.pullIntervalId) {
+            clearInterval(this.pullIntervalId);
+        }
+        this.pullIntervalId = setInterval(() => {
+            this.pullData();
+        }, this.config.pullInterval);
+        // Initial pull
+        this.pullData();
+    }
+    /**
+     * Stop automatic data pulling
+     */
+    stopPulling() {
+        if (this.pullIntervalId) {
+            clearInterval(this.pullIntervalId);
+            this.pullIntervalId = undefined;
+        }
+    }
+    /**
+     * Pull fresh data from API
+     */
+    async pullData() {
+        try {
+            this.updateState({ isLoading: true, error: null });
+            // Pull flags
+            const flagsResponse = await this.fetchAllFlags();
+            // Pull A/B tests if user is identified
+            let abTestsResponse = null;
+            if (this.config.userId) {
+                try {
+                    abTestsResponse = await this.fetchAllABTests();
+                }
+                catch (error) {
+                    console.warn("Failed to fetch A/B tests:", error);
+                }
+            }
+            const newState = {
+                flags: (flagsResponse === null || flagsResponse === void 0 ? void 0 : flagsResponse.flags) || {},
+                lastFetch: new Date(),
+                isLoading: false,
+                error: null,
+            };
+            if (abTestsResponse) {
+                const abTestsMap = {};
+                abTestsResponse.abTests.forEach((test) => {
+                    // For each test, get the variant for current user
+                    if (this.config.userId) {
+                        // This would normally fetch the variant, but for demo we'll simulate
+                        abTestsMap[test.name] = {
+                            testName: test.name,
+                            testId: test.id,
+                            variantId: "variant_a", // Default variant
+                            variant: test.variants[0] || {
+                                id: "default",
+                                name: "Default",
+                                value: null,
+                                weight: 100,
+                            },
+                            timestamp: new Date().toISOString(),
+                        };
+                    }
+                });
+                newState.abTests = abTestsMap;
+            }
+            this.updateState(newState);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            this.updateState({
+                isLoading: false,
+                error: errorMessage,
+            });
+            console.error("Failed to pull data:", error);
+        }
+    }
+    /**
+     * Update state and notify listeners
+     */
+    updateState(newState) {
+        this.state = { ...this.state, ...newState };
+        // Notify all listeners
+        this.stateListeners.forEach((callback) => {
+            try {
+                callback(this.state);
+            }
+            catch (error) {
+                console.error("State listener error:", error);
+            }
+        });
+    }
+    /**
+     * Fetch all flags from API
+     */
+    async fetchAllFlags() {
+        try {
+            return await this.makeRequest(`/sdk/flags/${this.config.projectId}`);
+        }
+        catch (error) {
+            console.error("Failed to fetch flags:", error);
+            return null;
+        }
+    }
+    /**
+     * Fetch all A/B tests from API
+     */
+    async fetchAllABTests() {
+        try {
+            return await this.makeRequest(`/sdk/ab-tests/${this.config.projectId}`);
+        }
+        catch (error) {
+            console.error("Failed to fetch A/B tests:", error);
+            return null;
+        }
+    }
+    /**
+     * Clear A/B test cache
+     */
+    clearABTestCache() {
+        const abTestKeys = Array.from(this.cache.keys()).filter((key) => key.startsWith("abtest:"));
+        abTestKeys.forEach((key) => this.cache.delete(key));
+    }
+    /**
+     * Get all feature flags for a project
+     */
+    async getFlags(projectId = this.config.projectId, environment) {
+        const cacheKey = `flags:${projectId}:${environment || "all"}`;
+        const cached = this.getFromCache(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const url = new URL(`/sdk/flags/${projectId}`, this.config.baseUrl);
+        if (environment || this.config.environment) {
+            url.searchParams.set("environment", environment || this.config.environment);
+        }
+        const response = await this.makeRequest(url.toString());
+        this.setCache(cacheKey, response, this.config.cacheTimeout);
+        return response;
+    }
+    /**
+     * Get a specific feature flag value
+     */
+    async getFlag(flagName, projectId = this.config.projectId, environment) {
+        var _a;
+        // If we have the flag in state, return it immediately
+        if (this.state.flags[flagName] !== undefined) {
+            return {
+                projectId: this.config.projectId,
+                flagName,
+                environment: this.config.environment || "all",
+                value: this.state.flags[flagName],
+                timestamp: ((_a = this.state.lastFetch) === null || _a === void 0 ? void 0 : _a.toISOString()) || new Date().toISOString(),
+            };
+        }
+        const cacheKey = `flag:${projectId}:${flagName}:${environment || "all"}`;
+        const cached = this.getFromCache(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const url = new URL(`/sdk/flags/${projectId}/${flagName}`, this.config.baseUrl);
+        if (environment || this.config.environment) {
+            url.searchParams.set("environment", environment || this.config.environment);
+        }
+        const response = await this.makeRequest(url.toString());
+        this.setCache(cacheKey, response, this.config.cacheTimeout);
+        return response;
+    }
+    /**
+     * Get A/B test variant for a user
+     */
+    async getAbTestVariant(testName, userId, projectId = this.config.projectId) {
+        // If we have the A/B test in state, return it immediately
+        const stateVariant = this.state.abTests[testName];
+        if (stateVariant && stateVariant.testName === testName) {
+            return stateVariant;
+        }
+        const cacheKey = `abtest:${projectId}:${testName}:${userId}`;
+        const cached = this.getFromCache(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const url = `${this.config.baseUrl}/sdk/ab-test/${projectId}/${testName}`;
+        const response = await this.makeRequest(url, {
+            headers: {
+                "X-User-ID": userId,
+            },
+        });
+        // Cache A/B test variants for longer since they shouldn't change frequently for a user
+        this.setCache(cacheKey, response, this.config.cacheTimeout * 10);
+        return response;
+    }
+    /**
+     * Record an A/B test event
+     */
+    async recordAbTestEvent(testName, userId, event, variantId, eventData, projectId = this.config.projectId) {
+        const url = `${this.config.baseUrl}/sdk/ab-test/${projectId}/${testName}/event`;
+        return this.makeRequest(url, {
+            method: "POST",
+            headers: {
+                "X-User-ID": userId,
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                event,
+                variantId,
+                eventData,
+            }),
+        });
+    }
+    /**
+     * Get all A/B tests for a project
+     */
+    async getAbTests(projectId = this.config.projectId) {
+        const cacheKey = `abtests:${projectId}`;
+        const cached = this.getFromCache(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const url = `${this.config.baseUrl}/sdk/ab-tests/${projectId}`;
+        const response = await this.makeRequest(url);
+        this.setCache(cacheKey, response, this.config.cacheTimeout);
+        return response;
+    }
+    /**
+     * Clear cache for specific key or all cache
+     */
+    clearCache(key) {
+        if (key) {
+            this.cache.delete(key);
+        }
+        else {
+            this.cache.clear();
+        }
+    }
+    /**
+     * Update configuration
+     */
+    updateConfig(newConfig) {
+        this.config = { ...this.config, ...newConfig };
+    }
+    async makeRequest(url, options = {}) {
+        const headers = {
+            "X-API-Key": this.config.apiKey,
+            "Content-Type": "application/json",
+            ...options.headers,
+        };
+        const requestOptions = {
+            ...options,
+            headers,
+        };
+        return this.makeRequestWithRetry(url, requestOptions);
+    }
+    async makeRequestWithRetry(url, options, retryOptions = {
+        attempts: this.config.retryAttempts,
+        delay: this.config.retryDelay,
+        backoff: 2,
+    }) {
+        let lastError;
+        for (let attempt = 1; attempt <= retryOptions.attempts; attempt++) {
+            try {
+                const response = await fetch(url, options);
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(`HTTP ${response.status}: ${errorData.error || response.statusText}`);
+                }
+                return await response.json();
+            }
+            catch (error) {
+                lastError = error;
+                // Don't retry on client errors (4xx) except 429 (rate limit)
+                if (error instanceof Error && error.message.includes("HTTP 4")) {
+                    if (!error.message.includes("HTTP 429")) {
+                        throw error;
+                    }
+                }
+                if (attempt < retryOptions.attempts) {
+                    const delay = retryOptions.delay * Math.pow(retryOptions.backoff, attempt - 1);
+                    await new Promise((resolve) => setTimeout(resolve, delay));
+                }
+            }
+        }
+        throw lastError;
+    }
+    getFromCache(key) {
+        const entry = this.cache.get(key);
+        if (!entry) {
+            return null;
+        }
+        if (Date.now() - entry.timestamp > entry.ttl) {
+            this.cache.delete(key);
+            return null;
+        }
+        return entry.data;
+    }
+    setCache(key, data, ttl) {
+        this.cache.set(key, {
+            data,
+            timestamp: Date.now(),
+            ttl,
+        });
+    }
+    /**
+     * Cleanup method - should be called when SDK is no longer needed
+     */
+    destroy() {
+        this.stopPulling();
+        this.stateListeners.clear();
+        this.cache.clear();
+    }
+}
+
+const FLIPFLAG_KEY = Symbol("flipflag");
+/**
+ * Create Vue plugin for FlipFlag SDK
+ */
+function createFlipFlagPlugin() {
+    return {
+        install(app, config) {
+            const sdk = new FlipFlagSDK(config);
+            // Provide SDK to all components
+            app.provide(FLIPFLAG_KEY, sdk);
+            // Add to global properties for Options API
+            app.config.globalProperties.$flipflag = sdk;
+        },
+    };
+}
+/**
+ * Provide FlipFlag SDK to component (for manual setup)
+ */
+function provideFlipFlag(app, config) {
+    const sdk = new FlipFlagSDK(config);
+    app.provide(FLIPFLAG_KEY, sdk);
+}
+
+function useFeatureFlag(flagName, options = {}) {
+    var _a;
+    const value = vue.ref((_a = options.fallbackValue) !== null && _a !== void 0 ? _a : false);
+    const loading = vue.ref(true);
+    const error = vue.ref(null);
+    // Get SDK from plugin or create new instance
+    const sdkFromInject = vue.inject(FLIPFLAG_KEY);
+    let sdk;
+    if (sdkFromInject) {
+        sdk = sdkFromInject;
+    }
+    else {
+        if (!options.config) {
+            throw new Error("useFeatureFlag must be used within FlipFlag plugin or config must be provided");
+        }
+        sdk = new FlipFlagSDK(options.config);
+    }
+    const updateFromState = () => {
+        if (!options.enabled && options.enabled !== undefined) {
+            return;
+        }
+        try {
+            const flagValue = sdk.getFlagValue(flagName);
+            value.value = flagValue;
+            loading.value = false;
+            error.value = null;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            error.value = errorMessage;
+            if (options.fallbackValue !== undefined) {
+                value.value = options.fallbackValue;
+            }
+            loading.value = false;
+        }
+    };
+    const refetch = async () => {
+        sdk.clearCache(`flag:${sdk["config"].projectId}:${flagName}:${sdk["config"].environment || "all"}`);
+        loading.value = true;
+        try {
+            const response = await sdk.getFlag(flagName);
+            value.value = response.value;
+            error.value = null;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            error.value = errorMessage;
+            if (options.fallbackValue !== undefined) {
+                value.value = options.fallbackValue;
+            }
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    // Subscribe to state changes
+    let unsubscribe = null;
+    vue.onMounted(() => {
+        unsubscribe = sdk.subscribe((state) => {
+            if (!options.enabled && options.enabled !== undefined) {
+                return;
+            }
+            const flagValue = state.flags[flagName];
+            if (flagValue !== undefined) {
+                value.value = flagValue;
+                loading.value = false;
+                error.value = state.error;
+            }
+        });
+        // Initial update from current state
+        updateFromState();
+    });
+    vue.onUnmounted(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+    return {
+        value: vue.computed(() => value.value),
+        loading: vue.computed(() => loading.value),
+        error: vue.computed(() => error.value),
+        refetch,
+    };
+}
+
+function useFeatureFlags(flagNames, options = {}) {
+    // Initialize with fallback values
+    const initialFlags = {};
+    flagNames.forEach((flagName) => {
+        var _a, _b;
+        initialFlags[flagName] = (_b = (_a = options.fallbackValues) === null || _a === void 0 ? void 0 : _a[flagName]) !== null && _b !== void 0 ? _b : false;
+    });
+    const flags = vue.ref(initialFlags);
+    const loading = vue.ref(true);
+    const error = vue.ref(null);
+    // Get SDK from plugin or create new instance
+    const sdkFromInject = vue.inject(FLIPFLAG_KEY);
+    let sdk;
+    if (sdkFromInject) {
+        sdk = sdkFromInject;
+    }
+    else {
+        if (!options.config) {
+            throw new Error("useFeatureFlags must be used within FlipFlag plugin or config must be provided");
+        }
+        sdk = new FlipFlagSDK(options.config);
+    }
+    const updateFromState = () => {
+        if (!options.enabled && options.enabled !== undefined) {
+            return;
+        }
+        try {
+            const newFlags = { ...flags.value };
+            let hasChanges = false;
+            flagNames.forEach((flagName) => {
+                const flagValue = sdk.getFlagValue(flagName);
+                if (newFlags[flagName] !== flagValue) {
+                    newFlags[flagName] = flagValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                flags.value = newFlags;
+            }
+            loading.value = false;
+            error.value = null;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            error.value = errorMessage;
+            // Use fallback values
+            const fallbackFlags = {};
+            flagNames.forEach((flagName) => {
+                var _a, _b;
+                fallbackFlags[flagName] = (_b = (_a = options.fallbackValues) === null || _a === void 0 ? void 0 : _a[flagName]) !== null && _b !== void 0 ? _b : false;
+            });
+            flags.value = fallbackFlags;
+            loading.value = false;
+        }
+    };
+    const refetch = async () => {
+        loading.value = true;
+        error.value = null;
+        try {
+            // Force refresh by triggering pull
+            await Promise.all(flagNames.map((flagName) => sdk.getFlag(flagName).catch(() => {
+                // Ignore individual flag errors, will use state values
+            })));
+            updateFromState();
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            error.value = errorMessage;
+            // Use fallback values
+            const fallbackFlags = {};
+            flagNames.forEach((flagName) => {
+                var _a, _b;
+                fallbackFlags[flagName] = (_b = (_a = options.fallbackValues) === null || _a === void 0 ? void 0 : _a[flagName]) !== null && _b !== void 0 ? _b : false;
+            });
+            flags.value = fallbackFlags;
+            loading.value = false;
+        }
+    };
+    // Subscribe to state changes
+    let unsubscribe = null;
+    vue.onMounted(() => {
+        unsubscribe = sdk.subscribe((state) => {
+            if (!options.enabled && options.enabled !== undefined) {
+                return;
+            }
+            const newFlags = { ...flags.value };
+            let hasChanges = false;
+            flagNames.forEach((flagName) => {
+                const flagValue = state.flags[flagName];
+                if (flagValue !== undefined && newFlags[flagName] !== flagValue) {
+                    newFlags[flagName] = flagValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                flags.value = newFlags;
+            }
+            loading.value = false;
+            error.value = state.error;
+        });
+        // Initial update from current state
+        updateFromState();
+    });
+    vue.onUnmounted(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+    return {
+        flags: vue.computed(() => flags.value),
+        loading: vue.computed(() => loading.value),
+        error: vue.computed(() => error.value),
+        refetch,
+    };
+}
+
+function useABTest(testName, options) {
+    const variant = vue.ref(null);
+    const variantId = vue.ref(null);
+    const loading = vue.ref(true);
+    const error = vue.ref(null);
+    // Get SDK from plugin or create new instance
+    const sdkFromInject = vue.inject(FLIPFLAG_KEY);
+    let sdk;
+    if (sdkFromInject) {
+        sdk = sdkFromInject;
+    }
+    else {
+        if (!options.config) {
+            throw new Error("useABTest must be used within FlipFlag plugin or config must be provided");
+        }
+        sdk = new FlipFlagSDK(options.config);
+    }
+    const updateFromState = () => {
+        if (!options.enabled && options.enabled !== undefined) {
+            return;
+        }
+        try {
+            const abTestVariant = sdk.getABTestVariant(testName);
+            if (abTestVariant) {
+                variant.value = abTestVariant.variant.value;
+                variantId.value = abTestVariant.variantId;
+            }
+            else {
+                variant.value = null;
+                variantId.value = null;
+            }
+            loading.value = false;
+            error.value = null;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            error.value = errorMessage;
+            variant.value = null;
+            variantId.value = null;
+            loading.value = false;
+        }
+    };
+    const recordEvent = async (event, eventData) => {
+        if (!variantId.value) {
+            console.warn("Cannot record event: no variant assigned yet");
+            return;
+        }
+        try {
+            await sdk.recordAbTestEvent(testName, options.userId, event, variantId.value, eventData);
+        }
+        catch (err) {
+            console.error("Failed to record A/B test event:", err);
+        }
+    };
+    // Subscribe to state changes
+    let unsubscribe = null;
+    vue.onMounted(() => {
+        unsubscribe = sdk.subscribe((state) => {
+            if (!options.enabled && options.enabled !== undefined) {
+                return;
+            }
+            const abTestVariant = state.abTests[testName];
+            if (abTestVariant) {
+                variant.value = abTestVariant.variant.value;
+                variantId.value = abTestVariant.variantId;
+            }
+            else {
+                variant.value = null;
+                variantId.value = null;
+            }
+            loading.value = false;
+            error.value = state.error;
+        });
+        // Initial update from current state
+        updateFromState();
+    });
+    vue.onUnmounted(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+    return {
+        variant: vue.computed(() => variant.value),
+        variantId: vue.computed(() => variantId.value),
+        loading: vue.computed(() => loading.value),
+        error: vue.computed(() => error.value),
+        recordEvent,
+    };
+}
+
+/**
+ * Identify user for A/B testing and user-specific flags
+ * Must be used within component with FlipFlag plugin
+ */
+function identifyUser(options) {
+    const sdk = vue.inject(FLIPFLAG_KEY);
+    if (!sdk) {
+        throw new Error("identifyUser must be used within component with FlipFlag plugin");
+    }
+    sdk.identifyUser(options);
+}
+
+exports.FlipFlagSDK = FlipFlagSDK;
+exports.createFlipFlagPlugin = createFlipFlagPlugin;
+exports.identifyUser = identifyUser;
+exports.provideFlipFlag = provideFlipFlag;
+exports.useABTest = useABTest;
+exports.useFeatureFlag = useFeatureFlag;
+exports.useFeatureFlags = useFeatureFlags;
+//# sourceMappingURL=vue.js.map