@ninetailed/experience.js-react 2.2.0-beta.0 → 2.2.0

package/index.esm.js

@@ -2571,9 +2571,10 @@ const DefaultExperienceLoadingComponent = _a => {
   var {
     component: Component,
     experiences,
-    unhideAfterMs = 5000
+    unhideAfterMs = 5000,
+    passthroughProps
   } = _a,
-      baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+      baseline = __rest(_a, ["component", "experiences", "unhideAfterMs", "passthroughProps"]);
 
   const {
     logger
@@ -2595,7 +2596,7 @@ const DefaultExperienceLoadingComponent = _a => {
       style: {
         opacity: 0
       }
-    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -2605,7 +2606,7 @@ const DefaultExperienceLoadingComponent = _a => {
     })));
   }
 
-  return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
     ninetailed: {
       isPersonalized: false,
       audience: {
@@ -2618,9 +2619,10 @@ const Experience = _a => {
   var {
     experiences,
     component: Component,
-    loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent
+    loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent,
+    passthroughProps
   } = _a,
-      baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
+      baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
 
   const {
     status,
@@ -2647,18 +2649,19 @@ const Experience = _a => {
   }, [status, experience, profile]);
 
   if (!hasVariants) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline));
   }
 
   if (status === 'loading') {
     return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
+      passthroughProps: passthroughProps,
       experiences: experiences,
       component: Component
     }));
   }
 
   if (!experience) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
       key: baseline.id,
       ninetailed: {
         isPersonalized: false,
@@ -2675,7 +2678,7 @@ const Experience = _a => {
       variant: baseline,
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
-    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
       key: baseline.id,
       ninetailed: {
         isPersonalized: false,

package/index.umd.js

@@ -2119,7 +2119,8 @@
         _a.experiences;
         var _b = _a.unhideAfterMs,
         unhideAfterMs = _b === void 0 ? 5000 : _b,
-        baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+        passthroughProps = _a.passthroughProps,
+        baseline = __rest(_a, ["component", "experiences", "unhideAfterMs", "passthroughProps"]);
 
     var logger = useNinetailed().logger;
 
@@ -2143,7 +2144,7 @@
         style: {
           opacity: 0
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
         ninetailed: {
           isPersonalized: false,
           audience: {
@@ -2153,7 +2154,7 @@
       })));
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
       ninetailed: {
         isPersonalized: false,
         audience: {
@@ -2167,7 +2168,8 @@
         Component = _a.component,
         _b = _a.loadingComponent,
         LoadingComponent = _b === void 0 ? DefaultExperienceLoadingComponent : _b,
-        baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
+        passthroughProps = _a.passthroughProps,
+        baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
 
     var _c = useExperience({
       baseline: baseline,
@@ -2194,18 +2196,19 @@
     }, [status, experience, profile]);
 
     if (!hasVariants) {
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline));
     }
 
     if (status === 'loading') {
       return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
+        passthroughProps: passthroughProps,
         experiences: experiences,
         component: Component
       }));
     }
 
     if (!experience) {
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
         key: baseline.id,
         ninetailed: {
           isPersonalized: false,
@@ -2222,7 +2225,7 @@
         variant: baseline,
         // the profile is definitely defined, otherwise there wouldn't be an experience selected
         profile: profile
-      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
         key: baseline.id,
         ninetailed: {
           isPersonalized: false,

package/lib/Experience/Experience.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Baseline, ExperienceConfiguration } from '@ninetailed/experience.js';
-export declare type ExperienceComponent<P extends Baseline> = React.ComponentType<Omit<P, 'id'> & {
+export declare type ExperienceComponent<P> = React.ComponentType<Omit<P, 'id'> & {
     ninetailed?: {
         isPersonalized: boolean;
         audience: {
@@ -8,21 +8,20 @@ export declare type ExperienceComponent<P extends Baseline> = React.ComponentTyp
         };
     };
 }>;
-export declare type ExperienceBaseProps<P extends Baseline = Baseline> = P & {
+export declare type ExperienceBaseProps<P, PassThroughProps extends Partial<P>> = Baseline<Pick<P, Exclude<keyof P, keyof PassThroughProps>>> & {
     experiences: ExperienceConfiguration[];
     component: ExperienceComponent<P> | React.ComponentType<P>;
+    passthroughProps?: PassThroughProps;
 };
-export declare type ExperienceLoadingComponent<P extends Baseline = Baseline> = React.ComponentType<ExperienceBaseProps<P>>;
-export declare type ExperienceProps<P extends Baseline> = ExperienceBaseProps<P> & {
+export declare type ExperienceLoadingComponent<P, PassThroughProps extends Partial<P>> = React.ComponentType<ExperienceBaseProps<P, PassThroughProps>>;
+export declare type ExperienceProps<P, PassThroughProps extends Partial<P>> = ExperienceBaseProps<P, PassThroughProps> & {
     experiences: ExperienceConfiguration[];
     component: ExperienceComponent<P> | React.ComponentType<P>;
-    loadingComponent?: ExperienceLoadingComponent<P>;
+    loadingComponent?: ExperienceLoadingComponent<P, PassThroughProps>;
 };
-declare type DefaultExperienceLoadingComponentProps = ExperienceBaseProps & {
+declare type DefaultExperienceLoadingComponentProps = ExperienceBaseProps<{}, {}> & {
     unhideAfterMs?: number;
 };
 export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
-export declare const Experience: <P extends {
-    id: string;
-}>({ experiences, component: Component, loadingComponent: LoadingComponent, ...baseline }: ExperienceProps<P>) => JSX.Element;
+export declare const Experience: <P extends Object, PassThroughProps extends Partial<P> = Partial<P>>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.2.0-beta.0",
+  "version": "2.2.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,9 +8,9 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "2.2.0-beta.0",
+    "@ninetailed/experience.js": "2.2.0",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.2.0-beta.0",
+    "@ninetailed/experience.js-shared": "2.2.0",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",