@ninetailed/experience.js 5.0.0-beta.2 → 6.0.1-beta.0

package/index.js

@@ -1,10 +1,11 @@
 import { FEATURES, logger, ConsoleLogSink, buildPageEvent, buildTrackEvent, buildIdentifyEvent, unionBy, NinetailedApiClient, OnLogLogSink, OnErrorLogSink, PageviewProperties, Properties, Traits, pipe } from '@ninetailed/experience.js-shared';
-export { EXPERIENCE_TRAIT_PREFIX, isExperienceMatch, selectActiveExperiments, selectDistribution, selectEligibleExperiences, selectExperience, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectVariantClientSide as selectExperienceVariantClientSide, selectVariants as selectExperienceVariants, selectHasVariants as selectHasExperienceVariants } from '@ninetailed/experience.js-shared';
+export { EXPERIENCE_TRAIT_PREFIX, isExperienceMatch, selectActiveExperiments, selectDistribution, selectEligibleExperiences, selectExperience, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectVariant as selectExperienceVariant, selectVariants as selectExperienceVariants, selectHasVariants as selectHasExperienceVariants } from '@ninetailed/experience.js-shared';
 import Analytics from 'analytics';
 import { z } from 'zod';
 
-const HAS_SEEN_EXPERIENCE = 'has_seen_experience';
 const HAS_SEEN_COMPONENT = 'has_seen_component';
+const HAS_SEEN_ELEMENT = 'has_seen_element';
+const PAGE_HIDDEN = 'page_hidden';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -602,9 +603,9 @@ var inspectSource$3 = store$1.inspectSource;
 var global$d = global$k;
 var isCallable$d = isCallable$k;
 
-var WeakMap$1 = global$d.WeakMap;
+var WeakMap$2 = global$d.WeakMap;
 
-var weakMapBasicDetection = isCallable$d(WeakMap$1) && /native code/.test(String(WeakMap$1));
+var weakMapBasicDetection = isCallable$d(WeakMap$2) && /native code/.test(String(WeakMap$2));
 
 var shared$1 = shared$3.exports;
 var uid = uid$2;
@@ -628,7 +629,7 @@ var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
 var TypeError$2 = global$c.TypeError;
-var WeakMap = global$c.WeakMap;
+var WeakMap$1 = global$c.WeakMap;
 var set$1, get, has;
 
 var enforce = function (it) {
@@ -645,7 +646,7 @@ var getterFor = function (TYPE) {
 };
 
 if (NATIVE_WEAK_MAP || shared.state) {
-  var store = shared.state || (shared.state = new WeakMap());
+  var store = shared.state || (shared.state = new WeakMap$1());
   /* eslint-disable no-self-assign -- prototype methods protection */
   store.get = store.get;
   store.has = store.has;
@@ -2517,6 +2518,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -2572,7 +2585,6 @@ 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__';
@@ -2601,10 +2613,7 @@ const ninetailedPlugin = ({
     }
     try {
       const anonymousId = _instance.storage.getItem(ANONYMOUS_ID);
-      const {
-        profile,
-        experiences
-      } = yield apiClient.upsertProfile({
+      const profile = yield apiClient.upsertProfile({
         profileId: anonymousId,
         events
       }, {
@@ -2613,13 +2622,10 @@ const ninetailedPlugin = ({
       });
       _instance.storage.setItem(ANONYMOUS_ID, profile.id);
       _instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
-      _instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
       logger.debug('Profile from api: ', profile);
-      logger.debug('Experiences from api: ', experiences);
       _instance.dispatch({
         type: PROFILE_CHANGE,
-        profile,
-        experiences
+        profile
       });
       yield delay(20);
       return {
@@ -2628,27 +2634,27 @@ const ninetailedPlugin = ({
     } catch (error) {
       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) {
         logger.debug('Found a fallback profile - will use this.');
         _instance.dispatch({
           type: PROFILE_CHANGE,
-          profile: fallbackProfile,
-          experiences: fallbackExperiences
+          profile: fallbackProfile
         });
+        return {
+          success: false
+        };
       } else {
         logger.debug('No fallback profile found - setting profile to null.');
         _instance.dispatch({
           type: PROFILE_CHANGE,
           // TODO is it a good idea to set the profile to null?
           profile: null,
-          experiences: fallbackExperiences,
           error
         });
+        return {
+          success: false
+        };
       }
-      return {
-        success: false
-      };
     }
   });
   const enqueueEvent = event => __awaiter(void 0, void 0, void 0, function* () {
@@ -2747,7 +2753,7 @@ const ninetailedPlugin = ({
       abort,
       payload
     }) => {
-      if (![ANONYMOUS_ID, DEBUG_FLAG, PROFILE_FALLBACK_CACHE, EXPERIENCES_FALLBACK_CACHE, CONSENT].includes(payload.key)) {
+      if (![ANONYMOUS_ID, DEBUG_FLAG, PROFILE_FALLBACK_CACHE, CONSENT].includes(payload.key)) {
         return abort();
       }
       return payload;
@@ -2762,7 +2768,6 @@ const ninetailedPlugin = ({
         });
         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.');
         yield ninetailed.track('nt_reset');
         logger.info('Profile reset successful.');
@@ -2843,6 +2848,115 @@ if (NOT_GENERIC || INCORRECT_NAME) {
   }, { unsafe: true });
 }
 
+var classof = classofRaw$2;
+
+// `IsArray` abstract operation
+// https://tc39.es/ecma262/#sec-isarray
+// eslint-disable-next-line es/no-array-isarray -- safe
+var isArray$2 = Array.isArray || function isArray(argument) {
+  return classof(argument) == 'Array';
+};
+
+var $TypeError$1 = TypeError;
+var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF; // 2 ** 53 - 1 == 9007199254740991
+
+var doesNotExceedSafeInteger$1 = function (it) {
+  if (it > MAX_SAFE_INTEGER) throw $TypeError$1('Maximum allowed index exceeded');
+  return it;
+};
+
+var isArray$1 = isArray$2;
+var lengthOfArrayLike$2 = lengthOfArrayLike$5;
+var doesNotExceedSafeInteger = doesNotExceedSafeInteger$1;
+var bind = functionBindContext;
+
+// `FlattenIntoArray` abstract operation
+// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
+var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
+  var targetIndex = start;
+  var sourceIndex = 0;
+  var mapFn = mapper ? bind(mapper, thisArg) : false;
+  var element, elementLen;
+
+  while (sourceIndex < sourceLen) {
+    if (sourceIndex in source) {
+      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
+
+      if (depth > 0 && isArray$1(element)) {
+        elementLen = lengthOfArrayLike$2(element);
+        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
+      } else {
+        doesNotExceedSafeInteger(targetIndex + 1);
+        target[targetIndex] = element;
+      }
+
+      targetIndex++;
+    }
+    sourceIndex++;
+  }
+  return targetIndex;
+};
+
+var flattenIntoArray_1 = flattenIntoArray$1;
+
+var isArray = isArray$2;
+var isConstructor = isConstructor$2;
+var isObject$1 = isObject$a;
+var wellKnownSymbol$3 = wellKnownSymbol$h;
+
+var SPECIES = wellKnownSymbol$3('species');
+var $Array = Array;
+
+// a part of `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesConstructor$1 = function (originalArray) {
+  var C;
+  if (isArray(originalArray)) {
+    C = originalArray.constructor;
+    // cross-realm fallback
+    if (isConstructor(C) && (C === $Array || isArray(C.prototype))) C = undefined;
+    else if (isObject$1(C)) {
+      C = C[SPECIES];
+      if (C === null) C = undefined;
+    }
+  } return C === undefined ? $Array : C;
+};
+
+var arraySpeciesConstructor = arraySpeciesConstructor$1;
+
+// `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesCreate$1 = function (originalArray, length) {
+  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
+};
+
+var $$3 = _export;
+var flattenIntoArray = flattenIntoArray_1;
+var toObject$2 = toObject$5;
+var lengthOfArrayLike$1 = lengthOfArrayLike$5;
+var toIntegerOrInfinity = toIntegerOrInfinity$3;
+var arraySpeciesCreate = arraySpeciesCreate$1;
+
+// `Array.prototype.flat` method
+// https://tc39.es/ecma262/#sec-array.prototype.flat
+$$3({ target: 'Array', proto: true }, {
+  flat: function flat(/* depthArg = 1 */) {
+    var depthArg = arguments.length ? arguments[0] : undefined;
+    var O = toObject$2(this);
+    var sourceLen = lengthOfArrayLike$1(O);
+    var A = arraySpeciesCreate(O, 0);
+    A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
+    return A;
+  }
+});
+
+// this method was added to unscopables after implementation
+// in popular engines, so it's moved to a separate module
+var addToUnscopables$1 = addToUnscopables$3;
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables$1('flat');
+
 var fails$3 = fails$h;
 
 var correctPrototypeGetter = !fails$3(function () {
@@ -2854,7 +2968,7 @@ var correctPrototypeGetter = !fails$3(function () {
 
 var hasOwn = hasOwnProperty_1;
 var isCallable$2 = isCallable$k;
-var toObject$2 = toObject$5;
+var toObject$1 = toObject$5;
 var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
 
@@ -2866,7 +2980,7 @@ var ObjectPrototype = $Object.prototype;
 // https://tc39.es/ecma262/#sec-object.getprototypeof
 // eslint-disable-next-line es/no-object-getprototypeof -- safe
 var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : function (O) {
-  var object = toObject$2(O);
+  var object = toObject$1(O);
   if (hasOwn(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
   if (isCallable$2(constructor) && object instanceof constructor) {
@@ -2876,12 +2990,12 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : f
 
 var fails$2 = fails$h;
 var isCallable$1 = isCallable$k;
-var isObject$1 = isObject$a;
+var isObject = isObject$a;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$1 = defineBuiltIn$6;
-var wellKnownSymbol$3 = wellKnownSymbol$h;
+var wellKnownSymbol$2 = wellKnownSymbol$h;
 
-var ITERATOR$3 = wellKnownSymbol$3('iterator');
+var ITERATOR$3 = wellKnownSymbol$2('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -2899,7 +3013,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$1(IteratorPrototype$2) || fails$2(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails$2(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$3].call(test) !== test;
@@ -2936,7 +3050,7 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var $$3 = _export;
+var $$2 = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable = isCallable$k;
@@ -2946,7 +3060,7 @@ var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$3;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$4;
 var defineBuiltIn = defineBuiltIn$6;
-var wellKnownSymbol$2 = wellKnownSymbol$h;
+var wellKnownSymbol$1 = wellKnownSymbol$h;
 var Iterators$1 = iterators;
 var IteratorsCore = iteratorsCore;
 
@@ -2954,7 +3068,7 @@ var PROPER_FUNCTION_NAME = FunctionName.PROPER;
 var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE;
 var IteratorPrototype = IteratorsCore.IteratorPrototype;
 var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;
-var ITERATOR$2 = wellKnownSymbol$2('iterator');
+var ITERATOR$2 = wellKnownSymbol$1('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -3021,7 +3135,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {
         defineBuiltIn(IterablePrototype, KEY, methods[KEY]);
       }
-    } else $$3({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
+    } else $$2({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
   }
 
   // define iterator
@@ -3040,7 +3154,7 @@ var createIterResultObject$1 = function (value, done) {
 };
 
 var toIndexedObject = toIndexedObject$5;
-var addToUnscopables$1 = addToUnscopables$3;
+var addToUnscopables = addToUnscopables$3;
 var Iterators = iterators;
 var InternalStateModule = internalState;
 var defineProperty = objectDefineProperty.f;
@@ -3091,9 +3205,9 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
 var values = Iterators.Arguments = Iterators.Array;
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables$1('keys');
-addToUnscopables$1('values');
-addToUnscopables$1('entries');
+addToUnscopables('keys');
+addToUnscopables('values');
+addToUnscopables('entries');
 
 // V8 ~ Chrome 45- bug
 if (DESCRIPTORS && values.name !== 'values') try {
@@ -3149,10 +3263,10 @@ var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$4;
-var wellKnownSymbol$1 = wellKnownSymbol$h;
+var wellKnownSymbol = wellKnownSymbol$h;
 
-var ITERATOR$1 = wellKnownSymbol$1('iterator');
-var TO_STRING_TAG = wellKnownSymbol$1('toStringTag');
+var ITERATOR$1 = wellKnownSymbol('iterator');
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
@@ -3183,123 +3297,64 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-var classof = classofRaw$2;
-
-// `IsArray` abstract operation
-// https://tc39.es/ecma262/#sec-isarray
-// eslint-disable-next-line es/no-array-isarray -- safe
-var isArray$2 = Array.isArray || function isArray(argument) {
-  return classof(argument) == 'Array';
-};
-
-var $TypeError$1 = TypeError;
-var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF; // 2 ** 53 - 1 == 9007199254740991
-
-var doesNotExceedSafeInteger$1 = function (it) {
-  if (it > MAX_SAFE_INTEGER) throw $TypeError$1('Maximum allowed index exceeded');
-  return it;
-};
-
-var isArray$1 = isArray$2;
-var lengthOfArrayLike$2 = lengthOfArrayLike$5;
-var doesNotExceedSafeInteger = doesNotExceedSafeInteger$1;
-var bind = functionBindContext;
-
-// `FlattenIntoArray` abstract operation
-// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
-var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
-  var targetIndex = start;
-  var sourceIndex = 0;
-  var mapFn = mapper ? bind(mapper, thisArg) : false;
-  var element, elementLen;
-
-  while (sourceIndex < sourceLen) {
-    if (sourceIndex in source) {
-      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
-
-      if (depth > 0 && isArray$1(element)) {
-        elementLen = lengthOfArrayLike$2(element);
-        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
+class ElementSeenObserver {
+  constructor(_options) {
+    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 delay = this._elementDelays.get(target);
+        const timeOut = window.setTimeout(() => {
+          this._options.onElementSeen(target);
+        }, delay);
+        this._intersectionTimers.set(target, timeOut);
       } else {
-        doesNotExceedSafeInteger(targetIndex + 1);
-        target[targetIndex] = element;
+        const timeOut = this._intersectionTimers.get(target);
+        if (typeof timeOut !== 'undefined') {
+          window.clearTimeout(timeOut);
+        }
       }
-
-      targetIndex++;
-    }
-    sourceIndex++;
+    });
   }
-  return targetIndex;
-};
-
-var flattenIntoArray_1 = flattenIntoArray$1;
-
-var isArray = isArray$2;
-var isConstructor = isConstructor$2;
-var isObject = isObject$a;
-var wellKnownSymbol = wellKnownSymbol$h;
-
-var SPECIES = wellKnownSymbol('species');
-var $Array = Array;
+  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);
+  }
+  unobserve(element) {
+    var _a;
+    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+  }
+}
 
-// a part of `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesConstructor$1 = function (originalArray) {
-  var C;
-  if (isArray(originalArray)) {
-    C = originalArray.constructor;
-    // cross-realm fallback
-    if (isConstructor(C) && (C === $Array || isArray(C.prototype))) C = undefined;
-    else if (isObject(C)) {
-      C = C[SPECIES];
-      if (C === null) C = undefined;
-    }
-  } return C === undefined ? $Array : C;
+const acceptsCredentials = plugin => {
+  return typeof plugin === 'object' && plugin !== null && 'setCredentials' in plugin && typeof plugin.setCredentials === 'function';
 };
 
-var arraySpeciesConstructor = arraySpeciesConstructor$1;
-
-// `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesCreate$1 = function (originalArray, length) {
-  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
+const isInterestedInHiddenPage = arg => {
+  return typeof arg === 'object' && arg !== null && PAGE_HIDDEN in arg && typeof arg[PAGE_HIDDEN] === 'function';
 };
 
-var $$2 = _export;
-var flattenIntoArray = flattenIntoArray_1;
-var toObject$1 = toObject$5;
-var lengthOfArrayLike$1 = lengthOfArrayLike$5;
-var toIntegerOrInfinity = toIntegerOrInfinity$3;
-var arraySpeciesCreate = arraySpeciesCreate$1;
-
-// `Array.prototype.flat` method
-// https://tc39.es/ecma262/#sec-array.prototype.flat
-$$2({ target: 'Array', proto: true }, {
-  flat: function flat(/* depthArg = 1 */) {
-    var depthArg = arguments.length ? arguments[0] : undefined;
-    var O = toObject$1(this);
-    var sourceLen = lengthOfArrayLike$1(O);
-    var A = arraySpeciesCreate(O, 0);
-    A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
-    return A;
-  }
-});
-
-// this method was added to unscopables after implementation
-// in popular engines, so it's moved to a separate module
-var addToUnscopables = addToUnscopables$3;
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('flat');
-
 class Ninetailed {
   constructor(ninetailedApiClientInstanceOrOptions, {
     plugins,
     url,
+    profile,
     locale,
     requestTimeout,
     onLog,
-    onError
+    onError,
+    componentViewTrackingThreshold = 2000
   } = {}) {
     this.isInitialized = false;
     this.page = (data, options) => __awaiter(this, void 0, void 0, function* () {
@@ -3336,16 +3391,48 @@ class Ninetailed {
         throw error;
       }
     });
+    /**
+     * @deprecated The legacy datamodel is not recommended anymore
+     * Will be removed in version 5 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
       }));
     });
+    /**
+     * @deprecated Use the Ninetailed provided observers instead
+     * Will be removed in version 5 of the SDK
+     */
     this.trackHasSeenExperience = properties => {
       return this.instance.dispatch(Object.assign(Object.assign({}, properties), {
-        type: HAS_SEEN_EXPERIENCE
+        type: HAS_SEEN_ELEMENT
       }));
     };
+    this.observeElement = (payload, options) => {
+      const {
+          element
+        } = payload,
+        remaingPayload = __rest(payload, ["element"]);
+      this.observedElements.set(element, 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 payload = this.observedElements.get(element);
+      if (typeof payload !== 'undefined') {
+        this.instance.dispatch(Object.assign(Object.assign({
+          element
+        }, payload), {
+          type: HAS_SEEN_ELEMENT
+        }));
+      }
+    };
     this.identify = (uid, traits, options) => __awaiter(this, void 0, void 0, function* () {
       try {
         const result = Traits.default({}).safeParse(traits);
@@ -3384,14 +3471,12 @@ class Ninetailed {
           cb(Object.assign(Object.assign({}, this._profileState), {
             status: 'error',
             profile: payload.profile,
-            experiences: payload.experiences,
             error: payload.error
           }));
         } else {
           cb(Object.assign(Object.assign({}, this._profileState), {
             status: 'success',
             profile: payload.profile,
-            experiences: payload.experiences,
             error: null
           }));
         }
@@ -3415,6 +3500,18 @@ class Ninetailed {
         this.onIsInitialized(resolve);
       });
     };
+    this.onVisibilityChange = () => {
+      if (typeof document === 'undefined') {
+        return;
+      }
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+          this.instance.dispatch({
+            type: PAGE_HIDDEN
+          });
+        }
+      });
+    };
     if (ninetailedApiClientInstanceOrOptions instanceof NinetailedApiClient) {
       this.apiClient = ninetailedApiClientInstanceOrOptions;
     } else {
@@ -3432,22 +3529,30 @@ class Ninetailed {
         preview
       });
     }
-    this.plugins = [...(plugins || []).map(plugin => {
-      if ('setCredentials' in plugin && typeof plugin['setCredentials'] === 'function') {
-        plugin['setCredentials']({
+    this.plugins = (plugins !== null && plugins !== void 0 ? plugins : []).flat();
+    this.plugins.forEach(plugin => {
+      if (acceptsCredentials(plugin) && this.clientId && this.environment) {
+        plugin.setCredentials({
           clientId: this.clientId,
           environment: this.environment
         });
       }
-      return plugin;
-    }).flat()];
-    this._profileState = {
-      status: 'loading',
-      profile: null,
-      experiences: null,
-      error: null,
-      from: 'api'
-    };
+    });
+    if (profile) {
+      this._profileState = {
+        status: 'success',
+        profile,
+        error: null,
+        from: 'hydrated'
+      };
+    } else {
+      this._profileState = {
+        status: 'loading',
+        profile: null,
+        error: null,
+        from: 'api'
+      };
+    }
     if (typeof onLog === 'function') {
       logger.addSink(new OnLogLogSink(onLog));
     }
@@ -3457,6 +3562,7 @@ class Ninetailed {
     this.logger = logger;
     this.eventQueue = ninetailedPlugin({
       apiClient: this.apiClient,
+      profile,
       locale,
       requestTimeout,
       ninetailed: this
@@ -3475,11 +3581,19 @@ class Ninetailed {
       this._profileState = profileState;
       if (typeof window !== 'undefined') {
         window.ninetailed = Object.assign({}, window.ninetailed, {
-          profile: this.profileState.profile,
-          experiences: this.profileState.experiences
+          profile: this.profileState.profile
         });
       }
     });
+    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 profileState() {
@@ -3592,39 +3706,44 @@ const selectVariant = (baseline, variants, {
   };
 };
 
-const TrackExperienceProperties = z.object({
+const TrackComponentProperties = z.object({
+  variant: z.object({
+    id: z.string()
+  }),
+  audience: z.object({
+    id: z.string()
+  }),
+  isPersonalized: z.boolean()
+});
+
+/**
+ * @deprecated Use `NinetailedPlugin` from the sdks/javascript package instead.
+ */
+class NinetailedPlugin {}
+
+const ElementSeenPayloadSchema = z.object({
+  element: z.any(),
   experience: z.object({
     id: z.string(),
     type: z.union([z.literal('nt_experiment'), z.literal('nt_personalization')]),
-    name: z.string(),
+    name: z.string().optional(),
     description: z.string().optional()
-  }),
+  }).optional().nullable(),
   audience: z.object({
     id: z.string(),
     name: z.string().optional(),
     description: z.string().optional()
-  }).optional().default({
+  }).optional().nullable().default({
     id: 'ALL_VISITORS',
     name: 'All Visitors',
     description: 'This is the default all visitors audience as no audience was set.'
   }),
-  selectedVariant: z.object({
-    id: z.string()
-  }).catchall(z.unknown()),
-  selectedVariantIndex: z.number()
-});
-const TrackComponentProperties = z.object({
   variant: z.object({
     id: z.string()
-  }),
-  audience: z.object({
-    id: z.string()
-  }),
-  isPersonalized: z.boolean()
+  }).catchall(z.unknown()),
+  variantIndex: z.number()
 });
 
-class NinetailedPlugin {}
-
 var aCallable = aCallable$8;
 var toObject = toObject$5;
 var IndexedObject = indexedObject;
@@ -3831,11 +3950,13 @@ const selectPluginsHavingExperienceSelectionMiddleware = plugins => {
 const createPassThroughMiddleware = () => {
   return ({
     experience,
-    variant
+    variant,
+    variantIndex
   }) => {
     return {
       experience,
-      variant
+      variant,
+      variantIndex
     };
   };
 };
@@ -3878,4 +3999,4 @@ const makeExperienceSelectMiddleware = ({
   };
 };
 
-export { ANONYMOUS_ID, CONSENT, DEBUG_FLAG, EMPTY_MERGE_ID, EXPERIENCES_FALLBACK_CACHE, HAS_SEEN_COMPONENT, HAS_SEEN_EXPERIENCE, LEGACY_ANONYMOUS_ID, Ninetailed, NinetailedPlugin, OnChangeEmitter, PLUGIN_NAME, PROFILE_CHANGE, PROFILE_FALLBACK_CACHE, PROFILE_RESET, SET_ENABLED_FEATURES, TrackComponentProperties, TrackExperienceProperties, decodeExperienceVariantsMap, makeExperienceSelectMiddleware, ninetailedPlugin, selectPluginsHavingExperienceSelectionMiddleware, selectPluginsHavingOnChangeEmitter, selectVariant };
+export { ANONYMOUS_ID, CONSENT, DEBUG_FLAG, EMPTY_MERGE_ID, ElementSeenPayloadSchema, HAS_SEEN_COMPONENT, HAS_SEEN_ELEMENT, LEGACY_ANONYMOUS_ID, Ninetailed, NinetailedPlugin, OnChangeEmitter, PAGE_HIDDEN, PLUGIN_NAME, PROFILE_CHANGE, PROFILE_FALLBACK_CACHE, PROFILE_RESET, SET_ENABLED_FEATURES, TrackComponentProperties, buildClientNinetailedRequestContext, decodeExperienceVariantsMap, makeExperienceSelectMiddleware, ninetailedPlugin, selectPluginsHavingExperienceSelectionMiddleware, selectPluginsHavingOnChangeEmitter, selectVariant };