@ninetailed/experience.js-react 2.0.0-beta.4 → 2.0.0-beta.42

package/index.esm.js

@@ -1,8 +1,9 @@
 import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
-import { Ninetailed, selectVariant, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import { Ninetailed, selectVariant, selectDistribution, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
 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,37 @@ const MergeTag = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, value);
 };
 
+const TrackExperience = ({
+  children,
+  experience,
+  variant,
+  profile
+}) => {
+  const ninetailed = useNinetailed();
+  const {
+    ref,
+    inView
+  } = useInView({
+    triggerOnce: true
+  });
+  useEffect(() => {
+    if (isBrowser() && inView) {
+      const distribution = selectDistribution({
+        experience,
+        profile
+      });
+      ninetailed.trackExperience({
+        experience,
+        component: variant,
+        variant: distribution.index
+      });
+    }
+  }, [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;
@@ -2515,7 +2547,8 @@ const useJoinExperiment = ({
 }) => {
   const {
     identify
-  } = useNinetailed();
+  } = useNinetailed(); // TODO this gets called twice
+
   return useCallback(({
     experiment,
     profile
@@ -2523,7 +2556,7 @@ const useJoinExperiment = ({
     const activeExperiments = selectActiveExperiments(experiences, profile);
 
     if (!activeExperiments.length && experiment.type === 'nt_experiment') {
-      identify('', {
+      identify(profile.id, {
         [`${EXPERIENCE_TRAIT_PREFIX}${experiment.id}`]: true
       });
     }
@@ -2568,7 +2601,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", {
@@ -2586,55 +2622,106 @@ const Experience = _a => {
     })));
   }
 
-  if (!experience || !variant) {
-    return /*#__PURE__*/React.createElement(TrackHasSeenComponent, {
-      variant: {
-        id: baseline.id,
+  if (!experience) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+      key: baseline.id,
+      ninetailed: {
+        isPersonalized: false,
         audience: {
           id: 'baseline'
-        },
-        hidden: false
-      },
-      audience: {
-        id: 'baseline'
-      },
-      isPersonalized: false
+        }
+      }
+    }));
+  }
+
+  if (!variant) {
+    return /*#__PURE__*/React.createElement(TrackExperience, {
+      experience: experience,
+      variant: baseline,
+      // the profile is definitely defined, otherwise there wouldn't be an experience selected
+      profile: profile
     }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
       key: baseline.id,
       ninetailed: {
         isPersonalized: false,
         audience: {
-          id: 'baseline'
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
         }
       }
     })));
   }
 
-  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: variant,
+    // the profile is definitely defined, otherwise there wouldn't be an experience selected
+    profile: profile
+  }, (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'
-        }
+        id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
       }
-    })))
-  );
+    }
+  })));
+};
+
+const ESRContext = /*#__PURE__*/React.createContext(undefined);
+const ESRProvider = ({
+  experienceVariantsMap,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(ESRContext.Provider, {
+    value: {
+      experienceVariantsMap
+    }
+  }, children);
+};
+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, ESRProvider, 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,37 @@
     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,
+        profile = _a.profile;
+    var ninetailed = useNinetailed();
+
+    var _b = reactIntersectionObserver.useInView({
+      triggerOnce: true
+    }),
+        ref = _b.ref,
+        inView = _b.inView;
+
+    React.useEffect(function () {
+      if (experience_jsShared.isBrowser() && inView) {
+        var distribution = experience_js.selectDistribution({
+          experience: experience,
+          profile: profile
+        });
+        ninetailed.trackExperience({
+          experience: experience,
+          component: variant,
+          variant: distribution.index
+        });
+      }
+    }, [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;
@@ -2063,7 +2095,8 @@
 
   var useJoinExperiment = function useJoinExperiment(_a) {
     var experiences = _a.experiences;
-    var identify = useNinetailed().identify;
+    var identify = useNinetailed().identify; // TODO this gets called twice
+
     return React.useCallback(function (_a) {
       var _b;
 
@@ -2072,7 +2105,7 @@
       var activeExperiments = experience_js.selectActiveExperiments(experiences, profile);
 
       if (!activeExperiments.length && experiment.type === 'nt_experiment') {
-        identify('', (_b = {}, _b["".concat(EXPERIENCE_TRAIT_PREFIX).concat(experiment.id)] = true, _b));
+        identify(profile.id, (_b = {}, _b["".concat(EXPERIENCE_TRAIT_PREFIX).concat(experiment.id)] = true, _b));
       }
     }, [experiences]);
   };
@@ -2113,7 +2146,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", {
@@ -2131,57 +2167,109 @@
       })));
     }
 
-    if (!experience || !variant) {
-      return /*#__PURE__*/React__default["default"].createElement(TrackHasSeenComponent, {
-        variant: {
-          id: baseline.id,
+    if (!experience) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+        key: baseline.id,
+        ninetailed: {
+          isPersonalized: false,
           audience: {
             id: 'baseline'
-          },
-          hidden: false
-        },
-        audience: {
-          id: 'baseline'
-        },
-        isPersonalized: false
+          }
+        }
+      }));
+    }
+
+    if (!variant) {
+      return /*#__PURE__*/React__default["default"].createElement(TrackExperience, {
+        experience: experience,
+        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, {
         key: baseline.id,
         ninetailed: {
           isPersonalized: false,
           audience: {
-            id: 'baseline'
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
           }
         }
       })));
     }
 
-    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: variant,
+      // the profile is definitely defined, otherwise there wouldn't be an experience selected
+      profile: profile
+    }, (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'
-          }
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
         }
-      })))
-    );
+      }
+    })));
+  };
+
+  var ESRContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+  var ESRProvider = function ESRProvider(_a) {
+    var experienceVariantsMap = _a.experienceVariantsMap,
+        children = _a.children;
+    return /*#__PURE__*/React__default["default"].createElement(ESRContext.Provider, {
+      value: {
+        experienceVariantsMap: experienceVariantsMap
+      }
+    }, children);
+  };
+  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.ESRProvider = ESRProvider;
   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,12 @@
+import React from 'react';
+import { Profile } from '@ninetailed/experience.js-shared';
+import { ExperienceConfiguration } from '@ninetailed/experience.js';
+declare type TrackExperienceProps = {
+    experience: ExperienceConfiguration;
+    variant: {
+        id: string;
+    };
+    profile: Profile;
+};
+export declare const TrackExperience: React.FC<React.PropsWithChildren<TrackExperienceProps>>;
+export {};

package/lib/Experience/index.d.ts

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

package/lib/Experience/useJoinExperiment.d.ts

@@ -1,5 +1,5 @@
-import { ExperienceConfiguration } from './types';
 import { Profile } from '@ninetailed/experience.js';
+import { ExperienceConfiguration } from './types';
 declare type UseJoinExperimentArgs = {
     experiences: ExperienceConfiguration[];
 };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export type { Profile, Variant } from '@ninetailed/experience.js-shared';
-export type { ExperienceConfiguration, ExperienceType, } from '@ninetailed/experience.js';
+export type { ExperienceConfiguration, ExperienceType, EXPERIENCE_TRAIT_PREFIX, } from '@ninetailed/experience.js';
 export { NinetailedProvider } from './NinetailedProvider';
 export type { NinetailedProviderProps } from './NinetailedProvider';
 export { useNinetailed } from './useNinetailed';
@@ -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, ESRProvider, ESRLoadingComponent } from './Experience';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.42",
   "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.4",
+    "lodash": "^4.17.21",
+    "@ninetailed/experience.js": "2.0.0-beta.42",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.0-beta.4",
+    "@ninetailed/experience.js-shared": "2.0.0-beta.42",
     "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"
   },
   "main": "./index.umd.js",

package/lib/Experience/useSelectActiveExperiments.d.ts

@@ -1,9 +0,0 @@
-export declare const useSelectActiveExperiments: () => {
-    loading: boolean;
-    experiments: never[];
-    error: Error;
-} | {
-    loading: boolean;
-    experiments: ExperienceConfiguration[];
-    error: undefined;
-};

package/lib/Experience/useSelectExperience.d.ts

@@ -1,10 +0,0 @@
-import { ExperienceConfiguration } from './types';
-export declare const useSelectExperience: (experiences: ExperienceConfiguration[]) => {
-    loading: boolean;
-    experience: undefined;
-    error: Error;
-} | {
-    loading: boolean;
-    experience: any;
-    error: undefined;
-};

package/lib/Experience/useSelectVariant.d.ts

@@ -1,22 +0,0 @@
-import { Baseline, ExperienceConfiguration, Variant } from './types';
-declare type Loading<T> = {
-    loading: true;
-    variant?: never;
-    experience?: never;
-    error: null;
-};
-declare type Success<T> = {
-    loading: false;
-    variant: Variant<T>;
-    experience: ExperienceConfiguration | undefined;
-    error: null;
-};
-declare type Fail<T> = {
-    loading: false;
-    variant?: never;
-    experience?: never;
-    error: Error;
-};
-declare type SelectVariantResult<T> = Loading<T> | Success<T> | Fail<T>;
-export declare const useSelectVariant: <T extends Baseline<Object>>(experiences: ExperienceConfiguration[], baseline: T) => SelectVariantResult<T>;
-export {};