feat(overlay): Add direct event sending w/o sidecar (#508)

Working towards #133, supersedes #498

.changeset/nasty-lizards-sleep.md

@@ -0,0 +1,6 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+Add direct event ingestion through `Spotlight.sendEvent('<content-type>', <event>)` to allow sending events without the
+sidecar

.vscode/settings.json

@@ -3,6 +3,7 @@
  "cSpell.words": [
  "Astro",
  "Astro's",
+ "astrojs",
  "contextlines",
  "Endcaps",
  "fontsource",

packages/overlay/src/App.tsx

@@ -43,9 +43,9 @@ export default function App({
  }
  }
 
- const result: [contentType: string, listener: (event: MessageEvent) => void][] = [];
+ const result: Record<string, (event: { data: string | Buffer }) => void> = Object.create(null);
  for (const [contentType, integrations] of contentTypeToIntegrations.entries()) {
- const listener = (event: MessageEvent): void => {
+ const listener = (event: { data: string | Buffer }): void => {
  log(`Received new ${contentType} event`);
  for (const integration of integrations) {
  const newIntegrationData = integration.processEvent
@@ -67,10 +67,10 @@ export default function App({
  }
  };
 
- log('Adding listener for', contentType, 'sum', result.length);
+ log('Adding listener for', contentType);
 
  // `contentType` could for example be "application/x-sentry-envelope"
- result.push([contentType, listener]);
+ result[contentType] = listener;
  }
  return result;
  }, [integrations]);
@@ -139,8 +139,18 @@ export default function App({
  navigate(e.detail);
  };
 
- return { clearEvents, onOpen, onClose, onNavigate, onToggle };
- }, [integrations, navigate, sidecarUrl]);
+ const onEvent = ({ detail }: CustomEvent<{ contentType: string; data: string }>) => {
+ const { contentType, data } = detail;
+ const listener = contentTypeListeners[contentType];
+ if (!listener) {
+ log('Got event for unknown content type:', contentType);
+ return;
+ }
+ listener({ data });
+ };
+
+ return { clearEvents, onEvent, onOpen, onClose, onNavigate, onToggle };
+ }, [integrations, navigate, sidecarUrl, contentTypeListeners]);
 
  useKeyPress(['ctrlKey', 'F12'], eventHandlers.onToggle);
 
@@ -150,13 +160,15 @@ export default function App({
  spotlightEventTarget.addEventListener('close', eventHandlers.onClose);
  spotlightEventTarget.addEventListener('navigate', eventHandlers.onNavigate as EventListener);
  spotlightEventTarget.addEventListener('clearEvents', eventHandlers.clearEvents as EventListener);
+ spotlightEventTarget.addEventListener('event', eventHandlers.onEvent as EventListener);
 
  return (): undefined => {
  log('useEffect[destructor]: Removing event listeners');
  spotlightEventTarget.removeEventListener('open', eventHandlers.onOpen as EventListener);
  spotlightEventTarget.removeEventListener('close', eventHandlers.onClose);
  spotlightEventTarget.removeEventListener('navigate', eventHandlers.onNavigate as EventListener);
  spotlightEventTarget.removeEventListener('clearEvents', eventHandlers.clearEvents as EventListener);
+ spotlightEventTarget.removeEventListener('event', eventHandlers.onEvent as EventListener);
  };
  }, [spotlightEventTarget, eventHandlers]);
 

packages/overlay/src/index.tsx

@@ -57,6 +57,13 @@ export async function onClose(cb: EventListener) {
  on('closed', cb);
 }
 
+/**
+ * Send an event to spotlight without the sidecar
+ */
+export async function sendEvent(contentType: string, data: string) {
+ trigger('event', { contentType, data });
+}
+
 /**
  * Invokes the passed in callback when the Spotlight debugger Window is opened
  */
@@ -70,9 +77,7 @@ export async function onOpen(cb: EventListener) {
  * A count of the number of collected severe events is passed to the callback.
  */
 export async function onSevereEvent(cb: (count: number) => void) {
- on('severeEventCount', e => {
- cb((e as CustomEvent).detail?.count ?? 1);
- });
+ on('severeEventCount', e => cb((e as CustomEvent).detail?.count ?? 1));
 }
 
 function isSpotlightInjected() {

packages/overlay/src/sidecar.ts

@@ -3,13 +3,14 @@ import { log } from './lib/logger';
 
 export function connectToSidecar(
  sidecarUrl: string,
- contentTypeListeners: [contentType: string, listener: (event: MessageEvent) => void][],
+ // Content Type to listener
+ contentTypeListeners: Record<string, (event: MessageEvent) => void>,
  setOnline: React.Dispatch<React.SetStateAction<boolean>>,
 ): () => void {
  log('Connecting to sidecar at', sidecarUrl);
  const source = new EventSource(sidecarUrl);
 
- for (const [contentType, listener] of contentTypeListeners) {
+ for (const [contentType, listener] of Object.entries(contentTypeListeners)) {
  source.addEventListener(contentType, listener);
  }
 
@@ -24,10 +25,10 @@ export function connectToSidecar(
  });
 
  return () => {
- log(`Removing ${contentTypeListeners.length} listeners`);
- for (const typeAndListener of contentTypeListeners) {
- source.removeEventListener(typeAndListener[0], typeAndListener[1]);
- log('Removed listener for type', typeAndListener[0]);
+ log('Removing all content type listeners');
+ for (const [contentType, listener] of Object.entries(contentTypeListeners)) {
+ source.removeEventListener(contentType, listener);
+ log('Removed listener for type', contentType);
  }
  };
 }