@ninetailed/experience.js-react 4.1.0-beta.1 → 4.1.0-beta.3

package/index.cjs

@@ -5,22 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var experience_js = require('@ninetailed/experience.js');
-var _debounce = require('lodash/debounce');
-var values$1 = require('lodash/values');
+var reactIntersectionObserver = require('react-intersection-observer');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
 var isEqual = require('lodash/isEqual');
-var reactIntersectionObserver = require('react-intersection-observer');
-var get$1 = require('lodash/get');
 var has$1 = require('lodash/has');
+var _debounce = require('lodash/debounce');
+var values$1 = require('lodash/values');
+var get$1 = require('lodash/get');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
 var _debounce__default = /*#__PURE__*/_interopDefaultLegacy(_debounce);
 var values__default = /*#__PURE__*/_interopDefaultLegacy(values$1);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
-var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1107,86 +1107,6 @@ $$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
 
 const NinetailedContext = /*#__PURE__*/React.createContext(undefined);
 
-const ExperimentsContext = /*#__PURE__*/React.createContext(undefined);
-
-var aCallable = aCallable$2;
-var toObject$1 = toObject$4;
-var IndexedObject = indexedObject;
-var lengthOfArrayLike = lengthOfArrayLike$2;
-
-var $TypeError$1 = TypeError;
-
-// `Array.prototype.{ reduce, reduceRight }` methods implementation
-var createMethod = function (IS_RIGHT) {
-  return function (that, callbackfn, argumentsLength, memo) {
-    aCallable(callbackfn);
-    var O = toObject$1(that);
-    var self = IndexedObject(O);
-    var length = lengthOfArrayLike(O);
-    var index = IS_RIGHT ? length - 1 : 0;
-    var i = IS_RIGHT ? -1 : 1;
-    if (argumentsLength < 2) while (true) {
-      if (index in self) {
-        memo = self[index];
-        index += i;
-        break;
-      }
-      index += i;
-      if (IS_RIGHT ? index < 0 : length <= index) {
-        throw $TypeError$1('Reduce of empty array with no initial value');
-      }
-    }
-    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
-      memo = callbackfn(memo, self[index], index, O);
-    }
-    return memo;
-  };
-};
-
-var arrayReduce = {
-  // `Array.prototype.reduce` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduce
-  left: createMethod(false),
-  // `Array.prototype.reduceRight` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-  right: createMethod(true)
-};
-
-var fails$2 = fails$c;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails$2(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
-};
-
-var classof$2 = classofRaw$1;
-var global$3 = global$d;
-
-var engineIsNode = classof$2(global$3.process) == 'process';
-
-var $$2 = _export;
-var $reduce = arrayReduce.left;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var CHROME_VERSION = engineV8Version;
-var IS_NODE = engineIsNode;
-
-var STRICT_METHOD = arrayMethodIsStrict('reduce');
-// Chrome 80-82 has a critical bug
-// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
-var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-$$2({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
-  reduce: function reduce(callbackfn /* , initialValue */) {
-    var length = arguments.length;
-    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
-  }
-});
-
 var objectDefineProperties = {};
 
 var DESCRIPTORS$2 = descriptors;
@@ -1322,9 +1242,9 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var fails$1 = fails$c;
+var fails$2 = fails$c;
 
-var correctPrototypeGetter = !fails$1(function () {
+var correctPrototypeGetter = !fails$2(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -1333,7 +1253,7 @@ var correctPrototypeGetter = !fails$1(function () {
 
 var hasOwn$2 = hasOwnProperty_1;
 var isCallable$5 = isCallable$g;
-var toObject = toObject$4;
+var toObject$1 = toObject$4;
 var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
 
@@ -1345,7 +1265,7 @@ var ObjectPrototype = $Object$1.prototype;
 // https://tc39.es/ecma262/#sec-object.getprototypeof
 // eslint-disable-next-line es/no-object-getprototypeof -- safe
 var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf : function (O) {
-  var object = toObject(O);
+  var object = toObject$1(O);
   if (hasOwn$2(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
   if (isCallable$5(constructor) && object instanceof constructor) {
@@ -1353,7 +1273,7 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf :
   } return object instanceof $Object$1 ? ObjectPrototype : null;
 };
 
-var fails = fails$c;
+var fails$1 = fails$c;
 var isCallable$4 = isCallable$g;
 var isObject = isObject$6;
 var getPrototypeOf$1 = objectGetPrototypeOf;
@@ -1378,7 +1298,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails$1(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
@@ -1431,11 +1351,11 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
 var isCallable$3 = isCallable$g;
 
 var $String$1 = String;
-var $TypeError = TypeError;
+var $TypeError$1 = TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
   if (typeof argument == 'object' || isCallable$3(argument)) return argument;
-  throw $TypeError("Can't set " + $String$1(argument) + ' as a prototype');
+  throw $TypeError$1("Can't set " + $String$1(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
@@ -1467,7 +1387,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
   };
 }() : undefined);
 
-var $$1 = _export;
+var $$2 = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable$2 = isCallable$g;
@@ -1552,7 +1472,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 $$1({ 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
@@ -1675,7 +1595,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$2 = global$d;
+var global$3 = global$d;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
@@ -1709,7 +1629,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$2[COLLECTION_NAME] && global$2[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(global$3[COLLECTION_NAME] && global$3[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1751,7 +1671,110 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
+var wellKnownSymbol$1 = wellKnownSymbol$8;
+
+var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
+var test = {};
+
+test[TO_STRING_TAG$1] = 'z';
+
+var toStringTagSupport = String(test) === '[object z]';
+
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var isCallable$1 = isCallable$g;
+var classofRaw = classofRaw$1;
+var wellKnownSymbol = wellKnownSymbol$8;
+
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
+var $Object = Object;
+
+// ES3 wrong here
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+
+// fallback for IE11 Script Access Denied error
+var tryGet = function (it, key) {
+  try {
+    return it[key];
+  } catch (error) { /* empty */ }
+};
+
+// getting tag from ES6+ `Object.prototype.toString`
+var classof$2 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+  var O, tag, result;
+  return it === undefined ? 'Undefined' : it === null ? 'Null'
+    // @@toStringTag case
+    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
+    // builtinTag case
+    : CORRECT_ARGUMENTS ? classofRaw(O)
+    // ES3 arguments fallback
+    : (result = classofRaw(O)) == 'Object' && isCallable$1(O.callee) ? 'Arguments' : result;
+};
+
+var classof$1 = classof$2;
+
+var $String = String;
+
+var toString$1 = function (argument) {
+  if (classof$1(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+var $$1 = _export;
+var DESCRIPTORS = descriptors;
+var global$2 = global$d;
+var uncurryThis = functionUncurryThis;
+var hasOwn = hasOwnProperty_1;
+var isCallable = isCallable$g;
+var isPrototypeOf = objectIsPrototypeOf;
+var toString = toString$1;
+var defineProperty = objectDefineProperty.f;
+var copyConstructorProperties = copyConstructorProperties$2;
+
+var NativeSymbol = global$2.Symbol;
+var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+
+if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
+  // Safari 12 bug
+  NativeSymbol().description !== undefined
+)) {
+  var EmptyStringDescriptionStore = {};
+  // wrap Symbol constructor for correct work with undefined description
+  var SymbolWrapper = function Symbol() {
+    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
+    var result = isPrototypeOf(SymbolPrototype, this)
+      ? new NativeSymbol(description)
+      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
+      : description === undefined ? NativeSymbol() : NativeSymbol(description);
+    if (description === '') EmptyStringDescriptionStore[result] = true;
+    return result;
+  };
+
+  copyConstructorProperties(SymbolWrapper, NativeSymbol);
+  SymbolWrapper.prototype = SymbolPrototype;
+  SymbolPrototype.constructor = SymbolWrapper;
+
+  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
+  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
+  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis(''.replace);
+  var stringSlice = uncurryThis(''.slice);
+
+  defineProperty(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = thisSymbolValue(this);
+      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      var string = symbolDescriptiveString(symbol);
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      return desc === '' ? undefined : desc;
+    }
+  });
+
+  $$1({ global: true, constructor: true, forced: true }, {
+    Symbol: SymbolWrapper
+  });
+}
 
 const useNinetailed = () => {
   const ninetailed = React.useContext(NinetailedContext);
@@ -1761,421 +1784,162 @@ const useNinetailed = () => {
   return ninetailed;
 };
 
-const debounce = (fn, wait, options) => {
-  let debouncedArgs = [];
-  const debouncedFn = _debounce__default["default"](() => {
-    fn.call(undefined, debouncedArgs);
-    debouncedArgs = [];
-  }, wait, options);
-  return (...args) => {
-    debouncedArgs.push(values__default["default"](args));
-    debouncedFn();
-  };
-};
-const useProvideJoinExperiment = ({
-  experiments,
-  maximumActiveExperiments: _maximumActiveExperiments = 1
+const TrackExperience = ({
+  children,
+  experience,
+  variant,
+  profile
 }) => {
+  const ninetailed = useNinetailed();
   const {
-    identify
-  } = useNinetailed();
-  const joinExperimentIdentify = debounce(args => {
-    const traits = args.slice(0, _maximumActiveExperiments).reduce((traits, [experimentJoinTraits]) => {
-      return Object.assign(Object.assign({}, experimentJoinTraits), traits);
-    }, {});
-    identify('', traits);
+    ref,
+    inView
+  } = reactIntersectionObserver.useInView({
+    triggerOnce: true
   });
-  return React.useCallback(data => __awaiter(void 0, void 0, void 0, function* () {
-    const {
-      experiment,
-      profile
-    } = data;
-    const isExperiment = experiment.type === 'nt_experiment';
-    if (!isExperiment) {
-      experience_jsShared.logger.warn(`The experience ${experiment.id}, which you tried to join, is not an experiment.`);
-      return;
-    }
-    const activeExperiments = experience_js.selectActiveExperiments(experiments, profile);
-    if (activeExperiments.length >= _maximumActiveExperiments) {
-      experience_jsShared.logger.warn(`The maximum number of active experiments (${_maximumActiveExperiments}) has been reached.`);
-      return;
-    }
-    if (activeExperiments.some(activeExperiment => activeExperiment.id === experiment.id)) {
-      experience_jsShared.logger.debug(`The user is already part of experiment ${experiment.id}. Won't join again.`);
-      return;
-    }
-    joinExperimentIdentify({
-      [`${EXPERIENCE_TRAIT_PREFIX}${experiment.id}`]: true
-    });
-    experience_jsShared.logger.debug(`Sent event to join experiment ${experiment.id}.`);
-  }), []);
-};
-
-const ExperimentsProvider = ({
-  experiments,
-  maximumActiveExperiments: _maximumActiveExperiments = 1,
-  children
-}) => {
-  const joinExperiment = useProvideJoinExperiment({
-    experiments,
-    maximumActiveExperiments: _maximumActiveExperiments
-  });
-  return jsxRuntime.jsx(ExperimentsContext.Provider, Object.assign({
-    value: {
-      experiments,
-      joinExperiment
-    }
-  }, {
-    children: children
-  }));
-};
-
-const NinetailedProvider = ({
-  children,
-  clientId,
-  experiments: _experiments = [],
-  maximumActiveExperiments,
-  environment,
-  preview,
-  url,
-  profile,
-  locale,
-  requestTimeout,
-  plugins: _plugins = [],
-  onLog,
-  onError
-}) => {
-  const ninetailed = React.useMemo(() => new experience_js.Ninetailed({
-    clientId,
-    environment,
-    preview
-  }, {
-    url,
-    plugins: _plugins,
-    profile,
-    locale,
-    requestTimeout,
-    onLog,
-    onError
-  }), []);
-  return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
-    value: ninetailed
-  }, {
-    children: jsxRuntime.jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
-      maximumActiveExperiments: maximumActiveExperiments
-    }, {
-      children: children
-    }))
-  }));
-};
-
-const useProfile = () => {
-  const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = React.useState(ninetailed.profileState);
-  const profileStateRef = React.useRef({});
-  /**
-   * This effect compares the old and new profile state before updating it.
-   * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
-   * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
-   * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
-   */
-  React.useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (isEqual__default["default"](profileState, profileStateRef.current)) {
-        experience_jsShared.logger.debug('Profile State Did Not Change', profileState);
-        return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        experience_jsShared.logger.debug('Profile State Changed', profileState);
-      }
-    });
-  }, []);
-  /**
-   * Old implementation without profile state deep comparison
-   */
-  /*useEffect(() => {
-    return ninetailed.onProfileChange((profileState) => {
-      console.log('profileState', profileState);
-      setProfileState(profileState);
-    });
-  }, []);*/
-  return Object.assign(Object.assign({}, profileState), {
-    loading: profileState.status === 'loading'
-  });
-};
-
-const usePersonalize = (baseline, variants, options = {
-  holdout: -1
-}) => {
-  const profile = useProfile();
-  return experience_js.selectVariant(baseline, variants, profile, options);
-};
-
-const TrackHasSeenComponent = ({
-  children,
-  variant,
-  audience,
-  isPersonalized
-}) => {
-  const ninetailed = useNinetailed();
-  const {
-    ref,
-    inView
-  } = reactIntersectionObserver.useInView({
-    triggerOnce: true
-  });
-  React.useEffect(() => {
-    if (experience_jsShared.isBrowser() && inView) {
-      ninetailed.trackHasSeenComponent({
-        variant,
-        audience,
-        isPersonalized
-      });
+  React.useEffect(() => {
+    if (experience_jsShared.isBrowser() && inView) {
+      const distribution = experience_js.selectDistribution({
+        experience,
+        profile
+      });
+      ninetailed.trackHasSeenExperience({
+        experience: {
+          id: experience.id,
+          type: experience.type,
+          name: experience.name || '',
+          description: experience.description || ''
+        },
+        audience: experience.audience,
+        selectedVariant: variant,
+        selectedVariantIndex: distribution.index
+      });
     }
   }, [inView]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
-      ref: ref
+      ref: ref,
+      id: "nt-experience-handle"
     }), children]
   });
 };
 
-const Personalize = _a => {
-  var {
-      component: Component,
-      loadingComponent: LoadingComponent,
-      variants = [],
-      holdout = -1
-    } = _a,
-    baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
-  const {
-    loading,
-    variant,
-    isPersonalized,
-    audience
-  } = usePersonalize(baseline, variants, {
-    holdout
-  });
-  const hasVariants = variants.length > 0;
-  if (!hasVariants) {
-    return jsxRuntime.jsx(Component, Object.assign({}, baseline, {
-      ninetailed: {
-        isPersonalized,
-        audience
-      }
-    }));
-  }
-  if (loading) {
-    if (LoadingComponent) {
-      return jsxRuntime.jsx(LoadingComponent, {});
-    }
-    return jsxRuntime.jsx("div", Object.assign({
-      style: {
-        opacity: 0
-      }
-    }, {
-      children: jsxRuntime.jsx(Component, Object.assign({}, variant, {
-        ninetailed: {
-          isPersonalized,
-          audience
-        }
-      }))
-    }), "hide");
-  }
-  return jsxRuntime.jsx(TrackHasSeenComponent, Object.assign({
-    variant: variant,
-    audience: audience,
-    isPersonalized: isPersonalized
-  }, {
-    children: /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
-      key: `${audience.id}-${variant.id}`,
-      ninetailed: {
-        isPersonalized,
-        audience
-      }
-    }))
-  }));
-};
-
-const generateSelectors = id => {
-  return id.split('_').map((path, index, paths) => {
-    const dotPath = paths.slice(0, index).join('.');
-    const underScorePath = paths.slice(index).join('_');
-    return [dotPath, underScorePath].filter(path => path !== '').join('.');
-  });
-};
-const selectValueFromProfile = (profile, id) => {
-  const selectors = generateSelectors(id);
-  const matchingSelector = selectors.find(selector => get__default["default"](profile, selector));
-  if (!matchingSelector) {
-    return null;
-  }
-  return get__default["default"](profile, matchingSelector);
-};
-const MergeTag = ({
-  id
-}) => {
-  const {
-    loading,
-    profile
-  } = useProfile();
-  if (loading || !profile) {
-    return null;
-  }
-  const value = selectValueFromProfile(profile, id);
-  // DON'T CHANGE
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: value
-  });
-};
-
-var wellKnownSymbol$1 = wellKnownSymbol$8;
-
-var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
-var test = {};
-
-test[TO_STRING_TAG$1] = 'z';
-
-var toStringTagSupport = String(test) === '[object z]';
-
-var TO_STRING_TAG_SUPPORT = toStringTagSupport;
-var isCallable$1 = isCallable$g;
-var classofRaw = classofRaw$1;
-var wellKnownSymbol = wellKnownSymbol$8;
-
-var TO_STRING_TAG = wellKnownSymbol('toStringTag');
-var $Object = Object;
+var aCallable = aCallable$2;
+var toObject = toObject$4;
+var IndexedObject = indexedObject;
+var lengthOfArrayLike = lengthOfArrayLike$2;
 
-// ES3 wrong here
-var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+var $TypeError = TypeError;
 
-// fallback for IE11 Script Access Denied error
-var tryGet = function (it, key) {
-  try {
-    return it[key];
-  } catch (error) { /* empty */ }
+// `Array.prototype.{ reduce, reduceRight }` methods implementation
+var createMethod = function (IS_RIGHT) {
+  return function (that, callbackfn, argumentsLength, memo) {
+    aCallable(callbackfn);
+    var O = toObject(that);
+    var self = IndexedObject(O);
+    var length = lengthOfArrayLike(O);
+    var index = IS_RIGHT ? length - 1 : 0;
+    var i = IS_RIGHT ? -1 : 1;
+    if (argumentsLength < 2) while (true) {
+      if (index in self) {
+        memo = self[index];
+        index += i;
+        break;
+      }
+      index += i;
+      if (IS_RIGHT ? index < 0 : length <= index) {
+        throw $TypeError('Reduce of empty array with no initial value');
+      }
+    }
+    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
+      memo = callbackfn(memo, self[index], index, O);
+    }
+    return memo;
+  };
 };
 
-// getting tag from ES6+ `Object.prototype.toString`
-var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
-  var O, tag, result;
-  return it === undefined ? 'Undefined' : it === null ? 'Null'
-    // @@toStringTag case
-    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
-    // builtinTag case
-    : CORRECT_ARGUMENTS ? classofRaw(O)
-    // ES3 arguments fallback
-    : (result = classofRaw(O)) == 'Object' && isCallable$1(O.callee) ? 'Arguments' : result;
+var arrayReduce = {
+  // `Array.prototype.reduce` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduce
+  left: createMethod(false),
+  // `Array.prototype.reduceRight` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+  right: createMethod(true)
 };
 
-var classof = classof$1;
-
-var $String = String;
+var fails = fails$c;
 
-var toString$1 = function (argument) {
-  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
+var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails(function () {
+    // eslint-disable-next-line no-useless-call -- required for testing
+    method.call(null, argument || function () { return 1; }, 1);
+  });
 };
 
-var $ = _export;
-var DESCRIPTORS = descriptors;
+var classof = classofRaw$1;
 var global$1 = global$d;
-var uncurryThis = functionUncurryThis;
-var hasOwn = hasOwnProperty_1;
-var isCallable = isCallable$g;
-var isPrototypeOf = objectIsPrototypeOf;
-var toString = toString$1;
-var defineProperty = objectDefineProperty.f;
-var copyConstructorProperties = copyConstructorProperties$2;
 
-var NativeSymbol = global$1.Symbol;
-var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+var engineIsNode = classof(global$1.process) == 'process';
 
-if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
-  // Safari 12 bug
-  NativeSymbol().description !== undefined
-)) {
-  var EmptyStringDescriptionStore = {};
-  // wrap Symbol constructor for correct work with undefined description
-  var SymbolWrapper = function Symbol() {
-    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
-    var result = isPrototypeOf(SymbolPrototype, this)
-      ? new NativeSymbol(description)
-      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
-      : description === undefined ? NativeSymbol() : NativeSymbol(description);
-    if (description === '') EmptyStringDescriptionStore[result] = true;
-    return result;
-  };
-
-  copyConstructorProperties(SymbolWrapper, NativeSymbol);
-  SymbolWrapper.prototype = SymbolPrototype;
-  SymbolPrototype.constructor = SymbolWrapper;
-
-  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
-  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
-  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
-  var regexp = /^Symbol\((.*)\)[^)]+$/;
-  var replace = uncurryThis(''.replace);
-  var stringSlice = uncurryThis(''.slice);
+var $ = _export;
+var $reduce = arrayReduce.left;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+var CHROME_VERSION = engineV8Version;
+var IS_NODE = engineIsNode;
 
-  defineProperty(SymbolPrototype, 'description', {
-    configurable: true,
-    get: function description() {
-      var symbol = thisSymbolValue(this);
-      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
-      var string = symbolDescriptiveString(symbol);
-      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
-      return desc === '' ? undefined : desc;
-    }
-  });
+var STRICT_METHOD = arrayMethodIsStrict('reduce');
+// Chrome 80-82 has a critical bug
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
+var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
 
-  $({ global: true, constructor: true, forced: true }, {
-    Symbol: SymbolWrapper
-  });
-}
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+$({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
+  reduce: function reduce(callbackfn /* , initialValue */) {
+    var length = arguments.length;
+    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
+  }
+});
 
-const TrackExperience = ({
-  children,
-  experience,
-  variant,
-  profile
-}) => {
+const useProfile = () => {
   const ninetailed = useNinetailed();
-  const {
-    ref,
-    inView
-  } = reactIntersectionObserver.useInView({
-    triggerOnce: true
-  });
+  const [profileState, setProfileState] = React.useState(ninetailed.profileState);
+  const profileStateRef = React.useRef({});
+  /**
+   * This effect compares the old and new profile state before updating it.
+   * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
+   * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
+   * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
+   */
   React.useEffect(() => {
-    if (experience_jsShared.isBrowser() && inView) {
-      const distribution = experience_js.selectDistribution({
-        experience,
-        profile
-      });
-      ninetailed.trackHasSeenExperience({
-        experience: {
-          id: experience.id,
-          type: experience.type,
-          name: experience.name || '',
-          description: experience.description || ''
-        },
-        audience: experience.audience,
-        selectedVariant: variant,
-        selectedVariantIndex: distribution.index
-      });
-    }
-  }, [inView]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("div", {
-      ref: ref,
-      id: "nt-experience-handle"
-    }), children]
+    ninetailed.onProfileChange(profileState => {
+      if (isEqual__default["default"](profileState, profileStateRef.current)) {
+        experience_jsShared.logger.debug('Profile State Did Not Change', profileState);
+        return;
+      } else {
+        setProfileState(profileState);
+        profileStateRef.current = profileState;
+        experience_jsShared.logger.debug('Profile State Changed', profileState);
+      }
+    });
+  }, []);
+  /**
+   * Old implementation without profile state deep comparison
+   */
+  /*useEffect(() => {
+    return ninetailed.onProfileChange((profileState) => {
+      console.log('profileState', profileState);
+      setProfileState(profileState);
+    });
+  }, []);*/
+  return Object.assign(Object.assign({}, profileState), {
+    loading: profileState.status === 'loading'
   });
 };
 
+const ExperimentsContext = /*#__PURE__*/React.createContext(undefined);
+
 const useExperimentsContext = () => {
   const context = React.useContext(ExperimentsContext);
   if (context === undefined) {
@@ -2563,6 +2327,242 @@ const ESRLoadingComponent = _a => {
   }));
 };
 
+const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
+
+const debounce = (fn, wait, options) => {
+  let debouncedArgs = [];
+  const debouncedFn = _debounce__default["default"](() => {
+    fn.call(undefined, debouncedArgs);
+    debouncedArgs = [];
+  }, wait, options);
+  return (...args) => {
+    debouncedArgs.push(values__default["default"](args));
+    debouncedFn();
+  };
+};
+const useProvideJoinExperiment = ({
+  experiments,
+  maximumActiveExperiments: _maximumActiveExperiments = 1
+}) => {
+  const {
+    identify
+  } = useNinetailed();
+  const joinExperimentIdentify = debounce(args => {
+    const traits = args.slice(0, _maximumActiveExperiments).reduce((traits, [experimentJoinTraits]) => {
+      return Object.assign(Object.assign({}, experimentJoinTraits), traits);
+    }, {});
+    identify('', traits);
+  });
+  return React.useCallback(data => __awaiter(void 0, void 0, void 0, function* () {
+    const {
+      experiment,
+      profile
+    } = data;
+    const isExperiment = experiment.type === 'nt_experiment';
+    if (!isExperiment) {
+      experience_jsShared.logger.warn(`The experience ${experiment.id}, which you tried to join, is not an experiment.`);
+      return;
+    }
+    const activeExperiments = experience_js.selectActiveExperiments(experiments, profile);
+    if (activeExperiments.length >= _maximumActiveExperiments) {
+      experience_jsShared.logger.warn(`The maximum number of active experiments (${_maximumActiveExperiments}) has been reached.`);
+      return;
+    }
+    if (activeExperiments.some(activeExperiment => activeExperiment.id === experiment.id)) {
+      experience_jsShared.logger.debug(`The user is already part of experiment ${experiment.id}. Won't join again.`);
+      return;
+    }
+    joinExperimentIdentify({
+      [`${EXPERIENCE_TRAIT_PREFIX}${experiment.id}`]: true
+    });
+    experience_jsShared.logger.debug(`Sent event to join experiment ${experiment.id}.`);
+  }), []);
+};
+
+const ExperimentsProvider = ({
+  experiments,
+  maximumActiveExperiments: _maximumActiveExperiments = 1,
+  children
+}) => {
+  const joinExperiment = useProvideJoinExperiment({
+    experiments,
+    maximumActiveExperiments: _maximumActiveExperiments
+  });
+  return jsxRuntime.jsx(ExperimentsContext.Provider, Object.assign({
+    value: {
+      experiments,
+      joinExperiment
+    }
+  }, {
+    children: children
+  }));
+};
+
+const NinetailedProvider = ({
+  children,
+  clientId,
+  experiments: _experiments = [],
+  maximumActiveExperiments,
+  environment,
+  preview,
+  url,
+  profile,
+  locale,
+  requestTimeout,
+  plugins: _plugins = [],
+  onLog,
+  onError
+}) => {
+  const ninetailed = React.useMemo(() => new experience_js.Ninetailed({
+    clientId,
+    environment,
+    preview
+  }, {
+    url,
+    plugins: _plugins,
+    profile,
+    locale,
+    requestTimeout,
+    onLog,
+    onError
+  }), []);
+  return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
+    value: ninetailed
+  }, {
+    children: jsxRuntime.jsx(ExperimentsProvider, Object.assign({
+      experiments: _experiments,
+      maximumActiveExperiments: maximumActiveExperiments
+    }, {
+      children: children
+    }))
+  }));
+};
+
+const usePersonalize = (baseline, variants, options = {
+  holdout: -1
+}) => {
+  const profile = useProfile();
+  return experience_js.selectVariant(baseline, variants, profile, options);
+};
+
+const TrackHasSeenComponent = ({
+  children,
+  variant,
+  audience,
+  isPersonalized
+}) => {
+  const ninetailed = useNinetailed();
+  const {
+    ref,
+    inView
+  } = reactIntersectionObserver.useInView({
+    triggerOnce: true
+  });
+  React.useEffect(() => {
+    if (experience_jsShared.isBrowser() && inView) {
+      ninetailed.trackHasSeenComponent({
+        variant,
+        audience,
+        isPersonalized
+      });
+    }
+  }, [inView]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      ref: ref
+    }), children]
+  });
+};
+
+const Personalize = _a => {
+  var {
+      component: Component,
+      loadingComponent: LoadingComponent,
+      variants = [],
+      holdout = -1
+    } = _a,
+    baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
+  const {
+    loading,
+    variant,
+    isPersonalized,
+    audience
+  } = usePersonalize(baseline, variants, {
+    holdout
+  });
+  const hasVariants = variants.length > 0;
+  if (!hasVariants) {
+    return jsxRuntime.jsx(Component, Object.assign({}, baseline, {
+      ninetailed: {
+        isPersonalized,
+        audience
+      }
+    }));
+  }
+  if (loading) {
+    if (LoadingComponent) {
+      return jsxRuntime.jsx(LoadingComponent, {});
+    }
+    return jsxRuntime.jsx("div", Object.assign({
+      style: {
+        opacity: 0
+      }
+    }, {
+      children: jsxRuntime.jsx(Component, Object.assign({}, variant, {
+        ninetailed: {
+          isPersonalized,
+          audience
+        }
+      }))
+    }), "hide");
+  }
+  return jsxRuntime.jsx(TrackHasSeenComponent, Object.assign({
+    variant: variant,
+    audience: audience,
+    isPersonalized: isPersonalized
+  }, {
+    children: /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
+      key: `${audience.id}-${variant.id}`,
+      ninetailed: {
+        isPersonalized,
+        audience
+      }
+    }))
+  }));
+};
+
+const generateSelectors = id => {
+  return id.split('_').map((path, index, paths) => {
+    const dotPath = paths.slice(0, index).join('.');
+    const underScorePath = paths.slice(index).join('_');
+    return [dotPath, underScorePath].filter(path => path !== '').join('.');
+  });
+};
+const selectValueFromProfile = (profile, id) => {
+  const selectors = generateSelectors(id);
+  const matchingSelector = selectors.find(selector => get__default["default"](profile, selector));
+  if (!matchingSelector) {
+    return null;
+  }
+  return get__default["default"](profile, matchingSelector);
+};
+const MergeTag = ({
+  id
+}) => {
+  const {
+    loading,
+    profile
+  } = useProfile();
+  if (loading || !profile) {
+    return null;
+  }
+  const value = selectValueFromProfile(profile, id);
+  // DON'T CHANGE
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: value
+  });
+};
+
 exports.DefaultExperienceLoadingComponent = DefaultExperienceLoadingComponent;
 exports.ESRLoadingComponent = ESRLoadingComponent;
 exports.ESRProvider = ESRProvider;