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

package/index.cjs.d.ts

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

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

@@ -236,8 +236,10 @@ const selectValueFromProfile = (profile, id) => {
   }
   return radash.get(profile, matchingSelector);
 };
+
 const MergeTag = ({
-  id
+  id,
+  fallback
 }) => {
   const {
     loading,
@@ -246,11 +248,10 @@ const MergeTag = ({
   if (loading || !profile) {
     return null;
   }
-  const value = selectValueFromProfile(profile, id);
-  // DON'T CHANGE
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+  const value = selectValueFromProfile(profile, id) || fallback;
+  return value ? jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: value
-  });
+  }) : null;
 };
 
 const useExperience = ({
@@ -283,7 +284,9 @@ const useExperience = ({
   return experience;
 };
 
-const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
+const ComponentMarker = /*#__PURE__*/React.forwardRef(({
+  hidden: _hidden = false
+}, ref) => {
   const {
     logger
   } = useNinetailed();
@@ -301,7 +304,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   }, [logger]);
   React.useEffect(() => {
     if (markerRef.current) {
-      const nextSibling = markerRef.current.nextSibling;
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
           ref(nextSibling);
@@ -310,7 +313,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
         }
       }
     }
-  }, []);
+  }, [_hidden]);
   return jsxRuntime.jsx("div", {
     className: "nt-cmp-marker",
     style: {
@@ -319,6 +322,21 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
     ref: markerRef
   });
 });
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
+  }
+  const {
+    parentElement
+  } = element;
+  if (!parentElement) {
+    return null;
+  }
+  if (parentElement.nextSibling) {
+    return parentElement.nextSibling;
+  }
+  return getNextSibling(parentElement, true);
+};
 
 const DefaultExperienceLoadingComponent = _a => {
   var {
@@ -394,6 +412,7 @@ const Experience = _a => {
   // @ts-ignore
   const isComponentForwardRef = reactIs.isForwardRef(jsxRuntime.jsx(Component, {}));
   const componentRef = React.useRef(null);
+  const isVariantHidden = 'hidden' in variant && variant.hidden;
   React.useEffect(() => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
@@ -410,7 +429,9 @@ const Experience = _a => {
         element: componentElement,
         experience,
         audience,
-        variant,
+        variant: isVariantHidden ? Object.assign(Object.assign({}, variant), {
+          id: `${baseline.id}-hidden`
+        }) : variant,
         variantIndex
       });
       return () => {
@@ -422,7 +443,7 @@ const Experience = _a => {
     return () => {
       // noop
     };
-  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience]);
+  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience, isVariantHidden]);
   if (!hasVariants) {
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
@@ -442,10 +463,10 @@ const Experience = _a => {
       component: Component
     }));
   }
-  const isVariantHidden = 'hidden' in variant && variant.hidden;
   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, 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';
@@ -50,11 +50,10 @@ const NinetailedProvider = props => {
   const {
     children
   } = props;
-  return jsx(NinetailedContext.Provider, Object.assign({
-    value: ninetailed
-  }, {
+  return /*#__PURE__*/jsx(NinetailedContext.Provider, {
+    value: ninetailed,
     children: children
-  }));
+  });
 };
 
 const useNinetailed = () => {
@@ -65,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 => {
@@ -114,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'
   });
 };
@@ -149,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,
@@ -174,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
@@ -183,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: {
@@ -210,7 +196,7 @@ const Personalize = _a => {
         audience
       }
     }))
-  }));
+  });
 };
 
 const generateSelectors = id => {
@@ -228,8 +214,10 @@ const selectValueFromProfile = (profile, id) => {
   }
   return get(profile, matchingSelector);
 };
+
 const MergeTag = ({
-  id
+  id,
+  fallback
 }) => {
   const {
     loading,
@@ -238,11 +226,10 @@ const MergeTag = ({
   if (loading || !profile) {
     return null;
   }
-  const value = selectValueFromProfile(profile, id);
-  // DON'T CHANGE
-  return jsx(Fragment, {
+  const value = selectValueFromProfile(profile, id) || fallback;
+  return value ? /*#__PURE__*/jsx(Fragment, {
     children: value
-  });
+  }) : null;
 };
 
 const useExperience = ({
@@ -275,25 +262,27 @@ const useExperience = ({
   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 nextSibling = markerRef.current.nextSibling;
+      const nextSibling = getNextSibling(markerRef.current, _hidden);
       if (ref) {
         if (typeof ref === 'function') {
           ref(nextSibling);
@@ -302,8 +291,8 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
         }
       }
     }
-  }, []);
-  return jsx("div", {
+  }, [_hidden]);
+  return /*#__PURE__*/jsx("div", {
     className: "nt-cmp-marker",
     style: {
       display: 'none'
@@ -311,14 +300,31 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
     ref: markerRef
   });
 });
+const getNextSibling = (element, recursive = false) => {
+  if (!recursive) {
+    return element.nextSibling;
+  }
+  const {
+    parentElement
+  } = element;
+  if (!parentElement) {
+    return null;
+  }
+  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();
@@ -333,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: {
@@ -346,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: {
@@ -357,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,
@@ -382,10 +387,12 @@ 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(() => {
     const componentElement = componentRef.current;
     if (componentElement && !(componentElement instanceof Element)) {
@@ -402,7 +409,9 @@ const Experience = _a => {
         element: componentElement,
         experience,
         audience,
-        variant,
+        variant: isVariantHidden ? Object.assign({}, variant, {
+          id: `${baseline.id}-hidden`
+        }) : variant,
         variantIndex
       });
       return () => {
@@ -414,12 +423,12 @@ const Experience = _a => {
     return () => {
       // noop
     };
-  }, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience]);
+  }, [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
@@ -434,21 +443,21 @@ const Experience = _a => {
       component: Component
     }));
   }
-  const isVariantHidden = 'hidden' in variant && variant.hidden;
   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 ? {
@@ -457,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);
@@ -479,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: {
@@ -502,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: {
@@ -512,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: {
@@ -523,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: {
@@ -532,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,19 +1,32 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.6.0-beta.1",
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
-  "license": "BSL-1.1",
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "type": "module",
-  "types": "./src/index.d.ts",
+  "version": "7.6.0-beta.2",
+  "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.6.0-beta.1",
-    "@ninetailed/experience.js-shared": "7.6.0-beta.1",
+    "@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"
-  }
+    "react-is": "18.2.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react": "13.4.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ninetailed-inc/experience.js.git",
+    "directory": "packages/sdks/react"
+  },
+  "keywords": [
+    "react",
+    "ninetailed",
+    "personalization",
+    "a/b testing"
+  ],
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
 }

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

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const ComponentMarker: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+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/MergeTag/MergeTag.d.ts

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

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

@@ -0,0 +1,3 @@
+import { Profile } from '@ninetailed/experience.js-shared';
+export declare const generateSelectors: (id: string) => string[];
+export declare const selectValueFromProfile: (profile: Profile, id: string) => unknown;

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

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

package/src/lib/NinetailedProvider.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Ninetailed, NinetailedPlugin, OnInitProfileId, Storage } from '@ninetailed/experience.js';
-import { Profile, Locale, OnErrorHandler, OnLogHandler, NinetailedRequestContext } from '@ninetailed/experience.js-shared';
+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;
     preview?: boolean;
     url?: string;
     plugins?: (NinetailedPlugin | NinetailedPlugin[])[];
-    profile?: Profile;
     locale?: Locale;
     requestTimeout?: number;
     onLog?: OnLogHandler;
@@ -21,4 +21,4 @@ export type NinetailedProviderInstantiationProps = {
 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,3 +1,3 @@
-import { Reference } from '@ninetailed/experience.js-shared';
 import { NinetailedInstance } from '@ninetailed/experience.js';
+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/MergeTag.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { Profile } from '@ninetailed/experience.js';
-type MergeTagProps = {
-    id: string;
-};
-export declare const generateSelectors: (id: string) => string[];
-export declare const selectValueFromProfile: (profile: Profile, id: string) => unknown;
-export declare const MergeTag: React.FC<React.PropsWithChildren<MergeTagProps>>;
-export {};