@devboldly/react-use-google-analytics-embed-api - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

dist/hooks/useAnalyticsApi.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
 import { GoogleAnalyticsEmbedAPI } from './GoogleAnalyticsEmbedAPI';
@@ -8,5 +10,11 @@ export interface GoogleAnalyticsEmbedAPILoader {
 }
-export declare const scriptRequestedKeyName = "scriptRequested";
-export declare const gapiAnalyticsReadyKeyName = "gapiAnalyticsReady";
-export declare const authorizedKeyName = "authorized";
+/**
+ * Contains gapi and tracks whether the script was requested and if we're authorized.
+ */
+export declare const apiSingleton: {
+    scriptRequested: boolean;
+    authorized: boolean;
+    gapi: GoogleAnalyticsEmbedAPI | undefined;
+};
+export declare const apiStateEmitter: EventEmitter;
 export declare const useAnalyticsApi: () => GoogleAnalyticsEmbedAPILoader;

dist/hooks/useAnalyticsApi.js

@@ -9,41 +9,57 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_use_window_global_1 = require("@devboldly/react-use-window-global");
+var events_1 = require("events");
 var React = __importStar(require("react"));
-var global_namespace_1 = __importDefault(require("./global-namespace"));
-exports.scriptRequestedKeyName = 'scriptRequested';
-exports.gapiAnalyticsReadyKeyName = 'gapiAnalyticsReady';
-exports.authorizedKeyName = 'authorized';
+/**
+ * Contains gapi and tracks whether the script was requested and if we're authorized.
+ */
+exports.apiSingleton = {
+    scriptRequested: false,
+    authorized: false,
+    gapi: undefined,
+};
+// Check if we have it loaded and ready, and set singleton up.
+if (typeof window !== 'undefined') {
+    var win = window;
+    if (win.gapi && win.gapi.analytics) {
+        // At this point, we've requested the script, but it may not be fully loaded yet.
+        exports.apiSingleton.scriptRequested = true;
+        // If we've fully loaded it (all dependencies we need are present), set it.
+        exports.apiSingleton.gapi =
+            !!win.gapi.analytics.ViewSelector && !!win.gapi.analytics.auth && !!((_a = win.gapi.analytics) === null || _a === void 0 ? void 0 : _a.googleCharts.DataChart)
+                ? win.gapi
+                : undefined;
+        // Set whether we're authorized
+        exports.apiSingleton.authorized = win.gapi.analytics.auth ? win.gapi.analytics.auth.isAuthorized() : false;
+    }
+}
+exports.apiStateEmitter = new events_1.EventEmitter();
 exports.useAnalyticsApi = function () {
-    var _a = React.useState(undefined), error = _a[0], setError = _a[1];
-    var _b = React.useState(false), hookReady = _b[0], setHookReady = _b[1];
-    var _c = react_use_window_global_1.useWindowGlobal(global_namespace_1.default, exports.authorizedKeyName, false), authorizedLoading = _c[0], authorized = _c[1], setAuthorized = _c[2];
-    var _d = React.useState(undefined), gapi = _d[0], setGapi = _d[1];
-    var _e = react_use_window_global_1.useWindowGlobal(global_namespace_1.default, exports.gapiAnalyticsReadyKeyName, false), scriptReadyLoading = _e[0], scriptReady = _e[1], setScriptReady = _e[2];
+    var _a = React.useState(exports.apiSingleton.gapi), gapi = _a[0], setGapi = _a[1];
+    var _b = React.useState(typeof exports.apiSingleton.gapi !== 'undefined'), hookReady = _b[0], setHookReady = _b[1];
+    var _c = React.useState(exports.apiSingleton.authorized), authorized = _c[0], setAuthorized = _c[1];
+    var _d = React.useState(undefined), error = _d[0], setError = _d[1];
     React.useEffect(function () {
-        if (typeof window !== 'undefined' && !hookReady && !authorizedLoading && !scriptReadyLoading && scriptReady) {
-            var win = window;
-            // If the api script is already loaded and ready, set the hook's ready state to true
-            // and grab the API from window.
-            setGapi(win.gapi);
+        var authorizedListener = function (isAuthorized) {
+            setAuthorized(isAuthorized);
+        };
+        exports.apiStateEmitter.on('authorized', authorizedListener);
+        var readyListener = function () {
+            setGapi(exports.apiSingleton.gapi);
             setHookReady(true);
-            // Set if we're already authorized
-            if (win.gapi.analytics.auth.isAuthorized()) {
-                setAuthorized(true);
-            }
-        }
-    }, [scriptReadyLoading, scriptReady, hookReady, setAuthorized, authorizedLoading]);
+        };
+        exports.apiStateEmitter.on('ready', readyListener);
+        return function () {
+            exports.apiStateEmitter.off('authorized', authorizedListener);
+            exports.apiStateEmitter.off('ready', readyListener);
+        };
+    });
     React.useEffect(function () {
-        var aborted = false;
         try {
-            // If the script isn't ready yet...
-            if (typeof window !== 'undefined' && !scriptReadyLoading && !scriptReady) {
+            if (typeof window !== 'undefined') {
                 var win_1 = window;
                 // Only load the script once.
-                if (!win_1[global_namespace_1.default][exports.scriptRequestedKeyName]) {
-                    // We set this directly to prevent a rerender
-                    win_1[global_namespace_1.default][exports.scriptRequestedKeyName] = true;
+                if (!exports.apiSingleton.scriptRequested) {
+                    exports.apiSingleton.scriptRequested = true;
                     // Call the code from Google to load the API into window.
@@ -57,12 +73,15 @@ loadGoogleApi();
                             // At this point, we can use the Analytics Embed API!
-                            win_1[global_namespace_1.default][exports.gapiAnalyticsReadyKeyName] = true;
-                            if (!aborted) {
-                                setGapi(win_1.gapi);
-                                // Set if we're already authorized
-                                if (win_1.gapi.analytics.auth.isAuthorized()) {
-                                    setAuthorized(true);
-                                }
-                                // Broadcast to all global value subscribers
-                                setScriptReady(true);
+                            exports.apiSingleton.gapi = win_1.gapi;
+                            // Set if we're already authorized
+                            if (win_1.gapi.analytics.auth.isAuthorized()) {
+                                exports.apiSingleton.authorized = true;
                             }
+                            // Update the hook's state
+                            setGapi(exports.apiSingleton.gapi);
+                            setHookReady(true);
+                            setAuthorized(exports.apiSingleton.authorized);
+                            // This hook is ready, but we need to update other hooks subscribed
+                            // to the singleton emitter
+                            exports.apiStateEmitter.emit('ready');
+                            exports.apiStateEmitter.emit('authorized', exports.apiSingleton.authorized);
                         });
@@ -79,7 +98,4 @@ }
         }
-        return function () {
-            aborted = true;
-        };
-    }, [scriptReadyLoading, scriptReady, setScriptReady, setAuthorized]);
-    return { ready: hookReady, gapi: gapi, error: error, authorized: !authorizedLoading && !!authorized };
+    }, [setAuthorized]);
+    return { ready: hookReady, gapi: gapi, error: error, authorized: !!authorized };
 };
@@ -86,0 +102,0 @@ /**

dist/hooks/useAuthorize.d.ts

@@ -29,2 +29,2 @@ import { GoogleAnalyticsEmbedAPI } from './GoogleAnalyticsEmbedAPI';
 }
-export declare const useAuthorize: (gapi: GoogleAnalyticsEmbedAPI | undefined, options: AuthorizeOptions, onSignIn?: (() => void) | undefined) => [boolean, boolean];
+export declare const useAuthorize: (gapi: GoogleAnalyticsEmbedAPI | undefined, options: AuthorizeOptions, onSignIn?: (() => void) | undefined) => () => void;

dist/hooks/useAuthorize.js

@@ -20,33 +20,43 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_use_window_global_1 = require("@devboldly/react-use-window-global");
 var React = __importStar(require("react"));
-var global_namespace_1 = __importDefault(require("./global-namespace"));
 var useAnalyticsApi_1 = require("./useAnalyticsApi");
 exports.useAuthorize = function (gapi, options, onSignIn) {
-    var _a = react_use_window_global_1.useWindowGlobal(global_namespace_1.default, 'authorizeCalled', false), authorizedCalledLoading = _a[0], authorizedCalled = _a[1], setAuthorizeCalled = _a[2];
-    var _b = react_use_window_global_1.useWindowGlobal(global_namespace_1.default, useAnalyticsApi_1.authorizedKeyName, false), authorized = _b[1], setAuthorized = _b[2];
+    var _a = React.useState(useAnalyticsApi_1.apiSingleton.authorized), authorized = _a[0], setAuthorized = _a[1];
+    var _b = React.useState(false), run = _b[0], setRun = _b[1];
     React.useEffect(function () {
-        if (!authorizedCalledLoading && !authorizedCalled && typeof gapi !== 'undefined') {
-            var signInHandler = function () {
-                if (!authorized) {
-                    setAuthorized(true);
-                }
-                if (typeof onSignIn !== 'undefined') {
-                    onSignIn();
-                }
-            };
-            gapi.analytics.auth.on('signIn', signInHandler);
-            gapi.analytics.auth.authorize(__assign({ 
-                // There seems to be a typo in the official spec docs (clientId vs clientid)
-                clientid: options.clientId }, options));
-            setAuthorizeCalled(true);
+        var authorizedListener = function (isAuthorized) {
+            setAuthorized(isAuthorized);
+        };
+        useAnalyticsApi_1.apiStateEmitter.on('authorized', authorizedListener);
+        return function () {
+            useAnalyticsApi_1.apiStateEmitter.off('authorized', authorizedListener);
+        };
+    });
+    React.useEffect(function () {
+        if (run) {
+            setRun(false);
+            if (typeof gapi !== 'undefined') {
+                var signInHandler = function () {
+                    if (!authorized) {
+                        setAuthorized(true);
+                    }
+                    useAnalyticsApi_1.apiSingleton.authorized = true;
+                    useAnalyticsApi_1.apiStateEmitter.emit('authorized', true);
+                    if (typeof onSignIn !== 'undefined') {
+                        onSignIn();
+                    }
+                };
+                gapi.analytics.auth.on('signIn', signInHandler);
+                gapi.analytics.auth.authorize(__assign({ 
+                    // There seems to be a typo in the official spec docs (clientId vs clientid)
+                    // So we'll include both. ¯\_(ツ)_/¯
+                    clientid: options.clientId }, options));
+            }
         }
-    });
-    var loading = authorizedCalledLoading;
-    var called = !!authorizedCalled;
-    return [loading, called];
+    }, [run, gapi, options, authorized, onSignIn]);
+    var authorize = function () {
+        setRun(true);
+    };
+    return authorize;
 };

dist/hooks/useDataChart.js

@@ -32,3 +32,3 @@ "use strict";
                     catch (e) {
-                        console.log(e);
+                        console.error(e);
                     }
@@ -35,0 +35,0 @@ }

dist/hooks/useViewSelector.js

@@ -34,3 +34,3 @@ "use strict";
             catch (e) {
-                console.log(e);
+                console.error(e);
             }
@@ -37,0 +37,0 @@ }

package.json

 {
   "name": "@devboldly/react-use-google-analytics-embed-api",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "author": "Dev Boldly <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "React hook for loading the Google Analytics Embed API.",

No alert changes

Improved metrics

Total package byte prevSize

91980

increased by2.08%

Number of package files

20

increased by11.11%

Lines of code

2080

increased by3.23%

No dependency changes