chore: fix some bugs, eslint, knip

Author: AlemTuzlak

packages/devtools/src/client/client.ts

@@ -12,12 +12,13 @@ export class DevtoolsClient {
     new Map()
   #eventTarget: EventTarget
 
-  constructor({ port = 42069, eventTarget = new EventTarget() } = {}) {
+  constructor({ port = 42069 } = {}) {
     this.#port = port
     this.#socket = null
     this.#eventSource = null
     this.#globalListeners = new Set()
-    this.#eventTarget = eventTarget
+    this.#eventTarget =
+      typeof window !== 'undefined' ? window : new EventTarget()
   }
 
   private connectSSE() {
@@ -134,10 +135,8 @@ export class DevtoolsClient {
   on(eventName: string, cb: (event: DevtoolsEvent<string>) => void) {
     const handler = (e: Event) => cb((e as CustomEvent).detail)
     this.#eventTarget.addEventListener(eventName, handler)
-    this.#globalListeners.add(cb)
     return () => {
       this.#eventTarget.removeEventListener(eventName, handler)
-      this.#globalListeners.delete(cb)
     }
   }
   /**

packages/devtools/src/server/plugin.ts

@@ -1,4 +1,5 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec'
+
 interface DevtoolsEvent<TEventName extends string, TPayload = any> {
   type: TEventName
   payload: TPayload
@@ -11,9 +12,9 @@ export type EventMap<TEventPrefix extends string> = Record<
 >
 
 type AllDevtoolsEvents<TEventMap extends Record<string, any>> = {
-  [K in keyof TEventMap]: DevtoolsEvent<
-    K & string,
-    StandardSchemaV1.InferOutput<TEventMap[K]>
+  [Key in keyof TEventMap]: DevtoolsEvent<
+    Key & string,
+    StandardSchemaV1.InferOutput<TEventMap[Key]>
   >
 }[keyof TEventMap]
 
@@ -32,7 +33,7 @@ export class DevtoolsPlugin<
   #globalListeners: Set<(msg: DevtoolsEvent<string, any>) => void>
   #eventListeners: Map<string, Set<(msg: DevtoolsEvent<string, any>) => void>> =
     new Map()
-
+  #eventSource: EventSource | null
   constructor({
     port = 42069,
     pluginId,
@@ -42,12 +43,28 @@ export class DevtoolsPlugin<
     pluginId: TPluginId
     eventTarget?: EventTarget
   }) {
+    this.#eventSource = null
     this.#port = port
     this.#socket = null
     this.#globalListeners = new Set()
     this.#pluginId = pluginId
-    this.#eventTarget =
-      eventTarget || (globalThis as any).__EVENT_TARGET__ || new EventTarget()
+    this.#eventTarget = this.getGlobalTarget(eventTarget)
+  }
+
+  private connectSSE() {
+    this.#eventSource = new EventSource(
+      `http://localhost:${this.#port}/__devtools/sse`,
+    )
+    this.#eventSource.onmessage = (e) => this.handleEventReceived(e.data)
+  }
+  private getGlobalTarget(eventTarget?: EventTarget) {
+    if (typeof window !== 'undefined') {
+      return window
+    }
+    if (typeof globalThis !== 'undefined' && globalThis.__EVENT_TARGET__) {
+      return globalThis.__EVENT_TARGET__
+    }
+    return eventTarget || new EventTarget()
   }
 
   private connectWebSocket() {
@@ -63,10 +80,13 @@ export class DevtoolsPlugin<
   }
 
   connect() {
-    if (typeof window === 'undefined') return
     try {
       this.connectWebSocket()
-    } catch {}
+    } catch {
+      // Do not try to connect to SSE if we're on the server side
+      if (typeof window === 'undefined') return
+      this.connectSSE()
+    }
   }
 
   private emitToGlobalListeners(event: DevtoolsEvent<string, any>) {
@@ -94,35 +114,51 @@ export class DevtoolsPlugin<
 
   private emitEventToBus(event: DevtoolsEvent<string, any>) {
     const json = JSON.stringify(event)
+    // try to emit it to the event bus first
     if (this.#socket && this.#socket.readyState === WebSocket.OPEN) {
       this.#socket.send(json)
+      // try to emit to SSE if WebSocket is not available (this will only happen on the client side)
+    } else if (this.#eventSource) {
+      fetch(`http://localhost:${this.#port}/__devtools/send`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: json,
+      }).catch(() => {})
+      // otherwise, emit it to the event target
+    } else {
+      this.emitEventToEventTarget(event)
     }
   }
 
-  emit<K extends keyof TEventMap>(
+  private emitEventToEventTarget(event: DevtoolsEvent<string, any>) {
+    this.#eventTarget.dispatchEvent(
+      new CustomEvent(event.type, { detail: event }),
+    )
+  }
+
+  emit<TKey extends keyof TEventMap>(
     event: DevtoolsEvent<
-      K & string,
-      StandardSchemaV1.InferOutput<TEventMap[K]>
+      TKey & string,
+      StandardSchemaV1.InferOutput<TEventMap[TKey]>
     >,
   ) {
     this.emitEventToBus(event)
   }
 
-  on<K extends keyof TEventMap>(
-    eventName: K,
+  on<TKey extends keyof TEventMap>(
+    eventName: TKey,
     cb: (
       event: DevtoolsEvent<
-        K & string,
-        StandardSchemaV1.InferOutput<TEventMap[K]>
+        TKey & string,
+        StandardSchemaV1.InferOutput<TEventMap[TKey]>
       >,
     ) => void,
   ) {
     const handler = (e: Event) => cb((e as CustomEvent).detail)
     this.#eventTarget.addEventListener(eventName as string, handler)
-    this.#globalListeners.add(cb as any)
+
     return () => {
       this.#eventTarget.removeEventListener(eventName as string, handler)
-      this.#globalListeners.delete(cb as any)
     }
   }
 

packages/devtools/src/server/server.ts

@@ -3,20 +3,18 @@ import { WebSocket, WebSocketServer } from 'ws'
 
 // Shared types
 
-export interface DevtoolsMessage {
-  pluginId: string
-  type: string
-  payload?: any
-}
-export interface DevtoolsEvent<TEventName extends string, TPayload = any> {
+interface DevtoolsEvent<TEventName extends string, TPayload = any> {
   type: TEventName
   payload: TPayload
   pluginId?: string // Optional pluginId to filter events by plugin
 }
 // Used so no new server starts up when HMR happens
 declare global {
+  // eslint-disable-next-line no-var
   var __DEVTOOLS_SERVER__: http.Server | null
+  // eslint-disable-next-line no-var
   var __DEVTOOLS_WSS_SERVER__: WebSocketServer | null
+  // eslint-disable-next-line no-var
   var __EVENT_TARGET__: EventTarget | null
 }
 
@@ -30,14 +28,15 @@ export class DevtoolsServer {
   #globalListeners = new Set<(msg: DevtoolsEvent<string>) => void>()
   constructor({ port = 42069, eventTarget = new EventTarget() } = {}) {
     this.#port = port
-    this.#eventTarget = eventTarget
-    globalThis.__EVENT_TARGET__ = eventTarget
+    this.#eventTarget = globalThis.__EVENT_TARGET__ ?? eventTarget
+    if (!globalThis.__EVENT_TARGET__) {
+      globalThis.__EVENT_TARGET__ = eventTarget
+    }
     this.#server = globalThis.__DEVTOOLS_SERVER__ ?? null
     this.#wssServer = globalThis.__DEVTOOLS_WSS_SERVER__ ?? null
   }
 
   private emitToServer(event: DevtoolsEvent<string>) {
-    console.log(this.#globalListeners.entries())
     this.#globalListeners.forEach((l) => l(event))
     this.#eventTarget.dispatchEvent(
       new CustomEvent(event.type, { detail: event }),