@ninetailed/experience.js-react 6.2.0 → 6.3.0-beta.0

package/index.cjs

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var experience_js = require('@ninetailed/experience.js');
-var reactIs = require('react-is');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
 var radash = require('radash');
 var reactIntersectionObserver = require('react-intersection-observer');
+var reactIs = require('react-is');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1099,6 +1099,57 @@ $$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
 
 const NinetailedContext = /*#__PURE__*/React.createContext(undefined);
 
+const NinetailedProvider = props => {
+  const ninetailed = React.useMemo(() => {
+    if ('ninetailed' in props) {
+      return props.ninetailed;
+    }
+    const {
+      clientId,
+      environment,
+      preview,
+      url,
+      profile,
+      locale,
+      requestTimeout,
+      plugins = [],
+      onLog,
+      onError,
+      componentViewTrackingThreshold
+    } = props;
+    return new experience_js.Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      profile,
+      locale,
+      requestTimeout,
+      onLog,
+      onError,
+      componentViewTrackingThreshold
+    });
+  }, []);
+  const {
+    children
+  } = props;
+  return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
+    value: ninetailed
+  }, {
+    children: children
+  }));
+};
+
+const useNinetailed = () => {
+  const ninetailed = React.useContext(NinetailedContext);
+  if (ninetailed === undefined) {
+    throw new Error('The component using the the context must be a descendant of the NinetailedProvider');
+  }
+  return ninetailed;
+};
+
 var objectDefineProperties = {};
 
 var DESCRIPTORS$1 = descriptors;
@@ -1626,6 +1677,49 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+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 (radash.isEqual(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);
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1651,18 +1745,126 @@ function __rest(s, e) {
                 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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
 }
 
+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 => radash.get(profile, selector));
+  if (!matchingSelector) {
+    return null;
+  }
+  return radash.get(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 aCallable = aCallable$2;
 var toObject = toObject$4;
 var IndexedObject = indexedObject;
@@ -1741,67 +1943,6 @@ $({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-const useNinetailed = () => {
-  const ninetailed = React.useContext(NinetailedContext);
-  if (ninetailed === undefined) {
-    throw new Error('The component using the the context must be a descendant of the NinetailedProvider');
-  }
-  return ninetailed;
-};
-
-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 (radash.isEqual(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) {
-    throw new Error('The component using the the context must be a descendant of the ExperimentsProvider');
-  }
-  return context;
-};
-
-const useExperiments = () => {
-  const context = useExperimentsContext();
-  return {
-    experiments: context.experiments
-  };
-};
-
 const useExperienceSelectionMiddleware = ({
   experiences,
   baseline,
@@ -1836,9 +1977,6 @@ const useExperience = ({
   experiences
 }) => {
   const profileState = useProfile();
-  const {
-    experiments
-  } = useExperiments();
   const hasVariants = experiences.map(experience => experience_js.selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
   const {
     status,
@@ -1901,10 +2039,8 @@ const useExperience = ({
     // @ts-ignore
     return overrideResult(emptyReturn);
   }
-  const activeExperiments = experience_js.selectActiveExperiments(experiments, profile);
   const experience = experience_js.selectExperience({
     experiences,
-    activeExperiments,
     profile
   });
   if (!experience) {
@@ -1935,11 +2071,6 @@ const useExperience = ({
   }));
 };
 
-const useJoinExperiment = () => {
-  const context = useExperimentsContext();
-  return context.joinExperiment;
-};
-
 const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   const {
     logger
@@ -2035,26 +2166,15 @@ const Experience = _a => {
     variant,
     variantIndex,
     audience,
-    isPersonalized,
-    profile
+    isPersonalized
   } = useExperience({
     baseline,
     experiences
   });
-  const joinExperiment = useJoinExperiment();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const isComponentForwardRef = reactIs.isForwardRef(jsxRuntime.jsx(Component, {}));
   const componentRef = React.useRef(null);
-  React.useEffect(() => {
-    if (status === 'success' && experience && profile) {
-      joinExperiment({
-        experiences,
-        experiment: experience,
-        profile
-      });
-    }
-  }, [status, experience, profile]);
   React.useEffect(() => {
     const componentElement = componentRef.current;
     if (componentElement) {
@@ -2199,266 +2319,15 @@ const ESRLoadingComponent = _a => {
   }));
 };
 
-const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
-
-const debounce = (fn, wait) => {
-  let debouncedArgs = [];
-  const debouncedFn = radash.debounce({
-    delay: wait !== null && wait !== void 0 ? wait : 0
-  }, () => {
-    fn.call(undefined, debouncedArgs);
-    debouncedArgs = [];
-  });
-  return (...args) => {
-    debouncedArgs.push(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 = props => {
-  const ninetailed = React.useMemo(() => {
-    if ('ninetailed' in props) {
-      return props.ninetailed;
-    }
-    const {
-      clientId,
-      environment,
-      preview,
-      url,
-      profile,
-      locale,
-      requestTimeout,
-      plugins = [],
-      onLog,
-      onError,
-      componentViewTrackingThreshold
-    } = props;
-    return new experience_js.Ninetailed({
-      clientId,
-      environment,
-      preview
-    }, {
-      url,
-      plugins,
-      profile,
-      locale,
-      requestTimeout,
-      onLog,
-      onError,
-      componentViewTrackingThreshold
-    });
-  }, []);
-  const {
-    experiments = [],
-    maximumActiveExperiments,
-    children
-  } = props;
-  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 => radash.get(profile, selector));
-  if (!matchingSelector) {
-    return null;
-  }
-  return radash.get(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;
 exports.Experience = Experience;
-exports.ExperimentsProvider = ExperimentsProvider;
 exports.MergeTag = MergeTag;
 exports.NinetailedProvider = NinetailedProvider;
 exports.Personalize = Personalize;
 exports.TrackHasSeenComponent = TrackHasSeenComponent;
 exports.useExperience = useExperience;
-exports.useExperiments = useExperiments;
-exports.useJoinExperiment = useJoinExperiment;
 exports.useNinetailed = useNinetailed;
 exports.usePersonalize = usePersonalize;
 exports.useProfile = useProfile;

package/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useRef, useEffect, useMemo, forwardRef, createElement as createElement$1, useCallback } from 'react';
-import { makeExperienceSelectMiddleware, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant, Ninetailed, selectVariant } from '@ninetailed/experience.js';
-import { isForwardRef } from 'react-is';
+import React, { createContext, useMemo, useContext, useState, useRef, useEffect, createElement as createElement$1, forwardRef } from 'react';
+import { Ninetailed, selectVariant, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
 import { logger, isBrowser } from '@ninetailed/experience.js-shared';
-import { isEqual, debounce as debounce$1, get as get$1 } from 'radash';
+import { isEqual, get as get$1 } from 'radash';
 import { useInView } from 'react-intersection-observer';
+import { isForwardRef } from 'react-is';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1091,6 +1091,57 @@ $$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
 
 const NinetailedContext = /*#__PURE__*/createContext(undefined);
 
+const NinetailedProvider = props => {
+  const ninetailed = useMemo(() => {
+    if ('ninetailed' in props) {
+      return props.ninetailed;
+    }
+    const {
+      clientId,
+      environment,
+      preview,
+      url,
+      profile,
+      locale,
+      requestTimeout,
+      plugins = [],
+      onLog,
+      onError,
+      componentViewTrackingThreshold
+    } = props;
+    return new Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      profile,
+      locale,
+      requestTimeout,
+      onLog,
+      onError,
+      componentViewTrackingThreshold
+    });
+  }, []);
+  const {
+    children
+  } = props;
+  return jsx(NinetailedContext.Provider, Object.assign({
+    value: ninetailed
+  }, {
+    children: children
+  }));
+};
+
+const useNinetailed = () => {
+  const ninetailed = useContext(NinetailedContext);
+  if (ninetailed === undefined) {
+    throw new Error('The component using the the context must be a descendant of the NinetailedProvider');
+  }
+  return ninetailed;
+};
+
 var objectDefineProperties = {};
 
 var DESCRIPTORS$1 = descriptors;
@@ -1618,6 +1669,49 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+const useProfile = () => {
+  const ninetailed = useNinetailed();
+  const [profileState, setProfileState] = useState(ninetailed.profileState);
+  const profileStateRef = 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.
+   */
+  useEffect(() => {
+    ninetailed.onProfileChange(profileState => {
+      if (isEqual(profileState, profileStateRef.current)) {
+        logger.debug('Profile State Did Not Change', profileState);
+        return;
+      } else {
+        setProfileState(profileState);
+        profileStateRef.current = profileState;
+        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 selectVariant(baseline, variants, profile, options);
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1643,18 +1737,126 @@ function __rest(s, e) {
                 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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
 }
 
+const TrackHasSeenComponent = ({
+  children,
+  variant,
+  audience,
+  isPersonalized
+}) => {
+  const ninetailed = useNinetailed();
+  const {
+    ref,
+    inView
+  } = useInView({
+    triggerOnce: true
+  });
+  useEffect(() => {
+    if (isBrowser() && inView) {
+      ninetailed.trackHasSeenComponent({
+        variant,
+        audience,
+        isPersonalized
+      });
+    }
+  }, [inView]);
+  return jsxs(Fragment, {
+    children: [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 jsx(Component, Object.assign({}, baseline, {
+      ninetailed: {
+        isPersonalized,
+        audience
+      }
+    }));
+  }
+  if (loading) {
+    if (LoadingComponent) {
+      return jsx(LoadingComponent, {});
+    }
+    return jsx("div", Object.assign({
+      style: {
+        opacity: 0
+      }
+    }, {
+      children: jsx(Component, Object.assign({}, variant, {
+        ninetailed: {
+          isPersonalized,
+          audience
+        }
+      }))
+    }), "hide");
+  }
+  return jsx(TrackHasSeenComponent, Object.assign({
+    variant: variant,
+    audience: audience,
+    isPersonalized: isPersonalized
+  }, {
+    children: /*#__PURE__*/createElement$1(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$1(profile, selector));
+  if (!matchingSelector) {
+    return null;
+  }
+  return get$1(profile, matchingSelector);
+};
+const MergeTag = ({
+  id
+}) => {
+  const {
+    loading,
+    profile
+  } = useProfile();
+  if (loading || !profile) {
+    return null;
+  }
+  const value = selectValueFromProfile(profile, id);
+  // DON'T CHANGE
+  return jsx(Fragment, {
+    children: value
+  });
+};
+
 var aCallable = aCallable$2;
 var toObject = toObject$4;
 var IndexedObject = indexedObject;
@@ -1733,67 +1935,6 @@ $({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-const useNinetailed = () => {
-  const ninetailed = useContext(NinetailedContext);
-  if (ninetailed === undefined) {
-    throw new Error('The component using the the context must be a descendant of the NinetailedProvider');
-  }
-  return ninetailed;
-};
-
-const useProfile = () => {
-  const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = useState(ninetailed.profileState);
-  const profileStateRef = 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.
-   */
-  useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (isEqual(profileState, profileStateRef.current)) {
-        logger.debug('Profile State Did Not Change', profileState);
-        return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        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__*/createContext(undefined);
-
-const useExperimentsContext = () => {
-  const context = useContext(ExperimentsContext);
-  if (context === undefined) {
-    throw new Error('The component using the the context must be a descendant of the ExperimentsProvider');
-  }
-  return context;
-};
-
-const useExperiments = () => {
-  const context = useExperimentsContext();
-  return {
-    experiments: context.experiments
-  };
-};
-
 const useExperienceSelectionMiddleware = ({
   experiences,
   baseline,
@@ -1828,9 +1969,6 @@ const useExperience = ({
   experiences
 }) => {
   const profileState = useProfile();
-  const {
-    experiments
-  } = useExperiments();
   const hasVariants = experiences.map(experience => selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
   const {
     status,
@@ -1893,10 +2031,8 @@ const useExperience = ({
     // @ts-ignore
     return overrideResult(emptyReturn);
   }
-  const activeExperiments = selectActiveExperiments(experiments, profile);
   const experience = selectExperience({
     experiences,
-    activeExperiments,
     profile
   });
   if (!experience) {
@@ -1927,11 +2063,6 @@ const useExperience = ({
   }));
 };
 
-const useJoinExperiment = () => {
-  const context = useExperimentsContext();
-  return context.joinExperiment;
-};
-
 const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   const {
     logger
@@ -2027,26 +2158,15 @@ const Experience = _a => {
     variant,
     variantIndex,
     audience,
-    isPersonalized,
-    profile
+    isPersonalized
   } = useExperience({
     baseline,
     experiences
   });
-  const joinExperiment = useJoinExperiment();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const isComponentForwardRef = isForwardRef(jsx(Component, {}));
   const componentRef = useRef(null);
-  useEffect(() => {
-    if (status === 'success' && experience && profile) {
-      joinExperiment({
-        experiences,
-        experiment: experience,
-        profile
-      });
-    }
-  }, [status, experience, profile]);
   useEffect(() => {
     const componentElement = componentRef.current;
     if (componentElement) {
@@ -2191,252 +2311,4 @@ const ESRLoadingComponent = _a => {
   }));
 };
 
-const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
-
-const debounce = (fn, wait) => {
-  let debouncedArgs = [];
-  const debouncedFn = debounce$1({
-    delay: wait !== null && wait !== void 0 ? wait : 0
-  }, () => {
-    fn.call(undefined, debouncedArgs);
-    debouncedArgs = [];
-  });
-  return (...args) => {
-    debouncedArgs.push(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 useCallback(data => __awaiter(void 0, void 0, void 0, function* () {
-    const {
-      experiment,
-      profile
-    } = data;
-    const isExperiment = experiment.type === 'nt_experiment';
-    if (!isExperiment) {
-      logger.warn(`The experience ${experiment.id}, which you tried to join, is not an experiment.`);
-      return;
-    }
-    const activeExperiments = selectActiveExperiments(experiments, profile);
-    if (activeExperiments.length >= _maximumActiveExperiments) {
-      logger.warn(`The maximum number of active experiments (${_maximumActiveExperiments}) has been reached.`);
-      return;
-    }
-    if (activeExperiments.some(activeExperiment => activeExperiment.id === experiment.id)) {
-      logger.debug(`The user is already part of experiment ${experiment.id}. Won't join again.`);
-      return;
-    }
-    joinExperimentIdentify({
-      [`${EXPERIENCE_TRAIT_PREFIX}${experiment.id}`]: true
-    });
-    logger.debug(`Sent event to join experiment ${experiment.id}.`);
-  }), []);
-};
-
-const ExperimentsProvider = ({
-  experiments,
-  maximumActiveExperiments: _maximumActiveExperiments = 1,
-  children
-}) => {
-  const joinExperiment = useProvideJoinExperiment({
-    experiments,
-    maximumActiveExperiments: _maximumActiveExperiments
-  });
-  return jsx(ExperimentsContext.Provider, Object.assign({
-    value: {
-      experiments,
-      joinExperiment
-    }
-  }, {
-    children: children
-  }));
-};
-
-const NinetailedProvider = props => {
-  const ninetailed = useMemo(() => {
-    if ('ninetailed' in props) {
-      return props.ninetailed;
-    }
-    const {
-      clientId,
-      environment,
-      preview,
-      url,
-      profile,
-      locale,
-      requestTimeout,
-      plugins = [],
-      onLog,
-      onError,
-      componentViewTrackingThreshold
-    } = props;
-    return new Ninetailed({
-      clientId,
-      environment,
-      preview
-    }, {
-      url,
-      plugins,
-      profile,
-      locale,
-      requestTimeout,
-      onLog,
-      onError,
-      componentViewTrackingThreshold
-    });
-  }, []);
-  const {
-    experiments = [],
-    maximumActiveExperiments,
-    children
-  } = props;
-  return jsx(NinetailedContext.Provider, Object.assign({
-    value: ninetailed
-  }, {
-    children: jsx(ExperimentsProvider, Object.assign({
-      experiments: experiments,
-      maximumActiveExperiments: maximumActiveExperiments
-    }, {
-      children: children
-    }))
-  }));
-};
-
-const usePersonalize = (baseline, variants, options = {
-  holdout: -1
-}) => {
-  const profile = useProfile();
-  return selectVariant(baseline, variants, profile, options);
-};
-
-const TrackHasSeenComponent = ({
-  children,
-  variant,
-  audience,
-  isPersonalized
-}) => {
-  const ninetailed = useNinetailed();
-  const {
-    ref,
-    inView
-  } = useInView({
-    triggerOnce: true
-  });
-  useEffect(() => {
-    if (isBrowser() && inView) {
-      ninetailed.trackHasSeenComponent({
-        variant,
-        audience,
-        isPersonalized
-      });
-    }
-  }, [inView]);
-  return jsxs(Fragment, {
-    children: [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 jsx(Component, Object.assign({}, baseline, {
-      ninetailed: {
-        isPersonalized,
-        audience
-      }
-    }));
-  }
-  if (loading) {
-    if (LoadingComponent) {
-      return jsx(LoadingComponent, {});
-    }
-    return jsx("div", Object.assign({
-      style: {
-        opacity: 0
-      }
-    }, {
-      children: jsx(Component, Object.assign({}, variant, {
-        ninetailed: {
-          isPersonalized,
-          audience
-        }
-      }))
-    }), "hide");
-  }
-  return jsx(TrackHasSeenComponent, Object.assign({
-    variant: variant,
-    audience: audience,
-    isPersonalized: isPersonalized
-  }, {
-    children: /*#__PURE__*/createElement$1(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$1(profile, selector));
-  if (!matchingSelector) {
-    return null;
-  }
-  return get$1(profile, matchingSelector);
-};
-const MergeTag = ({
-  id
-}) => {
-  const {
-    loading,
-    profile
-  } = useProfile();
-  if (loading || !profile) {
-    return null;
-  }
-  const value = selectValueFromProfile(profile, id);
-  // DON'T CHANGE
-  return jsx(Fragment, {
-    children: value
-  });
-};
-
-export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, ExperimentsProvider, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useExperience, useExperiments, useJoinExperiment, useNinetailed, usePersonalize, useProfile };
+export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useExperience, useNinetailed, usePersonalize, useProfile };

package/lib/Experience/index.d.ts

@@ -2,6 +2,3 @@ export { Experience, DefaultExperienceLoadingComponent } from './Experience';
 export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';
 export { ESRProvider, ESRLoadingComponent } from './ESRLoadingComponent';
 export { useExperience } from './useExperience';
-export { ExperimentsProvider } from './ExperimentsProvider';
-export { useExperiments } from './useExperiments';
-export { useJoinExperiment } from './useJoinExperiment';

package/lib/NinetailedProvider.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
-import { Ninetailed, NinetailedPlugin, ExperienceConfiguration } from '@ninetailed/experience.js';
+import { Ninetailed, NinetailedPlugin } from '@ninetailed/experience.js';
 import { Profile, Locale, OnErrorHandler, OnLogHandler } from '@ninetailed/experience.js-shared';
-type ExperimentProviderProps = {
-    experiments?: ExperienceConfiguration<any>[];
-    maximumActiveExperiments?: number;
-};
 export type NinetailedProviderInstantiationProps = {
     clientId: string;
     environment?: string;
@@ -17,9 +13,8 @@ export type NinetailedProviderInstantiationProps = {
     onLog?: OnLogHandler;
     onError?: OnErrorHandler;
     componentViewTrackingThreshold?: number;
-} & ExperimentProviderProps;
-export type NinetailedProviderProps = NinetailedProviderInstantiationProps | ({
+};
+export type NinetailedProviderProps = NinetailedProviderInstantiationProps | {
     ninetailed: Ninetailed;
-} & ExperimentProviderProps);
+};
 export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
-export {};

package/lib/index.d.ts

@@ -9,5 +9,5 @@ export { Personalize } from './Personalize';
 export type { PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';
 export { TrackHasSeenComponent } from './TrackHasSeenComponent';
-export { ExperimentsProvider, Experience, ESRProvider, ESRLoadingComponent, DefaultExperienceLoadingComponent, useExperience, useExperiments, useJoinExperiment, } from './Experience';
+export { Experience, ESRProvider, ESRLoadingComponent, DefaultExperienceLoadingComponent, useExperience, } from './Experience';
 export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "6.2.0",
+  "version": "6.3.0-beta.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
-    "@ninetailed/experience.js": "6.2.0",
+    "@ninetailed/experience.js": "6.3.0-beta.0",
     "react-is": "18.2.0",
-    "@ninetailed/experience.js-shared": "6.2.0",
+    "@ninetailed/experience.js-shared": "6.3.0-beta.0",
     "radash": "10.9.0",
     "react-intersection-observer": "8.34.0"
   },

package/lib/Experience/ExperimentsContext.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ExperienceConfiguration, Reference } from '@ninetailed/experience.js';
-import { JoinExperiment } from './useProvideJoinExperiment';
-type ExperimentsContextValue<Variant extends Reference> = {
-    experiments: ExperienceConfiguration<Variant>[];
-    joinExperiment: JoinExperiment;
-};
-export declare const ExperimentsContext: import("react").Context<ExperimentsContextValue<any> | undefined>;
-export {};

package/lib/Experience/ExperimentsProvider.d.ts

@@ -1,8 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { ExperienceConfiguration, Reference } from '@ninetailed/experience.js';
-type ExperimentsProviderProps<Variant extends Reference> = React.PropsWithChildren<{
-    experiments: ExperienceConfiguration<Variant>[];
-    maximumActiveExperiments?: number;
-}>;
-export declare const ExperimentsProvider: <Variant extends Reference>({ experiments, maximumActiveExperiments, children, }: React.PropsWithChildren<ExperimentsProviderProps<Variant>>) => JSX.Element;
-export {};

package/lib/Experience/useExperiementsContext.d.ts

@@ -1,4 +0,0 @@
-export declare const useExperimentsContext: () => {
-    experiments: import("@ninetailed/experience.js-shared").ExperienceConfiguration<any>[];
-    joinExperiment: import("./useProvideJoinExperiment").JoinExperiment;
-};

package/lib/Experience/useExperiments.d.ts

@@ -1,3 +0,0 @@
-export declare const useExperiments: () => {
-    experiments: import("@ninetailed/experience.js-shared").ExperienceConfiguration<any>[];
-};

package/lib/Experience/useJoinExperiment.d.ts

@@ -1 +0,0 @@
-export declare const useJoinExperiment: () => import("./useProvideJoinExperiment").JoinExperiment;

package/lib/Experience/useProvideJoinExperiment.d.ts

@@ -1,13 +0,0 @@
-import { Profile, ExperienceConfiguration, Reference, VariantRef } from '@ninetailed/experience.js';
-export type JoinExperimentArgs = {
-    experiences: ExperienceConfiguration[];
-    experiment: ExperienceConfiguration<Reference | VariantRef>;
-    profile: Profile;
-};
-export type JoinExperiment = (args: JoinExperimentArgs) => Promise<void>;
-type UseJoinExperimentArgs = {
-    experiments: ExperienceConfiguration[];
-    maximumActiveExperiments?: number;
-};
-export declare const useProvideJoinExperiment: ({ experiments, maximumActiveExperiments, }: UseJoinExperimentArgs) => (data: JoinExperimentArgs) => Promise<void>;
-export {};