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

package/index.esm.js

@@ -0,0 +1,1203 @@
+import { FEATURES, buildComponentViewEvent, logger, ConsoleLogSink, buildPageEvent, buildTrackEvent, buildIdentifyEvent, unionBy, pipe, PageviewProperties, Properties, Traits, isPageViewEvent, isTrackEvent, isIdentifyEvent, isComponentViewEvent, selectHasVariants, selectExperience, selectVariant as selectVariant$1, selectBaselineWithVariants, NinetailedApiClient, OnLogLogSink, OnErrorLogSink } from '@ninetailed/experience.js-shared';
+export { EXPERIENCE_TRAIT_PREFIX, isExperienceMatch, selectActiveExperiments, selectDistribution, selectExperience, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectVariant as selectExperienceVariant, selectVariants as selectExperienceVariants, selectHasVariants as selectHasExperienceVariants } from '@ninetailed/experience.js-shared';
+import { NinetailedAnalyticsPlugin, HAS_SEEN_COMPONENT, HAS_SEEN_ELEMENT } from '@ninetailed/experience.js-plugin-analytics';
+import Analytics from 'analytics';
+import { v4 } from 'uuid';
+
+const COMPONENT = 'component';
+const COMPONENT_START = 'componentStart';
+const PAGE_HIDDEN = 'page_hidden';
+const HAS_SEEN_STICKY_COMPONENT = 'sticky_component_view';
+
+const buildClientLocale = () => navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
+
+const buildClientNinetailedRequestContext = () => ({
+  url: window.location.href,
+  referrer: document.referrer,
+  locale: buildClientLocale(),
+  userAgent: navigator.userAgent,
+  document: {
+    title: document.title
+  }
+});
+
+/**
+ * Similar to _.throttle but waits for the promise to resolve.
+ * There is no "wait time" because you can simply await `Promise.timeout` inside `fn` to wait some time before the next call.
+ */
+function asyncThrottle(fn) {
+  let runningPromise;
+  let queuedPromise;
+  let nextArgs;
+  return async args => {
+    if (runningPromise) {
+      nextArgs = args;
+      if (queuedPromise) {
+        return queuedPromise;
+      } else {
+        queuedPromise = runningPromise.then(() => {
+          queuedPromise = undefined;
+          runningPromise = fn(nextArgs);
+          return runningPromise;
+        });
+        return queuedPromise;
+      }
+    } else {
+      runningPromise = fn(args);
+      return runningPromise;
+    }
+  };
+}
+
+const LEGACY_ANONYMOUS_ID = '__anon_id';
+const ANONYMOUS_ID = '__nt_anonymous_id__';
+const DEBUG_FLAG = '__nt_debug__';
+const PROFILE_FALLBACK_CACHE = '__nt_profile__';
+const EXPERIENCES_FALLBACK_CACHE = '__nt_experiences__';
+const PROFILE_CHANGE = 'profile-change';
+const PROFILE_RESET = 'profile-reset';
+const CONSENT = '__nt-consent__';
+const SET_ENABLED_FEATURES = 'set-enabled-features';
+const EMPTY_MERGE_ID = 'nt:empty-merge-id';
+
+const PLUGIN_NAME = 'ninetailed:core';
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+class NinetailedCorePlugin extends NinetailedAnalyticsPlugin {
+  constructor({
+    apiClient,
+    locale,
+    ninetailed,
+    onInitProfileId,
+    buildClientContext
+  }) {
+    var _this;
+    super();
+    _this = this;
+    this.name = PLUGIN_NAME;
+    this._instance = void 0;
+    this.queue = [];
+    this.enabledFeatures = Object.values(FEATURES);
+    this.buildContext = buildClientNinetailedRequestContext;
+    this.onInitProfileId = void 0;
+    this.apiClient = void 0;
+    this.locale = void 0;
+    this.ninetailed = void 0;
+    this[HAS_SEEN_STICKY_COMPONENT] = async function ({
+      payload
+    }) {
+      const ctx = _this.buildContext();
+      return _this.enqueueEvent(buildComponentViewEvent({
+        messageId: payload.meta.rid,
+        timestamp: payload.meta.ts,
+        componentId: payload.componentId,
+        experienceId: payload.experienceId,
+        variantIndex: payload.variantIndex,
+        ctx
+      }));
+    };
+    this.methods = {
+      reset: async function (...args) {
+        logger.debug('Resetting profile.');
+        const instance = args[args.length - 1];
+        instance.dispatch({
+          type: PROFILE_RESET
+        });
+        instance.storage.removeItem(ANONYMOUS_ID);
+        instance.storage.removeItem(PROFILE_FALLBACK_CACHE);
+        instance.storage.removeItem(EXPERIENCES_FALLBACK_CACHE);
+        logger.debug('Removed old profile data from localstorage.');
+        if (typeof _this.onInitProfileId === 'function') {
+          const profileId = await _this.onInitProfileId(undefined);
+          if (typeof profileId === 'string') {
+            instance.storage.setItem(ANONYMOUS_ID, profileId);
+          }
+        }
+        await _this.ninetailed.track('nt_reset');
+        logger.info('Profile reset successful.');
+        await delay(10);
+      },
+      debug: async function (...args) {
+        const enabled = args[0];
+        const instance = args[args.length - 1];
+        const consoleLogSink = new ConsoleLogSink();
+        if (enabled) {
+          instance.storage.setItem(DEBUG_FLAG, true);
+          logger.addSink(consoleLogSink);
+          logger.info('Debug mode enabled.');
+        } else {
+          instance.storage.removeItem(DEBUG_FLAG);
+          logger.info('Debug mode disabled.');
+          logger.removeSink(consoleLogSink.name);
+        }
+      }
+    };
+    this.flush = asyncThrottle(this._flush.bind(this));
+    if (onInitProfileId) {
+      this.onInitProfileId = onInitProfileId;
+    }
+    if (buildClientContext) {
+      this.buildContext = buildClientContext;
+    }
+    this.apiClient = apiClient;
+    this.ninetailed = ninetailed;
+    this.locale = locale;
+  }
+  async initialize({
+    instance
+  }) {
+    this._instance = instance;
+    if (instance.storage.getItem(DEBUG_FLAG)) {
+      logger.addSink(new ConsoleLogSink());
+      logger.info('Ninetailed Debug Mode is enabled.');
+    }
+
+    // legacy support for the old anonymousId
+    const legacyAnonymousId = instance.storage.getItem(LEGACY_ANONYMOUS_ID);
+    if (legacyAnonymousId) {
+      logger.debug('Found legacy anonymousId, migrating to new one.', legacyAnonymousId);
+      instance.storage.setItem(ANONYMOUS_ID, legacyAnonymousId);
+      instance.storage.removeItem(LEGACY_ANONYMOUS_ID);
+    }
+    if (typeof this.onInitProfileId === 'function') {
+      const profileId = await this.onInitProfileId(instance.storage.getItem(ANONYMOUS_ID));
+      if (typeof profileId === 'string') {
+        instance.storage.setItem(ANONYMOUS_ID, profileId);
+      }
+    }
+    instance.on(SET_ENABLED_FEATURES, ({
+      payload
+    }) => {
+      this.enabledFeatures = payload.features || [];
+    });
+    logger.debug('Ninetailed Core plugin initialized.');
+  }
+  pageStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  async page({
+    payload
+  }) {
+    logger.info('Sending Page event.');
+    const ctx = this.buildContext();
+    return this.enqueueEvent(buildPageEvent({
+      messageId: payload.meta.rid,
+      timestamp: payload.meta.ts,
+      properties: payload.properties,
+      ctx
+    }));
+  }
+  trackStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  async track({
+    payload
+  }) {
+    logger.info('Sending Track event.');
+    const ctx = this.buildContext();
+    return this.enqueueEvent(buildTrackEvent({
+      messageId: payload.meta.rid,
+      timestamp: payload.meta.ts,
+      event: payload.event,
+      properties: payload.properties,
+      ctx
+    }));
+  }
+  identifyStart(params) {
+    return this.abortNonClientEvents(params);
+  }
+  async identify({
+    payload
+  }) {
+    logger.info('Sending Identify event.');
+    const ctx = this.buildContext();
+    if (payload.userId === EMPTY_MERGE_ID && (!payload.traits || typeof payload.traits === 'object' && Object.keys(payload.traits).length === 0)) {
+      logger.info('Skipping Identify event as no userId and no traits are set.');
+      return;
+    }
+    return this.enqueueEvent(buildIdentifyEvent({
+      messageId: payload.meta.rid,
+      timestamp: payload.meta.ts,
+      traits: payload.traits,
+      userId: payload.userId === EMPTY_MERGE_ID ? '' : payload.userId,
+      ctx
+    }));
+  }
+  getComponentViewTrackingThreshold() {
+    return 0;
+  }
+  async onTrackExperience(properties) {
+    if (properties.experience.sticky) {
+      await this.instance.dispatch({
+        type: HAS_SEEN_STICKY_COMPONENT,
+        componentId: properties.selectedVariant.id,
+        experienceId: properties.experience.id,
+        variantIndex: properties.selectedVariantIndex
+      });
+      this.flush();
+    }
+    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;
+  }
+  async enqueueEvent(event) {
+    this.queue = 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;
+  }
+  async _flush() {
+    const events = Object.assign([], this.queue);
+    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
+      } = await this.apiClient.upsertProfile({
+        profileId: anonymousId,
+        events
+      }, {
+        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);
+      logger.debug('Profile from api: ', profile);
+      logger.debug('Experiences from api: ', experiences);
+      this.instance.dispatch({
+        type: PROFILE_CHANGE,
+        profile,
+        experiences
+      });
+      await delay(20);
+      return {
+        success: true
+      };
+    } catch (error) {
+      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) {
+        logger.debug('Found a fallback profile - will use this.');
+        this.instance.dispatch({
+          type: PROFILE_CHANGE,
+          profile: fallbackProfile,
+          experiences: fallbackExperiences
+        });
+      } else {
+        logger.debug('No fallback profile found - setting profile to null.');
+        this.instance.dispatch({
+          type: PROFILE_CHANGE,
+          profile: null,
+          experiences: fallbackExperiences,
+          error
+        });
+      }
+      return {
+        success: false
+      };
+    }
+  }
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+class ElementSeenObserver {
+  constructor(_options) {
+    this._intersectionObserver = void 0;
+    this._elementDelays = void 0;
+    this._intersectionTimers = void 0;
+    this._options = _options;
+    this._elementDelays = new WeakMap();
+    this._intersectionTimers = new WeakMap();
+    if (typeof IntersectionObserver !== 'undefined') {
+      this._intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this));
+    }
+  }
+  onIntersection(entries) {
+    entries.forEach(entry => {
+      const {
+        isIntersecting,
+        target
+      } = entry;
+      if (isIntersecting) {
+        const delays = this._elementDelays.get(target);
+        delays == null || 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 timeOuts = this._intersectionTimers.get(target);
+        timeOuts == null || timeOuts.forEach(timeOut => {
+          if (typeof timeOut !== 'undefined') {
+            window.clearTimeout(timeOut);
+          }
+        });
+      }
+    });
+  }
+  observe(element, options) {
+    var _this$_intersectionOb;
+    const delays = this._elementDelays.get(element) || [];
+    this._elementDelays.set(element, Array.from(new Set([...delays, (options == null ? void 0 : options.delay) || 0])));
+    (_this$_intersectionOb = this._intersectionObserver) == null || _this$_intersectionOb.observe(element);
+  }
+  unobserve(element) {
+    var _this$_intersectionOb2;
+    (_this$_intersectionOb2 = this._intersectionObserver) == null || _this$_intersectionOb2.unobserve(element);
+  }
+}
+
+const acceptsCredentials = plugin => {
+  return typeof plugin === 'object' && plugin !== null && 'setCredentials' in plugin && typeof plugin.setCredentials === 'function';
+};
+
+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({}, 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 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 = void 0;
+    this.buildRequestContext = buildRequestContext || buildClientNinetailedRequestContext;
+  }
+  page(properties, data) {
+    return buildPageEvent(Object.assign({
+      messageId: (data == null ? void 0 : data.messageId) || v4()
+    }, data, {
+      timestamp: Date.now(),
+      properties: properties || {},
+      ctx: this.buildRequestContext()
+    }));
+  }
+  track(event, properties, data) {
+    return buildTrackEvent(Object.assign({
+      messageId: (data == null ? void 0 : data.messageId) || v4(),
+      timestamp: Date.now()
+    }, data, {
+      event,
+      properties: properties || {},
+      ctx: this.buildRequestContext()
+    }));
+  }
+  identify(userId, traits, data) {
+    return buildIdentifyEvent(Object.assign({
+      messageId: (data == null ? void 0 : data.messageId) || v4(),
+      timestamp: Date.now()
+    }, data, {
+      traits: traits || {},
+      userId: userId || '',
+      ctx: this.buildRequestContext()
+    }));
+  }
+  component(componentId, experienceId, variantIndex, data) {
+    return buildComponentViewEvent(Object.assign({
+      messageId: (data == null ? void 0 : data.messageId) || 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 _excluded = ["experience", "variant", "variantIndex"],
+  _excluded2 = ["element"];
+const buildOverrideMiddleware = experienceSelectionMiddleware => _ref => {
+  let {
+      experience: originalExperience,
+      variant: originalVariant,
+      variantIndex: originalVariantIndex
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    experience,
+    variant,
+    variantIndex
+  } = experienceSelectionMiddleware({
+    experience: originalExperience,
+    variant: originalVariant,
+    variantIndex: originalVariantIndex
+  });
+  return Object.assign({}, other, {
+    audience: experience != null && experience.audience ? experience.audience : null,
+    experience,
+    variant,
+    variantIndex
+  });
+};
+class Ninetailed {
+  constructor(ninetailedApiClientInstanceOrOptions, {
+    plugins,
+    url,
+    locale,
+    requestTimeout,
+    onLog,
+    onError,
+    buildClientContext,
+    onInitProfileId,
+    componentViewTrackingThreshold = 2000,
+    storageImpl,
+    useClientSideEvaluation = false
+  } = {}) {
+    var _this = this;
+    this.instance = void 0;
+    this._profileState = void 0;
+    this.isInitialized = false;
+    this.apiClient = void 0;
+    this.ninetailedCorePlugin = void 0;
+    this.elementSeenObserver = void 0;
+    this.observedElements = void 0;
+    this.clientId = void 0;
+    this.environment = void 0;
+    this.plugins = void 0;
+    this.logger = void 0;
+    this.componentViewTrackingThreshold = void 0;
+    this.useClientSideEvaluation = void 0;
+    this.eventBuilder = void 0;
+    this.page = async function (data, options) {
+      try {
+        const result = PageviewProperties.partial().default({}).safeParse(data);
+        if (!result.success) {
+          throw new Error(`[Validation Error] "page" was called with invalid params. Page data is not valid: ${result.error.format()}`);
+        }
+        await _this.waitUntilInitialized();
+        await _this.instance.page(data, _this.buildOptions(options));
+        return _this.ninetailedCorePlugin.flush();
+      } catch (error) {
+        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;
+      }
+    };
+    this.track = async function (event, properties, options) {
+      try {
+        const result = Properties.default({}).safeParse(properties);
+        if (!result.success) {
+          throw new Error(`[Validation Error] "track" was called with invalid params. Properties are no valid json object: ${result.error.format()}`);
+        }
+        await _this.waitUntilInitialized();
+        await _this.instance.track(event.toString(), result.data, _this.buildOptions(options));
+        return _this.ninetailedCorePlugin.flush();
+      } catch (error) {
+        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.identify = async function (uid, traits, options) {
+      try {
+        const result = 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()}`);
+        }
+        await _this.waitUntilInitialized();
+        await _this.instance.identify(uid && uid.toString() !== '' ? uid.toString() : EMPTY_MERGE_ID, result.data, _this.buildOptions(options));
+        return _this.ninetailedCorePlugin.flush();
+      } catch (error) {
+        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 = async function (events) {
+      try {
+        await _this.waitUntilInitialized();
+        const promises = events.map(event => {
+          if (isPageViewEvent(event)) {
+            return _this.instance.page(event.properties);
+          }
+          if (isTrackEvent(event)) {
+            return _this.instance.track(event.event, event.properties);
+          }
+          if (isIdentifyEvent(event)) {
+            return _this.instance.identify(event.userId || EMPTY_MERGE_ID, event.traits);
+          }
+          if (isComponentViewEvent(event)) {
+            return _this.instance.dispatch({
+              experienceId: event.experienceId,
+              componentId: event.componentId,
+              variantIndex: event.variantIndex,
+              type: HAS_SEEN_STICKY_COMPONENT
+            });
+          }
+          return Promise.resolve();
+        });
+        await Promise.all(promises);
+        return _this.ninetailedCorePlugin.flush();
+      } catch (error) {
+        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 = async function ({
+      experienceId,
+      componentId,
+      variantIndex
+    }) {
+      try {
+        await _this.waitUntilInitialized();
+        await _this.instance.dispatch({
+          experienceId,
+          componentId,
+          variantIndex,
+          type: HAS_SEEN_STICKY_COMPONENT
+        });
+        return _this.ninetailedCorePlugin.flush();
+      } catch (error) {
+        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 = async function (properties) {
+      return _this.instance.dispatch(Object.assign({}, properties, {
+        type: HAS_SEEN_COMPONENT
+      }));
+    };
+    this.trackComponentView = properties => {
+      return this.instance.dispatch(Object.assign({}, properties, {
+        type: HAS_SEEN_ELEMENT
+      }));
+    };
+    this.observeElement = (payload, options) => {
+      const {
+          element
+        } = payload,
+        remaingPayload = _objectWithoutPropertiesLoose(payload, _excluded2);
+      if (!(element instanceof Element)) {
+        const isObject = typeof element === 'object' && element !== null;
+        const constructorName = isObject ? element.constructor.name : '';
+        const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
+        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 {
+        this.observedElements.set(element, remaingPayload);
+        const delays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
+        const uniqueDelays = Array.from(new Set([...delays, (options == null ? void 0 : options.delay) || this.componentViewTrackingThreshold]));
+        uniqueDelays.forEach(delay => {
+          this.elementSeenObserver.observe(element, {
+            delay
+          });
+        });
+      }
+    };
+    this.unobserveElement = element => {
+      this.observedElements.delete(element);
+      this.elementSeenObserver.unobserve(element);
+    };
+    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({}, payload, {
+          element,
+          type: HAS_SEEN_ELEMENT,
+          plugins: Object.assign({
+            all: false
+          }, pluginNamesInterestedInSeenElementMessage.reduce((acc, curr) => Object.assign({}, acc, {
+            [curr]: true
+          }), {}))
+        }));
+      }
+    };
+    this.reset = async function () {
+      await _this.waitUntilInitialized();
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      _this.instance.plugins[PLUGIN_NAME].reset();
+    };
+    this.debug = async function (enabled) {
+      await _this.waitUntilInitialized();
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      _this.instance.plugins[PLUGIN_NAME].debug(enabled);
+    };
+    this.onProfileChange = cb => {
+      cb(this.profileState);
+      return this.instance.on(PROFILE_CHANGE, ({
+        payload
+      }) => {
+        if (payload.error) {
+          cb(Object.assign({}, this._profileState, {
+            status: 'error',
+            profile: payload.profile,
+            experiences: payload.experiences,
+            error: payload.error
+          }));
+        } else {
+          cb(Object.assign({}, this._profileState, {
+            status: 'success',
+            profile: payload.profile,
+            experiences: payload.experiences,
+            error: null
+          }));
+        }
+      });
+    };
+    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 => selectHasVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
+        const baseReturn = Object.assign({}, profileState, {
+          hasVariants,
+          baseline
+        });
+        const emptyReturn = 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({}, emptyReturn, {
+            loading: true,
+            status: 'loading'
+          })));
+          return;
+        }
+        if (profileState.status === 'error') {
+          setSelectedVariant(overrideResult(Object.assign({}, emptyReturn, {
+            loading: false,
+            status: 'error',
+            error: profileState.error
+          })));
+          return;
+        }
+        const {
+          profile,
+          experiences: selectedExperiences
+        } = profileState;
+        if (!profile || !selectedExperiences) {
+          setSelectedVariant(overrideResult(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 = selectExperience({
+            experiences,
+            profile
+          });
+          if (!_experience) {
+            setSelectedVariant(overrideResult(Object.assign({}, emptyReturn, {
+              loading: false,
+              status: 'success',
+              profile
+            })));
+            return;
+          }
+          const {
+            variant: _variant,
+            index
+          } = selectVariant$1({
+            baseline,
+            experience: _experience,
+            profile
+          });
+          setSelectedVariant(overrideResult(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 ? void 0 : experience.id));
+        if (!experience || !selectedExperience) {
+          setSelectedVariant(overrideResult(Object.assign({}, emptyReturn, {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        const baselineVariants = selectBaselineWithVariants(experience, baseline);
+        if (!baselineVariants) {
+          setSelectedVariant(overrideResult(Object.assign({}, emptyReturn, {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        const {
+          variants
+        } = baselineVariants;
+        const variant = variants[selectedExperience.variantIndex - 1];
+        if (!variant) {
+          setSelectedVariant(overrideResult(Object.assign({}, emptyReturn, {
+            loading: false,
+            status: 'success',
+            profile
+          })));
+          return;
+        }
+        setSelectedVariant(overrideResult(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) {
+          onIsInitialized();
+        } else {
+          const detachOnReadyListener = this.instance.on('ready', () => {
+            this.isInitialized = true;
+            onIsInitialized();
+            detachOnReadyListener();
+          });
+        }
+      }
+    };
+    this.waitUntilInitialized = () => {
+      return new Promise(resolve => {
+        this.onIsInitialized(resolve);
+      });
+    };
+    this.onVisibilityChange = () => {
+      if (typeof document === 'undefined') {
+        return;
+      }
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+          this.instance.dispatch({
+            type: PAGE_HIDDEN
+          });
+        }
+      });
+    };
+    this.useClientSideEvaluation = useClientSideEvaluation;
+    if (ninetailedApiClientInstanceOrOptions instanceof NinetailedApiClient) {
+      this.apiClient = ninetailedApiClientInstanceOrOptions;
+    } else {
+      const {
+        clientId,
+        environment,
+        preview
+      } = ninetailedApiClientInstanceOrOptions;
+      this.clientId = clientId;
+      this.environment = environment || 'main';
+      this.apiClient = new NinetailedApiClient({
+        clientId,
+        environment,
+        url,
+        preview
+      });
+    }
+    this.plugins = (plugins != null ? plugins : []).flat();
+    this.plugins.forEach(plugin => {
+      if (acceptsCredentials(plugin) && this.clientId && this.environment) {
+        plugin.setCredentials({
+          clientId: this.clientId,
+          environment: this.environment
+        });
+      }
+    });
+    this._profileState = {
+      status: 'loading',
+      profile: null,
+      experiences: null,
+      error: null,
+      from: 'api'
+    };
+    if (typeof onLog === 'function') {
+      logger.addSink(new OnLogLogSink(onLog));
+    }
+    if (typeof onError === 'function') {
+      logger.addSink(new OnErrorLogSink(onError));
+    }
+    this.eventBuilder = new EventBuilder(buildClientContext);
+    this.logger = logger;
+    this.ninetailedCorePlugin = new NinetailedCorePlugin({
+      apiClient: this.apiClient,
+      locale,
+      requestTimeout,
+      buildClientContext,
+      onInitProfileId,
+      ninetailed: this
+    });
+    this.instance = Analytics(Object.assign({
+      app: 'ninetailed',
+      plugins: [...this.plugins, this.ninetailedCorePlugin]
+    }, storageImpl ? {
+      storage: storageImpl
+    } : {}));
+    const _detachOnReadyListener = this.instance.on('ready', () => {
+      this.isInitialized = true;
+      logger.info('Ninetailed Experience.js SDK is completely initialized.');
+      _detachOnReadyListener();
+    });
+
+    // put in private method
+    this.onProfileChange(profileState => {
+      this._profileState = profileState;
+      if (typeof window !== 'undefined') {
+        window.ninetailed = Object.assign({}, window.ninetailed, {
+          profile: this.profileState.profile,
+          experiences: this.profileState.experiences
+        });
+      }
+    });
+    this.observedElements = new WeakMap();
+    this.elementSeenObserver = new ElementSeenObserver({
+      onElementSeen: this.onElementSeen.bind(this)
+    });
+    this.componentViewTrackingThreshold = componentViewTrackingThreshold;
+    const hasPluginsInterestedInHiddenPage = this.plugins.some(isInterestedInHiddenPage);
+    if (hasPluginsInterestedInHiddenPage) {
+      this.onVisibilityChange();
+    }
+    this.registerWindowHandlers();
+  }
+  get pluginsWithCustomComponentViewThreshold() {
+    return [this.ninetailedCorePlugin, ...this.plugins].filter(plugin => hasComponentViewTrackingThreshold(plugin));
+  }
+  get profileState() {
+    return this._profileState;
+  }
+  buildOptions(options = {}) {
+    return Object.assign({}, options);
+  }
+  registerWindowHandlers() {
+    if (typeof window !== 'undefined') {
+      window.ninetailed = Object.assign({}, window.ninetailed, {
+        page: this.page.bind(this),
+        track: this.track.bind(this),
+        identify: this.identify.bind(this),
+        reset: this.reset.bind(this),
+        debug: this.debug.bind(this),
+        profile: this.profileState.profile
+      });
+    }
+  }
+}
+
+const selectVariant = (baseline, variants, {
+  status,
+  profile,
+  error
+}, options = {
+  holdout: -1
+}) => {
+  if (status === 'loading') {
+    return {
+      loading: true,
+      variant: Object.assign({}, baseline, {
+        id: 'baseline',
+        audience: {
+          id: 'baseline'
+        }
+      }),
+      audience: {
+        id: 'baseline'
+      },
+      isPersonalized: false,
+      error: null
+    };
+  }
+  if (status === 'error') {
+    return {
+      loading: false,
+      variant: Object.assign({}, baseline, {
+        id: 'baseline',
+        audience: {
+          id: 'baseline'
+        }
+      }),
+      audience: {
+        id: 'baseline'
+      },
+      isPersonalized: false,
+      error: error
+    };
+  }
+  const variant = variants.find(variant => {
+    var _profile$audiences, _variant$audience;
+    return profile == null || (_profile$audiences = profile.audiences) == null ? void 0 : _profile$audiences.includes((_variant$audience = variant.audience) == null ? void 0 : _variant$audience.id);
+  });
+  if (variant) {
+    if (options != null && options.holdout || -1 > ((profile == null ? void 0 : profile.random) || 0)) {
+      return {
+        loading: false,
+        variant: Object.assign({}, baseline, {
+          audience: {
+            id: 'baseline'
+          }
+        }),
+        audience: Object.assign({}, variant.audience, {
+          id: variant.audience.id
+        }),
+        isPersonalized: false,
+        error: null
+      };
+    }
+    return {
+      loading: false,
+      variant,
+      audience: Object.assign({}, variant.audience, {
+        id: variant.audience.id
+      }),
+      isPersonalized: true,
+      error: null
+    };
+  }
+
+  /**
+   * There was no matching audience found.
+   */
+  return {
+    loading: false,
+    variant: Object.assign({}, baseline, {
+      id: 'baseline',
+      audience: {
+        id: 'baseline'
+      }
+    }),
+    audience: {
+      id: 'baseline'
+    },
+    isPersonalized: false,
+    error: null
+  };
+};
+
+export { ANONYMOUS_ID, COMPONENT, COMPONENT_START, CONSENT, DEBUG_FLAG, EMPTY_MERGE_ID, EXPERIENCES_FALLBACK_CACHE, HAS_SEEN_STICKY_COMPONENT, LEGACY_ANONYMOUS_ID, Ninetailed, NinetailedCorePlugin, OnChangeEmitter, PAGE_HIDDEN, PLUGIN_NAME, PROFILE_CHANGE, PROFILE_FALLBACK_CACHE, PROFILE_RESET, SET_ENABLED_FEATURES, buildClientNinetailedRequestContext, decodeExperienceVariantsMap, makeExperienceSelectMiddleware, selectPluginsHavingExperienceSelectionMiddleware, selectPluginsHavingOnChangeEmitter, selectVariant };