@geejay/use-feature-flags 1.0.11 → 1.0.13

package/dist/useFeatureFlags.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { createClient } from '@supabase/supabase-js';
 import { featureFlagsAtom } from './store';
 import { useAtom } from 'jotai';
@@ -6,12 +6,16 @@ export const DEFAULT_SUPABASE_URL = 'https://khppgsehvvlukzfdqbuo.supabase.co';
 export const DEFAULT_SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtocHBnc2VodnZsdWt6ZmRxYnVvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTI2ODU1MzQsImV4cCI6MjA2ODI2MTUzNH0.8Z4VY4HFMm95UgO21c-DnDkbLPN_0mbDBZJPExaghDk';
 const EDGE_FN_URL = `${DEFAULT_SUPABASE_URL}/functions/v1/get-feature-flags`;
 let initialized = false;
-export function useFeatureFlags(passedKey, environment = window.location.host || 'localhost') {
+export function useFeatureFlags(passedKey, environment = window.location.hostname || 'localhost') {
+    const sanitizedEnvironment = useMemo(() => environment.replace(/:\d+$/, ''), [environment]);
     const [state, setState] = useAtom(featureFlagsAtom);
     const [envId, setEnvId] = useState(null);
     const debounceTimeout = useRef(null);
     const cleanupRef = useRef();
     const apiKey = passedKey;
+    useEffect(() => {
+        console.log('[use-feature-flags] initializing', `environment: ${sanitizedEnvironment}`, `apiKey provided: ${Boolean(apiKey)}`);
+    }, [sanitizedEnvironment, apiKey]);
     const supabase = createClient(DEFAULT_SUPABASE_URL, DEFAULT_SUPABASE_KEY, {
         global: {
             headers: {
@@ -21,6 +25,7 @@ export function useFeatureFlags(passedKey, environment = window.location.host ||
     });
     const fetchFlags = async () => {
         setState((prev) => ({ ...prev, loading: true }));
+        console.log('[use-feature-flags] fetching flags for', sanitizedEnvironment);
         try {
             const res = await fetch(EDGE_FN_URL, {
                 method: 'POST',
@@ -28,7 +33,7 @@ export function useFeatureFlags(passedKey, environment = window.location.host ||
                     'Content-Type': 'application/json',
                     'api-key': apiKey,
                 },
-                body: JSON.stringify({ environment }),
+                body: JSON.stringify({ environment: sanitizedEnvironment }),
             });
             const json = await res.json();
             if (!res.ok) {
@@ -38,7 +43,7 @@ export function useFeatureFlags(passedKey, environment = window.location.host ||
             }
             const flags = json.flags || [];
             setState({ flags, loading: false });
-            console.log(`Flags are cool man ${JSON.stringify(flags)}`);
+            console.log('[use-feature-flags] fetched flags', flags);
             // Store environment_id from first flag (assumes all have same env)
             if (flags.length > 0 && flags[0].environment_id) {
                 setEnvId(flags[0].environment_id);
@@ -60,13 +65,13 @@ export function useFeatureFlags(passedKey, environment = window.location.host ||
             if (cleanupRef.current)
                 cleanupRef.current();
         };
-    }, [environment, apiKey]);
+    }, [sanitizedEnvironment, apiKey]);
     // Subscribe to flag changes for the correct environment
     useEffect(() => {
         if (!envId)
             return;
         const channel = supabase
-            .channel(`flags-${environment}`)
+            .channel(`flags-${sanitizedEnvironment}`)
             .on('postgres_changes', {
             event: '*',
             schema: 'public',
@@ -88,7 +93,11 @@ export function useFeatureFlags(passedKey, environment = window.location.host ||
         };
     }, [envId]);
     return {
-        isActive: (key) => state.flags.some((f) => f.key === key && f.enabled === true),
+        isActive: (key) => {
+            const active = state.flags.some((f) => f.key === key && f.enabled === true);
+            console.log('[use-feature-flags] isActive', key, active);
+            return active;
+        },
         flags: state.flags,
         loading: state.loading,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geejay/use-feature-flags",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "React hook for feature flag management using Supabase",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",