@ninetailed/experience.js-react 2.0.0-beta.24 → 2.0.0-beta.27

package/index.esm.js

@@ -2645,15 +2645,39 @@ const Experience = _a => {
   })));
 };
 
-const getSSRLoadingComponent = encodedExperienceVariantsMap => // eslint-disable-next-line react/display-name
-_a => {
+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 experience = experiences.find(experience => has$1(encodedExperienceVariantsMap, experience.id));
+  const {
+    experienceVariantsMap
+  } = useESR();
+  const experience = experiences.find(experience => has$1(experienceVariantsMap, experience.id));
 
   if (!experience) {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
@@ -2665,11 +2689,11 @@ _a => {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
   }
 
-  if (encodedExperienceVariantsMap[experience.id] === 0) {
+  if (experienceVariantsMap[experience.id] === 0) {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
   }
 
-  const variant = component.variants[encodedExperienceVariantsMap[experience.id] - 1];
+  const variant = component.variants[experienceVariantsMap[experience.id] - 1];
 
   if (!variant) {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
@@ -2678,4 +2702,4 @@ _a => {
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, variant));
 };
 
-export { Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, getSSRLoadingComponent, useNinetailed, usePersonalize, useProfile };
+export { ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };

package/index.umd.js

@@ -2190,49 +2190,69 @@
     })));
   };
 
-  var getSSRLoadingComponent = function getSSRLoadingComponent(encodedExperienceVariantsMap) {
-    // eslint-disable-next-line react/display-name
-    return function (_a) {
-      var experiences = _a.experiences,
-          Component = _a.component,
-          baseline = __rest(_a, ["experiences", "component"]);
-
-      var experience = experiences.find(function (experience) {
-        return has__default["default"](encodedExperienceVariantsMap, experience.id);
-      });
-
-      if (!experience) {
-        return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+  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);
 
-      var component = experience.components.find(function (component) {
-        return component.baseline.id === baseline.id;
-      });
+    if (context === undefined) {
+      throw new Error('The component using the the context must be a descendant of the ESRProvider');
+    }
 
-      if (!component) {
-        return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
-      }
+    return {
+      experienceVariantsMap: context.experienceVariantsMap
+    };
+  };
+  var ESRLoadingComponent = function ESRLoadingComponent(_a) {
+    var experiences = _a.experiences,
+        Component = _a.component,
+        baseline = __rest(_a, ["experiences", "component"]);
 
-      if (encodedExperienceVariantsMap[experience.id] === 0) {
-        return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
-      }
+    var experienceVariantsMap = useESR().experienceVariantsMap;
+    var experience = experiences.find(function (experience) {
+      return has__default["default"](experienceVariantsMap, experience.id);
+    });
 
-      var variant = component.variants[encodedExperienceVariantsMap[experience.id] - 1];
+    if (!experience) {
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+    }
 
-      if (!variant) {
-        return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
-      }
+    var component = experience.components.find(function (component) {
+      return component.baseline.id === baseline.id;
+    });
 
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant));
-    };
+    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;
   exports.Personalize = Personalize;
   exports.TrackHasSeenComponent = TrackHasSeenComponent;
-  exports.getSSRLoadingComponent = getSSRLoadingComponent;
   exports.useNinetailed = useNinetailed;
   exports.usePersonalize = usePersonalize;
   exports.useProfile = useProfile;

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/index.d.ts

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

package/lib/index.d.ts

@@ -9,5 +9,5 @@ export { Personalize } from './Personalize';
 export type { PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';
 export { TrackHasSeenComponent } from './TrackHasSeenComponent';
-export { Experience, getSSRLoadingComponent } from './Experience';
+export { Experience, ESRProvider, 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.24",
+  "version": "2.0.0-beta.27",
   "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.24",
+    "lodash": "^4.17.21",
+    "@ninetailed/experience.js": "2.0.0-beta.27",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.0-beta.24",
+    "@ninetailed/experience.js-shared": "2.0.0-beta.27",
     "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"

package/lib/Experience/getSSRLoadingComponent.d.ts

@@ -1,2 +0,0 @@
-import { ExperienceLoadingComponent } from './Experience';
-export declare const getSSRLoadingComponent: (encodedExperienceVariantsMap: Record<string, number>) => ExperienceLoadingComponent;