@ninetailed/experience.js-react 7.13.0 → 7.14.0

package/index.cjs.js

@@ -100,6 +100,7 @@ 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'
@@ -152,13 +153,9 @@ const usePersonalize = (baseline, variants, 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
+ * Hook to access a Ninetailed variable flag with built-in tracking.
  */
-function useFlag(flagKey, defaultValue) {
+function useFlag(flagKey, defaultValue, options = {}) {
   const ninetailed = useNinetailed();
   const lastProcessedState = React.useRef(null);
   const defaultValueRef = React.useRef(defaultValue);
@@ -168,7 +165,7 @@ function useFlag(flagKey, defaultValue) {
     status: 'loading',
     error: null
   });
-  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  // Reset on input change
   React.useEffect(() => {
     if (!radash.isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
       defaultValueRef.current = defaultValue;
@@ -181,7 +178,7 @@ function useFlag(flagKey, defaultValue) {
       lastProcessedState.current = null;
     }
   }, [flagKey, defaultValue]);
-  // Effect 2: Handle Ninetailed changes
+  // Track changes
   React.useEffect(() => {
     const unsubscribe = ninetailed.onChangesChange(changesState => {
       if (lastProcessedState.current && radash.isEqual(lastProcessedState.current, changesState)) {
@@ -207,11 +204,26 @@ function useFlag(flagKey, defaultValue) {
       try {
         const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === experience_jsShared.ChangeTypes.Variable) {
+          const rawValue = change.value;
+          const actualValue = rawValue && typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue && typeof rawValue['value'] === 'object' ? rawValue['value'] : rawValue;
           setResult({
-            value: change.value,
+            value: actualValue,
             status: 'success',
             error: null
           });
+          const key = flagKeyRef.current;
+          const shouldTrack = typeof options.shouldTrack === 'function' ? options.shouldTrack() : options.shouldTrack !== false;
+          if (shouldTrack) {
+            ninetailed.trackVariableComponentView({
+              variable: change.value,
+              variant: {
+                id: `Variable-${key}`
+              },
+              componentType: 'Variable',
+              variantIndex: change.meta.variantIndex,
+              experienceId: change.meta.experienceId
+            });
+          }
         } else {
           setResult({
             value: defaultValueRef.current,
@@ -534,7 +546,9 @@ const Experience = _a => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
       const isObject = typeof componentElement === 'object' && componentElement !== null;
-      const constructorName = isObject ? componentElement.constructor.name : '';
+      const constructorName = isObject ?
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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 () => {
@@ -545,6 +559,7 @@ const Experience = _a => {
       observeElement({
         element: componentElement,
         experience,
+        componentType: 'Entry',
         audience,
         variant: isVariantHidden ? Object.assign(Object.assign({}, variant), {
           id: `${baseline.id}-hidden`

package/index.esm.js

@@ -78,6 +78,7 @@ 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'
@@ -133,13 +134,9 @@ const usePersonalize = (baseline, variants, 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
+ * Hook to access a Ninetailed variable flag with built-in tracking.
  */
-function useFlag(flagKey, defaultValue) {
+function useFlag(flagKey, defaultValue, options = {}) {
   const ninetailed = useNinetailed();
   const lastProcessedState = useRef(null);
   const defaultValueRef = useRef(defaultValue);
@@ -150,7 +147,7 @@ function useFlag(flagKey, defaultValue) {
     error: null
   });
 
-  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  // Reset on input change
   useEffect(() => {
     if (!isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
       defaultValueRef.current = defaultValue;
@@ -164,7 +161,7 @@ function useFlag(flagKey, defaultValue) {
     }
   }, [flagKey, defaultValue]);
 
-  // Effect 2: Handle Ninetailed changes
+  // Track changes
   useEffect(() => {
     const unsubscribe = ninetailed.onChangesChange(changesState => {
       if (lastProcessedState.current && isEqual(lastProcessedState.current, changesState)) {
@@ -190,11 +187,26 @@ function useFlag(flagKey, defaultValue) {
       try {
         const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === ChangeTypes.Variable) {
+          const rawValue = change.value;
+          const actualValue = rawValue && typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue && typeof rawValue['value'] === 'object' ? rawValue['value'] : rawValue;
           setResult({
-            value: change.value,
+            value: actualValue,
             status: 'success',
             error: null
           });
+          const key = flagKeyRef.current;
+          const shouldTrack = typeof options.shouldTrack === 'function' ? options.shouldTrack() : options.shouldTrack !== false;
+          if (shouldTrack) {
+            ninetailed.trackVariableComponentView({
+              variable: change.value,
+              variant: {
+                id: `Variable-${key}`
+              },
+              componentType: 'Variable',
+              variantIndex: change.meta.variantIndex,
+              experienceId: change.meta.experienceId
+            });
+          }
         } else {
           setResult({
             value: defaultValueRef.current,
@@ -520,7 +532,9 @@ const Experience = _ref2 => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
       const isObject = typeof componentElement === 'object' && componentElement !== null;
-      const constructorName = isObject ? componentElement.constructor.name : '';
+      const constructorName = isObject ?
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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 () => {
@@ -531,6 +545,7 @@ const Experience = _ref2 => {
       observeElement({
         element: componentElement,
         experience,
+        componentType: 'Entry',
         audience,
         variant: isVariantHidden ? Object.assign({}, variant, {
           id: `${baseline.id}-hidden`

package/package.json

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

package/src/lib/useFlag.d.ts

@@ -12,11 +12,11 @@ export type FlagResult<T> = {
     value: T;
     error: Error;
 };
+type UseFlagOptions = {
+    shouldTrack?: boolean | (() => boolean);
+};
 /**
- * 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
+ * Hook to access a Ninetailed variable flag with built-in tracking.
  */
-export declare function useFlag<T extends AllowedVariableType>(flagKey: string, defaultValue: T): FlagResult<T>;
+export declare function useFlag<T extends AllowedVariableType>(flagKey: string, defaultValue: T, options?: UseFlagOptions): FlagResult<T>;
+export {};