@dapperlabs/react-analytics - npm Package Compare versions

Comparing version 0.9.0 to 1.0.0

dist/index.js

@@ -9,2 +9,3 @@ 'use strict';
 var React__default = _interopDefault(React);
+var analyticsNext = require('@segment/analytics-next');
 var PropTypes = _interopDefault(require('prop-types'));
@@ -91,82 +92,2 @@
 
-/**
- * Injects Segment's analytics.js into the window
- * https://segment.com/docs/sources/website/analytics.js/quickstart/#step-1-copy-the-snippet
- * @param {String} SEGMENT_WRITE_TOKEN
- * @param {Boolean} autoLoad
- *
- * WARNING: Replacing this snippet will remove code that accommodates injection without existing script tag. See Line 81.
- */
-function injectAnalyticsJs(SEGMENT_WRITE_TOKEN, autoLoad) {
-  // Create a queue, but don't obliterate an existing one!
-  var analytics = window.analytics = window.analytics || []; // If the real analytics.js is already on the page return.
-
-  if (analytics.initialize) return; // If the snippet was invoked already show an error.
-
-  if (analytics.invoked) {
-    if (window.console && console.error) {
-      console.error('Segment snippet included twice.');
-    }
-
-    return;
-  } // Invoked flag, to make sure the snippet
-  // is never invoked twice.
-
-
-  analytics.invoked = true; // A list of the methods in Analytics.js to stub.
-
-  analytics.methods = ['trackSubmit', 'trackClick', 'trackLink', 'trackForm', 'pageview', 'identify', 'reset', 'group', 'track', 'ready', 'alias', 'debug', 'page', 'once', 'off', 'on', 'addSourceMiddleware']; // Define a factory to create stubs. These are placeholders
-  // for methods in Analytics.js so that you never have to wait
-  // for it to load to actually record data. The `method` is
-  // stored as the first argument, so we can replay the data.
-
-  analytics.factory = function (method) {
-    return function () {
-      var args = Array.prototype.slice.call(arguments);
-      args.unshift(method);
-      analytics.push(args);
-      return analytics;
-    };
-  }; // For each of our methods, generate a queueing stub.
-
-
-  for (var i = 0; i < analytics.methods.length; i++) {
-    var key = analytics.methods[i];
-    analytics[key] = analytics.factory(key);
-  } // Define a method to load Analytics.js from our CDN,
-  // and that will be sure to only ever load it once.
-
-
-  analytics.load = function (key, options) {
-    // Create an async script element based on your key.
-    var script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.async = true;
-    script.src = 'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js'; // Insert our script next to the first script element.
-    // In cases where there isn't a script element (ex: Dapper's Auth0 pages),
-    // insert the script next to the body instead.
-
-    var element = document.getElementsByTagName('script')[0];
-
-    if (!element) {
-      element = document.getElementsByTagName('body')[0];
-    }
-
-    element.parentNode.insertBefore(script, element);
-    analytics._loadOptions = options;
-  }; // Add a version to keep track of what's in the wild.
-
-
-  analytics.SNIPPET_VERSION = '4.1.0'; // Load Analytics.js with your key, which will automatically
-  // load the tools you've enabled for your account. Boosh!
-
-  if (autoLoad) {
-    // in cases where the @segment/consent-manager we don't want to load the
-    // analytics ourselves and instead let the consent manager do this.
-    analytics.load(SEGMENT_WRITE_TOKEN);
-  }
-
-  return analytics;
-}
-
 var events = {
@@ -176,5 +97,4 @@ BUTTON_CLICKED: 'Button Clicked'
 
-function AnalyticsProvider(_ref) {
+var AnalyticsProvider = function AnalyticsProvider(_ref) {
   var segmentWriteToken = _ref.segmentWriteToken,
-      autoLoad = _ref.autoLoad,
       blockedUserAgents = _ref.blockedUserAgents,
@@ -189,2 +109,7 @@ children = _ref.children;
   var isBlockedUserAgent;
+  var analytics = React.useMemo(function () {
+    return analyticsNext.AnalyticsBrowser.load({
+      writeKey: segmentWriteToken
+    });
+  }, [segmentWriteToken]);
   React.useEffect(function () {
@@ -194,41 +119,36 @@ var _window, _window$navigator, _window2, _window2$navigator;
     if (!segmentWriteToken) return;
-    injectAnalyticsJs(segmentWriteToken, autoLoad);
-    isBlockedUserAgent = blockedUserAgents && ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) && blockedUserAgents.includes((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$navigator = _window2.navigator) === null || _window2$navigator === void 0 ? void 0 : _window2$navigator.userAgent);
-    window.analytics.ready(function () {
+    isBlockedUserAgent = blockedUserAgents && typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) && blockedUserAgents.includes((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$navigator = _window2.navigator) === null || _window2$navigator === void 0 ? void 0 : _window2$navigator.userAgent);
+    analytics && analytics.ready(function () {
       return setIsReady(true);
     });
-  }, [segmentWriteToken]);
+  }, [segmentWriteToken, analytics]);
   var identify = React.useCallback(function (userId) {
     var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    if (!window.analytics || !userId || isBlockedUserAgent) return;
-    window.analytics.identify(userId, properties);
+    if (!analytics || !userId || isBlockedUserAgent) return;
+    analytics.identify(userId, properties);
   }, []);
   var alias = React.useCallback(function (userId, previousUserId) {
-    if (!window.analytics || !userId) return;
-    window.analytics.alias(userId, previousUserId);
+    if (!analytics || !userId) return;
+    analytics.alias(userId, previousUserId);
   }, []);
   var trackButtonClick = React.useCallback(function () {
     var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (!window.analytics) return;
-    window.analytics.track(events.BUTTON_CLICKED, properties);
+    if (!analytics) return;
+    analytics.track(events.BUTTON_CLICKED, properties);
   }, []);
   var trackPageView = React.useCallback(function () {
-    var _window$analytics;
-
-    if (!window.analytics) return;
-
-    (_window$analytics = window.analytics).page.apply(_window$analytics, arguments);
+    if (!analytics) return;
+    analytics.page.apply(analytics, arguments);
   }, []);
   var track = React.useCallback(function () {
-    var _window$analytics2;
-
-    if (!window.analytics || isBlockedUserAgent) return;
-
-    (_window$analytics2 = window.analytics).track.apply(_window$analytics2, arguments);
+    if (!analytics || isBlockedUserAgent) return;
+    analytics.track.apply(analytics, arguments);
   }, []);
   var reset = React.useCallback(function () {
-    if (!window.analytics) return;
-    window.analytics.reset();
+    var _window3;
 
-    if (window.mixpanel) {
+    if (!analytics) return;
+    analytics.reset();
+
+    if (typeof window !== 'undefined' && (_window3 = window) !== null && _window3 !== void 0 && _window3.mixpanel) {
       window.mixpanel.cookie.clear();
@@ -249,10 +169,7 @@ }
   return /*#__PURE__*/React__default.createElement(AnalyticsContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-
+    value: contextValue
+  }, children);
+};
 AnalyticsProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  autoLoad: PropTypes.bool,
   segmentWriteToken: PropTypes.string,
@@ -266,6 +183,2 @@ blockedUserAgents: PropTypes.array
 
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function createCommonjsModule(fn, module) {
@@ -275,40 +188,47 @@ return module = { exports: {} }, fn(module, module.exports), module.exports;
 
-var reactIs_production_min = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports,"__esModule",{value:!0});
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"):
-60115,r=b?Symbol.for("react.lazy"):60116;function t(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case r:case q:case d:return u}}}function v(a){return t(a)===m}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;
-exports.Fragment=e;exports.Lazy=r;exports.Memo=q;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||"object"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||t(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return t(a)===k};
-exports.isContextProvider=function(a){return t(a)===h};exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===n};exports.isFragment=function(a){return t(a)===e};exports.isLazy=function(a){return t(a)===r};exports.isMemo=function(a){return t(a)===q};exports.isPortal=function(a){return t(a)===d};exports.isProfiler=function(a){return t(a)===g};exports.isStrictMode=function(a){return t(a)===f};
-exports.isSuspense=function(a){return t(a)===p};
-});
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
+var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
+var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
 
-unwrapExports(reactIs_production_min);
-var reactIs_production_min_1 = reactIs_production_min.typeOf;
-var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
-var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
-var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
-var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
-var reactIs_production_min_6 = reactIs_production_min.Element;
-var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
-var reactIs_production_min_8 = reactIs_production_min.Fragment;
-var reactIs_production_min_9 = reactIs_production_min.Lazy;
-var reactIs_production_min_10 = reactIs_production_min.Memo;
-var reactIs_production_min_11 = reactIs_production_min.Portal;
-var reactIs_production_min_12 = reactIs_production_min.Profiler;
-var reactIs_production_min_13 = reactIs_production_min.StrictMode;
-var reactIs_production_min_14 = reactIs_production_min.Suspense;
-var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
-var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
-var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
-var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
-var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
-var reactIs_production_min_20 = reactIs_production_min.isElement;
-var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
-var reactIs_production_min_22 = reactIs_production_min.isFragment;
-var reactIs_production_min_23 = reactIs_production_min.isLazy;
-var reactIs_production_min_24 = reactIs_production_min.isMemo;
-var reactIs_production_min_25 = reactIs_production_min.isPortal;
-var reactIs_production_min_26 = reactIs_production_min.isProfiler;
-var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
-var reactIs_production_min_28 = reactIs_production_min.isSuspense;
+var reactIs_production_min = {
+	AsyncMode: AsyncMode,
+	ConcurrentMode: ConcurrentMode,
+	ContextConsumer: ContextConsumer,
+	ContextProvider: ContextProvider,
+	Element: Element,
+	ForwardRef: ForwardRef,
+	Fragment: Fragment,
+	Lazy: Lazy,
+	Memo: Memo,
+	Portal: Portal,
+	Profiler: Profiler,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	isAsyncMode: isAsyncMode,
+	isConcurrentMode: isConcurrentMode,
+	isContextConsumer: isContextConsumer,
+	isContextProvider: isContextProvider,
+	isElement: isElement,
+	isForwardRef: isForwardRef,
+	isFragment: isFragment,
+	isLazy: isLazy,
+	isMemo: isMemo,
+	isPortal: isPortal,
+	isProfiler: isProfiler,
+	isStrictMode: isStrictMode,
+	isSuspense: isSuspense,
+	isValidElementType: isValidElementType,
+	typeOf: typeOf
+};
 
@@ -322,8 +242,5 @@ var reactIs_development = createCommonjsModule(function (module, exports) {
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
 // nor polyfill, then a plain number is used for performance.
 var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-
 var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
@@ -335,3 +252,5 @@ var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
 var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
 var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
@@ -341,67 +260,19 @@ var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
 var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
 var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
 var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
 
 function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' ||
-  // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE);
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
 }
 
-/**
- * Forked from fbjs/warning:
- * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
- *
- * Only change is we use console.warn instead of console.error,
- * and do nothing when 'console' is not supported.
- * This really simplifies the code.
- * ---
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
-var lowPriorityWarning = function () {};
-
-{
-  var printWarning = function (format) {
-    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    var argIndex = 0;
-    var message = 'Warning: ' + format.replace(/%s/g, function () {
-      return args[argIndex++];
-    });
-    if (typeof console !== 'undefined') {
-      console.warn(message);
-    }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      throw new Error(message);
-    } catch (x) {}
-  };
-
-  lowPriorityWarning = function (condition, format) {
-    if (format === undefined) {
-      throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
-    }
-    if (!condition) {
-      for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-        args[_key2 - 2] = arguments[_key2];
-      }
-
-      printWarning.apply(undefined, [format].concat(args));
-    }
-  };
-}
-
-var lowPriorityWarning$1 = lowPriorityWarning;
-
 function typeOf(object) {
   if (typeof object === 'object' && object !== null) {
     var $$typeof = object.$$typeof;
+
     switch ($$typeof) {
@@ -419,2 +290,3 @@ case REACT_ELEMENT_TYPE:
             return type;
+
           default:
@@ -426,10 +298,13 @@ var $$typeofType = type && type.$$typeof;
               case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
               case REACT_PROVIDER_TYPE:
                 return $$typeofType;
+
               default:
                 return $$typeof;
             }
+
         }
-      case REACT_LAZY_TYPE:
-      case REACT_MEMO_TYPE:
+
       case REACT_PORTAL_TYPE:
@@ -441,5 +316,4 @@ return $$typeof;
   return undefined;
-}
+} // AsyncMode is deprecated along with isAsyncMode
 
-// AsyncMode is deprecated along with isAsyncMode
 var AsyncMode = REACT_ASYNC_MODE_TYPE;
@@ -458,13 +332,13 @@ var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
 var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
 
-var hasWarnedAboutDeprecatedIsAsyncMode = false;
-
-// AsyncMode should be deprecated
 function isAsyncMode(object) {
   {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-      hasWarnedAboutDeprecatedIsAsyncMode = true;
-      lowPriorityWarning$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
     }
   }
+
   return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
@@ -509,3 +383,2 @@ }
 
-exports.typeOf = typeOf;
 exports.AsyncMode = AsyncMode;
@@ -524,3 +397,2 @@ exports.ConcurrentMode = ConcurrentMode;
 exports.Suspense = Suspense;
-exports.isValidElementType = isValidElementType;
 exports.isAsyncMode = isAsyncMode;
@@ -539,36 +411,36 @@ exports.isConcurrentMode = isConcurrentMode;
 exports.isSuspense = isSuspense;
+exports.isValidElementType = isValidElementType;
+exports.typeOf = typeOf;
   })();
 }
 });
+var reactIs_development_1 = reactIs_development.AsyncMode;
+var reactIs_development_2 = reactIs_development.ConcurrentMode;
+var reactIs_development_3 = reactIs_development.ContextConsumer;
+var reactIs_development_4 = reactIs_development.ContextProvider;
+var reactIs_development_5 = reactIs_development.Element;
+var reactIs_development_6 = reactIs_development.ForwardRef;
+var reactIs_development_7 = reactIs_development.Fragment;
+var reactIs_development_8 = reactIs_development.Lazy;
+var reactIs_development_9 = reactIs_development.Memo;
+var reactIs_development_10 = reactIs_development.Portal;
+var reactIs_development_11 = reactIs_development.Profiler;
+var reactIs_development_12 = reactIs_development.StrictMode;
+var reactIs_development_13 = reactIs_development.Suspense;
+var reactIs_development_14 = reactIs_development.isAsyncMode;
+var reactIs_development_15 = reactIs_development.isConcurrentMode;
+var reactIs_development_16 = reactIs_development.isContextConsumer;
+var reactIs_development_17 = reactIs_development.isContextProvider;
+var reactIs_development_18 = reactIs_development.isElement;
+var reactIs_development_19 = reactIs_development.isForwardRef;
+var reactIs_development_20 = reactIs_development.isFragment;
+var reactIs_development_21 = reactIs_development.isLazy;
+var reactIs_development_22 = reactIs_development.isMemo;
+var reactIs_development_23 = reactIs_development.isPortal;
+var reactIs_development_24 = reactIs_development.isProfiler;
+var reactIs_development_25 = reactIs_development.isStrictMode;
+var reactIs_development_26 = reactIs_development.isSuspense;
+var reactIs_development_27 = reactIs_development.isValidElementType;
+var reactIs_development_28 = reactIs_development.typeOf;
 
-unwrapExports(reactIs_development);
-var reactIs_development_1 = reactIs_development.typeOf;
-var reactIs_development_2 = reactIs_development.AsyncMode;
-var reactIs_development_3 = reactIs_development.ConcurrentMode;
-var reactIs_development_4 = reactIs_development.ContextConsumer;
-var reactIs_development_5 = reactIs_development.ContextProvider;
-var reactIs_development_6 = reactIs_development.Element;
-var reactIs_development_7 = reactIs_development.ForwardRef;
-var reactIs_development_8 = reactIs_development.Fragment;
-var reactIs_development_9 = reactIs_development.Lazy;
-var reactIs_development_10 = reactIs_development.Memo;
-var reactIs_development_11 = reactIs_development.Portal;
-var reactIs_development_12 = reactIs_development.Profiler;
-var reactIs_development_13 = reactIs_development.StrictMode;
-var reactIs_development_14 = reactIs_development.Suspense;
-var reactIs_development_15 = reactIs_development.isValidElementType;
-var reactIs_development_16 = reactIs_development.isAsyncMode;
-var reactIs_development_17 = reactIs_development.isConcurrentMode;
-var reactIs_development_18 = reactIs_development.isContextConsumer;
-var reactIs_development_19 = reactIs_development.isContextProvider;
-var reactIs_development_20 = reactIs_development.isElement;
-var reactIs_development_21 = reactIs_development.isForwardRef;
-var reactIs_development_22 = reactIs_development.isFragment;
-var reactIs_development_23 = reactIs_development.isLazy;
-var reactIs_development_24 = reactIs_development.isMemo;
-var reactIs_development_25 = reactIs_development.isPortal;
-var reactIs_development_26 = reactIs_development.isProfiler;
-var reactIs_development_27 = reactIs_development.isStrictMode;
-var reactIs_development_28 = reactIs_development.isSuspense;
-
 var reactIs = createCommonjsModule(function (module) {
@@ -694,4 +566,15 @@
 
+function useAnalytics() {
+  var result = React.useContext(AnalyticsContext);
+
+  if (!result) {
+    throw new Error("Context used outside of its Provider!");
+  }
+
+  return result;
+}
+
 exports.AnalyticsContext = AnalyticsContext;
 exports.AnalyticsProvider = AnalyticsProvider;
+exports.useAnalytics = useAnalytics;
 exports.withAnalytics = withAnalytics;

package.json

 {
   "name": "@dapperlabs/react-analytics",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "A utility to connect react projects to segment",
@@ -15,3 +15,2 @@ "repository": "github:dapperlabs/react-analytics",
   "dependencies": {
-    "analytics.js": "^2.9.1",
     "hoist-non-react-statics": "^3.3.0"
@@ -18,0 +17,0 @@ },

README.md

@@ -5,3 +5,3 @@ # react-analytics 👩‍🔬
 
-## Values provided on context:
+## Values provided on context and useAnalytics:
 
@@ -40,17 +40,13 @@ - `analyticsReady`: boolean
 
-### Context
+### Usage
 
-Context is directly available via `import { AnalyticsContext } from '@dapperlabs/react-analytics'` and can be consumed however you'd like:
+Context is directly available via `import { AnalyticsContext } from '@dapperlabs/react-analytics'`
+but for more convenience you can use a hook `import { useAnalytics } from '@dapperlabs/react-analytics'`
 
-- `useContext(AnalyticsContext)` **👈IDEAL 😎**
-- `static contextType = AnalyticsContext`
-- `<AnalyticsContext.Consumer />`
-
 ```
-import React, { useContext, useRef } from 'react';
-import { AnalyticsContext } from '@dapperlabs/react-analytics';
+import React, { useRef } from 'react';
+import { useAnalytics } from '@dapperlabs/react-analytics';
 
 function Button({ children, id, onClick, trackingProperties }) {
-  const buttonRef = useRef(null);
-  const { trackButtonClick } = useContext(AnalyticsContext);
+  const { trackButtonClick } = useAnalytics();
 
@@ -57,0 +53,0 @@ const handleClick = () => {

rollup.config.js

@@ -7,2 +7,3 @@ import resolve from 'rollup-plugin-node-resolve';
   input: 'src/index.js',
+  inlineDynamicImports: true,
   output: {
@@ -12,3 +13,3 @@ file: 'dist/index.js',
   },
-  external: ['react', 'prop-types'],
+  external: ['react', 'prop-types', '@segment/analytics-next'],
   plugins: [
@@ -15,0 +16,0 @@ resolve(),

src/index.js

@@ -1,3 +0,4 @@
-export { default as AnalyticsContext } from './context';
-export { default as AnalyticsProvider } from './provider';
-export { default as withAnalytics } from './withAnalytics';
+export {default as AnalyticsContext} from './context';
+export {default as AnalyticsProvider} from './provider';
+export {default as withAnalytics} from './withAnalytics';
+export {default as useAnalytics} from './useAnalytics';

src/provider.js

@@ -1,76 +0,81 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {AnalyticsBrowser} from "@segment/analytics-next";
 import PropTypes from 'prop-types';
-import inject from './snippet';
 import events from './events';
 import AnalyticsContext from './context';
-function AnalyticsProvider ({ segmentWriteToken, autoLoad, blockedUserAgents, children }) {
-  const [ isReady, setIsReady ] = useState(false);
-  let isBlockedUserAgent;
 
+export const AnalyticsProvider = ({segmentWriteToken, blockedUserAgents, children}) => {
+    const [isReady, setIsReady] = useState(false);
+    let isBlockedUserAgent;
+    const analytics = useMemo(
+        () => AnalyticsBrowser.load({writeKey: segmentWriteToken}),
+        [segmentWriteToken]
+    );
 
-  useEffect(() => {
-    if (!segmentWriteToken) return;
-    inject(segmentWriteToken, autoLoad);
-    isBlockedUserAgent =  blockedUserAgents && window?.navigator?.userAgent && blockedUserAgents.includes(window?.navigator?.userAgent);
-    window.analytics.ready(() => setIsReady(true));
-  }, [segmentWriteToken]);
+    useEffect(() => {
+        if (!segmentWriteToken) return;
+        isBlockedUserAgent = blockedUserAgents && typeof window !== 'undefined' && window?.navigator?.userAgent && blockedUserAgents.includes(window?.navigator?.userAgent);
+        analytics && analytics.ready(() => setIsReady(true));
+    }, [segmentWriteToken, analytics]);
 
-  const identify = useCallback((userId, properties = {}) => {
-    if (!window.analytics || !userId || isBlockedUserAgent) return;
-    window.analytics.identify(userId, properties);
-  }, []);
+    const identify = useCallback((userId, properties = {}) => {
+        if (!analytics || !userId || isBlockedUserAgent) return;
+        analytics.identify(userId, properties);
+    }, []);
 
-  const alias = useCallback((userId, previousUserId) => {
-    if (!window.analytics || !userId) return;
-    window.analytics.alias(userId, previousUserId);
-  }, []);
+    const alias = useCallback((userId, previousUserId) => {
+        if (!analytics || !userId) return;
+        analytics.alias(userId, previousUserId);
+    }, []);
 
-  const trackButtonClick = useCallback((properties = {}) => {
-    if (!window.analytics) return;
-    window.analytics.track(events.BUTTON_CLICKED, properties);
-  }, []);
+    const trackButtonClick = useCallback((properties = {}) => {
+        if (!analytics) return;
+        analytics.track(events.BUTTON_CLICKED, properties);
+    }, []);
 
-  const trackPageView = useCallback((...args) => {
-    if (!window.analytics) return;
-    window.analytics.page(...args);
-  }, []);
+    const trackPageView = useCallback((...args) => {
+        if (!analytics) return;
+        analytics.page(...args);
+    }, []);
 
-  const track = useCallback((...args) => {
-    if (!window.analytics || isBlockedUserAgent) return;
-    window.analytics.track(...args);
-  }, []);
+    const track = useCallback((...args) => {
+        if (!analytics || isBlockedUserAgent) return;
+        analytics.track(...args);
+    }, []);
 
-  const reset = useCallback(() => {
-    if (!window.analytics) return;
-    window.analytics.reset();
-    if (window.mixpanel) {
-      window.mixpanel.cookie.clear();      
-    }
-  }, []);
+    const reset = useCallback(() => {
+        if (!analytics) return;
+        analytics.reset();
+        if (typeof window !== 'undefined' && window?.mixpanel) {
+            window.mixpanel.cookie.clear();
+        }
+    }, []);
 
-  const contextValue = useMemo(() => ({
-    analyticsReady: isReady,
-    identify,
-    alias,
-    trackButtonClick,
-    trackPageView,
-    track,
-    reset,
-  }), [isReady]);
+    const contextValue = useMemo(() => ({
+        analyticsReady: isReady,
+        identify,
+        alias,
+        trackButtonClick,
+        trackPageView,
+        track,
+        reset,
+    }), [isReady]);
+    return (
+        <AnalyticsContext.Provider value={contextValue}>
+            {children}
+        </AnalyticsContext.Provider>
+    );
+};
 
-  return <AnalyticsContext.Provider value={contextValue} children={children} />;
-}
-
 AnalyticsProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  autoLoad: PropTypes.bool,
-  segmentWriteToken: PropTypes.string,
-  blockedUserAgents: PropTypes.array,
+    children: PropTypes.node.isRequired,
+    segmentWriteToken: PropTypes.string,
+    blockedUserAgents: PropTypes.array,
 };
 
 AnalyticsProvider.defaultProps = {
-  autoLoad: true,
-  blockedUserAgents: [],
+    autoLoad: true,
+    blockedUserAgents: [],
 }
 
 export default AnalyticsProvider;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Number of package files

14

increased by7.69%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

31290

decreased by-15.72%

Lines of code

656

decreased by-20.1%

Number of lines in readme file

73

decreased by-5.19%

Dependency changes

• - Removedanalytics.js@^2.9.1

• - Removedanalytics.js@2.9.1(transitive)