@ninetailed/experience.js 7.5.3 → 7.6.0-beta.2

package/{index.cjs → index.cjs.js}

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var experience_jsShared = require('@ninetailed/experience.js-shared');
+var experience_jsPluginAnalytics = require('@ninetailed/experience.js-plugin-analytics');
 var Analytics = require('analytics');
-var zod = require('zod');
+var uuid = require('uuid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Analytics__default = /*#__PURE__*/_interopDefaultLegacy(Analytics);
 
-const HAS_SEEN_COMPONENT = 'has_seen_component';
-const HAS_SEEN_ELEMENT = 'has_seen_element';
 const COMPONENT = 'component';
 const COMPONENT_START = 'componentStart';
 const PAGE_HIDDEN = 'page_hidden';
+const HAS_SEEN_STICKY_COMPONENT = 'sticky_component_view';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -104,98 +104,87 @@ const CONSENT = '__nt-consent__';
 const SET_ENABLED_FEATURES = 'set-enabled-features';
 const EMPTY_MERGE_ID = 'nt:empty-merge-id';
 
-const PLUGIN_NAME = 'ninetailed';
+var _a;
+const PLUGIN_NAME = 'ninetailed:core';
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-const ninetailedCorePlugin = ({
-  apiClient,
-  locale,
-  ninetailed,
-  onInitProfileId,
-  buildClientContext
-}) => {
-  let _instance;
-  let queue = [];
-  let enabledFeatures = Object.values(experience_jsShared.FEATURES);
-  const buildContext = buildClientContext || buildClientNinetailedRequestContext;
-  const flush = () => __awaiter(void 0, void 0, void 0, function* () {
-    const events = Object.assign([], queue);
-    experience_jsShared.logger.info('Start flushing events.');
-    queue = [];
-    if (!events.length) {
-      return {
-        success: true
-      };
-    }
-    try {
-      const anonymousId = _instance.storage.getItem(ANONYMOUS_ID);
-      const {
-        profile,
-        experiences
-      } = yield apiClient.upsertProfile({
-        profileId: anonymousId,
-        events
-      }, {
-        locale,
-        enabledFeatures
-      });
-      _instance.storage.setItem(ANONYMOUS_ID, profile.id);
-      _instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
-      _instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
-      experience_jsShared.logger.debug('Profile from api: ', profile);
-      experience_jsShared.logger.debug('Experiences from api: ', experiences);
-      _instance.dispatch({
-        type: PROFILE_CHANGE,
-        profile,
-        experiences
-      });
-      yield delay(20);
-      return {
-        success: true
-      };
-    } catch (error) {
-      experience_jsShared.logger.debug('An error occurred during flushing the events: ', error);
-      const fallbackProfile = _instance.storage.getItem(PROFILE_FALLBACK_CACHE);
-      const fallbackExperiences = _instance.storage.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
-      if (fallbackProfile) {
-        experience_jsShared.logger.debug('Found a fallback profile - will use this.');
-        _instance.dispatch({
-          type: PROFILE_CHANGE,
-          profile: fallbackProfile,
-          experiences: fallbackExperiences
-        });
-      } else {
-        experience_jsShared.logger.debug('No fallback profile found - setting profile to null.');
-        _instance.dispatch({
-          type: PROFILE_CHANGE,
-          profile: null,
-          experiences: fallbackExperiences,
-          error
+class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyticsPlugin {
+  constructor({
+    apiClient,
+    locale,
+    ninetailed,
+    onInitProfileId,
+    buildClientContext
+  }) {
+    super();
+    this.name = PLUGIN_NAME;
+    this.queue = [];
+    this.enabledFeatures = Object.values(experience_jsShared.FEATURES);
+    this.buildContext = buildClientNinetailedRequestContext;
+    this[_a] = ({
+      payload
+    }) => __awaiter(this, void 0, void 0, function* () {
+      const ctx = this.buildContext();
+      return this.enqueueEvent(experience_jsShared.buildComponentViewEvent({
+        messageId: payload.meta.rid,
+        timestamp: payload.meta.ts,
+        componentId: payload.componentId,
+        experienceId: payload.experienceId,
+        variantIndex: payload.variantIndex,
+        ctx
+      }));
+    });
+    this.methods = {
+      reset: (...args) => __awaiter(this, void 0, void 0, function* () {
+        experience_jsShared.logger.debug('Resetting profile.');
+        const instance = args[args.length - 1];
+        instance.dispatch({
+          type: PROFILE_RESET
         });
-      }
-      return {
-        success: false
-      };
+        instance.storage.removeItem(ANONYMOUS_ID);
+        instance.storage.removeItem(PROFILE_FALLBACK_CACHE);
+        instance.storage.removeItem(EXPERIENCES_FALLBACK_CACHE);
+        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);
+          }
+        }
+        yield this.ninetailed.track('nt_reset');
+        experience_jsShared.logger.info('Profile reset successful.');
+        yield delay(10);
+      }),
+      debug: (...args) => __awaiter(this, void 0, void 0, function* () {
+        const enabled = args[0];
+        const instance = args[args.length - 1];
+        const consoleLogSink = new experience_jsShared.ConsoleLogSink();
+        if (enabled) {
+          instance.storage.setItem(DEBUG_FLAG, true);
+          experience_jsShared.logger.addSink(consoleLogSink);
+          experience_jsShared.logger.info('Debug mode enabled.');
+        } else {
+          instance.storage.removeItem(DEBUG_FLAG);
+          experience_jsShared.logger.info('Debug mode disabled.');
+          experience_jsShared.logger.removeSink(consoleLogSink.name);
+        }
+      })
+    };
+    this.flush = asyncThrottle(this._flush.bind(this));
+    if (onInitProfileId) {
+      this.onInitProfileId = onInitProfileId;
     }
-  });
-  const enqueueEvent = event => __awaiter(void 0, void 0, void 0, function* () {
-    queue = experience_jsShared.unionBy([event], queue, 'messageId');
-  });
-  const abortNonClientEvents = ({
-    abort,
-    payload
-  }) => {
-    if (typeof window !== 'object') {
-      return abort();
+    if (buildClientContext) {
+      this.buildContext = buildClientContext;
     }
-    return payload;
-  };
-  return {
-    name: 'ninetailed',
-    config: {},
-    initialize: ({
-      instance
-    }) => __awaiter(void 0, void 0, void 0, function* () {
-      _instance = instance;
+    this.apiClient = apiClient;
+    this.ninetailed = ninetailed;
+    this.locale = locale;
+  }
+  initialize({
+    instance
+  }) {
+    return __awaiter(this, void 0, void 0, function* () {
+      this._instance = instance;
       if (instance.storage.getItem(DEBUG_FLAG)) {
         experience_jsShared.logger.addSink(new experience_jsShared.ConsoleLogSink());
         experience_jsShared.logger.info('Ninetailed Debug Mode is enabled.');
@@ -207,8 +196,8 @@ const ninetailedCorePlugin = ({
         instance.storage.setItem(ANONYMOUS_ID, legacyAnonymousId);
         instance.storage.removeItem(LEGACY_ANONYMOUS_ID);
       }
-      if (typeof onInitProfileId === 'function') {
-        const profileId = yield onInitProfileId(instance.storage.getItem(ANONYMOUS_ID));
+      if (typeof this.onInitProfileId === 'function') {
+        const profileId = yield this.onInitProfileId(instance.storage.getItem(ANONYMOUS_ID));
         if (typeof profileId === 'string') {
           instance.storage.setItem(ANONYMOUS_ID, profileId);
         }
@@ -216,109 +205,181 @@ const ninetailedCorePlugin = ({
       instance.on(SET_ENABLED_FEATURES, ({
         payload
       }) => {
-        enabledFeatures = payload.features || [];
+        this.enabledFeatures = payload.features || [];
       });
       experience_jsShared.logger.debug('Ninetailed Core plugin initialized.');
-    }),
-    flush: asyncThrottle(flush),
-    pageStart: params => {
-      return abortNonClientEvents(params);
-    },
-    page: ({
-      payload
-    }) => __awaiter(void 0, void 0, void 0, function* () {
+    });
+  }
+  pageStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  page({
+    payload
+  }) {
+    return __awaiter(this, void 0, void 0, function* () {
       experience_jsShared.logger.info('Sending Page event.');
-      const ctx = buildContext();
-      return enqueueEvent(experience_jsShared.buildPageEvent({
+      const ctx = this.buildContext();
+      return this.enqueueEvent(experience_jsShared.buildPageEvent({
         messageId: payload.meta.rid,
         timestamp: payload.meta.ts,
         properties: payload.properties,
         ctx
       }));
-    }),
-    trackStart: params => {
-      return abortNonClientEvents(params);
-    },
-    track: ({
-      payload
-    }) => __awaiter(void 0, void 0, void 0, function* () {
+    });
+  }
+  trackStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  track({
+    payload
+  }) {
+    return __awaiter(this, void 0, void 0, function* () {
       experience_jsShared.logger.info('Sending Track event.');
-      const ctx = buildContext();
-      return enqueueEvent(experience_jsShared.buildTrackEvent({
+      const ctx = this.buildContext();
+      return this.enqueueEvent(experience_jsShared.buildTrackEvent({
         messageId: payload.meta.rid,
         timestamp: payload.meta.ts,
         event: payload.event,
         properties: payload.properties,
         ctx
       }));
-    }),
-    identifyStart: params => {
-      return abortNonClientEvents(params);
-    },
-    identify: ({
-      payload
-    }) => __awaiter(void 0, void 0, void 0, function* () {
+    });
+  }
+  identifyStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  identify({
+    payload
+  }) {
+    return __awaiter(this, void 0, void 0, function* () {
       experience_jsShared.logger.info('Sending Identify event.');
-      const ctx = buildContext();
+      const ctx = this.buildContext();
       if (payload.userId === EMPTY_MERGE_ID && (!payload.traits || typeof payload.traits === 'object' && Object.keys(payload.traits).length === 0)) {
         experience_jsShared.logger.info('Skipping Identify event as no userId and no traits are set.');
         return;
       }
-      return enqueueEvent(experience_jsShared.buildIdentifyEvent({
+      return this.enqueueEvent(experience_jsShared.buildIdentifyEvent({
         messageId: payload.meta.rid,
         timestamp: payload.meta.ts,
         traits: payload.traits,
         userId: payload.userId === EMPTY_MERGE_ID ? '' : payload.userId,
         ctx
       }));
-    }),
-    setItemStart: ({
-      abort,
-      payload
-    }) => {
-      if (![ANONYMOUS_ID, DEBUG_FLAG, PROFILE_FALLBACK_CACHE, EXPERIENCES_FALLBACK_CACHE, CONSENT].includes(payload.key)) {
-        return abort();
+    });
+  }
+  getComponentViewTrackingThreshold() {
+    return 0;
+  }
+  onTrackExperience(properties) {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (properties.experience.sticky) {
+        yield this.instance.dispatch({
+          type: HAS_SEEN_STICKY_COMPONENT,
+          componentId: properties.selectedVariant.id,
+          experienceId: properties.experience.id,
+          variantIndex: properties.selectedVariantIndex
+        });
+        this.flush();
       }
-      return payload;
-    },
-    methods: {
-      reset: (...args) => __awaiter(void 0, void 0, void 0, function* () {
-        experience_jsShared.logger.debug('Resetting profile.');
-        const instance = args[args.length - 1];
-        instance.dispatch({
-          type: PROFILE_RESET
+      return Promise.resolve();
+    });
+  }
+  onTrackComponent() {
+    return Promise.resolve();
+  }
+  setItemStart({
+    abort,
+    payload
+  }) {
+    if (![ANONYMOUS_ID, DEBUG_FLAG, PROFILE_FALLBACK_CACHE, EXPERIENCES_FALLBACK_CACHE, CONSENT].includes(payload.key)) {
+      return abort();
+    }
+    return payload;
+  }
+  enqueueEvent(event) {
+    return __awaiter(this, void 0, void 0, function* () {
+      this.queue = experience_jsShared.unionBy([event], this.queue, 'messageId');
+    });
+  }
+  abortNonClientEvents({
+    abort,
+    payload
+  }) {
+    if (typeof window !== 'object') {
+      return abort();
+    }
+    return payload;
+  }
+  get instance() {
+    if (!this._instance) {
+      throw new Error('Ninetailed Core plugin not initialized.');
+    }
+    return this._instance;
+  }
+  _flush() {
+    return __awaiter(this, void 0, void 0, function* () {
+      const events = Object.assign([], this.queue);
+      experience_jsShared.logger.info('Start flushing events.');
+      this.queue = [];
+      if (!events.length) {
+        return {
+          success: true
+        };
+      }
+      try {
+        const anonymousId = this.instance.storage.getItem(ANONYMOUS_ID);
+        const {
+          profile,
+          experiences
+        } = yield this.apiClient.upsertProfile({
+          profileId: anonymousId,
+          events
+        }, {
+          locale: this.locale,
+          enabledFeatures: this.enabledFeatures
         });
-        instance.storage.removeItem(ANONYMOUS_ID);
-        instance.storage.removeItem(PROFILE_FALLBACK_CACHE);
-        instance.storage.removeItem(EXPERIENCES_FALLBACK_CACHE);
-        experience_jsShared.logger.debug('Removed old profile data from localstorage.');
-        if (typeof onInitProfileId === 'function') {
-          const profileId = yield onInitProfileId(undefined);
-          if (typeof profileId === 'string') {
-            instance.storage.setItem(ANONYMOUS_ID, profileId);
-          }
-        }
-        yield ninetailed.track('nt_reset');
-        experience_jsShared.logger.info('Profile reset successful.');
-        yield delay(10);
-      }),
-      debug: (...args) => __awaiter(void 0, void 0, void 0, function* () {
-        const enabled = args[0];
-        const instance = args[args.length - 1];
-        const consoleLogSink = new experience_jsShared.ConsoleLogSink();
-        if (enabled) {
-          instance.storage.setItem(DEBUG_FLAG, true);
-          experience_jsShared.logger.addSink(consoleLogSink);
-          experience_jsShared.logger.info('Debug mode enabled.');
+        this.instance.storage.setItem(ANONYMOUS_ID, profile.id);
+        this.instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
+        this.instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
+        experience_jsShared.logger.debug('Profile from api: ', profile);
+        experience_jsShared.logger.debug('Experiences from api: ', experiences);
+        this.instance.dispatch({
+          type: PROFILE_CHANGE,
+          profile,
+          experiences
+        });
+        yield delay(20);
+        return {
+          success: true
+        };
+      } 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) || [];
+        if (fallbackProfile) {
+          experience_jsShared.logger.debug('Found a fallback profile - will use this.');
+          this.instance.dispatch({
+            type: PROFILE_CHANGE,
+            profile: fallbackProfile,
+            experiences: fallbackExperiences
+          });
         } else {
-          instance.storage.removeItem(DEBUG_FLAG);
-          experience_jsShared.logger.info('Debug mode disabled.');
-          experience_jsShared.logger.removeSink(consoleLogSink.name);
+          experience_jsShared.logger.debug('No fallback profile found - setting profile to null.');
+          this.instance.dispatch({
+            type: PROFILE_CHANGE,
+            profile: null,
+            experiences: fallbackExperiences,
+            error
+          });
         }
-      })
-    }
-  };
-};
+        return {
+          success: false
+        };
+      }
+    });
+  }
+}
+_a = HAS_SEEN_STICKY_COMPONENT;
 
 class ElementSeenObserver {
   constructor(_options) {
@@ -336,23 +397,29 @@ class ElementSeenObserver {
         target
       } = entry;
       if (isIntersecting) {
-        const delay = this._elementDelays.get(target);
-        const timeOut = window.setTimeout(() => {
-          this._options.onElementSeen(target);
-        }, delay);
-        this._intersectionTimers.set(target, timeOut);
+        const delays = this._elementDelays.get(target);
+        delays === null || delays === void 0 ? void 0 : delays.forEach(delay => {
+          const timeOut = window.setTimeout(() => {
+            this._options.onElementSeen(target, delay);
+          }, delay);
+          const currentTimers = this._intersectionTimers.get(target) || [];
+          this._intersectionTimers.set(target, [...currentTimers, timeOut]);
+        });
       } else {
-        const timeOut = this._intersectionTimers.get(target);
-        if (typeof timeOut !== 'undefined') {
-          window.clearTimeout(timeOut);
-        }
+        const timeOuts = this._intersectionTimers.get(target);
+        timeOuts === null || timeOuts === void 0 ? void 0 : timeOuts.forEach(timeOut => {
+          if (typeof timeOut !== 'undefined') {
+            window.clearTimeout(timeOut);
+          }
+        });
       }
     });
   }
   observe(element, options) {
-    var _a, _b;
-    this._elementDelays.set(element, (_a = options === null || options === void 0 ? void 0 : options.delay) !== null && _a !== void 0 ? _a : 2000);
-    (_b = this._intersectionObserver) === null || _b === void 0 ? void 0 : _b.observe(element);
+    var _a;
+    const delays = this._elementDelays.get(element) || [];
+    this._elementDelays.set(element, Array.from(new Set([...delays, (options === null || options === void 0 ? void 0 : options.delay) || 0])));
+    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(element);
   }
   unobserve(element) {
     var _a;
@@ -368,6 +435,193 @@ const isInterestedInHiddenPage = arg => {
   return typeof arg === 'object' && arg !== null && PAGE_HIDDEN in arg && typeof arg[PAGE_HIDDEN] === 'function';
 };
 
+const decodeExperienceVariantsMap = encodedExperienceVariantsMap => {
+  return encodedExperienceVariantsMap.split(',').map(experienceIdWithVariant => {
+    const [experienceId, _variantIndex] = experienceIdWithVariant.split('=');
+    const variantIndex = parseInt(_variantIndex);
+    if (!experienceId || !variantIndex) {
+      return null;
+    }
+    return {
+      experienceId,
+      variantIndex
+    };
+  }).filter(x => !!x).reduce((acc, curr) => Object.assign(Object.assign({}, acc), {
+    [curr.experienceId]: curr.variantIndex
+  }), {});
+};
+
+class OnChangeEmitter {
+  constructor() {
+    this.onChangeListeners = [];
+  }
+  addListener(listener) {
+    this.onChangeListeners.push(listener);
+    return () => {
+      this.removeOnChangeListener(listener);
+    };
+  }
+  invokeListeners() {
+    this.onChangeListeners.forEach(listener => listener());
+  }
+  removeOnChangeListener(listener) {
+    this.onChangeListeners = this.onChangeListeners.filter(l => l !== listener);
+  }
+}
+
+const hasOnChangeEmitter = arg => {
+  return typeof arg === 'object' && arg !== null && 'onChangeEmitter' in arg && typeof arg.onChangeEmitter === 'object' && arg.onChangeEmitter !== null && arg.onChangeEmitter.constructor === OnChangeEmitter;
+};
+
+const selectPluginsHavingOnChangeEmitter = plugins => {
+  const filteredPlugins = [];
+  for (const plugin of plugins) {
+    if (hasOnChangeEmitter(plugin)) {
+      filteredPlugins.push(plugin);
+    }
+  }
+  return filteredPlugins;
+};
+
+const hasExperienceSelectionMiddleware = arg => {
+  return typeof arg === 'object' && arg !== null && 'getExperienceSelectionMiddleware' in arg && typeof arg.getExperienceSelectionMiddleware === 'function';
+};
+
+const selectPluginsHavingExperienceSelectionMiddleware = plugins => {
+  const filteredPlugins = [];
+  for (const plugin of plugins) {
+    if (hasExperienceSelectionMiddleware(plugin)) {
+      filteredPlugins.push(plugin);
+    }
+  }
+  return filteredPlugins;
+};
+
+const createPassThroughMiddleware = () => {
+  return ({
+    experience,
+    variant,
+    variantIndex
+  }) => {
+    return {
+      experience,
+      variant,
+      variantIndex
+    };
+  };
+};
+const makeExperienceSelectMiddleware = ({
+  plugins,
+  onChange,
+  experiences,
+  baseline,
+  profile
+}) => {
+  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
+    }));
+    return experience_jsShared.pipe(...middlewareFunctions);
+  };
+  const middleware = prepareMiddleware();
+  const addListeners = () => {
+    removeChangeListeners = pluginsHavingChangeEmitters.map(plugin => {
+      const listener = () => {
+        onChange(middleware);
+      };
+      return plugin.onChangeEmitter.addListener(listener);
+    });
+  };
+  const removeListeners = () => {
+    removeChangeListeners.forEach(listener => listener());
+  };
+  return {
+    addListeners,
+    removeListeners,
+    middleware
+  };
+};
+
+class EventBuilder {
+  constructor(buildRequestContext) {
+    this.buildRequestContext = buildRequestContext || buildClientNinetailedRequestContext;
+  }
+  page(properties, data) {
+    return experience_jsShared.buildPageEvent(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()
+    }));
+  }
+  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), {
+      event,
+      properties: properties || {},
+      ctx: this.buildRequestContext()
+    }));
+  }
+  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), {
+      traits: traits || {},
+      userId: userId || '',
+      ctx: this.buildRequestContext()
+    }));
+  }
+  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), {
+      componentId,
+      experienceId: experienceId || '',
+      variantIndex: variantIndex || 0,
+      ctx: this.buildRequestContext()
+    }));
+  }
+}
+
+const hasComponentViewTrackingThreshold = arg => {
+  return typeof arg === 'object' && arg !== null && 'getComponentViewTrackingThreshold' in arg && typeof arg['getComponentViewTrackingThreshold'] === 'function';
+};
+
+const buildOverrideMiddleware = experienceSelectionMiddleware => _a => {
+  var {
+      experience: originalExperience,
+      variant: originalVariant,
+      variantIndex: originalVariantIndex
+    } = _a,
+    other = __rest(_a, ["experience", "variant", "variantIndex"]);
+  const {
+    experience,
+    variant,
+    variantIndex
+  } = experienceSelectionMiddleware({
+    experience: originalExperience,
+    variant: originalVariant,
+    variantIndex: originalVariantIndex
+  });
+  return Object.assign(Object.assign({}, other), {
+    audience: (experience === null || experience === void 0 ? void 0 : experience.audience) ? experience.audience : null,
+    experience,
+    variant,
+    variantIndex
+  });
+};
 class Ninetailed {
   constructor(ninetailedApiClientInstanceOrOptions, {
     plugins,
@@ -379,7 +633,8 @@ class Ninetailed {
     buildClientContext,
     onInitProfileId,
     componentViewTrackingThreshold = 2000,
-    storageImpl
+    storageImpl,
+    useClientSideEvaluation = false
   } = {}) {
     this.isInitialized = false;
     this.page = (data, options) => __awaiter(this, void 0, void 0, function* () {
@@ -416,18 +671,90 @@ class Ninetailed {
         throw error;
       }
     });
+    this.identify = (uid, traits, options) => __awaiter(this, void 0, void 0, function* () {
+      try {
+        const result = experience_jsShared.Traits.default({}).safeParse(traits);
+        if (!result.success) {
+          throw new Error(`[Validation Error] "identify" was called with invalid params. Traits are no valid json: ${result.error.format()}`);
+        }
+        yield this.waitUntilInitialized();
+        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.batch = events => __awaiter(this, void 0, void 0, function* () {
+      try {
+        yield this.waitUntilInitialized();
+        const promises = events.map(event => {
+          if (experience_jsShared.isPageViewEvent(event)) {
+            return this.instance.page(event.properties);
+          }
+          if (experience_jsShared.isTrackEvent(event)) {
+            return this.instance.track(event.event, event.properties);
+          }
+          if (experience_jsShared.isIdentifyEvent(event)) {
+            return this.instance.identify(event.userId || EMPTY_MERGE_ID, event.traits);
+          }
+          if (experience_jsShared.isComponentViewEvent(event)) {
+            return this.instance.dispatch({
+              experienceId: event.experienceId,
+              componentId: event.componentId,
+              variantIndex: event.variantIndex,
+              type: HAS_SEEN_STICKY_COMPONENT
+            });
+          }
+          return Promise.resolve();
+        });
+        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.trackStickyComponentView = ({
+      experienceId,
+      componentId,
+      variantIndex
+    }) => __awaiter(this, void 0, void 0, function* () {
+      try {
+        yield this.waitUntilInitialized();
+        yield this.instance.dispatch({
+          experienceId,
+          componentId,
+          variantIndex,
+          type: HAS_SEEN_STICKY_COMPONENT
+        });
+        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;
+      }
+    });
     /**
      * @deprecated The legacy datamodel is not recommended anymore
      * Will be removed in the next version of the SDK
      */
     this.trackHasSeenComponent = properties => __awaiter(this, void 0, void 0, function* () {
       return this.instance.dispatch(Object.assign(Object.assign({}, properties), {
-        type: HAS_SEEN_COMPONENT
+        type: experience_jsPluginAnalytics.HAS_SEEN_COMPONENT
       }));
     });
     this.trackComponentView = properties => {
       return this.instance.dispatch(Object.assign(Object.assign({}, properties), {
-        type: HAS_SEEN_ELEMENT
+        type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT
       }));
     };
     this.observeElement = (payload, options) => {
@@ -441,54 +768,38 @@ class Ninetailed {
         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);
-        if (!existingPayloads) {
-          this.observedElements.set(element, [remaingPayload]);
-        } else {
-          const isPayloadAlreadyObserved = existingPayloads.some(payload => {
-            return JSON.stringify(payload) === JSON.stringify(remaingPayload);
+        this.observedElements.set(element, remaingPayload);
+        const delays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
+        const uniqueDelays = Array.from(new Set([...delays, (options === null || options === void 0 ? void 0 : options.delay) || this.componentViewTrackingThreshold]));
+        uniqueDelays.forEach(delay => {
+          this.elementSeenObserver.observe(element, {
+            delay
           });
-          if (isPayloadAlreadyObserved) {
-            return;
-          }
-          this.observedElements.set(element, [...existingPayloads, remaingPayload]);
-        }
-        this.elementSeenObserver.observe(element, Object.assign({
-          delay: this.componentViewTrackingThreshold
-        }, options));
+        });
       }
     };
     this.unobserveElement = element => {
       this.observedElements.delete(element);
       this.elementSeenObserver.unobserve(element);
     };
-    this.onElementSeen = element => {
-      const payloads = this.observedElements.get(element);
-      if (typeof payloads !== 'undefined') {
-        for (const payload of payloads) {
-          this.trackComponentView(Object.assign({
-            element
-          }, payload));
+    this.onElementSeen = (element, delay) => {
+      const payload = this.observedElements.get(element);
+      if (typeof payload !== 'undefined') {
+        const pluginNamesInterestedInSeenElementMessage = [...this.pluginsWithCustomComponentViewThreshold.filter(plugin => plugin.getComponentViewTrackingThreshold() === delay), ...this.plugins.filter(plugin => !hasComponentViewTrackingThreshold(plugin))].map(plugin => plugin.name);
+        if (pluginNamesInterestedInSeenElementMessage.length === 0) {
+          return;
         }
+        this.instance.dispatch(Object.assign(Object.assign({}, payload), {
+          element,
+          type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT,
+          plugins: Object.assign({
+            all: false
+          }, pluginNamesInterestedInSeenElementMessage.reduce((acc, curr) => Object.assign(Object.assign({}, acc), {
+            [curr]: true
+          }), {}))
+        }));
       }
     };
-    this.identify = (uid, traits, options) => __awaiter(this, void 0, void 0, function* () {
-      try {
-        const result = experience_jsShared.Traits.default({}).safeParse(traits);
-        if (!result.success) {
-          throw new Error(`[Validation Error] "identify" was called with invalid params. Traits are no valid json: ${result.error.format()}`);
-        }
-        yield this.waitUntilInitialized();
-        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.reset = () => __awaiter(this, void 0, void 0, function* () {
       yield this.waitUntilInitialized();
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -523,6 +834,165 @@ class Ninetailed {
         }
       });
     };
+    this.onSelectVariant = ({
+      baseline,
+      experiences
+    }, cb) => {
+      let middlewareChangeListeners = [];
+      let state = null;
+      const removeMiddlewareChangeListeners = () => {
+        middlewareChangeListeners.forEach(removeListener => removeListener());
+        middlewareChangeListeners = [];
+      };
+      const setSelectedVariant = newState => {
+        state = newState;
+        cb(state);
+      };
+      const removeProfileChangeListener = this.onProfileChange(profileState => {
+        const {
+          addListeners,
+          removeListeners,
+          middleware: experienceSelectionMiddleware
+        } = makeExperienceSelectMiddleware({
+          plugins: this.plugins,
+          experiences,
+          baseline,
+          profile: profileState.profile,
+          onChange: middleware => {
+            const overrideResult = buildOverrideMiddleware(middleware);
+            if (state !== null) {
+              setSelectedVariant(overrideResult(state));
+            }
+          }
+        });
+        addListeners();
+        middlewareChangeListeners.push(removeListeners);
+        const overrideResult = buildOverrideMiddleware(experienceSelectionMiddleware);
+        const hasVariants = experiences.map(experience => experience_jsShared.selectHasVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
+        const baseReturn = Object.assign(Object.assign({}, profileState), {
+          hasVariants,
+          baseline
+        });
+        const emptyReturn = Object.assign(Object.assign({}, baseReturn), {
+          experience: null,
+          variant: baseline,
+          variantIndex: 0,
+          audience: null,
+          isPersonalized: false,
+          profile: null,
+          error: null
+        });
+        if (profileState.status === 'loading') {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: true,
+            status: 'loading'
+          })));
+          return;
+        }
+        if (profileState.status === 'error') {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: false,
+            status: 'error',
+            error: profileState.error
+          })));
+          return;
+        }
+        const {
+          profile,
+          experiences: selectedExperiences
+        } = profileState;
+        if (!profile || !selectedExperiences) {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: false,
+            status: 'error',
+            error: new Error('No Profile or Selected Experiences were returned by the API')
+          })));
+          return;
+        }
+        if (this.useClientSideEvaluation) {
+          const _experience = experience_jsShared.selectExperience({
+            experiences,
+            profile
+          });
+          if (!_experience) {
+            setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+              loading: false,
+              status: 'success',
+              profile
+            })));
+            return;
+          }
+          const {
+            variant: _variant,
+            index
+          } = experience_jsShared.selectVariant({
+            baseline,
+            experience: _experience,
+            profile
+          });
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, baseReturn), {
+            status: 'success',
+            loading: false,
+            error: null,
+            experience: _experience,
+            variant: _variant,
+            variantIndex: index,
+            audience: _experience.audience ? _experience.audience : null,
+            profile,
+            isPersonalized: true
+          })));
+          return;
+        }
+        const experience = experiences.find(experience => selectedExperiences.some(selectedExperience => selectedExperience.experienceId === experience.id));
+        const selectedExperience = selectedExperiences.find(({
+          experienceId
+        }) => experienceId === (experience === null || experience === void 0 ? void 0 : experience.id));
+        if (!experience || !selectedExperience) {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        const baselineVariants = experience_jsShared.selectBaselineWithVariants(experience, baseline);
+        if (!baselineVariants) {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        const {
+          variants
+        } = baselineVariants;
+        const variant = variants[selectedExperience.variantIndex - 1];
+        if (!variant) {
+          setSelectedVariant(overrideResult(Object.assign(Object.assign({}, emptyReturn), {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        setSelectedVariant(overrideResult(Object.assign(Object.assign({}, baseReturn), {
+          status: 'success',
+          loading: false,
+          error: null,
+          experience,
+          variant,
+          variantIndex: selectedExperience.variantIndex,
+          audience: experience.audience ? experience.audience : null,
+          profile,
+          isPersonalized: true
+        })));
+      });
+      return () => {
+        removeProfileChangeListener();
+        removeMiddlewareChangeListeners();
+      };
+    };
     this.onIsInitialized = onIsInitialized => {
       if (typeof onIsInitialized === 'function') {
         if (this.isInitialized) {
@@ -553,6 +1023,7 @@ class Ninetailed {
         }
       });
     };
+    this.useClientSideEvaluation = useClientSideEvaluation;
     if (ninetailedApiClientInstanceOrOptions instanceof experience_jsShared.NinetailedApiClient) {
       this.apiClient = ninetailedApiClientInstanceOrOptions;
     } else {
@@ -592,8 +1063,9 @@ class Ninetailed {
     if (typeof onError === 'function') {
       experience_jsShared.logger.addSink(new experience_jsShared.OnErrorLogSink(onError));
     }
+    this.eventBuilder = new EventBuilder(buildClientContext);
     this.logger = experience_jsShared.logger;
-    this.ninetailedCorePlugin = ninetailedCorePlugin({
+    this.ninetailedCorePlugin = new NinetailedCorePlugin({
       apiClient: this.apiClient,
       locale,
       requestTimeout,
@@ -633,6 +1105,9 @@ class Ninetailed {
     }
     this.registerWindowHandlers();
   }
+  get pluginsWithCustomComponentViewThreshold() {
+    return [this.ninetailedCorePlugin, ...this.plugins].filter(plugin => hasComponentViewTrackingThreshold(plugin));
+  }
   get profileState() {
     return this._profileState;
   }
@@ -741,155 +1216,6 @@ const selectVariant = (baseline, variants, {
   };
 };
 
-const TrackComponentProperties = zod.z.object({
-  variant: zod.z.object({
-    id: zod.z.string()
-  }),
-  audience: zod.z.object({
-    id: zod.z.string()
-  }),
-  isPersonalized: zod.z.boolean()
-});
-
-class NinetailedPlugin {}
-
-const ElementSeenPayloadSchema = zod.z.object({
-  element: zod.z.any(),
-  experience: zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.union([zod.z.literal('nt_experiment'), zod.z.literal('nt_personalization')]),
-    name: zod.z.string().optional(),
-    description: zod.z.string().optional()
-  }).optional().nullable(),
-  audience: zod.z.object({
-    id: zod.z.string(),
-    name: zod.z.string().optional(),
-    description: zod.z.string().optional()
-  }).optional().nullable().default({
-    id: 'ALL_VISITORS',
-    name: 'All Visitors',
-    description: 'This is the default all visitors audience as no audience was set.'
-  }),
-  variant: zod.z.object({
-    id: zod.z.string()
-  }).catchall(zod.z.unknown()),
-  variantIndex: zod.z.number()
-});
-
-const decodeExperienceVariantsMap = encodedExperienceVariantsMap => {
-  return encodedExperienceVariantsMap.split(',').map(experienceIdWithVariant => {
-    const [experienceId, _variantIndex] = experienceIdWithVariant.split('=');
-    const variantIndex = parseInt(_variantIndex);
-    if (!experienceId || !variantIndex) {
-      return null;
-    }
-    return {
-      experienceId,
-      variantIndex
-    };
-  }).filter(x => !!x).reduce((acc, curr) => Object.assign(Object.assign({}, acc), {
-    [curr.experienceId]: curr.variantIndex
-  }), {});
-};
-
-class OnChangeEmitter {
-  constructor() {
-    this.onChangeListeners = [];
-  }
-  addListener(listener) {
-    this.onChangeListeners.push(listener);
-    return () => {
-      this.removeOnChangeListener(listener);
-    };
-  }
-  invokeListeners() {
-    this.onChangeListeners.forEach(listener => listener());
-  }
-  removeOnChangeListener(listener) {
-    this.onChangeListeners = this.onChangeListeners.filter(l => l !== listener);
-  }
-}
-
-const hasOnChangeEmitter = arg => {
-  return typeof arg === 'object' && arg !== null && 'onChangeEmitter' in arg && typeof arg.onChangeEmitter === 'object' && arg.onChangeEmitter !== null && arg.onChangeEmitter.constructor === OnChangeEmitter;
-};
-
-const selectPluginsHavingOnChangeEmitter = plugins => {
-  const filteredPlugins = [];
-  for (const plugin of plugins) {
-    if (hasOnChangeEmitter(plugin)) {
-      filteredPlugins.push(plugin);
-    }
-  }
-  return filteredPlugins;
-};
-
-const hasExperienceSelectionMiddleware = arg => {
-  return typeof arg === 'object' && arg !== null && 'getExperienceSelectionMiddleware' in arg && typeof arg.getExperienceSelectionMiddleware === 'function';
-};
-
-const selectPluginsHavingExperienceSelectionMiddleware = plugins => {
-  const filteredPlugins = [];
-  for (const plugin of plugins) {
-    if (hasExperienceSelectionMiddleware(plugin)) {
-      filteredPlugins.push(plugin);
-    }
-  }
-  return filteredPlugins;
-};
-
-const createPassThroughMiddleware = () => {
-  return ({
-    experience,
-    variant,
-    variantIndex
-  }) => {
-    return {
-      experience,
-      variant,
-      variantIndex
-    };
-  };
-};
-const makeExperienceSelectMiddleware = ({
-  plugins,
-  onChange,
-  experiences,
-  baseline,
-  profile
-}) => {
-  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
-    }));
-    return experience_jsShared.pipe(...middlewareFunctions);
-  };
-  const addListeners = () => {
-    removeChangeListeners = pluginsHavingChangeEmitters.map(plugin => {
-      const listener = () => {
-        onChange();
-      };
-      return plugin.onChangeEmitter.addListener(listener);
-    });
-  };
-  const removeListeners = () => {
-    removeChangeListeners.forEach(listener => listener());
-  };
-  const middleware = prepareMiddleware();
-  return {
-    addListeners,
-    removeListeners,
-    middleware
-  };
-};
-
 Object.defineProperty(exports, 'EXPERIENCE_TRAIT_PREFIX', {
     enumerable: true,
     get: function () { return experience_jsShared.EXPERIENCE_TRAIT_PREFIX; }
@@ -933,12 +1259,10 @@ exports.CONSENT = CONSENT;
 exports.DEBUG_FLAG = DEBUG_FLAG;
 exports.EMPTY_MERGE_ID = EMPTY_MERGE_ID;
 exports.EXPERIENCES_FALLBACK_CACHE = EXPERIENCES_FALLBACK_CACHE;
-exports.ElementSeenPayloadSchema = ElementSeenPayloadSchema;
-exports.HAS_SEEN_COMPONENT = HAS_SEEN_COMPONENT;
-exports.HAS_SEEN_ELEMENT = HAS_SEEN_ELEMENT;
+exports.HAS_SEEN_STICKY_COMPONENT = HAS_SEEN_STICKY_COMPONENT;
 exports.LEGACY_ANONYMOUS_ID = LEGACY_ANONYMOUS_ID;
 exports.Ninetailed = Ninetailed;
-exports.NinetailedPlugin = NinetailedPlugin;
+exports.NinetailedCorePlugin = NinetailedCorePlugin;
 exports.OnChangeEmitter = OnChangeEmitter;
 exports.PAGE_HIDDEN = PAGE_HIDDEN;
 exports.PLUGIN_NAME = PLUGIN_NAME;
@@ -946,11 +1270,9 @@ exports.PROFILE_CHANGE = PROFILE_CHANGE;
 exports.PROFILE_FALLBACK_CACHE = PROFILE_FALLBACK_CACHE;
 exports.PROFILE_RESET = PROFILE_RESET;
 exports.SET_ENABLED_FEATURES = SET_ENABLED_FEATURES;
-exports.TrackComponentProperties = TrackComponentProperties;
 exports.buildClientNinetailedRequestContext = buildClientNinetailedRequestContext;
 exports.decodeExperienceVariantsMap = decodeExperienceVariantsMap;
 exports.makeExperienceSelectMiddleware = makeExperienceSelectMiddleware;
-exports.ninetailedCorePlugin = ninetailedCorePlugin;
 exports.selectPluginsHavingExperienceSelectionMiddleware = selectPluginsHavingExperienceSelectionMiddleware;
 exports.selectPluginsHavingOnChangeEmitter = selectPluginsHavingOnChangeEmitter;
 exports.selectVariant = selectVariant;