feat(overlay): Add onOpen and onSevereEvent callbacks (#161)

.changeset/friendly-seahorses-compete.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+feat(overlay): Add `onOpen` and `onSevereEvent` callbacks

packages/overlay/src/App.tsx

@@ -85,11 +85,20 @@ export default function App({
       spotlightEventTarget.dispatchEvent(new CustomEvent('closed'));
       document.body.style.overflow = 'auto';
     } else {
+      spotlightEventTarget.dispatchEvent(new CustomEvent('opened'));
       document.body.style.overflow = 'hidden';
     }
   }, [isOpen, spotlightEventTarget]);
 
-  log('Integrations', integrationData);
+  useEffect(() => {
+    if (triggerButtonCount.severe > 0) {
+      spotlightEventTarget.dispatchEvent(
+        new CustomEvent('severeEventCount', { detail: { count: triggerButtonCount.severe } }),
+      );
+    }
+  }, [triggerButtonCount, spotlightEventTarget]);
+
+  log('Integration data:', integrationData);
 
   return (
     <>

packages/overlay/src/index.tsx

@@ -43,6 +43,24 @@ export async function onClose(cb: () => void) {
   getSpotlightEventTarget().addEventListener('closed', cb);
 }
 
+/**
+ * Invokes the passed in callback when the Spotlight debugger Window is opened
+ */
+export async function onOpen(cb: () => void) {
+  getSpotlightEventTarget().addEventListener('opened', cb);
+}
+
+/**
+ * Register a callback that is invoked when a severe event is processed
+ * by a Spotlight integration.
+ * A count of the number of collected severe events is passed to the callback.
+ */
+export async function onSevereEvent(cb: (count: number) => void) {
+  getSpotlightEventTarget().addEventListener('severeEventCount', e => {
+    cb((e as CustomEvent).detail?.count ?? 1);
+  });
+}
+
 const DEFAULT_SIDECAR = 'http://localhost:8969/stream';
 
 export async function init({