From 71b31eff159d8ce36035a3c7b2926c154e0e6ddd Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Tue, 28 Nov 2023 19:22:41 +0100
Subject: [PATCH] feat(overlay): Add `onOpen` and `onSevereEvent` callbacks
 (#161)

---
 .changeset/friendly-seahorses-compete.md |  5 +++++
 packages/overlay/src/App.tsx             | 11 ++++++++++-
 packages/overlay/src/index.tsx           | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/friendly-seahorses-compete.md

diff --git a/.changeset/friendly-seahorses-compete.md b/.changeset/friendly-seahorses-compete.md
new file mode 100644
index 00000000..c23c993b
--- /dev/null
+++ b/.changeset/friendly-seahorses-compete.md
@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+feat(overlay): Add `onOpen` and `onSevereEvent` callbacks
diff --git a/packages/overlay/src/App.tsx b/packages/overlay/src/App.tsx
index aff7839f..9f1b62de 100644
--- a/packages/overlay/src/App.tsx
+++ b/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 (
     <>
diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx
index e87af4c9..870b94c5 100644
--- a/packages/overlay/src/index.tsx
+++ b/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({