fix(astro): Reset button state correctly (#49)

.changeset/flat-mayflies-hang.md

@@ -0,0 +1,7 @@
+---
+'@spotlightjs/spotlight-website': patch
+'@spotlightjs/astro': patch
+'@spotlightjs/core': patch
+---
+
+fix(astro): Correctly reset toolbar button state

packages/astro/src/overlay/index.ts

@@ -23,8 +23,20 @@ export default {
       }),
     );
 
-    eventTarget.addEventListener('plugin-toggle', () => {
-      Spotlight.toggleSpotlight();
+    eventTarget.addEventListener('plugin-toggled', e => {
+      // e.detail.state exists, see https://docs.astro.build/en/reference/dev-overlay-plugin-reference/#plugin-toggled
+      const shouldOpen = (e as CustomEvent).detail.state;
+      shouldOpen ? Spotlight.openSpotlight() : Spotlight.closeSpotlight();
+    });
+
+    Spotlight.onClose(() => {
+      eventTarget.dispatchEvent(
+        new CustomEvent('toggle-plugin', {
+          detail: {
+            state: false,
+          },
+        }),
+      );
     });
   },
 } satisfies DevOverlayPlugin;

packages/astro/src/snippets.ts

@@ -8,18 +8,6 @@ init({
   ],
   showTriggerButton: false,
 });
-
-setTimeout(() => {
-  console.log("this message should show up in the Console tab eventually")
-}, 3000);
-
-setTimeout(() => {
-  console.log("this one, too ;)")
-}, 6000);
-
-setTimeout(() => {
-  console.warn("this warning, too ;)")
-}, 6000);
 `;
 
 export const SPOTLIGHT_SERVER_SNIPPET = `
@@ -61,7 +49,4 @@ console.log('[Spotlight]', globalThis.__SENTRY__);
   }
 );
 
-// setTimeout(() => {
-  Sentry.captureException(new Error('does this now show up in spotlight?'));
-// }, 2000);
 `;

packages/core/src/App.tsx

@@ -25,6 +25,7 @@ export default function App({
   const [integrationData, setIntegrationData] = useState<IntegrationData<unknown>>({});
   const [isOnline, setOnline] = useState(false);
   const [triggerButtonCount, setTriggerButtonCount] = useState<TriggerButtonCount>({ general: 0, severe: 0 });
+  const [isOpen, setOpen] = useState(fullScreen);
 
   useEffect(() => {
     // Map that holds the information which kind of content type should be dispatched to which integration(s)
@@ -53,12 +54,20 @@ export default function App({
     };
   }, [integrations]);
 
-  const [isOpen, setOpen] = useState(fullScreen);
+  eventTarget.addEventListener('open', () => {
+    setOpen(true);
+  });
 
-  eventTarget.addEventListener('toggle', () => {
-    setOpen(!isOpen);
+  eventTarget.addEventListener('close', () => {
+    setOpen(false);
   });
 
+  useEffect(() => {
+    if (!isOpen) {
+      eventTarget.dispatchEvent(new CustomEvent('closed'));
+    }
+  }, [isOpen, eventTarget]);
+
   console.log('[Spotlight] Integrations', integrationData);
 
   return (

packages/core/src/index.tsx

@@ -19,10 +19,24 @@ function createStyleSheet(styles: string) {
 const spotlightEventTarget: EventTarget = new EventTarget();
 
 /**
- * Open or close the Spotlight UI
+ * Open the Spotlight debugger Window
  */
-export async function toggleSpotlight() {
-  spotlightEventTarget.dispatchEvent(new Event('toggle'));
+export async function openSpotlight() {
+  spotlightEventTarget.dispatchEvent(new CustomEvent('open'));
+}
+
+/**
+ * Close the Spotlight debugger Window
+ */
+export async function closeSpotlight() {
+  spotlightEventTarget.dispatchEvent(new CustomEvent('close'));
+}
+
+/**
+ * Invokes the passed in callback when the Spotlight debugger Window is closed
+ */
+export async function onClose(cb: () => void) {
+  spotlightEventTarget.addEventListener('closed', cb);
 }
 
 export async function init({

packages/website/package.json

@@ -15,7 +15,7 @@
     "@astrojs/starlight-tailwind": "^2.0.0",
     "@astrojs/tailwind": "^5.0.2",
     "@sentry/astro": "^7.80.0",
-    "astro": "^3.4.0",
+    "astro": "^3.5.4",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.0.24"
   },