@ninetailed/experience.js-react 7.11.0-beta.1 → 7.12.0-beta.0

package/index.cjs.js

@@ -99,32 +99,49 @@ function __rest(s, e) {
     return t;
 }
 
+function formatProfileForHook(profile) {
+  const profileStateWithoutExperiences = __rest(profile, ["experiences"]);
+  return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
+    loading: profile.status === 'loading'
+  });
+}
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
 const useProfile = () => {
   const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = React.useState(ninetailed.profileState);
-  const profileStateRef = React.useRef({});
-  /**
-   * This effect compares the old and new profile state before updating it.
-   * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
-   * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
-   * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
-   */
+  const [strippedProfileState, setStrippedProfileState] = React.useState(formatProfileForHook(ninetailed.profileState));
+  // Reference to track the previous profile state for comparison
+  const profileStateRef = React.useRef(ninetailed.profileState);
   React.useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (radash.isEqual(profileState, profileStateRef.current)) {
-        experience_jsShared.logger.debug('Profile State Did Not Change', profileState);
+    const unsubscribe = ninetailed.onProfileChange(changedProfileState => {
+      // Skip update if the profile hasn't actually changed
+      // Here we compare the entire profile including experiences and changes
+      if (radash.isEqual(changedProfileState, profileStateRef.current)) {
+        experience_jsShared.logger.debug('Profile State Did Not Change', changedProfileState);
         return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        experience_jsShared.logger.debug('Profile State Changed', profileState);
       }
+      profileStateRef.current = changedProfileState;
+      experience_jsShared.logger.debug('Profile State Changed', changedProfileState);
+      setStrippedProfileState(formatProfileForHook(changedProfileState));
     });
+    // Clean up subscription when component unmounts
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+        experience_jsShared.logger.debug('Unsubscribed from profile state changes');
+      }
+    };
   }, []);
-  const profileStateWithoutExperiences = __rest(profileState, ["experiences"]);
-  return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
-    loading: profileState.status === 'loading'
-  });
+  return strippedProfileState;
 };
 
 const usePersonalize = (baseline, variants, options = {
@@ -134,6 +151,83 @@ const usePersonalize = (baseline, variants, options = {
   return experience_js.selectVariant(baseline, variants, profile, options);
 };
 
+/**
+ * Custom hook to retrieve a specific feature flag from Ninetailed changes.
+ *
+ * @param flagKey - The key of the feature flag to retrieve
+ * @param defaultValue - The default value to use if the flag is not found
+ * @returns An object containing the flag value and status information
+ */
+function useFlag(flagKey, defaultValue) {
+  const ninetailed = useNinetailed();
+  const lastProcessedState = React.useRef(null);
+  const [result, setResult] = React.useState({
+    value: defaultValue,
+    status: 'loading',
+    error: null
+  });
+  React.useEffect(() => {
+    // Reset state when dependencies change
+    setResult({
+      value: defaultValue,
+      status: 'loading',
+      error: null
+    });
+    lastProcessedState.current = null;
+    const unsubscribe = ninetailed.onChangesChange(changesState => {
+      if (lastProcessedState.current && radash.isEqual(lastProcessedState.current, changesState)) {
+        experience_jsShared.logger.debug('Change State Did Not Change', changesState);
+        return;
+      }
+      lastProcessedState.current = changesState;
+      if (changesState.status === 'loading') {
+        // Don't use a function updater here to avoid type issues
+        setResult({
+          value: defaultValue,
+          status: 'loading',
+          error: null
+        });
+        return;
+      }
+      if (changesState.status === 'error') {
+        setResult({
+          value: defaultValue,
+          status: 'error',
+          error: changesState.error
+        });
+        return;
+      }
+      try {
+        // Find the change with our flag key
+        const change = changesState.changes.find(change => change.key === flagKey);
+        if (change && change.type === experience_jsShared.ChangeTypes.Variable) {
+          const flagValue = change.value;
+          setResult({
+            value: flagValue,
+            status: 'success',
+            error: null
+          });
+        } else {
+          // Flag not found or wrong type, use default
+          setResult({
+            value: defaultValue,
+            status: 'success',
+            error: null
+          });
+        }
+      } catch (error) {
+        setResult({
+          value: defaultValue,
+          status: 'error',
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+      }
+    });
+    return unsubscribe;
+  }, [ninetailed, flagKey, defaultValue]);
+  return result;
+}
+
 const TrackHasSeenComponent = ({
   children,
   variant,
@@ -253,8 +347,8 @@ const MergeTag = ({
   fallback
 }) => {
   const {
-    loading,
-    profile
+    profile,
+    loading
   } = useProfile();
   if (loading || !profile) {
     return null;
@@ -598,6 +692,7 @@ exports.NinetailedProvider = NinetailedProvider;
 exports.Personalize = Personalize;
 exports.TrackHasSeenComponent = TrackHasSeenComponent;
 exports.useExperience = useExperience;
+exports.useFlag = useFlag;
 exports.useNinetailed = useNinetailed;
 exports.usePersonalize = usePersonalize;
 exports.useProfile = useProfile;

package/index.esm.js

@@ -1,7 +1,7 @@
 import React, { createContext, useMemo, useContext, useState, useRef, useEffect, createElement, forwardRef } from 'react';
 import { Ninetailed, selectVariant, selectHasExperienceVariants } from '@ninetailed/experience.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { logger, isBrowser } from '@ninetailed/experience.js-shared';
+import { logger, ChangeTypes, isBrowser } from '@ninetailed/experience.js-shared';
 import { isEqual, get } from 'radash';
 import { isForwardRef } from 'react-is';
 
@@ -77,33 +77,52 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 const _excluded$3 = ["experiences"];
+function formatProfileForHook(profile) {
+  const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profile, _excluded$3);
+  return Object.assign({}, profileStateWithoutExperiences, {
+    loading: profile.status === 'loading'
+  });
+}
+
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
 const useProfile = () => {
   const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = useState(ninetailed.profileState);
-  const profileStateRef = useRef({});
+  const [strippedProfileState, setStrippedProfileState] = useState(formatProfileForHook(ninetailed.profileState));
 
-  /**
-   * This effect compares the old and new profile state before updating it.
-   * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
-   * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
-   * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
-   */
+  // Reference to track the previous profile state for comparison
+  const profileStateRef = useRef(ninetailed.profileState);
   useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (isEqual(profileState, profileStateRef.current)) {
-        logger.debug('Profile State Did Not Change', profileState);
+    const unsubscribe = ninetailed.onProfileChange(changedProfileState => {
+      // Skip update if the profile hasn't actually changed
+      // Here we compare the entire profile including experiences and changes
+      if (isEqual(changedProfileState, profileStateRef.current)) {
+        logger.debug('Profile State Did Not Change', changedProfileState);
         return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        logger.debug('Profile State Changed', profileState);
       }
+      profileStateRef.current = changedProfileState;
+      logger.debug('Profile State Changed', changedProfileState);
+      setStrippedProfileState(formatProfileForHook(changedProfileState));
     });
+
+    // Clean up subscription when component unmounts
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+        logger.debug('Unsubscribed from profile state changes');
+      }
+    };
   }, []);
-  const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profileState, _excluded$3);
-  return Object.assign({}, profileStateWithoutExperiences, {
-    loading: profileState.status === 'loading'
-  });
+  return strippedProfileState;
 };
 
 const usePersonalize = (baseline, variants, options = {
@@ -113,6 +132,83 @@ const usePersonalize = (baseline, variants, options = {
   return selectVariant(baseline, variants, profile, options);
 };
 
+/**
+ * Custom hook to retrieve a specific feature flag from Ninetailed changes.
+ *
+ * @param flagKey - The key of the feature flag to retrieve
+ * @param defaultValue - The default value to use if the flag is not found
+ * @returns An object containing the flag value and status information
+ */
+function useFlag(flagKey, defaultValue) {
+  const ninetailed = useNinetailed();
+  const lastProcessedState = useRef(null);
+  const [result, setResult] = useState({
+    value: defaultValue,
+    status: 'loading',
+    error: null
+  });
+  useEffect(() => {
+    // Reset state when dependencies change
+    setResult({
+      value: defaultValue,
+      status: 'loading',
+      error: null
+    });
+    lastProcessedState.current = null;
+    const unsubscribe = ninetailed.onChangesChange(changesState => {
+      if (lastProcessedState.current && isEqual(lastProcessedState.current, changesState)) {
+        logger.debug('Change State Did Not Change', changesState);
+        return;
+      }
+      lastProcessedState.current = changesState;
+      if (changesState.status === 'loading') {
+        // Don't use a function updater here to avoid type issues
+        setResult({
+          value: defaultValue,
+          status: 'loading',
+          error: null
+        });
+        return;
+      }
+      if (changesState.status === 'error') {
+        setResult({
+          value: defaultValue,
+          status: 'error',
+          error: changesState.error
+        });
+        return;
+      }
+      try {
+        // Find the change with our flag key
+        const change = changesState.changes.find(change => change.key === flagKey);
+        if (change && change.type === ChangeTypes.Variable) {
+          const flagValue = change.value;
+          setResult({
+            value: flagValue,
+            status: 'success',
+            error: null
+          });
+        } else {
+          // Flag not found or wrong type, use default
+          setResult({
+            value: defaultValue,
+            status: 'success',
+            error: null
+          });
+        }
+      } catch (error) {
+        setResult({
+          value: defaultValue,
+          status: 'error',
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+      }
+    });
+    return unsubscribe;
+  }, [ninetailed, flagKey, defaultValue]);
+  return result;
+}
+
 const TrackHasSeenComponent = ({
   children,
   variant,
@@ -232,8 +328,8 @@ const MergeTag = ({
   fallback
 }) => {
   const {
-    loading,
-    profile
+    profile,
+    loading
   } = useProfile();
   if (loading || !profile) {
     return null;
@@ -571,4 +667,4 @@ const ESRLoadingComponent = _ref => {
   }));
 };
 
-export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useExperience, useNinetailed, usePersonalize, useProfile };
+export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useExperience, useFlag, useNinetailed, usePersonalize, useProfile };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.11.0-beta.1",
+  "version": "7.12.0-beta.0",
   "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.11.0-beta.1",
-    "@ninetailed/experience.js-shared": "7.11.0-beta.1",
-    "@ninetailed/experience.js-plugin-analytics": "7.11.0-beta.1",
+    "@ninetailed/experience.js": "7.12.0-beta.0",
+    "@ninetailed/experience.js-shared": "7.12.0-beta.0",
+    "@ninetailed/experience.js-plugin-analytics": "7.12.0-beta.0",
     "radash": "10.9.0",
     "react-is": "18.2.0"
   },

package/src/lib/index.d.ts

@@ -5,6 +5,7 @@ export type { NinetailedProviderProps, NinetailedProviderInstantiationProps, } f
 export { useNinetailed } from './useNinetailed';
 export { useProfile } from './useProfile';
 export { usePersonalize } from './usePersonalize';
+export { useFlag } from './useFlag';
 export { Personalize } from './Personalize';
 export type { PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';

package/src/lib/useFlag.d.ts

@@ -0,0 +1,22 @@
+import { AllowedVariableType } from '@ninetailed/experience.js-shared';
+export type FlagResult<T> = {
+    status: 'loading';
+    value: T;
+    error: null;
+} | {
+    status: 'success';
+    value: T;
+    error: null;
+} | {
+    status: 'error';
+    value: T;
+    error: Error;
+};
+/**
+ * Custom hook to retrieve a specific feature flag from Ninetailed changes.
+ *
+ * @param flagKey - The key of the feature flag to retrieve
+ * @param defaultValue - The default value to use if the flag is not found
+ * @returns An object containing the flag value and status information
+ */
+export declare function useFlag<T extends AllowedVariableType>(flagKey: string, defaultValue: T): FlagResult<T>;

package/src/lib/useProfile.d.ts

@@ -1,53 +1,17 @@
-export declare const useProfile: () => {
+import { ProfileState } from '@ninetailed/experience.js';
+type UseProfileHookResult = Omit<ProfileState, 'experiences'> & {
     loading: boolean;
-    from: "api" | "hydrated";
-    status: "loading";
-    profile: null;
-    error: null;
-} | {
-    loading: boolean;
-    from: "api" | "hydrated";
-    status: "success";
-    profile: {
-        id: string;
-        stableId: string;
-        random: number;
-        audiences: string[];
-        traits: import("@ninetailed/experience.js-shared").Properties;
-        location: {
-            coordinates?: {
-                latitude: number;
-                longitude: number;
-            } | undefined;
-            city?: string | undefined;
-            postalCode?: string | undefined;
-            region?: string | undefined;
-            regionCode?: string | undefined;
-            country?: string | undefined;
-            countryCode?: string | undefined;
-            continent?: string | undefined;
-            timezone?: string | undefined;
-        };
-        session: {
-            id: string;
-            isReturningVisitor: boolean;
-            landingPage: {
-                path: string;
-                url: string;
-                query: Record<string, string>;
-                referrer: string;
-                search: string;
-            };
-            count: number;
-            activeSessionLength: number;
-            averageSessionLength: number;
-        };
-    };
-    error: null;
-} | {
-    loading: boolean;
-    from: "api" | "hydrated";
-    status: "error";
-    profile: null;
-    error: Error;
 };
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
+export declare const useProfile: () => UseProfileHookResult;
+export {};