@ninetailed/experience.js-plugin-preview 4.0.0-beta.9 → 4.1.0-beta.1

package/index.cjs

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var omit = require('lodash/omit');
 var experience_js = require('@ninetailed/experience.js');
-var experience_jsPluginAnalytics = require('@ninetailed/experience.js-plugin-analytics');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var uuid = require('uuid');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
 	var n = Object.create(null);
@@ -26,6 +28,8 @@ function _interopNamespace(e) {
 	return Object.freeze(n);
 }
 
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var check = function (it) {
@@ -2432,9 +2436,99 @@ var addToUnscopables$2 = function (key) {
   ArrayPrototype[UNSCOPABLES][key] = true;
 };
 
+var $$3 = _export;
+var $includes = arrayIncludes.includes;
 var fails$3 = fails$f;
+var addToUnscopables$1 = addToUnscopables$2;
+
+// FF99+ bug
+var BROKEN_ON_SPARSE = fails$3(function () {
+  return !Array(1).includes();
+});
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+$$3({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
+  includes: function includes(el /* , fromIndex = 0 */) {
+    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
+  }
+});
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables$1('includes');
+
+var isObject$1 = isObject$9;
+var classof$1 = classofRaw$2;
+var wellKnownSymbol$4 = wellKnownSymbol$g;
+
+var MATCH$1 = wellKnownSymbol$4('match');
+
+// `IsRegExp` abstract operation
+// https://tc39.es/ecma262/#sec-isregexp
+var isRegexp = function (it) {
+  var isRegExp;
+  return isObject$1(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof$1(it) == 'RegExp');
+};
+
+var isRegExp = isRegexp;
+
+var $TypeError$1 = TypeError;
+
+var notARegexp = function (it) {
+  if (isRegExp(it)) {
+    throw $TypeError$1("The method doesn't accept regular expressions");
+  } return it;
+};
+
+var classof = classof$4;
+
+var $String = String;
+
+var toString$1 = function (argument) {
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+var wellKnownSymbol$3 = wellKnownSymbol$g;
 
-var correctPrototypeGetter = !fails$3(function () {
+var MATCH = wellKnownSymbol$3('match');
+
+var correctIsRegexpLogic = function (METHOD_NAME) {
+  var regexp = /./;
+  try {
+    '/./'[METHOD_NAME](regexp);
+  } catch (error1) {
+    try {
+      regexp[MATCH] = false;
+      return '/./'[METHOD_NAME](regexp);
+    } catch (error2) { /* empty */ }
+  } return false;
+};
+
+var $$2 = _export;
+var uncurryThis = functionUncurryThis;
+var notARegExp = notARegexp;
+var requireObjectCoercible = requireObjectCoercible$3;
+var toString = toString$1;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+var stringIndexOf = uncurryThis(''.indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$2({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
+  includes: function includes(searchString /* , position = 0 */) {
+    return !!~stringIndexOf(
+      toString(requireObjectCoercible(this)),
+      toString(notARegExp(searchString)),
+      arguments.length > 1 ? arguments[1] : undefined
+    );
+  }
+});
+
+var fails$2 = fails$f;
+
+var correctPrototypeGetter = !fails$2(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -2463,14 +2557,14 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : f
   } return object instanceof $Object ? ObjectPrototype : null;
 };
 
-var fails$2 = fails$f;
+var fails$1 = fails$f;
 var isCallable$1 = isCallable$k;
-var isObject$1 = isObject$9;
+var isObject = isObject$9;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$1 = defineBuiltIn$5;
-var wellKnownSymbol$4 = wellKnownSymbol$g;
+var wellKnownSymbol$2 = wellKnownSymbol$g;
 
-var ITERATOR$2 = wellKnownSymbol$4('iterator');
+var ITERATOR$2 = wellKnownSymbol$2('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -2488,7 +2582,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$1(IteratorPrototype$2) || fails$2(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;
@@ -2525,7 +2619,7 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var $$3 = _export;
+var $$1 = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable = isCallable$k;
@@ -2535,7 +2629,7 @@ var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$3;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$4;
 var defineBuiltIn = defineBuiltIn$5;
-var wellKnownSymbol$3 = wellKnownSymbol$g;
+var wellKnownSymbol$1 = wellKnownSymbol$g;
 var Iterators$1 = iterators;
 var IteratorsCore = iteratorsCore;
 
@@ -2543,7 +2637,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$1 = wellKnownSymbol$3('iterator');
+var ITERATOR$1 = wellKnownSymbol$1('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -2610,7 +2704,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 $$1({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
   }
 
   // define iterator
@@ -2629,7 +2723,7 @@ var createIterResultObject$1 = function (value, done) {
 };
 
 var toIndexedObject = toIndexedObject$5;
-var addToUnscopables$1 = addToUnscopables$2;
+var addToUnscopables = addToUnscopables$2;
 var Iterators = iterators;
 var InternalStateModule = internalState;
 var defineProperty = objectDefineProperty.f;
@@ -2680,9 +2774,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 {
@@ -2738,10 +2832,10 @@ var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$4;
-var wellKnownSymbol$2 = wellKnownSymbol$g;
+var wellKnownSymbol = wellKnownSymbol$g;
 
-var ITERATOR = wellKnownSymbol$2('iterator');
-var TO_STRING_TAG = wellKnownSymbol$2('toStringTag');
+var ITERATOR = wellKnownSymbol('iterator');
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
@@ -2772,96 +2866,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-var $$2 = _export;
-var $includes = arrayIncludes.includes;
-var fails$1 = fails$f;
-var addToUnscopables = addToUnscopables$2;
-
-// FF99+ bug
-var BROKEN_ON_SPARSE = fails$1(function () {
-  return !Array(1).includes();
-});
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-$$2({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
-  includes: function includes(el /* , fromIndex = 0 */) {
-    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
-  }
-});
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');
-
-var isObject = isObject$9;
-var classof$1 = classofRaw$2;
-var wellKnownSymbol$1 = wellKnownSymbol$g;
-
-var MATCH$1 = wellKnownSymbol$1('match');
-
-// `IsRegExp` abstract operation
-// https://tc39.es/ecma262/#sec-isregexp
-var isRegexp = function (it) {
-  var isRegExp;
-  return isObject(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof$1(it) == 'RegExp');
-};
-
-var isRegExp = isRegexp;
-
-var $TypeError$1 = TypeError;
-
-var notARegexp = function (it) {
-  if (isRegExp(it)) {
-    throw $TypeError$1("The method doesn't accept regular expressions");
-  } return it;
-};
-
-var classof = classof$4;
-
-var $String = String;
-
-var toString$1 = function (argument) {
-  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
-};
-
-var wellKnownSymbol = wellKnownSymbol$g;
-
-var MATCH = wellKnownSymbol('match');
-
-var correctIsRegexpLogic = function (METHOD_NAME) {
-  var regexp = /./;
-  try {
-    '/./'[METHOD_NAME](regexp);
-  } catch (error1) {
-    try {
-      regexp[MATCH] = false;
-      return '/./'[METHOD_NAME](regexp);
-    } catch (error2) { /* empty */ }
-  } return false;
-};
-
-var $$1 = _export;
-var uncurryThis = functionUncurryThis;
-var notARegExp = notARegexp;
-var requireObjectCoercible = requireObjectCoercible$3;
-var toString = toString$1;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-var stringIndexOf = uncurryThis(''.indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$$1({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
-  includes: function includes(searchString /* , position = 0 */) {
-    return !!~stringIndexOf(
-      toString(requireObjectCoercible(this)),
-      toString(notARegExp(searchString)),
-      arguments.length > 1 ? arguments[1] : undefined
-    );
-  }
-});
-
 var aCallable = aCallable$8;
 var toObject = toObject$4;
 var IndexedObject = indexedObject;
@@ -3023,7 +3027,7 @@ class WidgetContainer {
 }
 
 const PreviewRenderPlugin = ctx => {
-  const PrevivewPluginWrapper = props => {
+  const PreviewRenderPlugin = props => {
     const [pluginApi, setPluginApi] = react.useState(ctx.pluginApi);
     const {
       children,
@@ -3041,37 +3045,41 @@ const PreviewRenderPlugin = ctx => {
       };
     }, [id]);
     react.useEffect(() => {
-      const overWrittenExperienceIds = Object.keys(pluginApi.experienceVariantIndexOverwrites);
-      const overWrittenExperience = experiences.find(experience => {
-        return overWrittenExperienceIds.includes(experience.id);
+      const experienceIds = Object.keys(pluginApi.experienceVariantIndexes);
+      const experience = experiences.find(experience => {
+        const hasActiveAudience = pluginApi.activeAudiences.some(activeAudienceId => {
+          var _a;
+          return ((_a = experience.audience) === null || _a === void 0 ? void 0 : _a.id) === activeAudienceId;
+        });
+        return hasActiveAudience && experienceIds.includes(experience.id);
       });
-      if (!overWrittenExperience) {
-        setComponentProps({});
+      if (!experience) {
+        setComponentProps(baseline);
         return;
       }
-      const baselineComponent = overWrittenExperience.components.find(component => component.baseline.id === baseline.id);
+      const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
       if (!baselineComponent) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
       const allVariants = [baseline, ...baselineComponent.variants];
-      const variantIndex = pluginApi.experienceVariantIndexOverwrites[overWrittenExperience.id];
+      const variantIndex = pluginApi.experienceVariantIndexes[experience.id];
       if (allVariants.length <= variantIndex) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
       const variant = allVariants[variantIndex];
       if (!variant) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
-      setComponentProps(Object.assign({}, variant));
-    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexOverwrites]);
+      setComponentProps(variant);
+    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexes, pluginApi.activeAudiences]);
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: children
     });
   };
-  return PrevivewPluginWrapper;
+  return PreviewRenderPlugin;
 };
 
 class PreviewRenderPluginContext {
@@ -3092,7 +3100,7 @@ class PreviewRenderPluginContext {
 }
 
 var _a;
-class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlugin {
+class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
   constructor(options) {
     super();
     this.options = options;
@@ -3105,6 +3113,7 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.container = null;
     this.bridge = null;
     this.renderPluginContext = new PreviewRenderPluginContext(this.pluginApi);
+    this.onChangeEmitter = new experience_js.OnChangeEmitter();
     this.initialize = () => __awaiter(this, void 0, void 0, function* () {
       var _b;
       if (typeof window !== 'undefined') {
@@ -3139,8 +3148,56 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
         this.onProfileChange(payload.profile);
       }
     };
+    this.getExperienceSelectionMiddleware = ({
+      baseline,
+      experiences
+    }) => {
+      return () => {
+        const experienceIds = Object.keys(this.pluginApi.experienceVariantIndexes);
+        const experience = experiences.find(experience => {
+          const hasActiveAudience = this.pluginApi.activeAudiences.some(activeAudienceId => {
+            var _b;
+            return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === activeAudienceId;
+          });
+          return hasActiveAudience && experienceIds.includes(experience.id);
+        });
+        if (!experience) {
+          return {
+            experience: null,
+            variant: null
+          };
+        }
+        const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
+        if (!baselineComponent) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        const allVariants = [baseline, ...baselineComponent.variants];
+        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
+        if (allVariants.length <= variantIndex) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        const variant = allVariants[variantIndex];
+        if (!variant) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        return {
+          experience,
+          variant
+        };
+      };
+    };
     this.onChange = () => {
       var _b;
+      console.debug('Ninetailed Preview Plugin onChange pluginApi:', this.pluginApi);
       Object.assign({}, window.ninetailed, {
         plugins: Object.assign(Object.assign({}, (_b = window.ninetailed) === null || _b === void 0 ? void 0 : _b.plugins), {
           preview: this.windowApi
@@ -3149,9 +3206,7 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
       this.bridge.updateProps({
         props: this.pluginApi
       });
-      if (this.renderPluginContext.setPluginApi) {
-        this.renderPluginContext.setPluginApi(this.pluginApi);
-      }
+      this.onChangeEmitter.invokeListeners();
     };
     this.onProfileChange = profile => {
       this.profile = profile;
@@ -3189,30 +3244,34 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.audienceOverwrites = Object.assign(Object.assign({}, this.audienceOverwrites), {
       [id]: true
     });
-    this.onChange();
-    // When a audience is activated, they should show their natural state
-    this.experiences.filter(experience => {
+    this.experienceVariantIndexOverwrites = Object.assign(Object.assign({}, this.experienceVariantIndexOverwrites), this.experiences.filter(experience => {
       var _b;
       return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === id;
-    }).forEach(experience => {
-      this.resetExperience(experience.id);
-    });
+    }).map(experience => experience.id).reduce((acc, curr) => {
+      return Object.assign(Object.assign({}, acc), {
+        [curr]: this.experienceVariantIndexes[curr] || 0
+      });
+    }, {}));
+    this.onChange();
   }
   deactivateAudience(id) {
     if (!this.isKnownAudience(id)) {
       console.log(`You cannot deactivate an unkown audience (id: ${id}). How did you get it in the first place?`);
       return;
     }
-    // When a audience is deactivated, the normal state will be that the experience goes into the control
-    this.experiences.filter(experience => {
+    // // When a audience is deactivated, the normal state will be that the experience goes into the control
+    // this.experiences
+    //   .filter((experience) => experience.audience?.id === id)
+    //   .forEach((experience) => {
+    //     this.setExperienceVariant({
+    //       experienceId: experience.id,
+    //       variantIndex: 0,
+    //     });
+    //   });
+    this.experienceVariantIndexOverwrites = omit__default["default"](this.experienceVariantIndexOverwrites, this.experiences.filter(experience => {
       var _b;
       return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === id;
-    }).forEach(experience => {
-      this.setExperienceVariant({
-        experienceId: experience.id,
-        variantIndex: 0
-      });
-    });
+    }).map(experience => experience.id));
     this.audienceOverwrites = Object.assign(Object.assign({}, this.audienceOverwrites), {
       [id]: false
     });

package/index.js

@@ -1,5 +1,5 @@
-import { selectActiveExperiments, selectEligibleExperiences, isExperienceMatch, selectDistribution, PROFILE_CHANGE } from '@ninetailed/experience.js';
-import { NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
+import omit from 'lodash/omit';
+import { NinetailedPlugin, OnChangeEmitter, selectActiveExperiments, selectEligibleExperiences, isExperienceMatch, selectDistribution, PROFILE_CHANGE } from '@ninetailed/experience.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { v4 } from 'uuid';
@@ -2410,9 +2410,99 @@ var addToUnscopables$2 = function (key) {
   ArrayPrototype[UNSCOPABLES][key] = true;
 };
 
+var $$3 = _export;
+var $includes = arrayIncludes.includes;
 var fails$3 = fails$f;
+var addToUnscopables$1 = addToUnscopables$2;
+
+// FF99+ bug
+var BROKEN_ON_SPARSE = fails$3(function () {
+  return !Array(1).includes();
+});
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+$$3({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
+  includes: function includes(el /* , fromIndex = 0 */) {
+    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
+  }
+});
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables$1('includes');
+
+var isObject$1 = isObject$9;
+var classof$1 = classofRaw$2;
+var wellKnownSymbol$4 = wellKnownSymbol$g;
+
+var MATCH$1 = wellKnownSymbol$4('match');
+
+// `IsRegExp` abstract operation
+// https://tc39.es/ecma262/#sec-isregexp
+var isRegexp = function (it) {
+  var isRegExp;
+  return isObject$1(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof$1(it) == 'RegExp');
+};
+
+var isRegExp = isRegexp;
 
-var correctPrototypeGetter = !fails$3(function () {
+var $TypeError$1 = TypeError;
+
+var notARegexp = function (it) {
+  if (isRegExp(it)) {
+    throw $TypeError$1("The method doesn't accept regular expressions");
+  } return it;
+};
+
+var classof = classof$4;
+
+var $String = String;
+
+var toString$1 = function (argument) {
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+var wellKnownSymbol$3 = wellKnownSymbol$g;
+
+var MATCH = wellKnownSymbol$3('match');
+
+var correctIsRegexpLogic = function (METHOD_NAME) {
+  var regexp = /./;
+  try {
+    '/./'[METHOD_NAME](regexp);
+  } catch (error1) {
+    try {
+      regexp[MATCH] = false;
+      return '/./'[METHOD_NAME](regexp);
+    } catch (error2) { /* empty */ }
+  } return false;
+};
+
+var $$2 = _export;
+var uncurryThis = functionUncurryThis;
+var notARegExp = notARegexp;
+var requireObjectCoercible = requireObjectCoercible$3;
+var toString = toString$1;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+var stringIndexOf = uncurryThis(''.indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$2({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
+  includes: function includes(searchString /* , position = 0 */) {
+    return !!~stringIndexOf(
+      toString(requireObjectCoercible(this)),
+      toString(notARegExp(searchString)),
+      arguments.length > 1 ? arguments[1] : undefined
+    );
+  }
+});
+
+var fails$2 = fails$f;
+
+var correctPrototypeGetter = !fails$2(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -2441,14 +2531,14 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : f
   } return object instanceof $Object ? ObjectPrototype : null;
 };
 
-var fails$2 = fails$f;
+var fails$1 = fails$f;
 var isCallable$1 = isCallable$k;
-var isObject$1 = isObject$9;
+var isObject = isObject$9;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$1 = defineBuiltIn$5;
-var wellKnownSymbol$4 = wellKnownSymbol$g;
+var wellKnownSymbol$2 = wellKnownSymbol$g;
 
-var ITERATOR$2 = wellKnownSymbol$4('iterator');
+var ITERATOR$2 = wellKnownSymbol$2('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -2466,7 +2556,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$1(IteratorPrototype$2) || fails$2(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;
@@ -2503,7 +2593,7 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var $$3 = _export;
+var $$1 = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable = isCallable$k;
@@ -2513,7 +2603,7 @@ var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$3;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$4;
 var defineBuiltIn = defineBuiltIn$5;
-var wellKnownSymbol$3 = wellKnownSymbol$g;
+var wellKnownSymbol$1 = wellKnownSymbol$g;
 var Iterators$1 = iterators;
 var IteratorsCore = iteratorsCore;
 
@@ -2521,7 +2611,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$1 = wellKnownSymbol$3('iterator');
+var ITERATOR$1 = wellKnownSymbol$1('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -2588,7 +2678,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 $$1({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
   }
 
   // define iterator
@@ -2607,7 +2697,7 @@ var createIterResultObject$1 = function (value, done) {
 };
 
 var toIndexedObject = toIndexedObject$5;
-var addToUnscopables$1 = addToUnscopables$2;
+var addToUnscopables = addToUnscopables$2;
 var Iterators = iterators;
 var InternalStateModule = internalState;
 var defineProperty = objectDefineProperty.f;
@@ -2658,9 +2748,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 {
@@ -2716,10 +2806,10 @@ var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$4;
-var wellKnownSymbol$2 = wellKnownSymbol$g;
+var wellKnownSymbol = wellKnownSymbol$g;
 
-var ITERATOR = wellKnownSymbol$2('iterator');
-var TO_STRING_TAG = wellKnownSymbol$2('toStringTag');
+var ITERATOR = wellKnownSymbol('iterator');
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
@@ -2750,96 +2840,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-var $$2 = _export;
-var $includes = arrayIncludes.includes;
-var fails$1 = fails$f;
-var addToUnscopables = addToUnscopables$2;
-
-// FF99+ bug
-var BROKEN_ON_SPARSE = fails$1(function () {
-  return !Array(1).includes();
-});
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-$$2({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
-  includes: function includes(el /* , fromIndex = 0 */) {
-    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
-  }
-});
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');
-
-var isObject = isObject$9;
-var classof$1 = classofRaw$2;
-var wellKnownSymbol$1 = wellKnownSymbol$g;
-
-var MATCH$1 = wellKnownSymbol$1('match');
-
-// `IsRegExp` abstract operation
-// https://tc39.es/ecma262/#sec-isregexp
-var isRegexp = function (it) {
-  var isRegExp;
-  return isObject(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof$1(it) == 'RegExp');
-};
-
-var isRegExp = isRegexp;
-
-var $TypeError$1 = TypeError;
-
-var notARegexp = function (it) {
-  if (isRegExp(it)) {
-    throw $TypeError$1("The method doesn't accept regular expressions");
-  } return it;
-};
-
-var classof = classof$4;
-
-var $String = String;
-
-var toString$1 = function (argument) {
-  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
-};
-
-var wellKnownSymbol = wellKnownSymbol$g;
-
-var MATCH = wellKnownSymbol('match');
-
-var correctIsRegexpLogic = function (METHOD_NAME) {
-  var regexp = /./;
-  try {
-    '/./'[METHOD_NAME](regexp);
-  } catch (error1) {
-    try {
-      regexp[MATCH] = false;
-      return '/./'[METHOD_NAME](regexp);
-    } catch (error2) { /* empty */ }
-  } return false;
-};
-
-var $$1 = _export;
-var uncurryThis = functionUncurryThis;
-var notARegExp = notARegexp;
-var requireObjectCoercible = requireObjectCoercible$3;
-var toString = toString$1;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-var stringIndexOf = uncurryThis(''.indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$$1({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
-  includes: function includes(searchString /* , position = 0 */) {
-    return !!~stringIndexOf(
-      toString(requireObjectCoercible(this)),
-      toString(notARegExp(searchString)),
-      arguments.length > 1 ? arguments[1] : undefined
-    );
-  }
-});
-
 var aCallable = aCallable$8;
 var toObject = toObject$4;
 var IndexedObject = indexedObject;
@@ -3001,7 +3001,7 @@ class WidgetContainer {
 }
 
 const PreviewRenderPlugin = ctx => {
-  const PrevivewPluginWrapper = props => {
+  const PreviewRenderPlugin = props => {
     const [pluginApi, setPluginApi] = useState(ctx.pluginApi);
     const {
       children,
@@ -3019,37 +3019,41 @@ const PreviewRenderPlugin = ctx => {
       };
     }, [id]);
     useEffect(() => {
-      const overWrittenExperienceIds = Object.keys(pluginApi.experienceVariantIndexOverwrites);
-      const overWrittenExperience = experiences.find(experience => {
-        return overWrittenExperienceIds.includes(experience.id);
+      const experienceIds = Object.keys(pluginApi.experienceVariantIndexes);
+      const experience = experiences.find(experience => {
+        const hasActiveAudience = pluginApi.activeAudiences.some(activeAudienceId => {
+          var _a;
+          return ((_a = experience.audience) === null || _a === void 0 ? void 0 : _a.id) === activeAudienceId;
+        });
+        return hasActiveAudience && experienceIds.includes(experience.id);
       });
-      if (!overWrittenExperience) {
-        setComponentProps({});
+      if (!experience) {
+        setComponentProps(baseline);
         return;
       }
-      const baselineComponent = overWrittenExperience.components.find(component => component.baseline.id === baseline.id);
+      const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
       if (!baselineComponent) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
       const allVariants = [baseline, ...baselineComponent.variants];
-      const variantIndex = pluginApi.experienceVariantIndexOverwrites[overWrittenExperience.id];
+      const variantIndex = pluginApi.experienceVariantIndexes[experience.id];
       if (allVariants.length <= variantIndex) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
       const variant = allVariants[variantIndex];
       if (!variant) {
-        setComponentProps({});
+        setComponentProps(baseline);
         return;
       }
-      setComponentProps(Object.assign({}, variant));
-    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexOverwrites]);
+      setComponentProps(variant);
+    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexes, pluginApi.activeAudiences]);
     return jsx(Fragment, {
       children: children
     });
   };
-  return PrevivewPluginWrapper;
+  return PreviewRenderPlugin;
 };
 
 class PreviewRenderPluginContext {
@@ -3083,6 +3087,7 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.container = null;
     this.bridge = null;
     this.renderPluginContext = new PreviewRenderPluginContext(this.pluginApi);
+    this.onChangeEmitter = new OnChangeEmitter();
     this.initialize = () => __awaiter(this, void 0, void 0, function* () {
       var _b;
       if (typeof window !== 'undefined') {
@@ -3117,8 +3122,56 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
         this.onProfileChange(payload.profile);
       }
     };
+    this.getExperienceSelectionMiddleware = ({
+      baseline,
+      experiences
+    }) => {
+      return () => {
+        const experienceIds = Object.keys(this.pluginApi.experienceVariantIndexes);
+        const experience = experiences.find(experience => {
+          const hasActiveAudience = this.pluginApi.activeAudiences.some(activeAudienceId => {
+            var _b;
+            return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === activeAudienceId;
+          });
+          return hasActiveAudience && experienceIds.includes(experience.id);
+        });
+        if (!experience) {
+          return {
+            experience: null,
+            variant: null
+          };
+        }
+        const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
+        if (!baselineComponent) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        const allVariants = [baseline, ...baselineComponent.variants];
+        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
+        if (allVariants.length <= variantIndex) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        const variant = allVariants[variantIndex];
+        if (!variant) {
+          return {
+            experience,
+            variant: null
+          };
+        }
+        return {
+          experience,
+          variant
+        };
+      };
+    };
     this.onChange = () => {
       var _b;
+      console.debug('Ninetailed Preview Plugin onChange pluginApi:', this.pluginApi);
       Object.assign({}, window.ninetailed, {
         plugins: Object.assign(Object.assign({}, (_b = window.ninetailed) === null || _b === void 0 ? void 0 : _b.plugins), {
           preview: this.windowApi
@@ -3127,9 +3180,7 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       this.bridge.updateProps({
         props: this.pluginApi
       });
-      if (this.renderPluginContext.setPluginApi) {
-        this.renderPluginContext.setPluginApi(this.pluginApi);
-      }
+      this.onChangeEmitter.invokeListeners();
     };
     this.onProfileChange = profile => {
       this.profile = profile;
@@ -3167,30 +3218,34 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.audienceOverwrites = Object.assign(Object.assign({}, this.audienceOverwrites), {
       [id]: true
     });
-    this.onChange();
-    // When a audience is activated, they should show their natural state
-    this.experiences.filter(experience => {
+    this.experienceVariantIndexOverwrites = Object.assign(Object.assign({}, this.experienceVariantIndexOverwrites), this.experiences.filter(experience => {
       var _b;
       return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === id;
-    }).forEach(experience => {
-      this.resetExperience(experience.id);
-    });
+    }).map(experience => experience.id).reduce((acc, curr) => {
+      return Object.assign(Object.assign({}, acc), {
+        [curr]: this.experienceVariantIndexes[curr] || 0
+      });
+    }, {}));
+    this.onChange();
   }
   deactivateAudience(id) {
     if (!this.isKnownAudience(id)) {
       console.log(`You cannot deactivate an unkown audience (id: ${id}). How did you get it in the first place?`);
       return;
     }
-    // When a audience is deactivated, the normal state will be that the experience goes into the control
-    this.experiences.filter(experience => {
+    // // When a audience is deactivated, the normal state will be that the experience goes into the control
+    // this.experiences
+    //   .filter((experience) => experience.audience?.id === id)
+    //   .forEach((experience) => {
+    //     this.setExperienceVariant({
+    //       experienceId: experience.id,
+    //       variantIndex: 0,
+    //     });
+    //   });
+    this.experienceVariantIndexOverwrites = omit(this.experienceVariantIndexOverwrites, this.experiences.filter(experience => {
       var _b;
       return ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id) === id;
-    }).forEach(experience => {
-      this.setExperienceVariant({
-        experienceId: experience.id,
-        variantIndex: 0
-      });
-    });
+    }).map(experience => experience.id));
     this.audienceOverwrites = Object.assign(Object.assign({}, this.audienceOverwrites), {
       [id]: false
     });

package/lib/plugin/NinetailedPreviewPlugin.d.ts

@@ -1,5 +1,5 @@
-import { ExperienceConfiguration, PROFILE_CHANGE } from '@ninetailed/experience.js';
-import { NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
+import { Reference } from '@ninetailed/experience.js-shared';
+import { ExperienceConfiguration, PROFILE_CHANGE, NinetailedPlugin, HasExperienceSelectionMiddleware, ExperienceSelectionMiddleware } from '@ninetailed/experience.js';
 import { RenderPluginWrapperComponent } from '@ninetailed/experience.js-react';
 export declare const NINETAILED_PREVIEW_EVENTS: {
     previewAudiences: string;
@@ -15,7 +15,7 @@ type NinetailedPreviewPluginOptions = {
         };
     };
 };
-export declare class NinetailedPreviewPlugin extends NinetailedPlugin {
+export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements HasExperienceSelectionMiddleware<Reference> {
     private readonly options;
     name: string;
     private isOpen;
@@ -27,6 +27,7 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin {
     private bridge;
     private renderPluginContext;
     private renderPluginComponent;
+    private onChangeEmitter;
     constructor(options: NinetailedPreviewPluginOptions);
     initialize: () => Promise<void>;
     getRenderWrapper: () => RenderPluginWrapperComponent;
@@ -46,6 +47,7 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin {
     }): void;
     resetExperience(experienceId: string): void;
     reset(): void;
+    getExperienceSelectionMiddleware: ExperienceSelectionMiddleware<Reference>;
     private get pluginApi();
     private get windowApi();
     private isKnownAudience;

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@ninetailed/experience.js-plugin-preview",
-  "version": "4.0.0-beta.9",
+  "version": "4.1.0-beta.1",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./index.d.ts",
   "dependencies": {
-    "@ninetailed/experience.js-shared": "4.0.0-beta.9",
-    "@ninetailed/experience.js": "4.0.0-beta.9",
-    "@ninetailed/experience.js-plugin-analytics": "4.0.0-beta.9",
-    "@ninetailed/experience.js-utils": "4.0.0-beta.8",
-    "@ninetailed/experience.js-react": "4.0.0-beta.9",
-    "@ninetailed/experience.js-preview-bridge": "4.0.0-beta.9",
+    "lodash": "4.17.21",
+    "@ninetailed/experience.js-shared": "4.1.0-beta.1",
+    "@ninetailed/experience.js": "4.1.0-beta.1",
+    "@ninetailed/experience.js-utils": "4.0.0-beta.14",
+    "@ninetailed/experience.js-react": "4.1.0-beta.1",
+    "@ninetailed/experience.js-preview-bridge": "4.1.0-beta.1",
     "react": "18.2.0",
-    "uuid": "9.0.0"
+    "uuid": "9.0.0",
+    "ts-toolbelt": "9.6.0"
   },
   "peerDependencies": {}
 }