@flagship.io/react-sdk 5.2.0 → 5.2.2

package/dist/edge/src/FlagshipContext.js

@@ -1,8 +1,10 @@
-'use client';
-import { createContext } from 'react';
+"use client";
+import { createContext } from "react";
+import { FSSdkStatus } from "@flagship.io/js-sdk";
 export const initStat = {
-    isInitializing: true
+    isInitializing: true,
+    sdkStatus: FSSdkStatus.SDK_NOT_INITIALIZED,
 };
 export const FlagshipContext = createContext({
-    state: { ...initStat }
+    state: { ...initStat },
 });

package/dist/edge/src/FlagshipHooks.js

@@ -5,6 +5,7 @@ import { noVisitorMessage } from './constants.js';
 import { FlagshipContext } from './FlagshipContext.js';
 import { FSFlag } from './FSFlag.js';
 import { deepClone, hasContextChanged, logError, logWarn } from './utils.js';
+import { useLatestRef } from './hooks.js';
 /**
  * This hook returns a flag object by its key. If no flag match the given key an empty flag will be returned.
  * @param key
@@ -35,103 +36,115 @@ const handleContextChange = (param) => {
 export const useFlagship = () => {
     const { state } = useContext(FlagshipContext);
     const { visitor, config } = state;
+    const visitorRef = useLatestRef(visitor);
+    const configRef = useLatestRef(config);
+    const stateRef = useLatestRef(state);
+    const visitorContext = useMemo(() => ({ ...visitor?.context }), [JSON.stringify(visitor?.context)]);
     const fsUpdateContext = useCallback((context) => {
         handleContextChange({
-            config,
-            visitor,
-            updateFunction: () => visitor?.updateContext(context),
+            config: configRef.current,
+            visitor: visitorRef.current,
+            updateFunction: () => visitorRef.current?.updateContext(context),
             functionName: 'updateContext'
         });
-    }, [visitor]);
+    }, []);
     const fsClearContext = useCallback(() => {
         handleContextChange({
-            config,
-            visitor,
-            updateFunction: () => visitor?.clearContext(),
+            config: configRef.current,
+            visitor: visitorRef.current,
+            updateFunction: () => visitorRef.current?.clearContext(),
             functionName: 'cleanContext'
         });
-    }, [visitor]);
+    }, []);
     const fsAuthenticate = useCallback((visitorId) => {
         const functionName = 'authenticate';
-        if (!visitor) {
-            logError(config, noVisitorMessage, functionName);
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            logError(configRef.current, noVisitorMessage, functionName);
             return;
         }
-        const originalVisitorId = visitor.visitorId;
-        visitor.authenticate(visitorId);
+        const originalVisitorId = currentVisitor.visitorId;
+        currentVisitor.authenticate(visitorId);
         if (originalVisitorId !== visitorId) {
-            visitor.fetchFlags();
+            currentVisitor.fetchFlags();
         }
-    }, [visitor]);
+    }, []);
     const fsUnauthenticate = useCallback(() => {
         const functionName = 'unauthenticate';
-        if (!visitor) {
-            logError(config, noVisitorMessage, functionName);
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            logError(configRef.current, noVisitorMessage, functionName);
             return;
         }
-        const originalVisitorId = visitor.visitorId;
-        visitor.unauthenticate();
-        if (originalVisitorId !== visitor.visitorId) {
-            visitor.fetchFlags();
+        const originalVisitorId = currentVisitor.visitorId;
+        currentVisitor.unauthenticate();
+        if (originalVisitorId !== currentVisitor.visitorId) {
+            currentVisitor.fetchFlags();
         }
-    }, [visitor]);
+    }, []);
     const fsSendHit = useCallback((hit) => {
         const functionName = 'sendHit';
-        if (!visitor) {
-            logError(config, noVisitorMessage, functionName);
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            logError(configRef.current, noVisitorMessage, functionName);
             return Promise.resolve();
         }
         if (Array.isArray(hit)) {
-            return visitor.sendHits(hit);
+            return currentVisitor.sendHits(hit);
         }
-        return visitor.sendHit(hit);
-    }, [visitor]);
+        return currentVisitor.sendHit(hit);
+    }, []);
     const getFlag = useCallback((key) => {
-        if (!visitor) {
-            return new FSFlag(key, state);
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            return new FSFlag(key, stateRef.current);
         }
-        return visitor.getFlag(key);
-    }, [visitor]);
+        return currentVisitor.getFlag(key);
+    }, []);
     const fetchFlags = useCallback(async () => {
-        if (!visitor) {
-            logWarn(config, noVisitorMessage, 'fetchFlags');
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            logWarn(configRef.current, noVisitorMessage, 'fetchFlags');
             return Promise.resolve();
         }
-        return visitor.fetchFlags();
-    }, [visitor]);
+        return currentVisitor.fetchFlags();
+    }, []);
     const setConsent = useCallback((hasConsented) => {
-        if (!visitor) {
-            logWarn(config, noVisitorMessage, 'setConsent');
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
+            logWarn(configRef.current, noVisitorMessage, 'setConsent');
             return;
         }
-        visitor.setConsent(hasConsented);
-    }, [visitor]);
+        currentVisitor.setConsent(hasConsented);
+    }, []);
     const close = useCallback(() => {
         return Flagship.close();
     }, []);
     const getFlags = useCallback(() => {
-        if (!visitor) {
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
             const flags = new Map();
-            state.flags?.forEach((flag, key) => {
-                flags.set(key, new FSFlag(key, state));
+            stateRef.current.flags?.forEach((flag, key) => {
+                flags.set(key, new FSFlag(key, stateRef.current));
             });
             return new FSFlagCollection({ flags });
         }
-        return visitor.getFlags();
-    }, [visitor]);
+        return currentVisitor.getFlags();
+    }, []);
     const collectEAIEventsAsync = useCallback(async (...args) => {
-        if (!visitor) {
+        const currentVisitor = visitorRef.current;
+        if (!currentVisitor) {
             return;
         }
-        return visitor.collectEAIEventsAsync(...args);
-    }, [visitor]);
+        return currentVisitor.collectEAIEventsAsync(...args);
+    }, []);
     return useMemo(() => ({
         visitorId: visitor?.visitorId,
         anonymousId: visitor?.anonymousId,
-        context: { ...visitor?.context },
+        context: visitorContext,
         hasConsented: visitor?.hasConsented,
-        sdkStatus: Flagship.getStatus(),
-        flagsStatus: visitor?.flagsStatus,
+        sdkStatus: state.sdkStatus,
+        flagsStatus: state.flagsStatus,
         setConsent,
         updateContext: fsUpdateContext,
         clearContext: fsClearContext,
@@ -143,10 +156,23 @@ export const useFlagship = () => {
         close,
         getFlags,
         collectEAIEventsAsync
-    }), [visitor, setConsent,
+    }), [
+        visitor?.visitorId,
+        visitor?.anonymousId,
+        visitor?.hasConsented,
+        visitorContext,
+        state.sdkStatus,
+        state.flagsStatus,
+        setConsent,
         fsUpdateContext,
-        fsClearContext, fsAuthenticate, fsUnauthenticate,
-        fsSendHit, getFlag, fetchFlags, close,
+        fsClearContext,
+        fsAuthenticate,
+        fsUnauthenticate,
+        fsSendHit,
+        getFlag,
+        fetchFlags,
+        close,
         getFlags,
-        collectEAIEventsAsync]);
+        collectEAIEventsAsync
+    ]);
 };

package/dist/edge/src/FlagshipProvider.js

@@ -1,159 +1,199 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import { Flagship, DecisionMode, FSSdkStatus } from "./deps.js";
+import { useState, useEffect, useCallback, useMemo, useRef, } from "react";
+import { Flagship, DecisionMode, FSSdkStatus, } from "./deps.js";
 import { FlagshipContext, initStat } from "./FlagshipContext.js";
 import { INTERNAL_EVENTS } from "./internalType.js";
 import { version as SDK_VERSION } from "./sdkVersion.js";
 import { useNonInitialEffect, logError, extractFlagsMap } from "./utils.js";
+import { useLatestRef, shouldRecreateVisitor, updateVisitorData, } from "./hooks.js";
 export function FlagshipProvider({ children, envId, apiKey, decisionMode = DecisionMode.DECISION_API, visitorData, loadingComponent, onSdkStatusChanged, onBucketingUpdated, initialCampaigns, initialFlagsData, fetchFlagsOnBucketingUpdated, hitDeduplicationTime = 2, fetchNow = true, language = 1, sdkVersion = SDK_VERSION, onFlagsStatusChanged, shouldSaveInstance, ...props }) {
-    const flags = extractFlagsMap(initialFlagsData, initialCampaigns);
-    const [state, setState] = useState({
+    const flags = useMemo(() => extractFlagsMap(initialFlagsData, initialCampaigns), [initialFlagsData, initialCampaigns]);
+    const [flagshipState, setFlagshipState] = useState({
         ...initStat,
         flags,
         hasVisitorData: !!visitorData,
     });
     const [lastModified, setLastModified] = useState();
-    const stateRef = useRef();
-    stateRef.current = state;
-    const visitorDataRef = useRef(visitorData);
+    const flagshipVisitorRef = useRef();
+    useEffect(() => {
+        flagshipVisitorRef.current = flagshipState.visitor;
+    }, [flagshipState.visitor]);
+    const propsRef = useLatestRef(props);
+    const configRef = useLatestRef({
+        fetchNow,
+        hitDeduplicationTime,
+        language,
+        sdkVersion,
+    });
+    const callbacksRef = useLatestRef({
+        onSdkStatusChanged,
+        onBucketingUpdated,
+        onFlagsStatusChanged,
+    });
+    const visitorDataMemo = useMemo(() => visitorData, [
+        visitorData?.id,
+        visitorData?.isAuthenticated,
+        visitorData?.hasConsented,
+        JSON.stringify(visitorData?.context),
+    ]);
     // #region functions
-    const onBucketingLastModified = (lastUpdate) => {
-        if (onBucketingUpdated) {
-            onBucketingUpdated(lastUpdate);
+    const handleBucketingUpdate = useCallback((lastUpdate) => {
+        if (callbacksRef.current.onBucketingUpdated) {
+            callbacksRef.current.onBucketingUpdated(lastUpdate);
         }
         setLastModified(lastUpdate);
-    };
-    const statusChanged = (status) => {
-        if (onSdkStatusChanged) {
-            onSdkStatusChanged(status);
-        }
-        switch (status) {
-            case FSSdkStatus.SDK_PANIC:
-            case FSSdkStatus.SDK_INITIALIZED:
-                createVisitor();
-                break;
-            case FSSdkStatus.SDK_NOT_INITIALIZED:
-                setState((prev) => ({
-                    ...prev,
-                    config: Flagship.getConfig(),
-                    isInitializing: false,
-                }));
-                break;
-        }
-    };
-    const initSdk = () => {
-        Flagship.start(envId, apiKey, {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            decisionMode: decisionMode,
-            fetchNow,
-            onSdkStatusChanged: statusChanged,
-            onBucketingUpdated: onBucketingLastModified,
-            hitDeduplicationTime,
-            language,
-            sdkVersion,
-            ...props,
-        });
-    };
-    function initializeState(param) {
-        setState((currentState) => ({
+    }, []);
+    const handleFlagsStatusChange = useCallback(({ status, reason }) => {
+        callbacksRef.current.onFlagsStatusChanged?.({ status, reason });
+        setFlagshipState((currentState) => ({
+            ...currentState,
+            flagsStatus: { status, reason },
+        }));
+    }, []);
+    const initializeVisitorState = useCallback((param) => {
+        setFlagshipState((currentState) => ({
             ...currentState,
             visitor: param.fsVisitor,
             config: Flagship.getConfig(),
             isInitializing: false,
-            hasVisitorData: !!visitorData,
+            hasVisitorData: !!visitorDataMemo,
+            sdkStatus: param.sdkStatus,
         }));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onVisitorReady = (fsVisitor, error) => {
+    }, [!!visitorDataMemo]);
+    const handleVisitorReady = useCallback((fsVisitor, error, sdkStatus) => {
         if (error) {
             logError(Flagship.getConfig(), error.message || error, "onReady");
         }
-        initializeState({ fsVisitor });
-    };
-    const createVisitor = () => {
-        if (!visitorDataRef.current) {
+        initializeVisitorState({ fsVisitor, sdkStatus });
+    }, [initializeVisitorState]);
+    const createFlagshipVisitor = useCallback((sdkStatus) => {
+        if (!visitorDataMemo) {
             return;
         }
         const fsVisitor = Flagship.newVisitor({
-            visitorId: visitorDataRef.current.id,
-            context: visitorDataRef.current.context,
-            isAuthenticated: visitorDataRef.current.isAuthenticated,
-            hasConsented: visitorDataRef.current.hasConsented,
+            visitorId: visitorDataMemo.id,
+            context: visitorDataMemo.context,
+            isAuthenticated: visitorDataMemo.isAuthenticated,
+            hasConsented: visitorDataMemo.hasConsented,
             initialCampaigns,
             initialFlagsData,
-            onFlagsStatusChanged,
+            onFlagsStatusChanged: handleFlagsStatusChange,
             shouldSaveInstance,
         });
         fsVisitor?.on("ready", (error) => {
-            onVisitorReady(fsVisitor, error);
+            handleVisitorReady(fsVisitor, error, sdkStatus);
         });
         if (!fetchNow) {
-            initializeState({ fsVisitor });
+            initializeVisitorState({ fsVisitor, sdkStatus });
+        }
+    }, [
+        initialCampaigns,
+        initialFlagsData,
+        handleFlagsStatusChange,
+        shouldSaveInstance,
+        fetchNow,
+        handleVisitorReady,
+        initializeVisitorState,
+        visitorDataMemo,
+    ]);
+    const handleSdkStatusChange = useCallback((sdkStatus) => {
+        if (callbacksRef.current.onSdkStatusChanged) {
+            callbacksRef.current.onSdkStatusChanged(sdkStatus);
         }
-    };
-    function updateVisitor() {
-        if (!visitorDataRef.current ||
+        switch (sdkStatus) {
+            case FSSdkStatus.SDK_PANIC:
+            case FSSdkStatus.SDK_INITIALIZED:
+                createFlagshipVisitor(sdkStatus);
+                break;
+            case FSSdkStatus.SDK_NOT_INITIALIZED:
+                setFlagshipState((prev) => ({
+                    ...prev,
+                    config: Flagship.getConfig(),
+                    isInitializing: false,
+                    sdkStatus,
+                }));
+                break;
+        }
+    }, [createFlagshipVisitor]);
+    const handleSdkStatusChangeRef = useLatestRef(handleSdkStatusChange);
+    const handleBucketingUpdateRef = useLatestRef(handleBucketingUpdate);
+    const initializeFlagshipSdk = useCallback(() => {
+        Flagship.start(envId, apiKey, {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            decisionMode: decisionMode,
+            fetchNow: configRef.current.fetchNow,
+            onSdkStatusChanged: (...args) => handleSdkStatusChangeRef.current(...args),
+            onBucketingUpdated: (...args) => handleBucketingUpdateRef.current(...args),
+            hitDeduplicationTime: configRef.current.hitDeduplicationTime,
+            language: configRef.current.language,
+            sdkVersion: configRef.current.sdkVersion,
+            ...propsRef.current,
+        });
+    }, [envId, apiKey, decisionMode]);
+    const updateFlagshipVisitor = useCallback(() => {
+        if (!visitorDataMemo ||
             Flagship.getStatus() !== FSSdkStatus.SDK_INITIALIZED) {
             return;
         }
-        if (!state.visitor ||
-            (state.visitor.visitorId !== visitorDataRef.current.id &&
-                (!visitorDataRef.current.isAuthenticated ||
-                    (visitorDataRef.current.isAuthenticated &&
-                        state.visitor.anonymousId)))) {
-            state.visitor?.cleanup();
-            createVisitor();
+        const currentVisitor = flagshipVisitorRef.current;
+        if (shouldRecreateVisitor(currentVisitor, visitorDataMemo.id, visitorDataMemo.isAuthenticated)) {
+            currentVisitor?.cleanup();
+            createFlagshipVisitor(Flagship.getStatus());
             return;
         }
-        if (visitorDataRef.current.hasConsented !== state.visitor.hasConsented) {
-            state.visitor.setConsent(visitorDataRef.current.hasConsented ?? true);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        state.visitor.updateContext(visitorDataRef.current.context);
-        if (!state.visitor.anonymousId && visitorDataRef.current.isAuthenticated) {
-            state.visitor.authenticate(visitorDataRef.current.id);
+        // Update existing visitor
+        if (currentVisitor) {
+            updateVisitorData(currentVisitor, visitorDataMemo.id, visitorDataMemo.context, visitorDataMemo.hasConsented, visitorDataMemo.isAuthenticated);
         }
-        if (state.visitor.anonymousId && !visitorDataRef.current.isAuthenticated) {
-            state.visitor.unauthenticate();
-        }
-        state.visitor.fetchFlags();
-    }
+    }, [createFlagshipVisitor, visitorDataMemo]);
     // #endregion
     useNonInitialEffect(() => {
         if (fetchFlagsOnBucketingUpdated) {
-            state.visitor?.fetchFlags();
+            flagshipVisitorRef.current?.fetchFlags();
         }
-    }, [lastModified]);
+    }, [lastModified, fetchFlagsOnBucketingUpdated]);
     useNonInitialEffect(() => {
-        visitorDataRef.current = visitorData;
-        updateVisitor();
-    }, [JSON.stringify(visitorData)]);
+        updateFlagshipVisitor();
+    }, [updateFlagshipVisitor]);
     useEffect(() => {
-        initSdk();
-    }, [envId, apiKey, decisionMode]);
-    const handleDisplay = () => {
-        const isFirstInit = !state.visitor;
-        if (state.isInitializing && loadingComponent && isFirstInit && fetchNow) {
+        initializeFlagshipSdk();
+    }, [initializeFlagshipSdk]);
+    useEffect(() => {
+        return () => {
+            flagshipVisitorRef.current?.cleanup();
+            Flagship.close();
+        };
+    }, []);
+    const handleDisplay = useMemo(() => {
+        const isFirstInit = !flagshipState.visitor;
+        if (flagshipState.isInitializing && loadingComponent && isFirstInit && fetchNow) {
             return _jsx(_Fragment, { children: loadingComponent });
         }
         return _jsx(_Fragment, { children: children });
-    };
-    useEffect(() => {
-        window?.addEventListener?.(INTERNAL_EVENTS.FsTriggerRendering, onVariationsForced);
-        return () => window?.removeEventListener?.(INTERNAL_EVENTS.FsTriggerRendering, onVariationsForced);
-    }, [state.config?.isQAModeEnabled]);
-    const onVariationsForced = (e) => {
+    }, [
+        flagshipState.isInitializing,
+        flagshipState.visitor,
+        loadingComponent,
+        fetchNow,
+        children,
+    ]);
+    const handleForcedVariations = useCallback((e) => {
         const { detail } = e;
         if (detail.forcedReFetchFlags) {
-            stateRef.current?.visitor?.fetchFlags();
+            flagshipVisitorRef.current?.fetchFlags();
         }
         else {
-            setState((state) => ({
+            setFlagshipState((state) => ({
                 ...state,
                 toggleForcedVariations: !state.toggleForcedVariations,
             }));
         }
-    };
-    return (_jsx(FlagshipContext.Provider, { value: { state, setState }, children: handleDisplay() }));
+    }, []);
+    useEffect(() => {
+        window?.addEventListener?.(INTERNAL_EVENTS.FsTriggerRendering, handleForcedVariations);
+        return () => window?.removeEventListener?.(INTERNAL_EVENTS.FsTriggerRendering, handleForcedVariations);
+    }, [handleForcedVariations]);
+    const contextValue = useMemo(() => ({ state: flagshipState, setState: setFlagshipState }), [flagshipState]);
+    return (_jsx(FlagshipContext.Provider, { value: contextValue, children: handleDisplay }));
 }

package/dist/edge/src/hooks.js

@@ -0,0 +1,42 @@
+'use client';
+import { useRef, useEffect } from "react";
+export function useLatestRef(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}
+export function shouldRecreateVisitor(currentVisitor, visitorId, isAuthenticated) {
+    if (!currentVisitor) {
+        return true;
+    }
+    const hasIdChanged = currentVisitor.visitorId !== visitorId;
+    return hasIdChanged && (!isAuthenticated || (isAuthenticated && !!currentVisitor.anonymousId));
+}
+export function shouldUpdateConsent(currentVisitor, hasConsented) {
+    return currentVisitor.hasConsented !== hasConsented;
+}
+export function getAuthenticationAction(currentVisitor, isAuthenticated) {
+    if (!currentVisitor.anonymousId && isAuthenticated) {
+        return "authenticate";
+    }
+    if (currentVisitor.anonymousId && !isAuthenticated) {
+        return "unauthenticate";
+    }
+    return null;
+}
+export function updateVisitorData(visitor, visitorId, context, hasConsented, isAuthenticated) {
+    if (shouldUpdateConsent(visitor, hasConsented)) {
+        visitor.setConsent(hasConsented ?? true);
+    }
+    visitor.updateContext(context);
+    const authAction = getAuthenticationAction(visitor, isAuthenticated);
+    if (authAction === "authenticate") {
+        visitor.authenticate(visitorId);
+    }
+    else if (authAction === "unauthenticate") {
+        visitor.unauthenticate();
+    }
+    visitor.fetchFlags();
+}

package/dist/edge/src/sdkVersion.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '5.2.0';
+export const version = '5.2.2';