@ninetailed/experience.js-react 2.0.0-beta.22 → 2.0.0-beta.25

package/index.esm.js

@@ -3,6 +3,7 @@ import { Ninetailed, selectVariant, selectHasExperienceVariants, selectActiveExp
 import { useInView } from 'react-intersection-observer';
 import { isBrowser } from '@ninetailed/experience.js-shared';
 import get$1 from 'lodash/get';
+import has$1 from 'lodash/has';
 
 const NinetailedContext = /*#__PURE__*/createContext(undefined);
 
@@ -2333,6 +2334,31 @@ const MergeTag = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, value);
 };
 
+const TrackExperience = ({
+  children,
+  experience,
+  variant
+}) => {
+  const ninetailed = useNinetailed();
+  const {
+    ref,
+    inView
+  } = useInView({
+    triggerOnce: true
+  });
+  useEffect(() => {
+    if (isBrowser() && inView) {
+      ninetailed.trackExperience({
+        experience,
+        variant
+      });
+    }
+  }, [inView]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }), children);
+};
+
 var global$2 = global$w;
 var aCallable = aCallable$2;
 var toObject = toObject$5;
@@ -2569,7 +2595,10 @@ const Experience = _a => {
 
   if (status === 'loading') {
     if (LoadingComponent) {
-      return /*#__PURE__*/React.createElement(LoadingComponent, null);
+      return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
+        experiences: experiences,
+        component: Component
+      }));
     }
 
     return /*#__PURE__*/React.createElement("div", {
@@ -2588,19 +2617,7 @@ const Experience = _a => {
   }
 
   if (!experience || !variant) {
-    return /*#__PURE__*/React.createElement(TrackHasSeenComponent, {
-      variant: {
-        id: baseline.id,
-        audience: {
-          id: 'baseline'
-        },
-        hidden: false
-      },
-      audience: {
-        id: 'baseline'
-      },
-      isPersonalized: false
-    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
       key: baseline.id,
       ninetailed: {
         isPersonalized: false,
@@ -2608,34 +2625,71 @@ const Experience = _a => {
           id: 'baseline'
         }
       }
-    })));
+    }));
   }
 
-  return (
-    /*#__PURE__*/
-    // TODO this needs to be resolved when we move away from the old standard
-    React.createElement(TrackHasSeenComponent, {
-      variant: {
-        id: variant.id,
-        audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-        },
-        hidden: variant.hidden || false
-      },
+  return /*#__PURE__*/React.createElement(TrackExperience, {
+    experience: experience,
+    variant: {
+      id: variant.id,
+      hidden: variant.hidden || false
+    }
+  }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
+    key: `${experience.id}-${variant.id}`,
+    ninetailed: {
+      isPersonalized,
       audience: {
         id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-      },
-      isPersonalized: isPersonalized
-    }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
-      key: `${experience.id}-${variant.id}`,
-      ninetailed: {
-        isPersonalized,
-        audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-        }
       }
-    })))
-  );
+    }
+  })));
+};
+
+const ESRContext = /*#__PURE__*/React.createContext(undefined);
+const useESR = () => {
+  const context = React.useContext(ESRContext);
+
+  if (context === undefined) {
+    throw new Error('The component using the the context must be a descendant of the ESRProvider');
+  }
+
+  return {
+    experienceVariantsMap: context.experienceVariantsMap
+  };
+};
+const ESRLoadingComponent = _a => {
+  var {
+    experiences,
+    component: Component
+  } = _a,
+      baseline = __rest(_a, ["experiences", "component"]);
+
+  const {
+    experienceVariantsMap
+  } = useESR();
+  const experience = experiences.find(experience => has$1(experienceVariantsMap, experience.id));
+
+  if (!experience) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+  }
+
+  const component = experience.components.find(component => component.baseline.id === baseline.id);
+
+  if (!component) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+  }
+
+  if (experienceVariantsMap[experience.id] === 0) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+  }
+
+  const variant = component.variants[experienceVariantsMap[experience.id] - 1];
+
+  if (!variant) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, variant));
 };
 
-export { Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };
+export { ESRLoadingComponent, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };

package/index.umd.js

@@ -1,13 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('react-intersection-observer'), require('@ninetailed/experience.js-shared'), require('lodash/get')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'react-intersection-observer', '@ninetailed/experience.js-shared', 'lodash/get'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.reactIntersectionObserver, global.experience_jsShared, global.get$1));
-})(this, (function (exports, React, experience_js, reactIntersectionObserver, experience_jsShared, get$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('react-intersection-observer'), require('@ninetailed/experience.js-shared'), require('lodash/get'), require('lodash/has')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'react-intersection-observer', '@ninetailed/experience.js-shared', 'lodash/get', 'lodash/has'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.reactIntersectionObserver, global.experience_jsShared, global.get$1, global.has$1));
+})(this, (function (exports, React, experience_js, reactIntersectionObserver, experience_jsShared, get$1, has$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
+  var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
 
   var NinetailedContext = /*#__PURE__*/React.createContext(undefined);
 
@@ -1883,6 +1884,31 @@
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, value);
   };
 
+  var TrackExperience = function TrackExperience(_a) {
+    var children = _a.children,
+        experience = _a.experience,
+        variant = _a.variant;
+    var ninetailed = useNinetailed();
+
+    var _b = reactIntersectionObserver.useInView({
+      triggerOnce: true
+    }),
+        ref = _b.ref,
+        inView = _b.inView;
+
+    React.useEffect(function () {
+      if (experience_jsShared.isBrowser() && inView) {
+        ninetailed.trackExperience({
+          experience: experience,
+          variant: variant
+        });
+      }
+    }, [inView]);
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: ref
+    }), children);
+  };
+
   var global$2 = global$t;
   var aCallable = aCallable$2;
   var toObject = toObject$3;
@@ -2114,7 +2140,10 @@
 
     if (status === 'loading') {
       if (LoadingComponent) {
-        return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, null);
+        return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
+          experiences: experiences,
+          component: Component
+        }));
       }
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2133,19 +2162,7 @@
     }
 
     if (!experience || !variant) {
-      return /*#__PURE__*/React__default["default"].createElement(TrackHasSeenComponent, {
-        variant: {
-          id: baseline.id,
-          audience: {
-            id: 'baseline'
-          },
-          hidden: false
-        },
-        audience: {
-          id: 'baseline'
-        },
-        isPersonalized: false
-      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
         key: baseline.id,
         ninetailed: {
           isPersonalized: false,
@@ -2153,36 +2170,74 @@
             id: 'baseline'
           }
         }
-      })));
+      }));
     }
 
-    return (
-      /*#__PURE__*/
-      // TODO this needs to be resolved when we move away from the old standard
-      React__default["default"].createElement(TrackHasSeenComponent, {
-        variant: {
-          id: variant.id,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-          },
-          hidden: variant.hidden || false
-        },
+    return /*#__PURE__*/React__default["default"].createElement(TrackExperience, {
+      experience: experience,
+      variant: {
+        id: variant.id,
+        hidden: variant.hidden || false
+      }
+    }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
+      key: "".concat(experience.id, "-").concat(variant.id),
+      ninetailed: {
+        isPersonalized: isPersonalized,
         audience: {
           id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-        },
-        isPersonalized: isPersonalized
-      }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
-        key: "".concat(experience.id, "-").concat(variant.id),
-        ninetailed: {
-          isPersonalized: isPersonalized,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
-          }
         }
-      })))
-    );
+      }
+    })));
+  };
+
+  var ESRContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+  var useESR = function useESR() {
+    var context = React__default["default"].useContext(ESRContext);
+
+    if (context === undefined) {
+      throw new Error('The component using the the context must be a descendant of the ESRProvider');
+    }
+
+    return {
+      experienceVariantsMap: context.experienceVariantsMap
+    };
+  };
+  var ESRLoadingComponent = function ESRLoadingComponent(_a) {
+    var experiences = _a.experiences,
+        Component = _a.component,
+        baseline = __rest(_a, ["experiences", "component"]);
+
+    var experienceVariantsMap = useESR().experienceVariantsMap;
+    var experience = experiences.find(function (experience) {
+      return has__default["default"](experienceVariantsMap, experience.id);
+    });
+
+    if (!experience) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+    }
+
+    var component = experience.components.find(function (component) {
+      return component.baseline.id === baseline.id;
+    });
+
+    if (!component) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+    }
+
+    if (experienceVariantsMap[experience.id] === 0) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+    }
+
+    var variant = component.variants[experienceVariantsMap[experience.id] - 1];
+
+    if (!variant) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant));
   };
 
+  exports.ESRLoadingComponent = ESRLoadingComponent;
   exports.Experience = Experience;
   exports.MergeTag = MergeTag;
   exports.NinetailedProvider = NinetailedProvider;

package/lib/Experience/ESRLoadingComponent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ExperienceLoadingComponent } from './Experience';
+declare type ESRContextValue = {
+    experienceVariantsMap: Record<string, number>;
+};
+export declare const ESRContext: React.Context<ESRContextValue | undefined>;
+declare type ESRProviderProps = {
+    experienceVariantsMap: Record<string, number>;
+};
+export declare const ESRProvider: React.FC<ESRProviderProps>;
+export declare const useESR: () => {
+    experienceVariantsMap: Record<string, number>;
+};
+export declare const ESRLoadingComponent: ExperienceLoadingComponent;
+export {};

package/lib/Experience/Experience.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Baseline, ExperienceConfiguration } from '@ninetailed/experience.js';
-declare type ExperienceComponent<P extends Baseline> = React.ComponentType<Omit<P, 'id'> & {
+export declare type ExperienceComponent<P extends Baseline> = React.ComponentType<Omit<P, 'id'> & {
     ninetailed?: {
         isPersonalized: boolean;
         audience: {
@@ -8,12 +8,16 @@ declare type ExperienceComponent<P extends Baseline> = React.ComponentType<Omit<
         };
     };
 }>;
-declare type ExperienceProps<P extends Baseline> = P & {
+export declare type ExperienceBaseProps<P extends Baseline = Baseline> = P & {
     experiences: ExperienceConfiguration[];
     component: ExperienceComponent<P> | React.ComponentType<P>;
-    loadingComponent?: React.ComponentType;
+};
+export declare type ExperienceLoadingComponent<P extends Baseline = Baseline> = React.ComponentType<ExperienceBaseProps<P>>;
+export declare type ExperienceProps<P extends Baseline> = ExperienceBaseProps<P> & {
+    experiences: ExperienceConfiguration[];
+    component: ExperienceComponent<P> | React.ComponentType<P>;
+    loadingComponent?: ExperienceLoadingComponent<P>;
 };
 export declare const Experience: <P extends {
     id: string;
 }>({ experiences, component: Component, loadingComponent: LoadingComponent, ...baseline }: ExperienceProps<P>) => JSX.Element;
-export {};

package/lib/Experience/TrackExperience.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TrackExperiencePayload } from '@ninetailed/experience.js';
+export declare const TrackExperience: React.FC<React.PropsWithChildren<TrackExperiencePayload>>;

package/lib/Experience/index.d.ts

@@ -1 +1,3 @@
 export { Experience } from './Experience';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';
+export { ESRLoadingComponent } from './ESRLoadingComponent';

package/lib/index.d.ts

@@ -9,4 +9,5 @@ export { Personalize } from './Personalize';
 export type { PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';
 export { TrackHasSeenComponent } from './TrackHasSeenComponent';
-export { Experience } from './Experience';
+export { Experience, ESRLoadingComponent } from './Experience';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.0.0-beta.22",
+  "version": "2.0.0-beta.25",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
-    "@ninetailed/experience.js": "2.0.0-beta.22",
+    "lodash": "^4.17.21",
+    "@ninetailed/experience.js": "2.0.0-beta.25",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.0-beta.22",
+    "@ninetailed/experience.js-shared": "2.0.0-beta.25",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",
     "i18n-iso-countries": "^7.3.0",
-    "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
     "murmurhash-js": "^1.0.0",
     "react-intersection-observer": "^8.33.1"