flipflag-sdk 1.1.21 → 1.1.23

package/dist/react.mjs

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 class FlipFlagSDK {
@@ -6,6 +6,9 @@ class FlipFlagSDK {
         this.cache = new Map();
         this.defaultBaseUrl = "https://app.flipflag.ru";
         this.stateListeners = new Set();
+        this.maxListeners = 100; // Maximum number of listeners to prevent memory leaks
+        // Validate required configuration
+        this.validateConfig(config);
         this.config = {
             baseUrl: this.defaultBaseUrl,
             cacheTimeout: 30000, // 30 seconds
@@ -30,9 +33,18 @@ class FlipFlagSDK {
      * Identify user for A/B testing and user-specific flags
      */
     identifyUser(options) {
+        if (!options || typeof options !== "object") {
+            throw new Error("options must be an object");
+        }
+        if (!options.userId || typeof options.userId !== "string") {
+            throw new Error("userId is required and must be a string");
+        }
+        if (options.userProperties && typeof options.userProperties !== "object") {
+            throw new Error("userProperties must be an object");
+        }
         this.config.userId = options.userId;
         // Clear A/B test cache since user changed
-        this.clearABTestCache();
+        this.clearAllABTestCache();
         // If we have a user, we might want to refresh immediately
         if (this.config.pullInterval && this.config.pullInterval > 0) {
             this.pullData();
@@ -48,6 +60,9 @@ class FlipFlagSDK {
      * Subscribe to state changes
      */
     subscribe(callback) {
+        if (this.stateListeners.size >= this.maxListeners) {
+            console.warn(`Maximum number of listeners (${this.maxListeners}) reached. This may cause memory leaks.`);
+        }
         this.stateListeners.add(callback);
         // Return unsubscribe function
         return () => {
@@ -158,6 +173,8 @@ class FlipFlagSDK {
             }
             catch (error) {
                 console.error("State listener error:", error);
+                // Remove faulty listener to prevent repeated errors
+                this.stateListeners.delete(callback);
             }
         });
     }
@@ -194,9 +211,9 @@ class FlipFlagSDK {
         }
     }
     /**
-     * Clear A/B test cache
+     * Clear all A/B test cache (private method)
      */
-    clearABTestCache() {
+    clearAllABTestCache() {
         const abTestKeys = Array.from(this.cache.keys()).filter((key) => key.startsWith("abtest:"));
         abTestKeys.forEach((key) => this.cache.delete(key));
     }
@@ -222,6 +239,15 @@ class FlipFlagSDK {
      */
     async getFlag(flagName, projectId = this.config.projectId, environment) {
         var _a, _b;
+        if (!flagName || typeof flagName !== "string") {
+            throw new Error("flagName is required and must be a string");
+        }
+        if (!projectId || typeof projectId !== "string") {
+            throw new Error("projectId must be a string");
+        }
+        if (environment && typeof environment !== "string") {
+            throw new Error("environment must be a string");
+        }
         // If we have the flag in state, return it immediately
         if (this.state.flags[flagName] !== undefined) {
             return {
@@ -233,20 +259,18 @@ class FlipFlagSDK {
             };
         }
         // Check if we're currently loading data (pullData in progress)
-        // In this case, wait a bit and check state again
+        // In this case, wait for loading to complete using Promise
         if (this.state.isLoading) {
-            // Wait up to 5 seconds for loading to complete
-            for (let i = 0; i < 50; i++) {
-                await new Promise((resolve) => setTimeout(resolve, 100));
-                if (!this.state.isLoading && this.state.flags[flagName] !== undefined) {
-                    return {
-                        projectId: this.config.projectId,
-                        flagName,
-                        environment: this.config.environment || "all",
-                        value: this.state.flags[flagName],
-                        timestamp: ((_b = this.state.lastFetch) === null || _b === void 0 ? void 0 : _b.toISOString()) || new Date().toISOString(),
-                    };
-                }
+            await this.waitForLoadingComplete();
+            // After waiting, check state again
+            if (this.state.flags[flagName] !== undefined) {
+                return {
+                    projectId: this.config.projectId,
+                    flagName,
+                    environment: this.config.environment || "all",
+                    value: this.state.flags[flagName],
+                    timestamp: ((_b = this.state.lastFetch) === null || _b === void 0 ? void 0 : _b.toISOString()) || new Date().toISOString(),
+                };
             }
         }
         const cacheKey = `flag:${projectId}:${flagName}:${environment || "all"}`;
@@ -262,10 +286,76 @@ class FlipFlagSDK {
         this.setCache(cacheKey, response, this.config.cacheTimeout);
         return response;
     }
+    /**
+     * Validate configuration
+     */
+    validateConfig(config) {
+        if (!config.apiKey || typeof config.apiKey !== "string") {
+            throw new Error("apiKey is required and must be a string");
+        }
+        if (!config.projectId || typeof config.projectId !== "string") {
+            throw new Error("projectId is required and must be a string");
+        }
+        if (config.baseUrl && typeof config.baseUrl !== "string") {
+            throw new Error("baseUrl must be a string");
+        }
+        if (config.environment && typeof config.environment !== "string") {
+            throw new Error("environment must be a string");
+        }
+        if (config.userId && typeof config.userId !== "string") {
+            throw new Error("userId must be a string");
+        }
+        if (config.cacheTimeout &&
+            (typeof config.cacheTimeout !== "number" || config.cacheTimeout < 0)) {
+            throw new Error("cacheTimeout must be a non-negative number");
+        }
+        if (config.retryAttempts &&
+            (typeof config.retryAttempts !== "number" || config.retryAttempts < 0)) {
+            throw new Error("retryAttempts must be a non-negative number");
+        }
+        if (config.retryDelay &&
+            (typeof config.retryDelay !== "number" || config.retryDelay < 0)) {
+            throw new Error("retryDelay must be a non-negative number");
+        }
+        if (config.pullInterval &&
+            (typeof config.pullInterval !== "number" || config.pullInterval < 0)) {
+            throw new Error("pullInterval must be a non-negative number");
+        }
+    }
+    /**
+     * Wait for loading to complete with timeout
+     */
+    async waitForLoadingComplete(timeout = 5000) {
+        const startTime = Date.now();
+        return new Promise((resolve, reject) => {
+            const checkLoading = () => {
+                if (!this.state.isLoading) {
+                    resolve();
+                    return;
+                }
+                if (Date.now() - startTime > timeout) {
+                    reject(new Error("Timeout waiting for SDK loading to complete"));
+                    return;
+                }
+                // Check again after a short delay
+                setTimeout(checkLoading, 50);
+            };
+            checkLoading();
+        });
+    }
     /**
      * Get A/B test variant for a user
      */
     async getAbTestVariant(testName, userId, projectId = this.config.projectId) {
+        if (!testName || typeof testName !== "string") {
+            throw new Error("testName is required and must be a string");
+        }
+        if (!userId || typeof userId !== "string") {
+            throw new Error("userId is required and must be a string");
+        }
+        if (!projectId || typeof projectId !== "string") {
+            throw new Error("projectId must be a string");
+        }
         // If we have the A/B test in state, return it immediately
         const stateVariant = this.state.abTests[testName];
         if (stateVariant && stateVariant.testName === testName) {
@@ -329,6 +419,34 @@ class FlipFlagSDK {
             this.cache.clear();
         }
     }
+    /**
+     * Clear cache for specific flag
+     */
+    clearFlagCache(flagName, environment) {
+        const cacheKey = `flag:${this.config.projectId}:${flagName}:${environment || "all"}`;
+        this.cache.delete(cacheKey);
+    }
+    /**
+     * Clear cache for all flags
+     */
+    clearFlagsCache(environment) {
+        const cacheKey = `flags:${this.config.projectId}:${environment || "all"}`;
+        this.cache.delete(cacheKey);
+    }
+    /**
+     * Clear cache for A/B test variant
+     */
+    clearABTestCache(testName, userId) {
+        if (testName && userId) {
+            const cacheKey = `abtest:${this.config.projectId}:${testName}:${userId}`;
+            this.cache.delete(cacheKey);
+        }
+        else {
+            // Clear all A/B test cache
+            const abTestKeys = Array.from(this.cache.keys()).filter((key) => key.startsWith("abtest:"));
+            abTestKeys.forEach((key) => this.cache.delete(key));
+        }
+    }
     /**
      * Update configuration
      */
@@ -437,37 +555,18 @@ function useFeatureFlag(flagName, options = {}) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     // Try to get SDK from context, otherwise create new instance
-    let sdk;
-    try {
-        const context = useFeatureFlagContext();
-        sdk = context.sdk;
-    }
-    catch (_b) {
-        if (!options.config) {
-            throw new Error("useFeatureFlag must be used within FeatureFlagProvider or config must be provided");
-        }
-        sdk = new FlipFlagSDK(options.config);
-    }
-    const updateFromState = useCallback(() => {
-        if (!options.enabled && options.enabled !== undefined) {
-            return;
-        }
+    const sdk = useMemo(() => {
         try {
-            const flagValue = sdk.getFlagValue(flagName);
-            setValue(flagValue);
-            setLoading(false);
-            setError(null);
+            const context = useFeatureFlagContext();
+            return context.sdk;
         }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : "Unknown error";
-            setError(errorMessage);
-            // Use fallback value if provided
-            if (options.fallbackValue !== undefined) {
-                setValue(options.fallbackValue);
+        catch (_a) {
+            if (!options.config) {
+                throw new Error("useFeatureFlag must be used within FeatureFlagProvider or config must be provided");
             }
-            setLoading(false);
+            return new FlipFlagSDK(options.config);
         }
-    }, [sdk, flagName, options.fallbackValue, options.enabled]);
+    }, [options.config]);
     const refetch = useCallback(async () => {
         // Clear cache for this specific flag and force refresh
         sdk.clearCache(`flag:${sdk["config"].projectId}:${flagName}:${sdk["config"].environment || "all"}`);
@@ -498,24 +597,52 @@ function useFeatureFlag(flagName, options = {}) {
         }
     }, [sdk, flagName, options.fallbackValue]);
     useEffect(() => {
-        // Subscribe to state changes
+        // Subscribe to state changes with proper tracking to avoid infinite loops
+        let lastFetchTime = null;
         const unsubscribe = sdk.subscribe((state) => {
             if (!options.enabled && options.enabled !== undefined) {
                 return;
             }
+            // Only update if this is a new fetch or if the flag value actually changed
             const flagValue = state.flags[flagName];
-            if (flagValue !== undefined) {
+            const shouldUpdate = (state.lastFetch && state.lastFetch !== lastFetchTime) ||
+                (flagValue !== undefined && flagValue !== value);
+            if (shouldUpdate) {
+                if (state.lastFetch) {
+                    lastFetchTime = state.lastFetch;
+                }
                 setValue(flagValue);
                 setLoading(false);
                 setError(state.error);
             }
         });
         return unsubscribe;
-    }, [sdk, flagName, options.enabled]);
-    // Separate effect for initial update
+    }, [sdk, flagName, options.enabled, value]);
+    // Initial load effect
     useEffect(() => {
-        updateFromState();
-    }, [updateFromState]);
+        if (options.enabled !== false) {
+            try {
+                const flagValue = sdk.getFlagValue(flagName);
+                if (flagValue !== undefined) {
+                    setValue(flagValue);
+                    setLoading(false);
+                    setError(null);
+                }
+                else {
+                    // If not in state, trigger a fetch
+                    refetch();
+                }
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : "Unknown error";
+                setError(errorMessage);
+                if (options.fallbackValue !== undefined) {
+                    setValue(options.fallbackValue);
+                }
+                setLoading(false);
+            }
+        }
+    }, [sdk, flagName, options.fallbackValue, options.enabled, refetch]);
     return {
         value,
         loading,
@@ -524,6 +651,27 @@ function useFeatureFlag(flagName, options = {}) {
     };
 }
 
+/**
+ * Wait for SDK loading to complete with timeout
+ */
+function waitForSDKLoading(sdk, timeout = 5000) {
+    const startTime = Date.now();
+    return new Promise((resolve, reject) => {
+        const checkLoading = () => {
+            if (!sdk.getState().isLoading) {
+                resolve();
+                return;
+            }
+            if (Date.now() - startTime > timeout) {
+                reject(new Error("Timeout waiting for SDK loading to complete"));
+                return;
+            }
+            // Check again after a short delay
+            setTimeout(checkLoading, 50);
+        };
+        checkLoading();
+    });
+}
 function useFeatureFlags(flagNames, options = {}) {
     const [flags, setFlags] = useState(() => {
         // Initialize with fallback values
@@ -538,25 +686,22 @@ function useFeatureFlags(flagNames, options = {}) {
     const [error, setError] = useState(null);
     const [isInitialized, setIsInitialized] = useState(false);
     // Try to get SDK from context, otherwise create new instance
-    let sdk;
-    try {
-        const context = useFeatureFlagContext();
-        sdk = context.sdk;
-    }
-    catch (_a) {
-        if (!options.config) {
-            throw new Error("useFeatureFlags must be used within FeatureFlagProvider or config must be provided");
+    const sdk = useMemo(() => {
+        try {
+            const context = useFeatureFlagContext();
+            return context.sdk;
         }
-        sdk = new FlipFlagSDK(options.config);
-    }
+        catch (_a) {
+            if (!options.config) {
+                throw new Error("useFeatureFlags must be used within FeatureFlagProvider or config must be provided");
+            }
+            return new FlipFlagSDK(options.config);
+        }
+    }, [options.config]);
     const fetchFlags = useCallback(async () => {
         if (!options.enabled && options.enabled !== undefined) {
             return;
         }
-        // Prevent multiple simultaneous calls
-        if (isInitialized && loading) {
-            return;
-        }
         try {
             setLoading(true);
             setError(null);
@@ -576,34 +721,35 @@ function useFeatureFlags(flagNames, options = {}) {
             if (hasAllFlags) {
                 setFlags(stateFlags);
                 setLoading(false);
+                setIsInitialized(true);
                 return;
             }
             // If SDK is currently loading, wait for it to complete
             if (sdk.getState().isLoading) {
-                // Wait up to 5 seconds for loading to complete
-                for (let i = 0; i < 50; i++) {
-                    await new Promise((resolve) => setTimeout(resolve, 100));
-                    const currentState = sdk.getState();
-                    if (!currentState.isLoading) {
-                        // Check again if we now have all flags
-                        const updatedStateFlags = {};
-                        let updatedHasAllFlags = true;
-                        flagNames.forEach((flagName) => {
-                            const stateValue = sdk.getFlagValue(flagName);
-                            if (stateValue !== undefined) {
-                                updatedStateFlags[flagName] = stateValue;
-                            }
-                            else {
-                                updatedHasAllFlags = false;
-                            }
-                        });
-                        if (updatedHasAllFlags) {
-                            setFlags(updatedStateFlags);
-                            setLoading(false);
-                            return;
+                try {
+                    await waitForSDKLoading(sdk);
+                    // Check again if we now have all flags
+                    const updatedStateFlags = {};
+                    let updatedHasAllFlags = true;
+                    flagNames.forEach((flagName) => {
+                        const stateValue = sdk.getFlagValue(flagName);
+                        if (stateValue !== undefined) {
+                            updatedStateFlags[flagName] = stateValue;
+                        }
+                        else {
+                            updatedHasAllFlags = false;
                         }
+                    });
+                    if (updatedHasAllFlags) {
+                        setFlags(updatedStateFlags);
+                        setLoading(false);
+                        setIsInitialized(true);
+                        return;
                     }
                 }
+                catch (error) {
+                    console.warn("Timeout waiting for SDK loading, proceeding with API call");
+                }
             }
             // If we still don't have all flags, make HTTP request
             const response = await sdk.getFlags();
@@ -631,14 +777,7 @@ function useFeatureFlags(flagNames, options = {}) {
             setLoading(false);
             setIsInitialized(true);
         }
-    }, [
-        sdk,
-        flagNames,
-        options.fallbackValues,
-        options.enabled,
-        isInitialized,
-        loading,
-    ]);
+    }, [sdk, flagNames, options.fallbackValues, options.enabled]);
     const refetch = useCallback(async () => {
         // Clear cache for flags
         sdk.clearCache(`flags:${sdk["config"].projectId}:${sdk["config"].environment || "all"}`);
@@ -646,27 +785,32 @@ function useFeatureFlags(flagNames, options = {}) {
     }, [sdk, fetchFlags]);
     useEffect(() => {
         fetchFlags();
-    }, []); // Remove fetchFlags dependency to prevent infinite loop
+    }, [fetchFlags]); // Include fetchFlags dependency
     // Subscribe to state changes for automatic updates
     useEffect(() => {
+        let lastFetchTime = null;
         const unsubscribe = sdk.subscribe((state) => {
             if (!options.enabled && options.enabled !== undefined) {
                 return;
             }
-            // Update flags from state if available
-            const newFlags = {};
-            let hasUpdates = false;
-            flagNames.forEach((flagName) => {
-                const stateValue = state.flags[flagName];
-                if (stateValue !== undefined) {
-                    newFlags[flagName] = stateValue;
-                    hasUpdates = true;
-                }
-            });
-            if (hasUpdates) {
-                setFlags(newFlags);
-                setLoading(false);
-                if (state.error) {
+            // Only update if this is a new fetch and has relevant flag data
+            if (state.lastFetch &&
+                state.lastFetch !== lastFetchTime &&
+                Object.keys(state.flags).length > 0) {
+                lastFetchTime = state.lastFetch;
+                // Update flags from state if available
+                const newFlags = {};
+                let hasUpdates = false;
+                flagNames.forEach((flagName) => {
+                    const stateValue = state.flags[flagName];
+                    if (stateValue !== undefined) {
+                        newFlags[flagName] = stateValue;
+                        hasUpdates = true;
+                    }
+                });
+                if (hasUpdates) {
+                    setFlags(newFlags);
+                    setLoading(false);
                     setError(state.error);
                 }
             }
@@ -687,17 +831,18 @@ function useABTest(testName, options) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     // Try to get SDK from context, otherwise create new instance
-    let sdk;
-    try {
-        const context = useFeatureFlagContext();
-        sdk = context.sdk;
-    }
-    catch (_a) {
-        if (!options.config) {
-            throw new Error("useABTest must be used within FeatureFlagProvider or config must be provided");
+    const sdk = useMemo(() => {
+        try {
+            const context = useFeatureFlagContext();
+            return context.sdk;
         }
-        sdk = new FlipFlagSDK(options.config);
-    }
+        catch (_a) {
+            if (!options.config) {
+                throw new Error("useABTest must be used within FeatureFlagProvider or config must be provided");
+            }
+            return new FlipFlagSDK(options.config);
+        }
+    }, [options.config]);
     const fetchVariant = useCallback(async () => {
         if (!options.enabled && options.enabled !== undefined) {
             return;
@@ -718,7 +863,7 @@ function useABTest(testName, options) {
         finally {
             setLoading(false);
         }
-    }, [sdk, testName, options.userId, options.enabled]);
+    }, [sdk, testName, options.userId]);
     const recordEvent = useCallback(async (event, eventData) => {
         if (!variantId) {
             console.warn("Cannot record event: no variant assigned yet");
@@ -731,9 +876,35 @@ function useABTest(testName, options) {
             console.error("Failed to record A/B test event:", err);
         }
     }, [sdk, testName, options.userId, variantId]);
+    // Subscribe to SDK state changes for automatic updates
+    useEffect(() => {
+        let lastFetchTime = null;
+        const unsubscribe = sdk.subscribe((state) => {
+            if (!options.enabled && options.enabled !== undefined) {
+                return;
+            }
+            // Only update if this is a new fetch and has A/B test data
+            if (state.lastFetch &&
+                state.lastFetch !== lastFetchTime &&
+                state.abTests[testName]) {
+                lastFetchTime = state.lastFetch;
+                const testVariant = state.abTests[testName];
+                if (testVariant.variantId !== variantId) {
+                    setVariant(testVariant.variant.value);
+                    setVariantId(testVariant.variantId);
+                    setLoading(false);
+                    setError(state.error);
+                }
+            }
+        });
+        return unsubscribe;
+    }, [sdk, testName, options.enabled, variantId]);
+    // Initial fetch effect
     useEffect(() => {
-        fetchVariant();
-    }, [fetchVariant]);
+        if (options.enabled !== false) {
+            fetchVariant();
+        }
+    }, [options.enabled, fetchVariant]);
     return {
         variant,
         variantId,