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

package/index.cjs.js

@@ -98,6 +98,7 @@ const ANONYMOUS_ID = '__nt_anonymous_id__';
 const DEBUG_FLAG = '__nt_debug__';
 const PROFILE_FALLBACK_CACHE = '__nt_profile__';
 const EXPERIENCES_FALLBACK_CACHE = '__nt_experiences__';
+const CHANGES_FALLBACK_CACHE = '__nt_changes__';
 const PROFILE_CHANGE = 'profile-change';
 const PROFILE_RESET = 'profile-reset';
 const CONSENT = '__nt-consent__';
@@ -148,14 +149,12 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
         instance.dispatch({
           type: PROFILE_RESET
         });
-        instance.storage.removeItem(ANONYMOUS_ID);
-        instance.storage.removeItem(PROFILE_FALLBACK_CACHE);
-        instance.storage.removeItem(EXPERIENCES_FALLBACK_CACHE);
+        this.clearCaches();
         experience_jsShared.logger.debug('Removed old profile data from localstorage.');
         if (typeof this.onInitProfileId === 'function') {
           const profileId = yield this.onInitProfileId(undefined);
           if (typeof profileId === 'string') {
-            instance.storage.setItem(ANONYMOUS_ID, profileId);
+            this.setAnonymousId(profileId);
           }
         }
         yield this.ninetailed.track('nt_reset');
@@ -201,13 +200,13 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
       const legacyAnonymousId = instance.storage.getItem(LEGACY_ANONYMOUS_ID);
       if (legacyAnonymousId) {
         experience_jsShared.logger.debug('Found legacy anonymousId, migrating to new one.', legacyAnonymousId);
-        instance.storage.setItem(ANONYMOUS_ID, legacyAnonymousId);
+        this.setAnonymousId(legacyAnonymousId);
         instance.storage.removeItem(LEGACY_ANONYMOUS_ID);
       }
       if (typeof this.onInitProfileId === 'function') {
-        const profileId = yield this.onInitProfileId(instance.storage.getItem(ANONYMOUS_ID));
+        const profileId = yield this.onInitProfileId(this.getAnonymousId());
         if (typeof profileId === 'string') {
-          instance.storage.setItem(ANONYMOUS_ID, profileId);
+          this.setAnonymousId(profileId);
         }
       }
       experience_jsShared.logger.debug('Ninetailed Core plugin initialized.');
@@ -316,6 +315,61 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
     }
     return this._instance;
   }
+  getAnonymousId() {
+    var _c;
+    return (_c = this.instance.storage.getItem(ANONYMOUS_ID)) !== null && _c !== void 0 ? _c : undefined;
+  }
+  setAnonymousId(id) {
+    this.instance.storage.setItem(ANONYMOUS_ID, id);
+  }
+  clearAnonymousId() {
+    this.instance.storage.removeItem(ANONYMOUS_ID);
+  }
+  setFallbackProfile(profile) {
+    this.instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
+  }
+  getFallbackProfile() {
+    var _c;
+    return (_c = this.instance.storage.getItem(PROFILE_FALLBACK_CACHE)) !== null && _c !== void 0 ? _c : undefined;
+  }
+  clearFallbackProfile() {
+    this.instance.storage.removeItem(PROFILE_FALLBACK_CACHE);
+  }
+  setFallbackExperiences(experiences) {
+    this.instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
+  }
+  getFallbackExperiences() {
+    return this.instance.storage.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
+  }
+  clearFallbackExperiences() {
+    this.instance.storage.removeItem(EXPERIENCES_FALLBACK_CACHE);
+  }
+  setFallbackChanges(changes) {
+    this.instance.storage.setItem(CHANGES_FALLBACK_CACHE, changes);
+  }
+  getFallbackChanges() {
+    return this.instance.storage.getItem(CHANGES_FALLBACK_CACHE) || [];
+  }
+  clearFallbackChanges() {
+    this.instance.storage.removeItem(CHANGES_FALLBACK_CACHE);
+  }
+  clearCaches() {
+    this.clearAnonymousId();
+    this.clearFallbackProfile();
+    this.clearFallbackExperiences();
+    this.clearFallbackChanges();
+  }
+  populateCaches({
+    experiences,
+    profile,
+    anonymousId,
+    changes
+  }) {
+    this.setAnonymousId(anonymousId);
+    this.setFallbackProfile(profile);
+    this.setFallbackExperiences(experiences);
+    this.setFallbackChanges(changes);
+  }
   _flush() {
     return __awaiter(this, void 0, void 0, function* () {
       const events = Object.assign([], this.queue);
@@ -327,10 +381,11 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
         };
       }
       try {
-        const anonymousId = this.instance.storage.getItem(ANONYMOUS_ID);
+        const anonymousId = this.getAnonymousId();
         const {
           profile,
-          experiences
+          experiences,
+          changes
         } = yield this.apiClient.upsertProfile({
           profileId: anonymousId,
           events
@@ -338,15 +393,20 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
           locale: this.locale,
           enabledFeatures: this.enabledFeatures
         });
-        this.instance.storage.setItem(ANONYMOUS_ID, profile.id);
-        this.instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
-        this.instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
+        this.populateCaches({
+          anonymousId: profile.id,
+          profile,
+          experiences,
+          changes
+        });
         experience_jsShared.logger.debug('Profile from api: ', profile);
         experience_jsShared.logger.debug('Experiences from api: ', experiences);
         this.instance.dispatch({
           type: PROFILE_CHANGE,
           profile,
-          experiences
+          experiences,
+          changes,
+          error: undefined
         });
         yield delay(20);
         return {
@@ -354,22 +414,26 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
         };
       } catch (error) {
         experience_jsShared.logger.debug('An error occurred during flushing the events: ', error);
-        const fallbackProfile = this.instance.storage.getItem(PROFILE_FALLBACK_CACHE);
-        const fallbackExperiences = this.instance.storage.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
+        const fallbackProfile = this.getFallbackProfile();
+        const fallbackExperiences = this.getFallbackExperiences();
+        const fallbackChanges = this.getFallbackChanges();
         if (fallbackProfile) {
           experience_jsShared.logger.debug('Found a fallback profile - will use this.');
           this.instance.dispatch({
             type: PROFILE_CHANGE,
             profile: fallbackProfile,
-            experiences: fallbackExperiences
+            experiences: fallbackExperiences,
+            changes: fallbackChanges,
+            error: undefined
           });
         } else {
           experience_jsShared.logger.debug('No fallback profile found - setting profile to null.');
           this.instance.dispatch({
             type: PROFILE_CHANGE,
             profile: null,
+            changes: fallbackChanges,
             experiences: fallbackExperiences,
-            error
+            error: error
           });
         }
         return {
@@ -436,19 +500,17 @@ const isInterestedInHiddenPage = arg => {
 };
 
 const decodeExperienceVariantsMap = encodedExperienceVariantsMap => {
-  return encodedExperienceVariantsMap.split(',').map(experienceIdWithVariant => {
-    const [experienceId, _variantIndex] = experienceIdWithVariant.split('=');
-    const variantIndex = parseInt(_variantIndex);
+  const experientVariantsAssignments = encodedExperienceVariantsMap.split(',');
+  const experienceVariantsMap = {};
+  for (const experienceVariantAssignment of experientVariantsAssignments) {
+    const [experienceId, variantIndexString] = experienceVariantAssignment.split('=');
+    const variantIndex = parseInt(variantIndexString);
     if (!experienceId || !variantIndex) {
-      return null;
+      continue;
     }
-    return {
-      experienceId,
-      variantIndex
-    };
-  }).filter(x => !!x).reduce((acc, curr) => Object.assign(Object.assign({}, acc), {
-    [curr.experienceId]: curr.variantIndex
-  }), {});
+    experienceVariantsMap[experienceId] = variantIndex;
+  }
+  return experienceVariantsMap;
 };
 
 class OnChangeEmitter {
@@ -510,6 +572,28 @@ const createPassThroughMiddleware = () => {
     };
   };
 };
+function createExperienceSelectionMiddleware({
+  plugins,
+  experiences,
+  baseline,
+  profile
+}) {
+  if (profile === null) {
+    return createPassThroughMiddleware();
+  }
+  const pluginsWithMiddleware = selectPluginsHavingExperienceSelectionMiddleware(plugins);
+  const middlewareFunctions = [];
+  for (const plugin of pluginsWithMiddleware) {
+    const middleware = plugin.getExperienceSelectionMiddleware({
+      experiences,
+      baseline
+    });
+    if (middleware !== undefined) {
+      middlewareFunctions.push(middleware);
+    }
+  }
+  return experience_jsShared.pipe(...middlewareFunctions);
+}
 const makeExperienceSelectMiddleware = ({
   plugins,
   onChange,
@@ -519,18 +603,12 @@ const makeExperienceSelectMiddleware = ({
 }) => {
   let removeChangeListeners = [];
   const pluginsHavingChangeEmitters = selectPluginsHavingOnChangeEmitter(plugins);
-  const prepareMiddleware = () => {
-    if (profile === null) {
-      return createPassThroughMiddleware();
-    }
-    const pluginsWithMiddleware = selectPluginsHavingExperienceSelectionMiddleware(plugins);
-    const middlewareFunctions = pluginsWithMiddleware.map(plugin => plugin.getExperienceSelectionMiddleware({
-      experiences,
-      baseline
-    })).filter(result => typeof result !== 'undefined');
-    return experience_jsShared.pipe(...middlewareFunctions);
-  };
-  const middleware = prepareMiddleware();
+  const middleware = createExperienceSelectionMiddleware({
+    plugins,
+    experiences,
+    baseline,
+    profile
+  });
   const addListeners = () => {
     removeChangeListeners = pluginsHavingChangeEmitters.map(plugin => {
       const listener = () => {
@@ -539,8 +617,12 @@ const makeExperienceSelectMiddleware = ({
       return plugin.onChangeEmitter.addListener(listener);
     });
   };
+  // WARNING: This specific implementation using forEach is required.
+  // DO NOT replace with for...of or other loop constructs as they will break functionality.
+  // The exact reason is uncertain but appears related to the transplier.
+  // TODO: Come back and find out why this is the case, maybe a version bump is in order.
   const removeListeners = () => {
-    removeChangeListeners.forEach(listener => listener());
+    removeChangeListeners.forEach(removeListener => removeListener());
   };
   return {
     addListeners,
@@ -553,44 +635,36 @@ class EventBuilder {
   constructor(buildRequestContext) {
     this.buildRequestContext = buildRequestContext || buildClientNinetailedRequestContext;
   }
-  page(properties, data) {
-    return experience_jsShared.buildPageEvent(Object.assign(Object.assign({
+  buildEventBase(data) {
+    return Object.assign(Object.assign({
       messageId: (data === null || data === void 0 ? void 0 : data.messageId) || uuid.v4()
     }, data), {
       timestamp: Date.now(),
-      properties: properties || {},
       ctx: this.buildRequestContext()
+    });
+  }
+  page(properties, data) {
+    return experience_jsShared.buildPageEvent(Object.assign(Object.assign({}, this.buildEventBase(data)), {
+      properties: properties || {}
     }));
   }
   track(event, properties, data) {
-    return experience_jsShared.buildTrackEvent(Object.assign(Object.assign({
-      messageId: (data === null || data === void 0 ? void 0 : data.messageId) || uuid.v4(),
-      timestamp: Date.now()
-    }, data), {
+    return experience_jsShared.buildTrackEvent(Object.assign(Object.assign({}, this.buildEventBase(data)), {
       event,
-      properties: properties || {},
-      ctx: this.buildRequestContext()
+      properties: properties || {}
     }));
   }
   identify(userId, traits, data) {
-    return experience_jsShared.buildIdentifyEvent(Object.assign(Object.assign({
-      messageId: (data === null || data === void 0 ? void 0 : data.messageId) || uuid.v4(),
-      timestamp: Date.now()
-    }, data), {
+    return experience_jsShared.buildIdentifyEvent(Object.assign(Object.assign({}, this.buildEventBase(data)), {
       traits: traits || {},
-      userId: userId || '',
-      ctx: this.buildRequestContext()
+      userId: userId || ''
     }));
   }
   component(componentId, experienceId, variantIndex, data) {
-    return experience_jsShared.buildComponentViewEvent(Object.assign(Object.assign({
-      messageId: (data === null || data === void 0 ? void 0 : data.messageId) || uuid.v4(),
-      timestamp: Date.now()
-    }, data), {
+    return experience_jsShared.buildComponentViewEvent(Object.assign(Object.assign({}, this.buildEventBase(data)), {
       componentId,
       experienceId: experienceId || '',
-      variantIndex: variantIndex || 0,
-      ctx: this.buildRequestContext()
+      variantIndex: variantIndex || 0
     }));
   }
 }
@@ -647,11 +721,7 @@ class Ninetailed {
         yield this.instance.page(data, this.buildOptions(options));
         return this.ninetailedCorePlugin.flush();
       } catch (error) {
-        experience_jsShared.logger.error(error);
-        if (error instanceof RangeError) {
-          throw new Error(`[Validation Error] "page" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
-        }
-        throw error;
+        return this.handleMethodError(error, 'page');
       }
     });
     this.track = (event, properties, options) => __awaiter(this, void 0, void 0, function* () {
@@ -664,11 +734,7 @@ class Ninetailed {
         yield this.instance.track(event.toString(), result.data, this.buildOptions(options));
         return this.ninetailedCorePlugin.flush();
       } catch (error) {
-        experience_jsShared.logger.error(error);
-        if (error instanceof RangeError) {
-          throw new Error(`[Validation Error] "track" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
-        }
-        throw error;
+        this.handleMethodError(error, 'track');
       }
     });
     this.identify = (uid, traits, options) => __awaiter(this, void 0, void 0, function* () {
@@ -681,11 +747,7 @@ class Ninetailed {
         yield this.instance.identify(uid && uid.toString() !== '' ? uid.toString() : EMPTY_MERGE_ID, result.data, this.buildOptions(options));
         return this.ninetailedCorePlugin.flush();
       } catch (error) {
-        experience_jsShared.logger.error(error);
-        if (error instanceof RangeError) {
-          throw new Error(`[Validation Error] "identify" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
-        }
-        throw error;
+        this.handleMethodError(error, 'identify');
       }
     });
     this.batch = events => __awaiter(this, void 0, void 0, function* () {
@@ -714,11 +776,7 @@ class Ninetailed {
         yield Promise.all(promises);
         return this.ninetailedCorePlugin.flush();
       } catch (error) {
-        experience_jsShared.logger.error(error);
-        if (error instanceof RangeError) {
-          throw new Error(`[Validation Error] "batch" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
-        }
-        throw error;
+        this.handleMethodError(error, 'batch');
       }
     });
     this.trackStickyComponentView = ({
@@ -736,11 +794,7 @@ class Ninetailed {
         });
         return this.ninetailedCorePlugin.flush();
       } catch (error) {
-        experience_jsShared.logger.error(error);
-        if (error instanceof RangeError) {
-          throw new Error(`[Validation Error] "trackStickyComponentView" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
-        }
-        throw error;
+        this.handleMethodError(error, 'trackStickyComponentView');
       }
     });
     /**
@@ -763,33 +817,13 @@ class Ninetailed {
       const {
           element
         } = payload,
-        remaingPayload = __rest(payload, ["element"]);
+        remainingPayload = __rest(payload, ["element"]);
       if (!(element instanceof Element)) {
-        const isObject = typeof element === 'object' && element !== null;
-        const constructorName = isObject ? element.constructor.name : '';
-        const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
-        experience_jsShared.logger.warn(`ElementSeenObserver.observeElement was called with an invalid element. Expected an Element but got ${typeof element}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This call will be ignored.`);
-      } else {
-        const existingPayloads = this.observedElements.get(element);
-        const delays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
-        const uniqueDelays = Array.from(new Set([...delays, options === null || options === void 0 ? void 0 : options.delay]));
-        if (!existingPayloads) {
-          this.observedElements.set(element, [remaingPayload]);
-        } else {
-          const isPayloadAlreadyObserved = existingPayloads.some(payload => {
-            return JSON.stringify(payload) === JSON.stringify(remaingPayload);
-          });
-          if (isPayloadAlreadyObserved) {
-            return;
-          }
-          this.observedElements.set(element, [...existingPayloads, remaingPayload]);
-        }
-        uniqueDelays.forEach(delay => {
-          this.elementSeenObserver.observe(element, {
-            delay
-          });
-        });
+        this.logInvalidElement(element);
+        return;
       }
+      this.storeElementPayload(element, remainingPayload);
+      this.setupElementObservation(element, options === null || options === void 0 ? void 0 : options.delay);
     };
     this.unobserveElement = element => {
       this.observedElements.delete(element);
@@ -835,6 +869,7 @@ class Ninetailed {
           cb(Object.assign(Object.assign({}, this._profileState), {
             status: 'success',
             profile: payload.profile,
+            changes: payload.changes,
             experiences: payload.experiences,
             error: null
           }));
@@ -1003,14 +1038,26 @@ class Ninetailed {
         removeMiddlewareChangeListeners();
       };
     };
-    this.onIsInitialized = onIsInitialized => {
-      if (typeof onIsInitialized === 'function') {
+    /**
+     * Registers a callback to be notified when changes occur in the profile state.
+     *
+     * @param cb - Callback function that receives the changes state
+     * @returns Function to unsubscribe from changes updates
+     */
+    this.onChangesChange = cb => {
+      this.notifyChangesCallback(cb, this._profileState);
+      return this.onProfileChange(profileState => {
+        this.notifyChangesCallback(cb, profileState);
+      });
+    };
+    this.onIsInitialized = onIsInitializedCallback => {
+      if (typeof onIsInitializedCallback === 'function') {
         if (this.isInitialized) {
-          onIsInitialized();
+          onIsInitializedCallback();
         } else {
           const detachOnReadyListener = this.instance.on('ready', () => {
             this.isInitialized = true;
-            onIsInitialized();
+            onIsInitializedCallback();
             detachOnReadyListener();
           });
         }
@@ -1090,6 +1137,7 @@ class Ninetailed {
       status: 'loading',
       profile: null,
       experiences: null,
+      changes: null,
       error: null,
       from: 'api'
     };
@@ -1136,6 +1184,67 @@ class Ninetailed {
   get pluginsWithCustomComponentViewThreshold() {
     return [this.ninetailedCorePlugin, ...this.plugins].filter(plugin => experience_jsPluginAnalytics.hasComponentViewTrackingThreshold(plugin));
   }
+  logInvalidElement(element) {
+    const isObject = typeof element === 'object' && element !== null;
+    const constructorName = isObject ? element.constructor.name : '';
+    const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
+    experience_jsShared.logger.warn(`ElementSeenObserver.observeElement was called with an invalid element. Expected an Element but got ${typeof element}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This call will be ignored.`);
+  }
+  storeElementPayload(element, payload) {
+    const existingPayloads = this.observedElements.get(element) || [];
+    // Check if the payload is already being observed for this element
+    const isPayloadAlreadyObserved = existingPayloads.some(existingPayload => JSON.stringify(existingPayload) === JSON.stringify(payload));
+    if (isPayloadAlreadyObserved) {
+      return;
+    }
+    // Store the new or updated payloads
+    this.observedElements.set(element, [...existingPayloads, payload]);
+  }
+  setupElementObservation(element, delay) {
+    // Get all relevant delays from plugins and the custom delay
+    const pluginDelays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
+    // Ensure we only observe each delay once
+    const uniqueDelays = Array.from(new Set([...pluginDelays, delay]));
+    // Set up observation for each delay
+    uniqueDelays.forEach(delay => {
+      this.elementSeenObserver.observe(element, {
+        delay
+      });
+    });
+  }
+  /**
+   * Helper method to extract changes state from profile state and notify callback
+   * @private
+   */
+  notifyChangesCallback(cb, profileState) {
+    if (profileState.status === 'loading') {
+      cb({
+        status: 'loading',
+        changes: null,
+        error: null
+      });
+    } else if (profileState.status === 'error') {
+      cb({
+        status: 'error',
+        changes: null,
+        error: profileState.error
+      });
+    } else {
+      cb({
+        status: 'success',
+        changes: profileState.changes,
+        error: null
+      });
+    }
+  }
+  // Always throws, never returns
+  handleMethodError(error, method) {
+    experience_jsShared.logger.error(error);
+    if (error instanceof RangeError) {
+      throw new Error(`[Validation Error] "${method}" was called with invalid params. Could not validate due to "RangeError: Maximum call stack size exceeded". This can be caused by passing a cyclic data structure as a parameter. Refrain from passing a cyclic data structure or sanitize it beforehand.`);
+    }
+    throw error;
+  }
   get profileState() {
     return this._profileState;
   }
@@ -1281,6 +1390,7 @@ Object.defineProperty(exports, 'selectHasExperienceVariants', {
     get: function () { return experience_jsShared.selectHasVariants; }
 });
 exports.ANONYMOUS_ID = ANONYMOUS_ID;
+exports.CHANGES_FALLBACK_CACHE = CHANGES_FALLBACK_CACHE;
 exports.COMPONENT = COMPONENT;
 exports.COMPONENT_START = COMPONENT_START;
 exports.CONSENT = CONSENT;