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

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/{index.cjs → index.cjs.js}

@@ -34,7 +34,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     } = props;
     return new experience_js.Ninetailed({
       clientId,
@@ -50,7 +51,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     });
   }, []);
   const {
@@ -252,80 +254,18 @@ const MergeTag = ({
   }) : null;
 };
 
-const useExperienceSelectionMiddleware = ({
-  experiences,
-  baseline,
-  profile
-}) => {
-  const {
-    plugins
-  } = useNinetailed();
-  const [_, setCurrentTime] = React.useState(Date.now());
-  const {
-    addListeners,
-    removeListeners,
-    middleware
-  } = React.useMemo(() => experience_js.makeExperienceSelectMiddleware({
-    plugins,
-    experiences,
-    baseline,
-    profile,
-    onChange: () => setCurrentTime(Date.now())
-  }), [plugins, experiences, baseline, profile]);
-  React.useEffect(() => {
-    addListeners();
-    return () => {
-      removeListeners();
-    };
-  }, [addListeners, removeListeners]);
-  return middleware;
-};
-
 const useExperience = ({
   baseline,
   experiences
 }) => {
-  const profileState = useProfile();
+  const ninetailed = useNinetailed();
   const hasVariants = experiences.map(experience => experience_js.selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
-  const {
-    status,
-    profile
-  } = profileState;
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const overrideResult = _a => {
-    var {
-        experience: originalExperience,
-        variant: originalVariant,
-        variantIndex: originalVariantIndex
-      } = _a,
-      other = __rest(_a, ["experience", "variant", "variantIndex"]);
-    const {
-      experience,
-      variant,
-      variantIndex
-    } = experienceSelectionMiddleware({
-      experience: originalExperience,
-      variant: originalVariant,
-      variantIndex: originalVariantIndex
-    });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return Object.assign(Object.assign({}, other), {
-      audience: (experience === null || experience === void 0 ? void 0 : experience.audience) ? experience.audience : null,
-      experience,
-      variant,
-      variantIndex
-    });
-  };
-  const baseReturn = Object.assign(Object.assign({}, profileState), {
+  const [experience, setExperience] = React.useState({
     hasVariants,
-    baseline
-  });
-  const emptyReturn = Object.assign(Object.assign({}, baseReturn), {
+    baseline,
+    error: null,
+    loading: true,
+    status: 'loading',
     experience: null,
     variant: baseline,
     variantIndex: 0,
@@ -333,54 +273,20 @@ const useExperience = ({
     isPersonalized: false,
     profile: null
   });
-  if (status === 'loading') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (status === 'error') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (!profile) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  const experience = experience_js.selectExperience({
-    experiences,
-    profile
-  });
-  if (!experience) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
-      profile
-    }));
-  }
-  const {
-    variant,
-    index
-  } = experience_js.selectExperienceVariant({
-    baseline,
-    experience,
-    profile
-  });
-  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
-    status: 'success',
-    loading: false,
-    error: null,
-    experience,
-    variant,
-    variantIndex: index,
-    audience: experience.audience ? experience.audience : null,
-    profile,
-    isPersonalized: true
-  }));
+  React.useEffect(() => {
+    return ninetailed.onSelectVariant({
+      baseline,
+      experiences
+    }, state => {
+      setExperience(state);
+    });
+  }, [JSON.stringify(baseline), JSON.stringify(experiences)]);
+  return experience;
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
+const ComponentMarker = /*#__PURE__*/React.forwardRef(({
+  hidden: _hidden = false
+}, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -398,16 +304,16 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   }, [logger]);
   React.useEffect(() => {
     if (markerRef.current) {
-      const observableElement = getObservableElement(markerRef.current);
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
-          ref(observableElement);
+          ref(nextSibling);
         } else {
-          ref.current = observableElement;
+          ref.current = nextSibling;
         }
       }
     }
-  }, []);
+  }, [_hidden]);
   return jsxRuntime.jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -416,22 +322,9 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
     ref: markerRef
   });
 });
-const getObservableSibling = element => {
-  const nextSibling = element.nextElementSibling;
-  if (!nextSibling) {
-    return null;
-  }
-  const nextSiblingStyle = getComputedStyle(nextSibling);
-  // Elements with display: none are not observable by the IntersectionObserver
-  if (nextSiblingStyle.display !== 'none') {
-    return nextSibling;
-  }
-  return getObservableSibling(nextSibling);
-};
-const getObservableElement = element => {
-  const observableSibling = getObservableSibling(element);
-  if (observableSibling) {
-    return observableSibling;
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
   }
   const {
     parentElement
@@ -439,7 +332,10 @@ const getObservableElement = element => {
   if (!parentElement) {
     return null;
   }
-  return getObservableElement(parentElement);
+  if (parentElement.nextSibling) {
+    return parentElement.nextSibling;
+  }
+  return getNextSibling(parentElement, true);
 };
 
 const DefaultExperienceLoadingComponent = _a => {
@@ -569,7 +465,8 @@ const Experience = _a => {
   }
   if (isVariantHidden) {
     return jsxRuntime.jsx(ComponentMarker, {
-      ref: componentRef
+      ref: componentRef,
+      hidden: true
     }, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/{index.js → index.esm.js}

@@ -1,6 +1,6 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useMemo, useContext, useState, useRef, useEffect, createElement, forwardRef } from 'react';
-import { Ninetailed, selectVariant, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import { Ninetailed, selectVariant, selectHasExperienceVariants } from '@ninetailed/experience.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { logger, isBrowser } from '@ninetailed/experience.js-shared';
 import { isEqual, get } from 'radash';
 import { useInView } from 'react-intersection-observer';
@@ -26,7 +26,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     } = props;
     return new Ninetailed({
       clientId,
@@ -42,17 +43,17 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     });
   }, []);
   const {
     children
   } = props;
-  return jsx(NinetailedContext.Provider, Object.assign({
-    value: ninetailed
-  }, {
+  return /*#__PURE__*/jsx(NinetailedContext.Provider, {
+    value: ninetailed,
     children: children
-  }));
+  });
 };
 
 const useNinetailed = () => {
@@ -63,42 +64,30 @@ const useNinetailed = () => {
   return ninetailed;
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
 }
 
+const _excluded$3 = ["experiences"];
 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.
+
+  /**
+   * 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 => {
@@ -112,8 +101,8 @@ const useProfile = () => {
       }
     });
   }, []);
-  const profileStateWithoutExperiences = __rest(profileState, ["experiences"]);
-  return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
+  const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profileState, _excluded$3);
+  return Object.assign({}, profileStateWithoutExperiences, {
     loading: profileState.status === 'loading'
   });
 };
@@ -147,21 +136,22 @@ const TrackHasSeenComponent = ({
       });
     }
   }, [inView]);
-  return jsxs(Fragment, {
-    children: [jsx("div", {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
       ref: ref
     }), children]
   });
 };
 
-const Personalize = _a => {
-  var {
+const _excluded$2 = ["component", "loadingComponent", "variants", "holdout"];
+const Personalize = _ref => {
+  let {
       component: Component,
       loadingComponent: LoadingComponent,
       variants = [],
       holdout = -1
-    } = _a,
-    baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
+    } = _ref,
+    baseline = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const {
     loading,
     variant,
@@ -172,7 +162,7 @@ const Personalize = _a => {
   });
   const hasVariants = variants.length > 0;
   if (!hasVariants) {
-    return jsx(Component, Object.assign({}, baseline, {
+    return /*#__PURE__*/jsx(Component, Object.assign({}, baseline, {
       ninetailed: {
         isPersonalized,
         audience
@@ -181,26 +171,24 @@ const Personalize = _a => {
   }
   if (loading) {
     if (LoadingComponent) {
-      return jsx(LoadingComponent, {});
+      return /*#__PURE__*/jsx(LoadingComponent, {});
     }
-    return jsx("div", Object.assign({
+    return /*#__PURE__*/jsx("div", {
       style: {
         opacity: 0
-      }
-    }, {
-      children: jsx(Component, Object.assign({}, variant, {
+      },
+      children: /*#__PURE__*/jsx(Component, Object.assign({}, variant, {
         ninetailed: {
           isPersonalized,
           audience
         }
       }))
-    }), "hide");
+    }, "hide");
   }
-  return jsx(TrackHasSeenComponent, Object.assign({
+  return /*#__PURE__*/jsx(TrackHasSeenComponent, {
     variant: variant,
     audience: audience,
-    isPersonalized: isPersonalized
-  }, {
+    isPersonalized: isPersonalized,
     children: /*#__PURE__*/createElement(Component, Object.assign({}, variant, {
       key: `${audience.id}-${variant.id}`,
       ninetailed: {
@@ -208,7 +196,7 @@ const Personalize = _a => {
         audience
       }
     }))
-  }));
+  });
 };
 
 const generateSelectors = id => {
@@ -239,85 +227,23 @@ const MergeTag = ({
     return null;
   }
   const value = selectValueFromProfile(profile, id) || fallback;
-  return value ? jsx(Fragment, {
+  return value ? /*#__PURE__*/jsx(Fragment, {
     children: value
   }) : null;
 };
 
-const useExperienceSelectionMiddleware = ({
-  experiences,
-  baseline,
-  profile
-}) => {
-  const {
-    plugins
-  } = useNinetailed();
-  const [_, setCurrentTime] = useState(Date.now());
-  const {
-    addListeners,
-    removeListeners,
-    middleware
-  } = useMemo(() => makeExperienceSelectMiddleware({
-    plugins,
-    experiences,
-    baseline,
-    profile,
-    onChange: () => setCurrentTime(Date.now())
-  }), [plugins, experiences, baseline, profile]);
-  useEffect(() => {
-    addListeners();
-    return () => {
-      removeListeners();
-    };
-  }, [addListeners, removeListeners]);
-  return middleware;
-};
-
 const useExperience = ({
   baseline,
   experiences
 }) => {
-  const profileState = useProfile();
+  const ninetailed = useNinetailed();
   const hasVariants = experiences.map(experience => selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
-  const {
-    status,
-    profile
-  } = profileState;
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const overrideResult = _a => {
-    var {
-        experience: originalExperience,
-        variant: originalVariant,
-        variantIndex: originalVariantIndex
-      } = _a,
-      other = __rest(_a, ["experience", "variant", "variantIndex"]);
-    const {
-      experience,
-      variant,
-      variantIndex
-    } = experienceSelectionMiddleware({
-      experience: originalExperience,
-      variant: originalVariant,
-      variantIndex: originalVariantIndex
-    });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return Object.assign(Object.assign({}, other), {
-      audience: (experience === null || experience === void 0 ? void 0 : experience.audience) ? experience.audience : null,
-      experience,
-      variant,
-      variantIndex
-    });
-  };
-  const baseReturn = Object.assign(Object.assign({}, profileState), {
+  const [experience, setExperience] = useState({
     hasVariants,
-    baseline
-  });
-  const emptyReturn = Object.assign(Object.assign({}, baseReturn), {
+    baseline,
+    error: null,
+    loading: true,
+    status: 'loading',
     experience: null,
     variant: baseline,
     variantIndex: 0,
@@ -325,82 +251,48 @@ const useExperience = ({
     isPersonalized: false,
     profile: null
   });
-  if (status === 'loading') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (status === 'error') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (!profile) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  const experience = selectExperience({
-    experiences,
-    profile
-  });
-  if (!experience) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
-      profile
-    }));
-  }
-  const {
-    variant,
-    index
-  } = selectExperienceVariant({
-    baseline,
-    experience,
-    profile
-  });
-  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
-    status: 'success',
-    loading: false,
-    error: null,
-    experience,
-    variant,
-    variantIndex: index,
-    audience: experience.audience ? experience.audience : null,
-    profile,
-    isPersonalized: true
-  }));
+  useEffect(() => {
+    return ninetailed.onSelectVariant({
+      baseline,
+      experiences
+    }, state => {
+      setExperience(state);
+    });
+  }, [JSON.stringify(baseline), JSON.stringify(experiences)]);
+  return experience;
 };
 
-const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
+const ComponentMarker = /*#__PURE__*/forwardRef(({
+  hidden: _hidden = false
+}, ref) => {
   const {
     logger
   } = useNinetailed();
   const markerRef = useRef(null);
   useEffect(() => {
-    var _a;
-    /*
-    Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
-    See: https://github.com/facebook/react/issues/1881
+    var _markerRef$current;
+    /*
+    Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
+    See: https://github.com/facebook/react/issues/1881
     */
-    (_a = markerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none', 'important');
+    (_markerRef$current = markerRef.current) == null || _markerRef$current.style.setProperty('display', 'none', 'important');
   }, []);
   useEffect(() => {
     logger.debug('Using fallback mechanism to detect when experiences are seen. This can lead to inaccurate results. Consider using a forwardRef instead. See: https://docs.ninetailed.io/for-developers/experience-sdk/rendering-experiences#tracking-impressions-of-experiences');
   }, [logger]);
   useEffect(() => {
     if (markerRef.current) {
-      const observableElement = getObservableElement(markerRef.current);
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
-          ref(observableElement);
+          ref(nextSibling);
         } else {
-          ref.current = observableElement;
+          ref.current = nextSibling;
         }
       }
     }
-  }, []);
-  return jsx("div", {
+  }, [_hidden]);
+  return /*#__PURE__*/jsx("div", {
     className: "nt-cmp-marker",
     style: {
       display: 'none'
@@ -408,22 +300,9 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
     ref: markerRef
   });
 });
-const getObservableSibling = element => {
-  const nextSibling = element.nextElementSibling;
-  if (!nextSibling) {
-    return null;
-  }
-  const nextSiblingStyle = getComputedStyle(nextSibling);
-  // Elements with display: none are not observable by the IntersectionObserver
-  if (nextSiblingStyle.display !== 'none') {
-    return nextSibling;
-  }
-  return getObservableSibling(nextSibling);
-};
-const getObservableElement = element => {
-  const observableSibling = getObservableSibling(element);
-  if (observableSibling) {
-    return observableSibling;
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
   }
   const {
     parentElement
@@ -431,16 +310,21 @@ const getObservableElement = element => {
   if (!parentElement) {
     return null;
   }
-  return getObservableElement(parentElement);
+  if (parentElement.nextSibling) {
+    return parentElement.nextSibling;
+  }
+  return getNextSibling(parentElement, true);
 };
 
-const DefaultExperienceLoadingComponent = _a => {
-  var {
+const _excluded$1 = ["component", "unhideAfterMs", "passthroughProps"],
+  _excluded2 = ["experiences", "component", "loadingComponent", "passthroughProps"];
+const DefaultExperienceLoadingComponent = _ref => {
+  let {
       component: Component,
       unhideAfterMs = 5000,
       passthroughProps
-    } = _a,
-    baseline = __rest(_a, ["component", "unhideAfterMs", "passthroughProps"]);
+    } = _ref,
+    baseline = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const {
     logger
   } = useNinetailed();
@@ -455,12 +339,11 @@ const DefaultExperienceLoadingComponent = _a => {
     };
   }, []);
   if (hidden) {
-    return jsx("div", Object.assign({
+    return /*#__PURE__*/jsx("div", {
       style: {
         opacity: 0
-      }
-    }, {
-      children: jsx(Component, Object.assign({}, passthroughProps, baseline, {
+      },
+      children: /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
         ninetailed: {
           isPersonalized: false,
           audience: {
@@ -468,9 +351,9 @@ const DefaultExperienceLoadingComponent = _a => {
           }
         }
       }))
-    }), "hide");
+    }, "hide");
   }
-  return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+  return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
     ninetailed: {
       isPersonalized: false,
       audience: {
@@ -479,14 +362,14 @@ const DefaultExperienceLoadingComponent = _a => {
     }
   }));
 };
-const Experience = _a => {
-  var {
+const Experience = _ref2 => {
+  let {
       experiences,
       component: Component,
       loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent,
       passthroughProps
-    } = _a,
-    baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
+    } = _ref2,
+    baseline = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const {
     observeElement,
     unobserveElement,
@@ -504,9 +387,10 @@ const Experience = _a => {
     baseline,
     experiences
   });
+
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const isComponentForwardRef = isForwardRef(jsx(Component, {}));
+  const isComponentForwardRef = isForwardRef( /*#__PURE__*/jsx(Component, {}));
   const componentRef = useRef(null);
   const isVariantHidden = 'hidden' in variant && variant.hidden;
   useEffect(() => {
@@ -525,7 +409,7 @@ const Experience = _a => {
         element: componentElement,
         experience,
         audience,
-        variant: isVariantHidden ? Object.assign(Object.assign({}, variant), {
+        variant: isVariantHidden ? Object.assign({}, variant, {
           id: `${baseline.id}-hidden`
         }) : variant,
         variantIndex
@@ -541,10 +425,10 @@ const Experience = _a => {
     };
   }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience, isVariantHidden]);
   if (!hasVariants) {
-    return jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [!isComponentForwardRef && /*#__PURE__*/jsx(ComponentMarker, {
         ref: componentRef
-      }, `marker-no-variants-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      }, `marker-no-variants-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, passthroughProps, baseline, {
         key: baseline.id
       }, isComponentForwardRef ? {
         ref: componentRef
@@ -560,19 +444,20 @@ const Experience = _a => {
     }));
   }
   if (isVariantHidden) {
-    return jsx(ComponentMarker, {
-      ref: componentRef
-    }, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
+    return /*#__PURE__*/jsx(ComponentMarker, {
+      ref: componentRef,
+      hidden: true
+    }, `marker-hidden-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
   }
-  return jsxs(Fragment, {
-    children: [!isComponentForwardRef && jsx(ComponentMarker, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isComponentForwardRef && /*#__PURE__*/jsx(ComponentMarker, {
       ref: componentRef
-    }, `marker-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-      key: `${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`,
+    }, `marker-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, Object.assign({}, passthroughProps, variant), {
+      key: `${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`,
       ninetailed: {
         isPersonalized,
         audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+          id: (audience == null ? void 0 : audience.id) || 'all visitors'
         }
       }
     }, isComponentForwardRef ? {
@@ -581,18 +466,18 @@ const Experience = _a => {
   });
 };
 
+const _excluded = ["experiences", "component", "passthroughProps"];
 const ESRContext = /*#__PURE__*/React.createContext(undefined);
 const ESRProvider = ({
   experienceVariantsMap,
   children
 }) => {
-  return jsx(ESRContext.Provider, Object.assign({
+  return /*#__PURE__*/jsx(ESRContext.Provider, {
     value: {
       experienceVariantsMap
-    }
-  }, {
+    },
     children: children
-  }));
+  });
 };
 const useESR = () => {
   const context = React.useContext(ESRContext);
@@ -603,19 +488,19 @@ const useESR = () => {
     experienceVariantsMap: context.experienceVariantsMap
   };
 };
-const ESRLoadingComponent = _a => {
-  var {
+const ESRLoadingComponent = _ref => {
+  let {
       experiences,
       component: Component,
       passthroughProps
-    } = _a,
-    baseline = __rest(_a, ["experiences", "component", "passthroughProps"]);
+    } = _ref,
+    baseline = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     experienceVariantsMap
   } = useESR();
   const experience = experiences.find(experience => Object.prototype.hasOwnProperty.call(experienceVariantsMap, experience.id));
   if (!experience) {
-    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+    return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -626,7 +511,7 @@ const ESRLoadingComponent = _a => {
   }
   const component = experience.components.find(component => component.baseline.id === baseline.id);
   if (!component) {
-    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+    return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -636,7 +521,7 @@ const ESRLoadingComponent = _a => {
     }));
   }
   if (experienceVariantsMap[experience.id] === 0) {
-    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+    return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -647,7 +532,7 @@ const ESRLoadingComponent = _a => {
   }
   const variant = component.variants[experienceVariantsMap[experience.id] - 1];
   if (!variant) {
-    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+    return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -656,7 +541,7 @@ const ESRLoadingComponent = _a => {
       }
     }));
   }
-  return jsx(Component, Object.assign({}, passthroughProps, variant, {
+  return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, variant, {
     ninetailed: {
       isPersonalized: false,
       audience: {

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.5.3",
+  "version": "7.6.0-beta.2",
   "description": "Ninetailed SDK for React",
+  "dependencies": {
+    "@ninetailed/experience.js": "*",
+    "@ninetailed/experience.js-shared": "*",
+    "@ninetailed/experience.js-plugin-analytics": "*",
+    "radash": "10.9.0",
+    "react-intersection-observer": "8.34.0",
+    "react-is": "18.2.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react": "13.4.0"
+  },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -11,15 +21,12 @@
     "url": "https://github.com/ninetailed-inc/experience.js.git",
     "directory": "packages/sdks/react"
   },
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "type": "module",
-  "types": "./src/index.d.ts",
-  "dependencies": {
-    "@ninetailed/experience.js": "7.5.3",
-    "@ninetailed/experience.js-shared": "7.5.3",
-    "radash": "10.9.0",
-    "react-intersection-observer": "8.34.0",
-    "react-is": "18.2.0"
-  }
+  "keywords": [
+    "react",
+    "ninetailed",
+    "personalization",
+    "a/b testing"
+  ],
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
 }

package/src/lib/Experience/ComponentMarker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ComponentMarkerProps = {
+    hidden?: boolean;
+};
+export declare const ComponentMarker: React.ForwardRefExoticComponent<ComponentMarkerProps & React.RefAttributes<unknown>>;
+export {};

package/src/lib/Experience/ESRLoadingComponent.d.ts

@@ -12,5 +12,5 @@ export declare const ESRProvider: React.FC<PropsWithChildren<ESRProviderProps>>;
 export declare const useESR: () => {
     experienceVariantsMap: Record<string, number>;
 };
-export declare const ESRLoadingComponent: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, passthroughProps, ...baseline }: ExperienceBaseProps<P, PassThroughProps, Variant>) => JSX.Element;
+export declare const ESRLoadingComponent: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, passthroughProps, ...baseline }: ExperienceBaseProps<P, PassThroughProps, Variant>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Experience/Experience.d.ts

@@ -23,5 +23,5 @@ type DefaultExperienceLoadingComponentProps = ExperienceBaseProps<Record<string,
     unhideAfterMs?: number;
 };
 export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
-export declare const Experience: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps, Variant>) => JSX.Element;
+export declare const Experience: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps, Variant>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Experience/useExperience.d.ts

@@ -1,24 +1,24 @@
-import { Baseline, ExperienceConfiguration, Profile, Reference, VariantRef } from '@ninetailed/experience.js';
-type Load<Variant extends Reference> = {
+import { ExperienceConfiguration, Profile, Reference, VariantRef } from '@ninetailed/experience.js';
+type Load<TBaseline extends Reference> = {
     status: 'loading';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
+    baseline: TBaseline;
     experience: null;
-    variant: Variant;
+    variant: TBaseline;
     variantIndex: 0;
     audience: null;
     isPersonalized: boolean;
     profile: null;
     error: null;
 };
-type Success<Variant extends Reference> = {
+type Success<TBaseline extends Reference, TVariant extends Reference> = {
     status: 'success';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
-    experience: ExperienceConfiguration<Variant> | null;
-    variant: Variant;
+    baseline: TBaseline;
+    experience: ExperienceConfiguration<TVariant> | null;
+    variant: TBaseline | TVariant;
     variantIndex: number;
     audience: {
         id: string;
@@ -27,23 +27,23 @@ type Success<Variant extends Reference> = {
     profile: Profile;
     error: null;
 };
-type Fail<Variant extends Reference> = {
+type Fail<TBaseline extends Reference> = {
     status: 'error';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
+    baseline: TBaseline;
     experience: null;
-    variant: Variant;
+    variant: TBaseline;
     variantIndex: 0;
     audience: null;
     isPersonalized: boolean;
     profile: null;
     error: Error;
 };
-type UseExperienceArgs<Variant extends Reference> = {
-    baseline: Baseline;
-    experiences: ExperienceConfiguration<Variant>[];
+type UseExperienceArgs<TBaseline extends Reference, TVariant extends Reference> = {
+    baseline: TBaseline;
+    experiences: ExperienceConfiguration<TVariant>[];
 };
-type UseExperienceResponse<Variant extends Reference> = Load<Variant | VariantRef> | Success<Variant | VariantRef> | Fail<Variant | VariantRef>;
-export declare const useExperience: <Variant extends Reference>({ baseline, experiences, }: UseExperienceArgs<Variant>) => UseExperienceResponse<Variant>;
+type UseExperienceReturn<TBaseline extends Reference, TVariant extends Reference> = Load<TBaseline> | Success<TBaseline, TVariant | VariantRef> | Fail<TBaseline>;
+export declare const useExperience: <TBaseline extends Reference, TVariant extends Reference>({ baseline, experiences, }: UseExperienceArgs<TBaseline, TVariant>) => UseExperienceReturn<TBaseline, TVariant>;
 export {};

package/src/lib/MergeTag/MergeTag.d.ts

@@ -3,5 +3,5 @@ type MergeTagProps = {
     id: string;
     fallback?: string;
 };
-export declare const MergeTag: ({ id, fallback, }: PropsWithChildren<MergeTagProps>) => JSX.Element | null;
+export declare const MergeTag: ({ id, fallback, }: PropsWithChildren<MergeTagProps>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/lib/NinetailedContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { NinetailedInstance } from '@ninetailed/experience.js';
-export declare const NinetailedContext: import("react").Context<NinetailedInstance | undefined>;
+export declare const NinetailedContext: import("react").Context<NinetailedInstance<import("@ninetailed/experience.js").Reference, import("@ninetailed/experience.js").Reference> | undefined>;

package/src/lib/NinetailedProvider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Ninetailed, NinetailedPlugin, OnInitProfileId, Storage } from '@ninetailed/experience.js';
+import { Ninetailed, OnInitProfileId, Storage } from '@ninetailed/experience.js';
 import { Locale, OnErrorHandler, OnLogHandler, NinetailedRequestContext } from '@ninetailed/experience.js-shared';
+import { NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
 export type NinetailedProviderInstantiationProps = {
     clientId: string;
     environment?: string;
@@ -15,8 +16,9 @@ export type NinetailedProviderInstantiationProps = {
     buildClientContext?: () => NinetailedRequestContext;
     onInitProfileId?: OnInitProfileId;
     storageImpl?: Storage;
+    useClientSideEvaluation?: boolean;
 };
 export type NinetailedProviderProps = NinetailedProviderInstantiationProps | {
     ninetailed: Ninetailed;
 };
-export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
+export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/Personalize.d.ts

@@ -19,5 +19,5 @@ type PersonalizeProps<P> = Baseline<P> & {
     loadingComponent?: React.ComponentType;
     holdout?: number;
 };
-export declare const Personalize: <P extends object>({ component: Component, loadingComponent: LoadingComponent, variants, holdout, ...baseline }: PersonalizeProps<P>) => JSX.Element;
+export declare const Personalize: <P extends object>({ component: Component, loadingComponent: LoadingComponent, variants, holdout, ...baseline }: PersonalizeProps<P>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/useNinetailed.d.ts

@@ -1,2 +1,3 @@
 import { NinetailedInstance } from '@ninetailed/experience.js';
-export declare const useNinetailed: () => NinetailedInstance;
+import { Reference } from '@ninetailed/experience.js-shared';
+export declare const useNinetailed: <TBaseline extends Reference = Reference, TVariant extends Reference = Reference>() => NinetailedInstance<TBaseline, TVariant>;

package/src/lib/Experience/ComponentMarker/ComponentMarker.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ComponentMarker: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;

package/src/lib/Experience/ComponentMarker/index.d.ts

@@ -1 +0,0 @@
-export * from './ComponentMarker';

package/src/lib/Experience/useExperienceSelectionMiddleware.d.ts

@@ -1,12 +0,0 @@
-import { ExperienceConfiguration, Profile, Reference } from '@ninetailed/experience.js-shared';
-type UseExperienceSelectionMiddlewareArg<Variant extends Reference> = {
-    experiences: ExperienceConfiguration<Variant>[];
-    baseline: Reference;
-    profile: Profile | null;
-};
-export declare const useExperienceSelectionMiddleware: <Variant extends Reference>({ experiences, baseline, profile, }: UseExperienceSelectionMiddlewareArg<Variant>) => ({ experience, variant, variantIndex, }: import("@ninetailed/experience.js").ExperienceSelectionMiddlewareReturnArg<Variant | import("@ninetailed/experience.js-shared").VariantRef>) => {
-    experience: ExperienceConfiguration<Variant | import("@ninetailed/experience.js-shared").VariantRef> | null;
-    variant: Variant | import("@ninetailed/experience.js-shared").VariantRef;
-    variantIndex: number;
-};
-export {};