@ninetailed/experience.js-react 7.12.1 → 7.13.0-beta.1

package/index.cjs.js

@@ -100,7 +100,6 @@ function __rest(s, e) {
 }
 
 function formatProfileForHook(profile) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const profileStateWithoutExperiences = __rest(profile, ["experiences"]);
   return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
     loading: profile.status === 'loading'
@@ -162,29 +161,36 @@ const usePersonalize = (baseline, variants, options = {
 function useFlag(flagKey, defaultValue) {
   const ninetailed = useNinetailed();
   const lastProcessedState = React.useRef(null);
+  const defaultValueRef = React.useRef(defaultValue);
+  const flagKeyRef = React.useRef(flagKey);
   const [result, setResult] = React.useState({
     value: defaultValue,
     status: 'loading',
     error: null
   });
+  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  React.useEffect(() => {
+    if (!radash.isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
+      defaultValueRef.current = defaultValue;
+      flagKeyRef.current = flagKey;
+      setResult({
+        value: defaultValue,
+        status: 'loading',
+        error: null
+      });
+      lastProcessedState.current = null;
+    }
+  }, [flagKey, defaultValue]);
+  // Effect 2: Handle Ninetailed changes
   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,
+          value: defaultValueRef.current,
           status: 'loading',
           error: null
         });
@@ -192,40 +198,37 @@ function useFlag(flagKey, defaultValue) {
       }
       if (changesState.status === 'error') {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: changesState.error
         });
         return;
       }
       try {
-        // Find the change with our flag key
-        const change = changesState.changes.find(change => change.key === flagKey);
+        const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === experience_jsShared.ChangeTypes.Variable) {
-          const flagValue = change.value;
           setResult({
-            value: flagValue,
+            value: change.value,
             status: 'success',
             error: null
           });
         } else {
-          // Flag not found or wrong type, use default
           setResult({
-            value: defaultValue,
+            value: defaultValueRef.current,
             status: 'success',
             error: null
           });
         }
       } catch (error) {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: error instanceof Error ? error : new Error(String(error))
         });
       }
     });
     return unsubscribe;
-  }, [ninetailed, flagKey, defaultValue]);
+  }, [ninetailed]);
   return result;
 }
 
@@ -531,9 +534,7 @@ const Experience = _a => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
       const isObject = typeof componentElement === 'object' && componentElement !== null;
-      const constructorName = isObject ?
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      componentElement.constructor.name : '';
+      const constructorName = isObject ? componentElement.constructor.name : '';
       const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
       logger.warn(`The component ref being in Experience is an invalid element. Expected an Element but got ${typeof componentElement}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This component won't be observed.`);
       return () => {
@@ -644,7 +645,15 @@ const ESRLoadingComponent = _a => {
       }
     }));
   }
-  const component = experience.components.find(component => component.baseline.id === baseline.id);
+  const component = experience.components.find(component => {
+    if (!('id' in component.baseline)) {
+      return false;
+    }
+    if (!('id' in baseline)) {
+      return component.baseline.id === undefined;
+    }
+    return component.baseline.id === baseline.id;
+  });
   if (!component) {
     return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {

package/index.esm.js

@@ -78,7 +78,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 const _excluded$3 = ["experiences"];
 function formatProfileForHook(profile) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profile, _excluded$3);
   return Object.assign({}, profileStateWithoutExperiences, {
     loading: profile.status === 'loading'
@@ -143,29 +142,38 @@ const usePersonalize = (baseline, variants, options = {
 function useFlag(flagKey, defaultValue) {
   const ninetailed = useNinetailed();
   const lastProcessedState = useRef(null);
+  const defaultValueRef = useRef(defaultValue);
+  const flagKeyRef = useRef(flagKey);
   const [result, setResult] = useState({
     value: defaultValue,
     status: 'loading',
     error: null
   });
+
+  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  useEffect(() => {
+    if (!isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
+      defaultValueRef.current = defaultValue;
+      flagKeyRef.current = flagKey;
+      setResult({
+        value: defaultValue,
+        status: 'loading',
+        error: null
+      });
+      lastProcessedState.current = null;
+    }
+  }, [flagKey, defaultValue]);
+
+  // Effect 2: Handle Ninetailed changes
   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,
+          value: defaultValueRef.current,
           status: 'loading',
           error: null
         });
@@ -173,40 +181,37 @@ function useFlag(flagKey, defaultValue) {
       }
       if (changesState.status === 'error') {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: changesState.error
         });
         return;
       }
       try {
-        // Find the change with our flag key
-        const change = changesState.changes.find(change => change.key === flagKey);
+        const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === ChangeTypes.Variable) {
-          const flagValue = change.value;
           setResult({
-            value: flagValue,
+            value: change.value,
             status: 'success',
             error: null
           });
         } else {
-          // Flag not found or wrong type, use default
           setResult({
-            value: defaultValue,
+            value: defaultValueRef.current,
             status: 'success',
             error: null
           });
         }
       } catch (error) {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: error instanceof Error ? error : new Error(String(error))
         });
       }
     });
     return unsubscribe;
-  }, [ninetailed, flagKey, defaultValue]);
+  }, [ninetailed]);
   return result;
 }
 
@@ -515,9 +520,7 @@ const Experience = _ref2 => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
       const isObject = typeof componentElement === 'object' && componentElement !== null;
-      const constructorName = isObject ?
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      componentElement.constructor.name : '';
+      const constructorName = isObject ? componentElement.constructor.name : '';
       const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
       logger.warn(`The component ref being in Experience is an invalid element. Expected an Element but got ${typeof componentElement}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This component won't be observed.`);
       return () => {
@@ -628,7 +631,15 @@ const ESRLoadingComponent = _ref => {
       }
     }));
   }
-  const component = experience.components.find(component => component.baseline.id === baseline.id);
+  const component = experience.components.find(component => {
+    if (!('id' in component.baseline)) {
+      return false;
+    }
+    if (!('id' in baseline)) {
+      return component.baseline.id === undefined;
+    }
+    return component.baseline.id === baseline.id;
+  });
   if (!component) {
     return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {

package/package.json

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