@ninetailed/experience.js-react 1.0.0-beta.12

package/index.umd.js

@@ -0,0 +1,200 @@
+(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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'react-visibility-sensor', '@ninetailed/experience.js-shared'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.VisibilitySensor, global.experience_jsShared));
+})(this, (function (exports, React, experience_js, VisibilitySensor, experience_jsShared) { '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 NinetailedContext = /*#__PURE__*/React.createContext(undefined);
+
+  var NinetailedProvider = function NinetailedProvider(_a) {
+    var children = _a.children,
+        clientId = _a.clientId,
+        environment = _a.environment,
+        url = _a.url,
+        profile = _a.profile,
+        locale = _a.locale,
+        _b = _a.plugins,
+        plugins = _b === void 0 ? [] : _b;
+    var ninetailed = React.useMemo(function () {
+      return new experience_js.Ninetailed({
+        clientId: clientId,
+        environment: environment
+      }, {
+        url: url,
+        plugins: plugins,
+        profile: profile,
+        locale: locale
+      });
+    }, []);
+    return /*#__PURE__*/React__default["default"].createElement(NinetailedContext.Provider, {
+      value: ninetailed
+    }, children);
+  };
+
+  var useNinetailed = function useNinetailed() {
+    var ninetailed = React.useContext(NinetailedContext);
+
+    if (ninetailed === undefined) {
+      throw new Error('The component using the the context must be a descendant of the NinetailedProvider');
+    }
+
+    return ninetailed;
+  };
+
+  var useProfile = function useProfile() {
+    var ninetailed = useNinetailed();
+
+    var _a = React.useState(ninetailed.profileState),
+        profileState = _a[0],
+        setProfileState = _a[1];
+
+    React.useEffect(function () {
+      return ninetailed.onProfileChange(function (profileState) {
+        setProfileState(profileState);
+      });
+    }, []);
+    return profileState;
+  };
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  var usePersonalize = function usePersonalize(baseline, variants, options) {
+    if (options === void 0) {
+      options = {
+        holdout: -1
+      };
+    }
+
+    var profile = useProfile();
+    return experience_js.selectVariant(baseline, variants, profile, options);
+  };
+
+  var Personalize = function Personalize(_a) {
+    var Component = _a.component,
+        LoadingComponent = _a.loadingComponent,
+        _b = _a.variants,
+        variants = _b === void 0 ? [] : _b,
+        _c = _a.holdout,
+        holdout = _c === void 0 ? -1 : _c,
+        baseline = __rest(_a, ["component", "loadingComponent", "variants", "holdout"]);
+
+    var ninetailed = useNinetailed();
+
+    var _d = usePersonalize(baseline, variants, {
+      holdout: holdout
+    }),
+        loading = _d.loading,
+        variant = _d.variant,
+        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, {
+        ninetailed: {
+          isPersonalized: isPersonalized,
+          audience: audience
+        }
+      }));
+    }
+
+    if (loading) {
+      if (LoadingComponent) {
+        return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, null);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: "hide",
+        style: {
+          opacity: 0
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
+        ninetailed: {
+          isPersonalized: isPersonalized,
+          audience: audience
+        }
+      })));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(VisibilitySensor__default["default"], {
+      key: "".concat(audience.id, "-").concat(variant.id),
+      partialVisibility: true,
+      onChange: onChangeVisibility
+    }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
+      ninetailed: {
+        isPersonalized: isPersonalized,
+        audience: audience
+      }
+    })));
+  };
+
+  exports.NinetailedProvider = NinetailedProvider;
+  exports.Personalize = Personalize;
+  exports.useNinetailed = useNinetailed;
+  exports.useProfile = useProfile;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/lib/MergeTag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type MergeTagProps = {
+    id: string;
+};
+export declare const MergeTag: React.FC<MergeTagProps>;
+export {};

package/lib/NinetailedContext.d.ts

@@ -0,0 +1,2 @@
+import { NinetailedInstance } from '@ninetailed/experience.js';
+export declare const NinetailedContext: import("react").Context<NinetailedInstance | undefined>;

package/lib/NinetailedProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AnalyticsPlugin } from 'analytics';
+import { Profile, Locale } from '@ninetailed/experience.js-shared';
+export declare type NinetailedProviderProps = {
+    clientId: string;
+    environment?: string;
+    url?: string;
+    plugins?: (AnalyticsPlugin | AnalyticsPlugin[])[];
+    profile?: Profile;
+    locale?: Locale;
+};
+export declare const NinetailedProvider: React.FC<NinetailedProviderProps>;

package/lib/Personalize.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare type Variant<P> = {
+    id: string;
+    audience: {
+        id: string;
+    };
+} & P;
+export declare type PersonalizedComponent<P> = React.ComponentType<P & {
+    ninetailed?: {
+        isPersonalized: boolean;
+        audience: {
+            id: string;
+        } | {
+            id: 'baseline';
+        };
+    };
+}>;
+declare type PersonalizeProps<P> = P & {
+    variants?: Variant<P>[];
+    component: PersonalizedComponent<P> | React.ComponentType<P>;
+    loadingComponent?: React.ComponentType;
+    holdout?: number;
+};
+export declare const Personalize: <P extends Record<string, unknown>>({ component: Component, loadingComponent: LoadingComponent, variants, holdout, ...baseline }: PersonalizeProps<P>) => JSX.Element;
+export {};

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { NinetailedProvider, NinetailedProviderProps, } from './NinetailedProvider';
+export { useNinetailed } from './useNinetailed';
+export { useProfile } from './useProfile';
+export { Personalize } from './Personalize';

package/lib/useNinetailed.d.ts

@@ -0,0 +1 @@
+export declare const useNinetailed: () => import("@ninetailed/experience.js").NinetailedInstance;

package/lib/usePersonalize.d.ts

@@ -0,0 +1,30 @@
+import { Variant } from '@ninetailed/experience.js-shared';
+declare type Options = {
+    holdout?: number;
+};
+export declare const usePersonalize: <T>(baseline: T, variants: Variant<T>[], options?: Options) => {
+    loading: true;
+    variant: Variant<T>;
+    audience: {
+        id: "baseline";
+    };
+    isPersonalized: false;
+    error: null;
+} | {
+    loading: false;
+    variant: Variant<T>;
+    audience: {
+        id: string;
+    };
+    isPersonalized: boolean;
+    error: null;
+} | {
+    loading: false;
+    variant: Variant<T>;
+    audience: {
+        id: "baseline";
+    };
+    isPersonalized: false;
+    error: Error;
+};
+export {};

package/lib/useProfile.d.ts

@@ -0,0 +1,2 @@
+import { ProfileState } from '@ninetailed/experience.js';
+export declare const useProfile: () => ProfileState;

package/package.json

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