ref: Refactor sidecar connection code for other sources

This is the first step to send events into Spotlight UI through other means than the sidecar connection.

Related to #133 and #498.

packages/overlay/src/App.tsx

@@ -27,27 +27,59 @@ export default function App({
   const [isOpen, setOpen] = useState(openOnInit);
   log('App rerender', integrationData, isOnline, triggerButtonCount, isOpen);
 
-  // Map that holds the information which kind of content type should be dispatched to which integration(s)
-  const contentTypeToIntegrations = useMemo(() => {
-    const result = new Map<string, Integration[]>();
+  const contentTypeListeners = useMemo(() => {
+    // Map that holds the information which kind of content type should be dispatched to which integration(s)
+    const contentTypeToIntegrations = new Map<string, Integration[]>();
     for (const integration of integrations) {
       if (!integration.forwardedContentType) continue;
 
       for (const contentType of integration.forwardedContentType) {
-        let integrationsForContentType = result.get(contentType);
+        let integrationsForContentType = contentTypeToIntegrations.get(contentType);
         if (!integrationsForContentType) {
           integrationsForContentType = [];
-          result.set(contentType, integrationsForContentType);
+          contentTypeToIntegrations.set(contentType, integrationsForContentType);
         }
         integrationsForContentType.push(integration);
       }
     }
+
+    const result: [contentType: string, listener: (event: MessageEvent) => void][] = [];
+
+    for (const [contentType, integrations] of contentTypeToIntegrations.entries()) {
+      const listener = (event: MessageEvent): void => {
+        log(`Received new ${contentType} event`);
+        for (const integration of integrations) {
+          const integrationData = integration.processEvent
+            ? integration.processEvent({
+                contentType,
+                data: event.data,
+              })
+            : { event };
+
+          if (!integrationData) {
+            continue;
+          }
+          setIntegrationData(prev => {
+            const integrationName = integration.name;
+            return {
+              ...prev,
+              [integrationName]: [...(prev[integrationName] || []), integrationData],
+            };
+          });
+        }
+      };
+
+      log('Adding listener for', contentType, 'sum', result.length);
+
+      // `contentType` could for example be "application/x-sentry-envelope"
+      result.push([contentType, listener]);
+    }
     return result;
   }, [integrations]);
 
   useEffect(
-    () => connectToSidecar(sidecarUrl, contentTypeToIntegrations, setIntegrationData, setOnline) as () => undefined,
-    [sidecarUrl, contentTypeToIntegrations],
+    () => connectToSidecar(sidecarUrl, contentTypeListeners, setOnline) as () => undefined,
+    [sidecarUrl, contentTypeListeners],
   );
 
   const spotlightEventTarget = useMemo(() => getSpotlightEventTarget(), []);

packages/overlay/src/sidecar.ts

@@ -1,46 +1,15 @@
 import type React from 'react';
-import type { Integration, IntegrationData } from './integrations/integration';
 import { log } from './lib/logger';
 
 export function connectToSidecar(
   sidecarUrl: string,
-  contentTypeToIntegrations: Map<string, Integration<unknown>[]>,
-  setIntegrationData: React.Dispatch<React.SetStateAction<IntegrationData<unknown>>>,
+  contentTypeListeners: [contentType: string, listener: (event: MessageEvent) => void][],
   setOnline: React.Dispatch<React.SetStateAction<boolean>>,
 ): () => void {
   log('Connecting to sidecar at', sidecarUrl);
   const source = new EventSource(sidecarUrl);
 
-  const contentTypeListeners: [contentType: string, listener: (event: MessageEvent) => void][] = [];
-
-  for (const [contentType, integrations] of contentTypeToIntegrations.entries()) {
-    const listener = (event: MessageEvent): void => {
-      log(`Received new ${contentType} event`);
-      for (const integration of integrations) {
-        const integrationData = integration.processEvent
-          ? integration.processEvent({
-              contentType,
-              data: event.data,
-            })
-          : { event };
-
-        if (!integrationData) {
-          continue;
-        }
-        setIntegrationData(prev => {
-          const integrationName = integration.name;
-          return {
-            ...prev,
-            [integrationName]: [...(prev[integrationName] || []), integrationData],
-          };
-        });
-      }
-    };
-
-    log('Adding listener for', contentType, 'sum', contentTypeListeners.length);
-
-    // `contentType` could for example be "application/x-sentry-envelope"
-    contentTypeListeners.push([contentType, listener]);
+  for (const [contentType, listener] of contentTypeListeners) {
     source.addEventListener(contentType, listener);
   }