@ninetailed/experience.js-react 2.0.1 → 2.1.0

package/index.esm.js

@@ -30,7 +30,9 @@ const NinetailedProvider = ({
   profile,
   locale,
   requestTimeout,
-  plugins: _plugins = []
+  plugins: _plugins = [],
+  onLog,
+  onError
 }) => {
   const ninetailed = useMemo(() => new Ninetailed({
     clientId,
@@ -41,7 +43,9 @@ const NinetailedProvider = ({
     plugins: _plugins,
     profile,
     locale,
-    requestTimeout
+    requestTimeout,
+    onLog,
+    onError
   }), []);
   return /*#__PURE__*/React.createElement(NinetailedContext.Provider, {
     value: ninetailed
@@ -2563,11 +2567,58 @@ const useJoinExperiment = ({
   }, [experiences]);
 };
 
+const DefaultExperienceLoadingComponent = _a => {
+  var {
+    component: Component,
+    experiences,
+    unhideAfterMs = 5000
+  } = _a,
+      baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+
+  const {
+    logger
+  } = useNinetailed();
+  const [hidden, setHidden] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHidden(false);
+      logger.error(new Error(`The experience was still in loading state after ${unhideAfterMs}ms. That happens when no events are sent to the Ninetailed API. The baseline is now shown instead.`));
+    }, unhideAfterMs);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  if (hidden) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "hide",
+      style: {
+        opacity: 0
+      }
+    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    ninetailed: {
+      isPersonalized: false,
+      audience: {
+        id: 'baseline'
+      }
+    }
+  }));
+};
 const Experience = _a => {
   var {
     experiences,
     component: Component,
-    loadingComponent: LoadingComponent
+    loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent
   } = _a,
       baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
 
@@ -2600,26 +2651,10 @@ const Experience = _a => {
   }
 
   if (status === 'loading') {
-    if (LoadingComponent) {
-      return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
-        experiences: experiences,
-        component: Component
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      key: "hide",
-      style: {
-        opacity: 0
-      }
-    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
-      ninetailed: {
-        isPersonalized: false,
-        audience: {
-          id: 'baseline'
-        }
-      }
-    })));
+    return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
+      experiences: experiences,
+      component: Component
+    }));
   }
 
   if (!experience) {
@@ -2724,4 +2759,4 @@ const ESRLoadingComponent = _a => {
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, variant));
 };
 
-export { ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };
+export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };

package/index.umd.js

@@ -36,7 +36,9 @@
         locale = _a.locale,
         requestTimeout = _a.requestTimeout,
         _c = _a.plugins,
-        plugins = _c === void 0 ? [] : _c;
+        plugins = _c === void 0 ? [] : _c,
+        onLog = _a.onLog,
+        onError = _a.onError;
     var ninetailed = React.useMemo(function () {
       return new experience_js.Ninetailed({
         clientId: clientId,
@@ -47,7 +49,9 @@
         plugins: plugins,
         profile: profile,
         locale: locale,
-        requestTimeout: requestTimeout
+        requestTimeout: requestTimeout,
+        onLog: onLog,
+        onError: onError
       });
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(NinetailedContext.Provider, {
@@ -2110,23 +2114,72 @@
     }, [experiences]);
   };
 
+  var DefaultExperienceLoadingComponent = function DefaultExperienceLoadingComponent(_a) {
+    var Component = _a.component;
+        _a.experiences;
+        var _b = _a.unhideAfterMs,
+        unhideAfterMs = _b === void 0 ? 5000 : _b,
+        baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+
+    var logger = useNinetailed().logger;
+
+    var _c = React.useState(true),
+        hidden = _c[0],
+        setHidden = _c[1];
+
+    React.useEffect(function () {
+      var timer = setTimeout(function () {
+        setHidden(false);
+        logger.error(new Error("The experience was still in loading state after ".concat(unhideAfterMs, "ms. That happens when no events are sent to the Ninetailed API. The baseline is now shown instead.")));
+      }, unhideAfterMs);
+      return function () {
+        clearTimeout(timer);
+      };
+    }, []);
+
+    if (hidden) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: "hide",
+        style: {
+          opacity: 0
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
+        }
+      })));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
+  };
   var Experience = function Experience(_a) {
     var experiences = _a.experiences,
         Component = _a.component,
-        LoadingComponent = _a.loadingComponent,
+        _b = _a.loadingComponent,
+        LoadingComponent = _b === void 0 ? DefaultExperienceLoadingComponent : _b,
         baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
 
-    var _b = useExperience({
+    var _c = useExperience({
       baseline: baseline,
       experiences: experiences
     }),
-        status = _b.status,
-        hasVariants = _b.hasVariants,
-        experience = _b.experience,
-        variant = _b.variant,
-        audience = _b.audience,
-        isPersonalized = _b.isPersonalized,
-        profile = _b.profile;
+        status = _c.status,
+        hasVariants = _c.hasVariants,
+        experience = _c.experience,
+        variant = _c.variant,
+        audience = _c.audience,
+        isPersonalized = _c.isPersonalized,
+        profile = _c.profile;
 
     var joinExperiment = useJoinExperiment({
       experiences: experiences
@@ -2145,26 +2198,10 @@
     }
 
     if (status === 'loading') {
-      if (LoadingComponent) {
-        return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
-          experiences: experiences,
-          component: Component
-        }));
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: "hide",
-        style: {
-          opacity: 0
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: 'baseline'
-          }
-        }
-      })));
+      return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
+        experiences: experiences,
+        component: Component
+      }));
     }
 
     if (!experience) {
@@ -2268,6 +2305,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant));
   };
 
+  exports.DefaultExperienceLoadingComponent = DefaultExperienceLoadingComponent;
   exports.ESRLoadingComponent = ESRLoadingComponent;
   exports.ESRProvider = ESRProvider;
   exports.Experience = Experience;

package/lib/Experience/Experience.d.ts

@@ -18,6 +18,11 @@ export declare type ExperienceProps<P extends Baseline> = ExperienceBaseProps<P>
     component: ExperienceComponent<P> | React.ComponentType<P>;
     loadingComponent?: ExperienceLoadingComponent<P>;
 };
+declare type DefaultExperienceLoadingComponentProps = ExperienceBaseProps & {
+    unhideAfterMs?: number;
+};
+export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
 export declare const Experience: <P extends {
     id: string;
 }>({ experiences, component: Component, loadingComponent: LoadingComponent, ...baseline }: ExperienceProps<P>) => JSX.Element;
+export {};

package/lib/Experience/ExperimentsContext.d.ts

@@ -1,4 +1,4 @@
-import { ExperienceConfiguration } from './types';
+import { ExperienceConfiguration } from '@ninetailed/experience.js';
 declare type ExperimentsContextValue = {
     experiments: ExperienceConfiguration[];
 };

package/lib/Experience/ExperimentsProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExperienceConfiguration } from './types';
+import { ExperienceConfiguration } from '@ninetailed/experience.js';
 declare type ExperimentsProviderProps = {
     experiments: ExperienceConfiguration[];
 };

package/lib/Experience/index.d.ts

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

package/lib/Experience/types/index.d.ts

@@ -1,4 +1,3 @@
 export type { Baseline } from './Baseline';
 export type { Variant } from './Variant';
 export type { BaselineWithVariants } from './BaselineWithVariants';
-export type { ExperienceConfiguration } from './ExperienceConfiguration';

package/lib/Experience/useJoinExperiment.d.ts

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

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 './Experience/types';
 export declare type NinetailedProviderProps = {
     clientId: string;
     environment?: string;
@@ -12,5 +12,7 @@ export declare type NinetailedProviderProps = {
     profile?: Profile;
     locale?: Locale;
     requestTimeout?: number;
+    onLog?: OnLogHandler;
+    onError?: OnErrorHandler;
 };
 export declare const NinetailedProvider: React.FC<React.PropsWithChildren<NinetailedProviderProps>>;

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, ESRProvider, ESRLoadingComponent } from './Experience';
+export { Experience, ESRProvider, ESRLoadingComponent, DefaultExperienceLoadingComponent } from './Experience';
 export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "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.0.1",
+    "@ninetailed/experience.js": "2.1.0",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.1",
+    "@ninetailed/experience.js-shared": "2.1.0",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",
     "i18n-iso-countries": "^7.3.0",
-    "loglevel": "^1.8.0",
     "murmurhash-js": "^1.0.0",
+    "diary": "^0.3.1",
     "react-intersection-observer": "^8.33.1"
   },
   "main": "./index.umd.js",