@bluealba/pae-feature-flags 1.0.0-feature-initial-feature-flags-poc-1233

package/dist/react/FeatureFlagsProvider.js

@@ -0,0 +1,194 @@
+"use strict";
+/**
+ * FeatureFlagsProvider
+ *
+ * A React Context provider that manages feature flag state with prefetching and caching capabilities.
+ * This provider should wrap your application or a section of it to provide feature flag access to child components.
+ *
+ * Features:
+ * - Prefetches specified flags on mount
+ * - Optional automatic refresh at configurable intervals
+ * - Caches flag values for efficient access
+ * - Provides both boolean flags and multivariant flags
+ *
+ * @example
+ * ```tsx
+ * <FeatureFlagsProvider
+ *   gatewayUrl="/api"
+ *   prefetchFlags={['new-ui', 'beta-feature']}
+ *   refreshInterval={60000}
+ * >
+ *   <App />
+ * </FeatureFlagsProvider>
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureFlagsProvider = exports.FeatureFlagsContext = void 0;
+const react_1 = __importStar(require("react"));
+/**
+ * Default context value
+ */
+const defaultContextValue = {
+    flags: new Map(),
+    variants: new Map(),
+    isLoading: false,
+    error: null,
+    checkFlag: () => false,
+    getVariant: () => null,
+    refresh: async () => { },
+};
+/**
+ * React Context for feature flags
+ */
+exports.FeatureFlagsContext = (0, react_1.createContext)(defaultContextValue);
+/**
+ * Provider component for feature flags
+ */
+const FeatureFlagsProvider = ({ gatewayUrl = '', prefetchFlags = [], refreshInterval, children, }) => {
+    const [flags, setFlags] = (0, react_1.useState)(new Map());
+    const [variants, setVariants] = (0, react_1.useState)(new Map());
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    /**
+     * Fetch flags from the gateway API
+     */
+    const fetchFlags = (0, react_1.useCallback)(async (flagNames) => {
+        if (flagNames.length === 0) {
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const url = `${gatewayUrl}/feature-flags/evaluate`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ flags: flagNames }),
+                credentials: 'include', // Include cookies for authentication
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch feature flags: ${response.status} ${response.statusText}`);
+            }
+            const data = await response.json();
+            const evaluations = data.flags;
+            // Update flags map
+            const newFlags = new Map();
+            const newVariants = new Map();
+            // Handle both Map and Record response formats
+            const entries = evaluations instanceof Map ? Array.from(evaluations.entries()) : Object.entries(evaluations);
+            entries.forEach(([flagName, evaluation]) => {
+                newFlags.set(flagName, evaluation.enabled);
+                if (evaluation.variant !== undefined) {
+                    newVariants.set(flagName, {
+                        variant: evaluation.variant || null,
+                        payload: evaluation.payload,
+                    });
+                }
+            });
+            setFlags(newFlags);
+            setVariants(newVariants);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Unknown error fetching feature flags');
+            setError(error);
+            console.error('Error fetching feature flags:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [gatewayUrl]);
+    /**
+     * Refresh all prefetched flags
+     */
+    const refresh = (0, react_1.useCallback)(async () => {
+        if (prefetchFlags.length > 0) {
+            await fetchFlags(prefetchFlags);
+        }
+    }, [prefetchFlags, fetchFlags]);
+    /**
+     * Initial prefetch on mount
+     */
+    (0, react_1.useEffect)(() => {
+        if (prefetchFlags.length > 0) {
+            fetchFlags(prefetchFlags);
+        }
+    }, [prefetchFlags, fetchFlags]);
+    /**
+     * Set up automatic refresh interval
+     */
+    (0, react_1.useEffect)(() => {
+        if (refreshInterval && refreshInterval > 0 && prefetchFlags.length > 0) {
+            const intervalId = setInterval(() => {
+                fetchFlags(prefetchFlags);
+            }, refreshInterval);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }
+    }, [refreshInterval, prefetchFlags, fetchFlags]);
+    /**
+     * Check if a flag is enabled from cache
+     */
+    const checkFlag = (0, react_1.useCallback)((flagName, defaultValue = false) => {
+        var _a;
+        return (_a = flags.get(flagName)) !== null && _a !== void 0 ? _a : defaultValue;
+    }, [flags]);
+    /**
+     * Get variant from cache
+     */
+    const getVariant = (0, react_1.useCallback)((flagName) => {
+        var _a;
+        return (_a = variants.get(flagName)) !== null && _a !== void 0 ? _a : null;
+    }, [variants]);
+    /**
+     * Memoized context value
+     */
+    const contextValue = (0, react_1.useMemo)(() => ({
+        flags,
+        variants,
+        isLoading,
+        error,
+        checkFlag,
+        getVariant,
+        refresh,
+    }), [flags, variants, isLoading, error, checkFlag, getVariant, refresh]);
+    return (react_1.default.createElement(exports.FeatureFlagsContext.Provider, { value: contextValue }, children));
+};
+exports.FeatureFlagsProvider = FeatureFlagsProvider;
+exports.FeatureFlagsProvider.displayName = 'FeatureFlagsProvider';
+//# sourceMappingURL=FeatureFlagsProvider.js.map

package/dist/react/FeatureFlagsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFlagsProvider.js","sourceRoot":"","sources":["../../src/react/FeatureFlagsProvider.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * React implementation for feature flags
+ * @module react
+ */
+export { FeatureFlagsProvider, FeatureFlagsContext, type FeatureFlagsProviderProps, type FeatureFlagsContextValue } from './FeatureFlagsProvider';
+export { useFeatureFlag } from './useFeatureFlag';
+export { useFeatureFlags } from './useFeatureFlags';
+export { useVariant, type UseVariantResult } from './useVariant';
+export { FeatureFlagGuard, type FeatureFlagGuardProps } from './FeatureFlagGuard';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,KAAK,yBAAyB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClJ,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * React implementation for feature flags
+ * @module react
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureFlagGuard = exports.useVariant = exports.useFeatureFlags = exports.useFeatureFlag = exports.FeatureFlagsContext = exports.FeatureFlagsProvider = void 0;
+var FeatureFlagsProvider_1 = require("./FeatureFlagsProvider");
+Object.defineProperty(exports, "FeatureFlagsProvider", { enumerable: true, get: function () { return FeatureFlagsProvider_1.FeatureFlagsProvider; } });
+Object.defineProperty(exports, "FeatureFlagsContext", { enumerable: true, get: function () { return FeatureFlagsProvider_1.FeatureFlagsContext; } });
+var useFeatureFlag_1 = require("./useFeatureFlag");
+Object.defineProperty(exports, "useFeatureFlag", { enumerable: true, get: function () { return useFeatureFlag_1.useFeatureFlag; } });
+var useFeatureFlags_1 = require("./useFeatureFlags");
+Object.defineProperty(exports, "useFeatureFlags", { enumerable: true, get: function () { return useFeatureFlags_1.useFeatureFlags; } });
+var useVariant_1 = require("./useVariant");
+Object.defineProperty(exports, "useVariant", { enumerable: true, get: function () { return useVariant_1.useVariant; } });
+var FeatureFlagGuard_1 = require("./FeatureFlagGuard");
+Object.defineProperty(exports, "FeatureFlagGuard", { enumerable: true, get: function () { return FeatureFlagGuard_1.FeatureFlagGuard; } });
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,+DAAkJ;AAAzI,4HAAA,oBAAoB,OAAA;AAAE,2HAAA,mBAAmB,OAAA;AAClD,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,qDAAoD;AAA3C,kHAAA,eAAe,OAAA;AACxB,2CAAiE;AAAxD,wGAAA,UAAU,OAAA;AACnB,uDAAkF;AAAzE,oHAAA,gBAAgB,OAAA"}

package/dist/react/useFeatureFlag.d.ts

@@ -0,0 +1,26 @@
+/**
+ * useFeatureFlag Hook
+ *
+ * A React hook for evaluating a single boolean feature flag.
+ * This hook first checks if the flag is in the prefetched cache (from FeatureFlagsProvider).
+ * If not found in cache, it fetches the flag individually from the API.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isNewUIEnabled = useFeatureFlag('new-ui', false);
+ *
+ *   return isNewUIEnabled ? <NewUI /> : <OldUI />;
+ * }
+ * ```
+ */
+/**
+ * Hook for evaluating a single boolean feature flag
+ *
+ * @param flagName - Name of the feature flag to evaluate
+ * @param defaultValue - Default value to use if flag cannot be evaluated (default: false)
+ * @param gatewayUrl - Base URL for the gateway API (default: '')
+ * @returns Boolean indicating whether the flag is enabled
+ */
+export declare function useFeatureFlag(flagName: string, defaultValue?: boolean, gatewayUrl?: string): boolean;
+//# sourceMappingURL=useFeatureFlag.d.ts.map

package/dist/react/useFeatureFlag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlag.d.ts","sourceRoot":"","sources":["../../src/react/useFeatureFlag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,EAChB,YAAY,GAAE,OAAe,EAC7B,UAAU,GAAE,MAAW,GACtB,OAAO,CAqET"}

package/dist/react/useFeatureFlag.js

@@ -0,0 +1,91 @@
+"use strict";
+/**
+ * useFeatureFlag Hook
+ *
+ * A React hook for evaluating a single boolean feature flag.
+ * This hook first checks if the flag is in the prefetched cache (from FeatureFlagsProvider).
+ * If not found in cache, it fetches the flag individually from the API.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isNewUIEnabled = useFeatureFlag('new-ui', false);
+ *
+ *   return isNewUIEnabled ? <NewUI /> : <OldUI />;
+ * }
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeatureFlag = useFeatureFlag;
+const react_1 = require("react");
+const FeatureFlagsProvider_1 = require("./FeatureFlagsProvider");
+/**
+ * Hook for evaluating a single boolean feature flag
+ *
+ * @param flagName - Name of the feature flag to evaluate
+ * @param defaultValue - Default value to use if flag cannot be evaluated (default: false)
+ * @param gatewayUrl - Base URL for the gateway API (default: '')
+ * @returns Boolean indicating whether the flag is enabled
+ */
+function useFeatureFlag(flagName, defaultValue = false, gatewayUrl = '') {
+    const context = (0, react_1.useContext)(FeatureFlagsProvider_1.FeatureFlagsContext);
+    const [flagValue, setFlagValue] = (0, react_1.useState)(defaultValue);
+    const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // First, check if the flag is in the prefetched cache
+        const cachedValue = context.checkFlag(flagName, null);
+        if (cachedValue !== null && cachedValue !== undefined) {
+            // Flag is in cache, use it
+            setFlagValue(cachedValue);
+            setIsInitialized(true);
+            return;
+        }
+        // Flag not in cache, fetch it individually
+        let isMounted = true;
+        const fetchFlag = async () => {
+            var _a;
+            try {
+                const url = `${gatewayUrl}/feature-flags/${encodeURIComponent(flagName)}?defaultValue=${defaultValue}`;
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include', // Include cookies for authentication
+                });
+                if (!response.ok) {
+                    console.warn(`Failed to fetch feature flag '${flagName}': ${response.status} ${response.statusText}`);
+                    if (isMounted) {
+                        setFlagValue(defaultValue);
+                        setIsInitialized(true);
+                    }
+                    return;
+                }
+                const data = await response.json();
+                if (isMounted) {
+                    setFlagValue((_a = data.enabled) !== null && _a !== void 0 ? _a : defaultValue);
+                    setIsInitialized(true);
+                }
+            }
+            catch (error) {
+                console.error(`Error fetching feature flag '${flagName}':`, error);
+                if (isMounted) {
+                    setFlagValue(defaultValue);
+                    setIsInitialized(true);
+                }
+            }
+        };
+        fetchFlag();
+        return () => {
+            isMounted = false;
+        };
+    }, [flagName, defaultValue, gatewayUrl, context]);
+    // Return cached value if available, otherwise return the fetched value
+    // If not initialized yet, return default value
+    if (!isInitialized && context.flags.size === 0) {
+        return defaultValue;
+    }
+    const cachedValue = context.checkFlag(flagName, null);
+    return cachedValue !== null && cachedValue !== undefined ? cachedValue : flagValue;
+}
+//# sourceMappingURL=useFeatureFlag.js.map

package/dist/react/useFeatureFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlag.js","sourceRoot":"","sources":["../../src/react/useFeatureFlag.ts"],"names":[],"mappings":"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"}

package/dist/react/useFeatureFlags.d.ts

@@ -0,0 +1,38 @@
+/**
+ * useFeatureFlags Hook
+ *
+ * A React hook for accessing the full feature flags context.
+ * This hook provides access to all prefetched flags, variants, loading state,
+ * and utility functions for checking flags and refreshing the cache.
+ *
+ * This hook MUST be used within a FeatureFlagsProvider.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { flags, checkFlag, refresh, isLoading } = useFeatureFlags();
+ *
+ *   const handleRefresh = async () => {
+ *     await refresh();
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleRefresh} disabled={isLoading}>
+ *         Refresh Flags
+ *       </button>
+ *       <div>Total flags: {flags.size}</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import { type FeatureFlagsContextValue } from './FeatureFlagsProvider';
+/**
+ * Hook for accessing the feature flags context
+ *
+ * @throws Error if used outside of FeatureFlagsProvider
+ * @returns The full feature flags context
+ */
+export declare function useFeatureFlags(): FeatureFlagsContextValue;
+//# sourceMappingURL=useFeatureFlags.d.ts.map

package/dist/react/useFeatureFlags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/react/useFeatureFlags.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAE5F;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,wBAAwB,CAW1D"}

package/dist/react/useFeatureFlags.js

@@ -0,0 +1,49 @@
+"use strict";
+/**
+ * useFeatureFlags Hook
+ *
+ * A React hook for accessing the full feature flags context.
+ * This hook provides access to all prefetched flags, variants, loading state,
+ * and utility functions for checking flags and refreshing the cache.
+ *
+ * This hook MUST be used within a FeatureFlagsProvider.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { flags, checkFlag, refresh, isLoading } = useFeatureFlags();
+ *
+ *   const handleRefresh = async () => {
+ *     await refresh();
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleRefresh} disabled={isLoading}>
+ *         Refresh Flags
+ *       </button>
+ *       <div>Total flags: {flags.size}</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeatureFlags = useFeatureFlags;
+const react_1 = require("react");
+const FeatureFlagsProvider_1 = require("./FeatureFlagsProvider");
+/**
+ * Hook for accessing the feature flags context
+ *
+ * @throws Error if used outside of FeatureFlagsProvider
+ * @returns The full feature flags context
+ */
+function useFeatureFlags() {
+    const context = (0, react_1.useContext)(FeatureFlagsProvider_1.FeatureFlagsContext);
+    if (!context) {
+        throw new Error('useFeatureFlags must be used within a FeatureFlagsProvider. ' +
+            'Wrap your component tree with <FeatureFlagsProvider> to use this hook.');
+    }
+    return context;
+}
+//# sourceMappingURL=useFeatureFlags.js.map

package/dist/react/useFeatureFlags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlags.js","sourceRoot":"","sources":["../../src/react/useFeatureFlags.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;;AAWH,0CAWC;AApBD,iCAAmC;AACnC,iEAA4F;AAE5F;;;;;GAKG;AACH,SAAgB,eAAe;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,0CAAmB,CAAC,CAAC;IAEhD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8DAA8D;YAC9D,wEAAwE,CACzE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/react/useVariant.d.ts

@@ -0,0 +1,48 @@
+/**
+ * useVariant Hook
+ *
+ * A React hook for getting the variant value of a multivariant feature flag.
+ * This hook first checks if the variant is in the prefetched cache (from FeatureFlagsProvider).
+ * If not found in cache, it fetches the variant individually from the API.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { variant, payload, isLoading } = useVariant('checkout-flow');
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   if (variant === 'new-checkout') {
+ *     return <NewCheckout config={payload} />;
+ *   }
+ *
+ *   return <OldCheckout />;
+ * }
+ * ```
+ */
+/**
+ * Return type for the useVariant hook
+ */
+export interface UseVariantResult {
+    /**
+     * The selected variant name, or null if no variant is selected
+     */
+    variant: string | null;
+    /**
+     * The payload data associated with the variant
+     */
+    payload: unknown;
+    /**
+     * Whether the variant is currently being loaded
+     */
+    isLoading: boolean;
+}
+/**
+ * Hook for getting the variant value of a multivariant feature flag
+ *
+ * @param flagName - Name of the feature flag
+ * @param gatewayUrl - Base URL for the gateway API (default: '')
+ * @returns Object containing variant, payload, and loading state
+ */
+export declare function useVariant(flagName: string, gatewayUrl?: string): UseVariantResult;
+//# sourceMappingURL=useVariant.d.ts.map

package/dist/react/useVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariant.d.ts","sourceRoot":"","sources":["../../src/react/useVariant.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,MAAW,GACtB,gBAAgB,CAmFlB"}

package/dist/react/useVariant.js

@@ -0,0 +1,108 @@
+"use strict";
+/**
+ * useVariant Hook
+ *
+ * A React hook for getting the variant value of a multivariant feature flag.
+ * This hook first checks if the variant is in the prefetched cache (from FeatureFlagsProvider).
+ * If not found in cache, it fetches the variant individually from the API.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { variant, payload, isLoading } = useVariant('checkout-flow');
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   if (variant === 'new-checkout') {
+ *     return <NewCheckout config={payload} />;
+ *   }
+ *
+ *   return <OldCheckout />;
+ * }
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVariant = useVariant;
+const react_1 = require("react");
+const FeatureFlagsProvider_1 = require("./FeatureFlagsProvider");
+/**
+ * Hook for getting the variant value of a multivariant feature flag
+ *
+ * @param flagName - Name of the feature flag
+ * @param gatewayUrl - Base URL for the gateway API (default: '')
+ * @returns Object containing variant, payload, and loading state
+ */
+function useVariant(flagName, gatewayUrl = '') {
+    const context = (0, react_1.useContext)(FeatureFlagsProvider_1.FeatureFlagsContext);
+    const [variant, setVariant] = (0, react_1.useState)(null);
+    const [payload, setPayload] = (0, react_1.useState)(undefined);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        // First, check if the variant is in the prefetched cache
+        const cachedVariant = context.getVariant(flagName);
+        if (cachedVariant !== null) {
+            // Variant is in cache, use it
+            setVariant(cachedVariant.variant);
+            setPayload(cachedVariant.payload);
+            setIsLoading(false);
+            return;
+        }
+        // Variant not in cache, fetch it individually
+        let isMounted = true;
+        const fetchVariant = async () => {
+            setIsLoading(true);
+            try {
+                const url = `${gatewayUrl}/feature-flags/${encodeURIComponent(flagName)}/variant`;
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include', // Include cookies for authentication
+                });
+                if (!response.ok) {
+                    console.warn(`Failed to fetch variant for flag '${flagName}': ${response.status} ${response.statusText}`);
+                    if (isMounted) {
+                        setVariant(null);
+                        setPayload(undefined);
+                        setIsLoading(false);
+                    }
+                    return;
+                }
+                const data = await response.json();
+                if (isMounted) {
+                    setVariant(data.variant || null);
+                    setPayload(data.payload);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                console.error(`Error fetching variant for flag '${flagName}':`, error);
+                if (isMounted) {
+                    setVariant(null);
+                    setPayload(undefined);
+                    setIsLoading(false);
+                }
+            }
+        };
+        fetchVariant();
+        return () => {
+            isMounted = false;
+        };
+    }, [flagName, gatewayUrl, context]);
+    // Return cached variant if available, otherwise return the fetched variant
+    const cachedVariant = context.getVariant(flagName);
+    if (cachedVariant !== null) {
+        return {
+            variant: cachedVariant.variant,
+            payload: cachedVariant.payload,
+            isLoading: false,
+        };
+    }
+    return {
+        variant,
+        payload,
+        isLoading,
+    };
+}
+//# sourceMappingURL=useVariant.js.map

package/dist/react/useVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariant.js","sourceRoot":"","sources":["../../src/react/useVariant.ts"],"names":[],"mappings":"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"}