feat(handlers): remove ability to have multiple handlers

Author: Jake Wood

README.md

@@ -20,6 +20,7 @@ This package provides two sets of functionality:
 
 * Communication to TestBox for user experience purposes
 * [Client-side Auto-login][1]
+
 ### Base Usage
 
 If you just need the basics of TestBox for your app, you'll use something like this:
@@ -52,6 +53,31 @@ export default function App() {
 }
 ```
 
+### Navigation
+
+If you use react-router, or any kind of client-side routing, you may want to override
+our standard navigation behavior. Navigation happens when a user chooses a use case
+they want to try out. By default, TestBox will use `window.location` to push the iFrame
+to a new URL. You might want to do something more sophisticated.
+
+There are two ways to interact with the browser SDK for events:
+
+```javascript
+// Option 1: you can use the config object
+startTestBox({
+    navigateHandler: (url) => {
+        history.push(url);
+    }
+});
+
+// Option 2: you can set the handler directly
+import testbox from "@testboxlab/browser-sdk";
+
+testbox.navigateHandler = (url) => {
+    history.push(url);
+};
+```
+
 ### Auto-login
 
 If you have opted to use our client-side auto-login functionality, you have a bit

src/config.ts

@@ -8,8 +8,8 @@ export interface TestBoxConfig {
   healthCheckInterval?: number;
   window?: Window;
 
-  onNavigate?: (url: NavigateEvent) => Promise<void>;
-  onLogin?: (props: LoginEvent) => Promise<string | boolean>;
+  navigateHandler?: (url: NavigateEvent) => Promise<void>;
+  loginHandler?: (props: LoginEvent) => Promise<string | boolean>;
 }
 
 declare global {

src/index.ts

@@ -4,12 +4,16 @@ import {
   isValidIncomingTestBoxMessage,
   sendMessageToTestBox,
 } from "./messaging";
-import { routeMessage, TestBoxEventRouter } from "./router";
+import { routeMessage } from "./router";
 import { INITIALIZE_REQUEST } from "./messaging/outgoing";
-import { IncomingEventHandlers, IncomingEventMap } from "./messaging/incoming";
+import { LoginEvent, NavigateEvent } from "./messaging/incoming";
 
 let tbxStarted = false;
-let messageHandlers: TestBoxEventRouter = {};
+
+export let navigateHandler: (data: NavigateEvent) => void;
+export let loginHandler: (
+  data: LoginEvent
+) => Promise<string | boolean> = async () => false;
 
 export function startTestBox(config?: TestBoxConfig) {
   if (tbxStarted) {
@@ -18,18 +22,16 @@ export function startTestBox(config?: TestBoxConfig) {
 
   window.__tbxConfig = config;
 
-  if (window.__tbxConfig.onNavigate) {
-    messageHandlers["navigate"] = [window.__tbxConfig.onNavigate];
+  if (window.__tbxConfig.navigateHandler) {
+    navigateHandler = window.__tbxConfig.navigateHandler;
   } else {
-    messageHandlers["navigate"] = [
-      (data) => {
-        window.location.href = data.url;
-      },
-    ];
+    navigateHandler = (data) => {
+      window.location.href = data.url;
+    };
   }
 
-  if (window.__tbxConfig.onLogin) {
-    messageHandlers["login"] = [window.__tbxConfig.onLogin];
+  if (window.__tbxConfig.loginHandler) {
+    loginHandler = window.__tbxConfig.loginHandler;
   }
 
   window.addEventListener("message", (ev) => {
@@ -49,7 +51,10 @@ export function startTestBox(config?: TestBoxConfig) {
       return;
     }
 
-    routeMessage(data, messageHandlers);
+    routeMessage(data, {
+      navigate: navigateHandler,
+      login: loginHandler,
+    });
   });
 
   sendMessageToTestBox(INITIALIZE_REQUEST);
@@ -58,16 +63,4 @@ export function startTestBox(config?: TestBoxConfig) {
 
 export const start = startTestBox;
 
-export function on<K extends keyof IncomingEventHandlers>(
-  message: K,
-  handler: IncomingEventHandlers[K]
-) {
-  if (message in messageHandlers) {
-    messageHandlers[message].push(handler);
-  } else {
-    // TODO: TypeScript narrowing does not work here. See if we can fix.
-    messageHandlers[message] = [handler as any];
-  }
-}
-
 export { TestBoxConfig };

src/router.ts

@@ -12,18 +12,14 @@ import { autoLogin } from "./utils/login";
 import { sendMessageToTestBox } from "./messaging";
 import { INITIALIZE_ACK, LOGIN_ACK, NAVIGATE_ACK } from "./messaging/outgoing";
 
-export type TestBoxEventRouter = {
-  [K in keyof IncomingEventHandlers]?: IncomingEventHandlers[K][];
-};
-
 let loggingIn = false;
 let navigateUrl = "";
 
 // Note to future selves: you cannot destructure testbox here, the
 // type narrowing does not work correctly if you do so here.
 export function routeMessage(
   { testbox }: UnionedIncomingMessages,
-  router: TestBoxEventRouter
+  router: Partial<IncomingEventHandlers>
 ) {
   const { event, data } = testbox;
   if (VALID_INCOMING_EVENTS.includes(event)) {
@@ -37,8 +33,10 @@ export function routeMessage(
         if (loggingIn) {
           navigateUrl = data.url;
         } else {
-          const navigateFunc = router["navigate"][0];
-          navigateFunc(data);
+          const func = router["navigate"];
+          if (func) {
+            func(data);
+          }
         }
         break;
       case LOGIN:
@@ -48,8 +46,10 @@ export function routeMessage(
           loggingIn = false;
           const goTo = navigateUrl || nextUrl;
           if (goTo && goTo !== window.location.href) {
-            const navigateFunc = router["navigate"][0];
-            navigateFunc({ url: goTo });
+            const func = router["navigate"];
+            if (func) {
+              func({ url: goTo });
+            }
           }
         });
         break;

src/utils/login.ts

@@ -1,21 +1,23 @@
 import { sendMessageToTestBox } from "../messaging";
 import { LOGIN_FAIL, LOGIN_SUCCESS } from "../messaging/outgoing";
-import { TestBoxEventRouter } from "../router";
-import { LoginEvent } from "../messaging/incoming";
+import { IncomingEventHandlers, LoginEvent } from "../messaging/incoming";
 
 export let loggingIn = false;
 
-export async function autoLogin(data: LoginEvent, router: TestBoxEventRouter) {
+export async function autoLogin(
+  data: LoginEvent,
+  router: Partial<IncomingEventHandlers>
+) {
   let nextUrl: string | boolean;
   loggingIn = true;
   try {
-    const funcs = router["login"];
-    if (!funcs) {
+    const func = router["login"];
+    if (!func) {
       console.log("No login callback exists!");
       sendMessageToTestBox(LOGIN_FAIL);
       return;
     }
-    nextUrl = await Promise.any(funcs.map((func) => func(data)));
+    nextUrl = await func(data);
   } catch (e) {
     console.log(e);
     nextUrl = false;