@ninetailed/experience.js-react 4.3.0-beta.2 → 4.4.0-beta.1

package/index.cjs

@@ -5,7 +5,6 @@ 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 reactIntersectionObserver = require('react-intersection-observer');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
 var radash = require('radash');
@@ -1930,23 +1929,6 @@ const useProfile = () => {
   });
 };
 
-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,
@@ -1981,9 +1963,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,
@@ -2040,7 +2019,7 @@ const useExperience = ({
     // @ts-ignore
     return overrideResult(emptyReturn);
   }
-  const activeExperiments = experience_js.selectActiveExperiments(experiments, profile);
+  const activeExperiments = experience_js.selectActiveExperiments(experiences, profile);
   const experience = experience_js.selectExperience({
     experiences,
     activeExperiments,
@@ -2083,41 +2062,21 @@ const useExperience = ({
   }));
 };
 
+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 useJoinExperiment = () => {
   const context = useExperimentsContext();
   return context.joinExperiment;
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
-  const {
-    logger
-  } = useNinetailed();
-  const markerRef = React.useRef(null);
-  React.useEffect(() => {
-    // TODO: Create a better message
-    logger.debug('Using fallback mechanism to select component.');
-  }, [logger]);
-  React.useEffect(() => {
-    if (markerRef.current) {
-      const nextSibling = markerRef.current.nextSibling;
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(nextSibling);
-        } else {
-          ref.current = nextSibling;
-        }
-      }
-    }
-  }, []);
-  return jsxRuntime.jsx("div", {
-    className: "nt-cmp-marker",
-    style: {
-      display: 'none !important'
-    },
-    ref: markerRef
-  });
-});
-
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2171,10 +2130,6 @@ const Experience = _a => {
       passthroughProps
     } = _a,
     baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
-  const {
-    observeElement,
-    unobserveElement
-  } = useNinetailed();
   // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
@@ -2189,46 +2144,22 @@ const Experience = _a => {
     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) {
+    if (status === 'success' && experience && experience.type === 'nt_experiment' && variant && profile) {
       joinExperiment({
         experiences,
         experiment: experience,
+        variant: Object.assign(Object.assign({}, variant), {
+          hidden: 'hidden' in variant ? variant.hidden : false
+        }),
         profile
       });
     }
-  }, [status, experience, profile]);
-  React.useEffect(() => {
-    const componentElement = componentRef.current;
-    if (componentElement) {
-      observeElement({
-        element: componentElement,
-        experienceId: experience === null || experience === void 0 ? void 0 : experience.id,
-        variantId: variant === null || variant === void 0 ? void 0 : variant.id,
-        baselineId: baseline.id,
-        audienceId: audience === null || audience === void 0 ? void 0 : audience.id
-      });
-    }
-    return () => {
-      if (componentElement) {
-        unobserveElement(componentElement);
-      }
-    };
-  }, [observeElement, unobserveElement, experience, baseline, variant, audience]);
+  }, [status, experience, variant, profile]);
   if (!hasVariants) {
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
-        ref: componentRef
-      }), /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
-        key: baseline.id
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      key: baseline.id
+    }));
   }
   if (status === 'loading') {
     return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
@@ -2239,20 +2170,14 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
-        ref: componentRef
-      }), jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: 'baseline'
-          }
+    return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+      }
+    }));
   }
   if (!variant) {
     return jsxRuntime.jsx(TrackExperience, Object.assign({
@@ -2261,20 +2186,14 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
-          ref: componentRef
-        }), jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
-          ninetailed: {
-            isPersonalized: false,
-            audience: {
-              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
-            }
+      children: jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
           }
-        }, isComponentForwardRef ? {
-          ref: componentRef
-        } : {}))]
-      })
+        }
+      }))
     }), baseline.id);
   }
   const isVariantHidden = 'hidden' in variant && variant.hidden;
@@ -2284,21 +2203,15 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: !isVariantHidden ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
-        ref: componentRef
-      }), /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-        key: `${experience.id}-${variant.id}`,
-        ninetailed: {
-          isPersonalized,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
-          }
+    children: !isVariantHidden ? /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+      key: `${experience.id}-${variant.id}`,
+      ninetailed: {
+        isPersonalized,
+        audience: {
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    }) : null
+      }
+    })) : null
   }));
 };
 
@@ -2402,15 +2315,13 @@ const debounce = (fn, wait) => {
     debouncedFn();
   };
 };
-const useProvideJoinExperiment = ({
-  experiments,
-  maximumActiveExperiments: _maximumActiveExperiments = 1
-}) => {
+// TODO: the majority of this code should be moved to the experience.js javascript package
+const useProvideJoinExperiment = _ => {
   const {
     identify
   } = useNinetailed();
   const joinExperimentIdentify = debounce(args => {
-    const traits = args.slice(0, _maximumActiveExperiments).reduce((traits, [experimentJoinTraits]) => {
+    const traits = args.reduce((traits, [experimentJoinTraits]) => {
       return Object.assign(Object.assign({}, experimentJoinTraits), traits);
     }, {});
     identify('', traits);
@@ -2418,6 +2329,7 @@ const useProvideJoinExperiment = ({
   return React.useCallback(data => __awaiter(void 0, void 0, void 0, function* () {
     const {
       experiment,
+      variant,
       profile
     } = data;
     const isExperiment = experiment.type === 'nt_experiment';
@@ -2425,17 +2337,17 @@ const useProvideJoinExperiment = ({
       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.`);
+    if (!experience_jsShared.isExperienceSticky(experiment)) {
+      experience_jsShared.logger.debug("Won't add experiment to traits, as it's not sticky.");
       return;
     }
-    if (activeExperiments.some(activeExperiment => activeExperiment.id === experiment.id)) {
+    const activeExperimentIds = experience_jsShared.selectActiveExperimentIds(profile);
+    if (activeExperimentIds.some(activeExperimentId => activeExperimentId === 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_TRAIT_PREFIX}${experiment.id}`]: variant.hidden ? 'hidden' : variant.id
     });
     experience_jsShared.logger.debug(`Sent event to join experiment ${experiment.id}.`);
   }), []);
@@ -2446,10 +2358,7 @@ const ExperimentsProvider = ({
   maximumActiveExperiments: _maximumActiveExperiments = 1,
   children
 }) => {
-  const joinExperiment = useProvideJoinExperiment({
-    experiments,
-    maximumActiveExperiments: _maximumActiveExperiments
-  });
+  const joinExperiment = useProvideJoinExperiment();
   return jsxRuntime.jsx(ExperimentsContext.Provider, Object.assign({
     value: {
       experiments,
@@ -2460,40 +2369,58 @@ const ExperimentsProvider = ({
   }));
 };
 
-const NinetailedProvider = ({
-  children,
-  clientId,
-  experiments: _experiments = [],
-  maximumActiveExperiments,
-  environment,
-  preview,
-  url,
-  profile,
-  locale,
-  requestTimeout,
-  plugins: _plugins = [],
-  onLog,
-  onError
-}) => {
-  const ninetailed = React.useMemo(() => new experience_js.Ninetailed({
-    clientId,
-    environment,
-    preview
-  }, {
-    url,
-    plugins: _plugins,
-    profile,
-    locale,
-    requestTimeout,
-    onLog,
-    onError
-  }), []);
+/**
+ * @deprecated
+ *
+ * This will get removed in v5 of the SDK.
+ */
+const useExperiments = () => {
+  const context = useExperimentsContext();
+  return {
+    experiments: context.experiments
+  };
+};
+
+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
+    } = props;
+    return new experience_js.Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      profile,
+      locale,
+      requestTimeout,
+      onLog,
+      onError
+    });
+  }, []);
+  const {
+    children
+  } = props;
   return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsxRuntime.jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
-      maximumActiveExperiments: maximumActiveExperiments
+      experiments: [],
+      maximumActiveExperiments: 10000
     }, {
       children: children
     }))

package/index.js

@@ -1,9 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { createContext, useContext, useEffect, useState, useRef, useMemo, forwardRef, createElement as createElement$1, useCallback } from 'react';
+import React, { createContext, useContext, useEffect, useState, useRef, useMemo, createElement as createElement$1, useCallback } from 'react';
 import { selectDistribution, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant, Ninetailed, selectVariant } from '@ninetailed/experience.js';
-import { isForwardRef } from 'react-is';
 import { useInView } from 'react-intersection-observer';
-import { isBrowser, logger } from '@ninetailed/experience.js-shared';
+import { isBrowser, logger, isExperienceSticky, selectActiveExperimentIds } from '@ninetailed/experience.js-shared';
 import { isEqual, debounce as debounce$1, get as get$1 } from 'radash';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1922,23 +1921,6 @@ const useProfile = () => {
   });
 };
 
-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,
@@ -1973,9 +1955,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,
@@ -2032,7 +2011,7 @@ const useExperience = ({
     // @ts-ignore
     return overrideResult(emptyReturn);
   }
-  const activeExperiments = selectActiveExperiments(experiments, profile);
+  const activeExperiments = selectActiveExperiments(experiences, profile);
   const experience = selectExperience({
     experiences,
     activeExperiments,
@@ -2075,41 +2054,21 @@ const useExperience = ({
   }));
 };
 
+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 useJoinExperiment = () => {
   const context = useExperimentsContext();
   return context.joinExperiment;
 };
 
-const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
-  const {
-    logger
-  } = useNinetailed();
-  const markerRef = useRef(null);
-  useEffect(() => {
-    // TODO: Create a better message
-    logger.debug('Using fallback mechanism to select component.');
-  }, [logger]);
-  useEffect(() => {
-    if (markerRef.current) {
-      const nextSibling = markerRef.current.nextSibling;
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(nextSibling);
-        } else {
-          ref.current = nextSibling;
-        }
-      }
-    }
-  }, []);
-  return jsx("div", {
-    className: "nt-cmp-marker",
-    style: {
-      display: 'none !important'
-    },
-    ref: markerRef
-  });
-});
-
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2163,10 +2122,6 @@ const Experience = _a => {
       passthroughProps
     } = _a,
     baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
-  const {
-    observeElement,
-    unobserveElement
-  } = useNinetailed();
   // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
@@ -2181,46 +2136,22 @@ const Experience = _a => {
     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) {
+    if (status === 'success' && experience && experience.type === 'nt_experiment' && variant && profile) {
       joinExperiment({
         experiences,
         experiment: experience,
+        variant: Object.assign(Object.assign({}, variant), {
+          hidden: 'hidden' in variant ? variant.hidden : false
+        }),
         profile
       });
     }
-  }, [status, experience, profile]);
-  useEffect(() => {
-    const componentElement = componentRef.current;
-    if (componentElement) {
-      observeElement({
-        element: componentElement,
-        experienceId: experience === null || experience === void 0 ? void 0 : experience.id,
-        variantId: variant === null || variant === void 0 ? void 0 : variant.id,
-        baselineId: baseline.id,
-        audienceId: audience === null || audience === void 0 ? void 0 : audience.id
-      });
-    }
-    return () => {
-      if (componentElement) {
-        unobserveElement(componentElement);
-      }
-    };
-  }, [observeElement, unobserveElement, experience, baseline, variant, audience]);
+  }, [status, experience, variant, profile]);
   if (!hasVariants) {
-    return jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
-        ref: componentRef
-      }), /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
-        key: baseline.id
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+    return /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
+      key: baseline.id
+    }));
   }
   if (status === 'loading') {
     return /*#__PURE__*/createElement$1(LoadingComponent, Object.assign({}, baseline, {
@@ -2231,20 +2162,14 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    return jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
-        ref: componentRef
-      }), jsx(Component, Object.assign({}, passthroughProps, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: 'baseline'
-          }
+    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+      }
+    }));
   }
   if (!variant) {
     return jsx(TrackExperience, Object.assign({
@@ -2253,20 +2178,14 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      children: jsxs(Fragment, {
-        children: [!isComponentForwardRef && jsx(ComponentMarker, {
-          ref: componentRef
-        }), jsx(Component, Object.assign({}, passthroughProps, baseline, {
-          ninetailed: {
-            isPersonalized: false,
-            audience: {
-              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
-            }
+      children: jsx(Component, Object.assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
           }
-        }, isComponentForwardRef ? {
-          ref: componentRef
-        } : {}))]
-      })
+        }
+      }))
     }), baseline.id);
   }
   const isVariantHidden = 'hidden' in variant && variant.hidden;
@@ -2276,21 +2195,15 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: !isVariantHidden ? jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
-        ref: componentRef
-      }), /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-        key: `${experience.id}-${variant.id}`,
-        ninetailed: {
-          isPersonalized,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
-          }
+    children: !isVariantHidden ? /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+      key: `${experience.id}-${variant.id}`,
+      ninetailed: {
+        isPersonalized,
+        audience: {
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    }) : null
+      }
+    })) : null
   }));
 };
 
@@ -2394,15 +2307,13 @@ const debounce = (fn, wait) => {
     debouncedFn();
   };
 };
-const useProvideJoinExperiment = ({
-  experiments,
-  maximumActiveExperiments: _maximumActiveExperiments = 1
-}) => {
+// TODO: the majority of this code should be moved to the experience.js javascript package
+const useProvideJoinExperiment = _ => {
   const {
     identify
   } = useNinetailed();
   const joinExperimentIdentify = debounce(args => {
-    const traits = args.slice(0, _maximumActiveExperiments).reduce((traits, [experimentJoinTraits]) => {
+    const traits = args.reduce((traits, [experimentJoinTraits]) => {
       return Object.assign(Object.assign({}, experimentJoinTraits), traits);
     }, {});
     identify('', traits);
@@ -2410,6 +2321,7 @@ const useProvideJoinExperiment = ({
   return useCallback(data => __awaiter(void 0, void 0, void 0, function* () {
     const {
       experiment,
+      variant,
       profile
     } = data;
     const isExperiment = experiment.type === 'nt_experiment';
@@ -2417,17 +2329,17 @@ const useProvideJoinExperiment = ({
       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.`);
+    if (!isExperienceSticky(experiment)) {
+      logger.debug("Won't add experiment to traits, as it's not sticky.");
       return;
     }
-    if (activeExperiments.some(activeExperiment => activeExperiment.id === experiment.id)) {
+    const activeExperimentIds = selectActiveExperimentIds(profile);
+    if (activeExperimentIds.some(activeExperimentId => activeExperimentId === 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
+      [`${EXPERIENCE_TRAIT_PREFIX}${experiment.id}`]: variant.hidden ? 'hidden' : variant.id
     });
     logger.debug(`Sent event to join experiment ${experiment.id}.`);
   }), []);
@@ -2438,10 +2350,7 @@ const ExperimentsProvider = ({
   maximumActiveExperiments: _maximumActiveExperiments = 1,
   children
 }) => {
-  const joinExperiment = useProvideJoinExperiment({
-    experiments,
-    maximumActiveExperiments: _maximumActiveExperiments
-  });
+  const joinExperiment = useProvideJoinExperiment();
   return jsx(ExperimentsContext.Provider, Object.assign({
     value: {
       experiments,
@@ -2452,40 +2361,58 @@ const ExperimentsProvider = ({
   }));
 };
 
-const NinetailedProvider = ({
-  children,
-  clientId,
-  experiments: _experiments = [],
-  maximumActiveExperiments,
-  environment,
-  preview,
-  url,
-  profile,
-  locale,
-  requestTimeout,
-  plugins: _plugins = [],
-  onLog,
-  onError
-}) => {
-  const ninetailed = useMemo(() => new Ninetailed({
-    clientId,
-    environment,
-    preview
-  }, {
-    url,
-    plugins: _plugins,
-    profile,
-    locale,
-    requestTimeout,
-    onLog,
-    onError
-  }), []);
+/**
+ * @deprecated
+ *
+ * This will get removed in v5 of the SDK.
+ */
+const useExperiments = () => {
+  const context = useExperimentsContext();
+  return {
+    experiments: context.experiments
+  };
+};
+
+const NinetailedProvider = props => {
+  const ninetailed = useMemo(() => {
+    if ('ninetailed' in props) {
+      return props.ninetailed;
+    }
+    const {
+      clientId,
+      environment,
+      preview,
+      url,
+      profile,
+      locale,
+      requestTimeout,
+      plugins = [],
+      onLog,
+      onError
+    } = props;
+    return new Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      profile,
+      locale,
+      requestTimeout,
+      onLog,
+      onError
+    });
+  }, []);
+  const {
+    children
+  } = props;
   return jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
-      maximumActiveExperiments: maximumActiveExperiments
+      experiments: [],
+      maximumActiveExperiments: 10000
     }, {
       children: children
     }))

package/lib/Experience/ExperimentsProvider.d.ts

@@ -1,7 +1,17 @@
 import React, { PropsWithChildren } from 'react';
 import { ExperienceConfiguration, Reference } from '@ninetailed/experience.js';
 type ExperimentsProviderProps<Variant extends Reference> = React.PropsWithChildren<{
+    /**
+     * @deprecated
+     *
+     * This will get removed in v5
+     */
     experiments: ExperienceConfiguration<Variant>[];
+    /**
+     * @deprecated
+     *
+     * This will get removed in v5
+     */
     maximumActiveExperiments?: number;
 }>;
 export declare const ExperimentsProvider: <Variant extends Reference>({ experiments, maximumActiveExperiments, children, }: React.PropsWithChildren<ExperimentsProviderProps<Variant>>) => JSX.Element;

package/lib/Experience/useExperiments.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated
+ *
+ * This will get removed in v5 of the SDK.
+ */
 export declare const useExperiments: () => {
     experiments: import("@ninetailed/experience.js-shared").ExperienceConfiguration<any>[];
 };

package/lib/Experience/useProvideJoinExperiment.d.ts

@@ -2,12 +2,18 @@ import { Profile, ExperienceConfiguration, Reference, VariantRef } from '@nineta
 export type JoinExperimentArgs = {
     experiences: ExperienceConfiguration[];
     experiment: ExperienceConfiguration<Reference | VariantRef>;
+    variant: VariantRef;
     profile: Profile;
 };
 export type JoinExperiment = (args: JoinExperimentArgs) => Promise<void>;
 type UseJoinExperimentArgs = {
     experiments: ExperienceConfiguration[];
+    /**
+     * @deprecated
+     *
+     * This will get removed in v5 of the sdk
+     */
     maximumActiveExperiments?: number;
 };
-export declare const useProvideJoinExperiment: ({ experiments, maximumActiveExperiments, }: UseJoinExperimentArgs) => (data: JoinExperimentArgs) => Promise<void>;
+export declare const useProvideJoinExperiment: (_: UseJoinExperimentArgs) => (data: JoinExperimentArgs) => Promise<void>;
 export {};

package/lib/NinetailedProvider.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
-import { NinetailedPlugin, ExperienceConfiguration } from '@ninetailed/experience.js';
+import { Ninetailed, NinetailedPlugin, ExperienceConfiguration } from '@ninetailed/experience.js';
 import { Profile, Locale, OnErrorHandler, OnLogHandler } from '@ninetailed/experience.js-shared';
-export type NinetailedProviderProps = {
-    clientId: string;
-    environment?: string;
+type ExperimentProviderProps = {
+    /**
+     * @deprecated
+     */
     experiments?: ExperienceConfiguration<any>[];
+    /**
+     * @deprecated
+     */
     maximumActiveExperiments?: number;
+};
+export type NinetailedProviderInstantiationProps = {
+    clientId: string;
+    environment?: string;
     preview?: boolean;
     url?: string;
     plugins?: (NinetailedPlugin | NinetailedPlugin[])[];
@@ -14,5 +22,9 @@ export type NinetailedProviderProps = {
     requestTimeout?: number;
     onLog?: OnLogHandler;
     onError?: OnErrorHandler;
-};
-export declare const NinetailedProvider: ({ children, clientId, experiments, maximumActiveExperiments, environment, preview, url, profile, locale, requestTimeout, plugins, onLog, onError, }: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
+} & ExperimentProviderProps;
+export type NinetailedProviderProps = NinetailedProviderInstantiationProps | ({
+    ninetailed: Ninetailed;
+} & ExperimentProviderProps);
+export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
+export {};

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export type { Profile, Variant } from '@ninetailed/experience.js-shared';
 export type { ExperienceConfiguration, ExperienceType, EXPERIENCE_TRAIT_PREFIX, } from '@ninetailed/experience.js';
 export { NinetailedProvider } from './NinetailedProvider';
-export type { NinetailedProviderProps } from './NinetailedProvider';
+export type { NinetailedProviderProps, NinetailedProviderInstantiationProps, } from './NinetailedProvider';
 export { useNinetailed } from './useNinetailed';
 export { useProfile } from './useProfile';
 export { usePersonalize } from './usePersonalize';

package/lib/useProfile.d.ts

@@ -10,7 +10,6 @@ export declare const useProfile: () => {
     status: "success";
     profile: {
         id: string;
-        stableId: string;
         random: number;
         audiences: string[];
         traits: import("@ninetailed/experience.js-shared").Properties;
@@ -29,7 +28,6 @@ export declare const useProfile: () => {
             timezone?: string | undefined;
         };
         session: {
-            id: string;
             isReturningVisitor: boolean;
             landingPage: {
                 path: string;

package/package.json

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

package/lib/Experience/ComponentMarker.d.ts

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