@ninetailed/experience.js-react 2.2.9-beta.0 → 3.0.1-beta.4

package/index.esm.js

@@ -1,7 +1,8 @@
-import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useMemo, useContext, useState, useRef, useEffect, useCallback } from 'react';
 import { Ninetailed, selectVariant, selectDistribution, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import isEqual from 'lodash/isEqual';
+import { logger, isBrowser } from '@ninetailed/experience.js-shared';
 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';
 
@@ -1612,11 +1613,37 @@ $$2({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
 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.
+   */
+
   useEffect(() => {
-    return ninetailed.onProfileChange(profileState => {
-      setProfileState(profileState);
+    ninetailed.onProfileChange(profileState => {
+      if (isEqual(profileState, profileStateRef.current)) {
+        logger.debug("Profile State Did Not Change", profileState);
+        return;
+      } else {
+        setProfileState(profileState);
+        profileStateRef.current = profileState;
+        logger.debug("Profile State Changed", profileState);
+      }
     });
   }, []);
+  /**
+   * Old implementation without profile state deep comparison
+   */
+
+  /*useEffect(() => {
+   return ninetailed.onProfileChange((profileState) => {
+     console.log('profileState', profileState);
+     setProfileState(profileState);
+   });
+  }, []);*/
+
   return Object.assign(Object.assign({}, profileState), {
     loading: profileState.status === 'loading'
   });
@@ -2487,16 +2514,19 @@ const useExperience = ({
   });
 
   if (status === 'loading') {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
 
   if (status === 'error') {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
 
   if (!profile) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
@@ -2509,6 +2539,7 @@ const useExperience = ({
   });
 
   if (!experience) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
@@ -2731,9 +2762,10 @@ const useESR = () => {
 const ESRLoadingComponent = _a => {
   var {
     experiences,
-    component: Component
+    component: Component,
+    passthroughProps
   } = _a,
-      baseline = __rest(_a, ["experiences", "component"]);
+      baseline = __rest(_a, ["experiences", "component", "passthroughProps"]);
 
   const {
     experienceVariantsMap
@@ -2741,26 +2773,61 @@ const ESRLoadingComponent = _a => {
   const experience = experiences.find(experience => has$1(experienceVariantsMap, experience.id));
 
   if (!experience) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
   }
 
   const component = experience.components.find(component => component.baseline.id === baseline.id);
 
   if (!component) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
   }
 
   if (experienceVariantsMap[experience.id] === 0) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline));
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: '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({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
   }
 
-  return /*#__PURE__*/React.createElement(Component, Object.assign({}, variant));
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, variant, {
+    ninetailed: {
+      isPersonalized: false,
+      audience: {
+        id: 'baseline'
+      }
+    }
+  }));
 };
 
 export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };

package/index.umd.js

@@ -1,12 +1,13 @@
 (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'), 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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('lodash/isEqual'), require('@ninetailed/experience.js-shared'), require('react-intersection-observer'), require('lodash/get'), require('lodash/has')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'lodash/isEqual', '@ninetailed/experience.js-shared', 'react-intersection-observer', 'lodash/get', 'lodash/has'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.isEqual, global.experience_jsShared, global.reactIntersectionObserver, global.get$1, global.has$1));
+})(this, (function (exports, React, experience_js, isEqual, experience_jsShared, reactIntersectionObserver, 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 isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
   var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
 
@@ -116,11 +117,37 @@
         profileState = _a[0],
         setProfileState = _a[1];
 
+    var profileStateRef = React.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.
+     */
+
     React.useEffect(function () {
-      return ninetailed.onProfileChange(function (profileState) {
-        setProfileState(profileState);
+      ninetailed.onProfileChange(function (profileState) {
+        if (isEqual__default["default"](profileState, profileStateRef.current)) {
+          experience_jsShared.logger.debug("Profile State Did Not Change", profileState);
+          return;
+        } else {
+          setProfileState(profileState);
+          profileStateRef.current = profileState;
+          experience_jsShared.logger.debug("Profile State Changed", profileState);
+        }
       });
     }, []);
+    /**
+     * Old implementation without profile state deep comparison
+     */
+
+    /*useEffect(() => {
+     return ninetailed.onProfileChange((profileState) => {
+       console.log('profileState', profileState);
+       setProfileState(profileState);
+     });
+    }, []);*/
+
     return __assign(__assign({}, profileState), {
       loading: profileState.status === 'loading'
     });
@@ -2038,16 +2065,19 @@
     });
 
     if (status === 'loading') {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
 
     if (status === 'error') {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
 
     if (!profile) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
@@ -2060,6 +2090,7 @@
     });
 
     if (!experience) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
@@ -2277,7 +2308,8 @@
   var ESRLoadingComponent = function ESRLoadingComponent(_a) {
     var experiences = _a.experiences,
         Component = _a.component,
-        baseline = __rest(_a, ["experiences", "component"]);
+        passthroughProps = _a.passthroughProps,
+        baseline = __rest(_a, ["experiences", "component", "passthroughProps"]);
 
     var experienceVariantsMap = useESR().experienceVariantsMap;
     var experience = experiences.find(function (experience) {
@@ -2285,7 +2317,14 @@
     });
 
     if (!experience) {
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
+        }
+      }));
     }
 
     var component = experience.components.find(function (component) {
@@ -2293,20 +2332,48 @@
     });
 
     if (!component) {
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
+        }
+      }));
     }
 
     if (experienceVariantsMap[experience.id] === 0) {
-      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline));
+      return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: '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({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
+        }
+      }));
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant));
+    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, passthroughProps, variant, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
   };
 
   exports.DefaultExperienceLoadingComponent = DefaultExperienceLoadingComponent;

package/lib/Experience/ESRLoadingComponent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExperienceLoadingComponent } from './Experience';
+import { ExperienceBaseProps } from './Experience';
 declare type ESRContextValue = {
     experienceVariantsMap: Record<string, number>;
 };
@@ -11,5 +11,5 @@ export declare const ESRProvider: React.FC<ESRProviderProps>;
 export declare const useESR: () => {
     experienceVariantsMap: Record<string, number>;
 };
-export declare const ESRLoadingComponent: ExperienceLoadingComponent;
+export declare const ESRLoadingComponent: <P extends Record<string, unknown>>({ experiences, component: Component, passthroughProps, ...baseline }: ExperienceBaseProps<P, Partial<P>>) => JSX.Element;
 export {};

package/lib/NinetailedProvider.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnalyticsPlugin } from 'analytics';
-import { OnErrorHandler, OnLogHandler, ExperienceConfiguration } from '@ninetailed/experience.js';
-import { Profile, Locale } from '@ninetailed/experience.js-shared';
+import { ExperienceConfiguration } from '@ninetailed/experience.js';
+import { Profile, Locale, OnErrorHandler, OnLogHandler } from '@ninetailed/experience.js-shared';
 export declare type NinetailedProviderProps = {
     clientId: string;
     environment?: string;

package/lib/useProfile.d.ts

@@ -8,7 +8,39 @@ export declare const useProfile: () => {
     loading: boolean;
     from: "api" | "hydrated";
     status: "success";
-    profile: import("@ninetailed/experience.js").Profile;
+    profile: {
+        id: string;
+        random: number;
+        audiences: string[];
+        traits: import("@ninetailed/experience.js-shared").Traits;
+        location: {
+            coordinates?: {
+                latitude: number;
+                longitude: number;
+            } | undefined;
+            city?: string | undefined;
+            postalCode?: string | undefined;
+            region?: string | undefined;
+            regionCode?: string | undefined;
+            country?: string | undefined;
+            countryCode?: string | undefined;
+            continent?: string | undefined;
+            timezone?: string | undefined;
+        };
+        session: {
+            isReturningVisitor: boolean;
+            ladingPage: {
+                path: string;
+                url: string;
+                query: Record<string, string>;
+                referrer: string;
+                search: string;
+            };
+            count: number;
+            activeSessionLength: number;
+            averageSessionLength: number;
+        };
+    };
     error: null;
 } | {
     loading: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.2.9-beta.0",
+  "version": "3.0.1-beta.4",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,15 +8,15 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "2.2.9-beta.0",
-    "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.2.9-beta.0",
-    "uuid": "^8.3.2",
+    "@ninetailed/experience.js": "3.0.1-beta.4",
+    "@ninetailed/experience.js-shared": "3.0.1-beta.4",
     "ts-toolbelt": "^9.6.0",
+    "diary": "^0.3.1",
+    "zod": "^3.18.0",
     "locale-enum": "^1.1.1",
     "i18n-iso-countries": "^7.3.0",
+    "analytics": "^0.8.0",
     "murmurhash-js": "^1.0.0",
-    "diary": "^0.3.1",
     "react-intersection-observer": "^8.33.1"
   },
   "main": "./index.umd.js",