@ninetailed/experience.js-react 1.0.0 → 1.0.1-beta.0

package/index.esm.js

@@ -1,6 +1,6 @@
-import React, { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import React, { createContext, useMemo, useContext, useState, useEffect } from 'react';
 import { Ninetailed, selectVariant } from '@ninetailed/experience.js';
-import VisibilitySensor from 'react-visibility-sensor';
+import { useInView } from 'react-intersection-observer';
 import { isBrowser } from '@ninetailed/experience.js-shared';
 import get$1 from 'lodash/get';
 
@@ -1631,6 +1631,33 @@ const usePersonalize = (baseline, variants, options = {
   return selectVariant(baseline, variants, profile, options);
 };
 
+const TrackHasSeen = ({
+  children,
+  variant,
+  audience,
+  isPersonalized
+}) => {
+  const ninetailed = useNinetailed();
+  const {
+    ref,
+    inView
+  } = useInView({
+    triggerOnce: true
+  });
+  useEffect(() => {
+    if (isBrowser() && inView) {
+      ninetailed.trackHasSeenComponent({
+        variant,
+        audience,
+        isPersonalized
+      });
+    }
+  }, [inView]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }), children);
+};
+
 const Personalize = _a => {
   var {
     component: Component,
@@ -1640,7 +1667,6 @@ const Personalize = _a => {
   } = _a,
       baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
 
-  const ninetailed = useNinetailed();
   const {
     loading,
     variant,
@@ -1649,24 +1675,7 @@ const Personalize = _a => {
   } = usePersonalize(baseline, variants, {
     holdout
   });
-  const [isVisible, setIsVisible] = useState(false);
-  const onChangeVisibility = useCallback(visibility => {
-    if (visibility) {
-      setIsVisible(true);
-    }
-  }, []);
-  const trackCallFired = useRef(false);
   const hasVariants = variants.length > 0;
-  useEffect(() => {
-    if (isBrowser() && hasVariants && !loading && isVisible && variant && audience && audience.id !== 'baseline' && !trackCallFired.current) {
-      ninetailed.trackHasSeenComponent({
-        variant,
-        audience,
-        isPersonalized
-      });
-      trackCallFired.current = true;
-    }
-  }, [loading, isVisible, variant, baseline, isPersonalized]);
 
   if (!hasVariants) {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
@@ -1695,11 +1704,12 @@ const Personalize = _a => {
     })));
   }
 
-  return /*#__PURE__*/React.createElement(VisibilitySensor, {
-    key: `${audience.id}-${variant.id}`,
-    partialVisibility: true,
-    onChange: onChangeVisibility
+  return /*#__PURE__*/React.createElement(TrackHasSeen, {
+    variant: variant,
+    audience: audience,
+    isPersonalized: isPersonalized
   }, /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
+    key: `${audience.id}-${variant.id}`,
     ninetailed: {
       isPersonalized,
       audience

package/index.umd.js

@@ -1,13 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('react-visibility-sensor'), require('@ninetailed/experience.js-shared'), require('lodash/get')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'react-visibility-sensor', '@ninetailed/experience.js-shared', 'lodash/get'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.VisibilitySensor, global.experience_jsShared, global.get$1));
-})(this, (function (exports, React, experience_js, VisibilitySensor, 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')) :
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var VisibilitySensor__default = /*#__PURE__*/_interopDefaultLegacy(VisibilitySensor);
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
 
   var NinetailedContext = /*#__PURE__*/React.createContext(undefined);
@@ -113,6 +112,33 @@
     return experience_js.selectVariant(baseline, variants, profile, options);
   };
 
+  var TrackHasSeen = function TrackHasSeen(_a) {
+    var children = _a.children,
+        variant = _a.variant,
+        audience = _a.audience,
+        isPersonalized = _a.isPersonalized;
+    var ninetailed = useNinetailed();
+
+    var _b = reactIntersectionObserver.useInView({
+      triggerOnce: true
+    }),
+        ref = _b.ref,
+        inView = _b.inView;
+
+    React.useEffect(function () {
+      if (experience_jsShared.isBrowser() && inView) {
+        ninetailed.trackHasSeenComponent({
+          variant: variant,
+          audience: audience,
+          isPersonalized: isPersonalized
+        });
+      }
+    }, [inView]);
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: ref
+    }), children);
+  };
+
   var Personalize = function Personalize(_a) {
     var Component = _a.component,
         LoadingComponent = _a.loadingComponent,
@@ -122,8 +148,6 @@
         holdout = _c === void 0 ? -1 : _c,
         baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
 
-    var ninetailed = useNinetailed();
-
     var _d = usePersonalize(baseline, variants, {
       holdout: holdout
     }),
@@ -132,27 +156,7 @@
         isPersonalized = _d.isPersonalized,
         audience = _d.audience;
 
-    var _e = React.useState(false),
-        isVisible = _e[0],
-        setIsVisible = _e[1];
-
-    var onChangeVisibility = React.useCallback(function (visibility) {
-      if (visibility) {
-        setIsVisible(true);
-      }
-    }, []);
-    var trackCallFired = React.useRef(false);
     var hasVariants = variants.length > 0;
-    React.useEffect(function () {
-      if (experience_jsShared.isBrowser() && hasVariants && !loading && isVisible && variant && audience && audience.id !== 'baseline' && !trackCallFired.current) {
-        ninetailed.trackHasSeenComponent({
-          variant: variant,
-          audience: audience,
-          isPersonalized: isPersonalized
-        });
-        trackCallFired.current = true;
-      }
-    }, [loading, isVisible, variant, baseline, isPersonalized]);
 
     if (!hasVariants) {
       return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
@@ -181,11 +185,12 @@
       })));
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(VisibilitySensor__default["default"], {
-      key: "".concat(audience.id, "-").concat(variant.id),
-      partialVisibility: true,
-      onChange: onChangeVisibility
+    return /*#__PURE__*/React__default["default"].createElement(TrackHasSeen, {
+      variant: variant,
+      audience: audience,
+      isPersonalized: isPersonalized
     }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
+      key: "".concat(audience.id, "-").concat(variant.id),
       ninetailed: {
         isPersonalized: isPersonalized,
         audience: audience

package/lib/Personalize.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type Variant<P> = {
+export declare type Variant<P = unknown> = {
     id: string;
     audience: {
         id: string;

package/lib/index.d.ts

@@ -1,6 +1,6 @@
+export { Profile } from '@ninetailed/experience.js-shared';
 export { NinetailedProvider, NinetailedProviderProps, } from './NinetailedProvider';
 export { useNinetailed } from './useNinetailed';
 export { useProfile } from './useProfile';
 export { Personalize, PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';
-export { Profile } from '@ninetailed/experience.js-shared';

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
-    "@ninetailed/experience.js-shared": "1.0.0",
+    "@ninetailed/experience.js-shared": "1.0.1-beta.0",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",
     "i18n-iso-countries": "^7.3.0",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "1.0.0",
-    "analytics": "^0.8.0"
+    "@ninetailed/experience.js": "1.0.1-beta.0",
+    "analytics": "^0.8.0",
+    "react-intersection-observer": "^8.33.1"
   },
   "main": "./index.umd.js",
   "module": "./index.esm.js",