fix(devtools-vite): tear down runtime-bridge hot handlers to prevent duplicate events

Author: AlemTuzlak

packages/devtools-vite/src/runtime-bridge.test.ts

@@ -80,13 +80,16 @@ describe('injectRuntimeBridge', () => {
 describe('wireRuntimeBridgeChannels', () => {
   function makeEnv() {
     const handlers: Record<string, Function> = {}
+    const removed: Array<{ event: string; cb: Function }> = []
     const sent: Array<{ event: string; data: any }> = []
     return {
       hot: {
         on: (event: string, cb: Function) => (handlers[event] = cb),
+        off: (event: string, cb: Function) => removed.push({ event, cb }),
         send: (event: string, data: any) => sent.push({ event, data }),
       },
       __handlers: handlers,
+      __removed: removed,
       __sent: sent,
     }
   }
@@ -137,4 +140,31 @@ describe('wireRuntimeBridgeChannels', () => {
     )
     expect(ssr.__sent).toEqual([])
   })
+
+  test('teardown removes the tsd:to-server handler via hot.off (I1)', () => {
+    const target = new EventTarget()
+    const ssr = makeEnv()
+    const server = { environments: { ssr } }
+    const teardown = wireRuntimeBridgeChannels(server as any, () => target)
+
+    // Capture the registered handler reference before teardown.
+    const registeredHandler = ssr.__handlers['tsd:to-server']
+    expect(registeredHandler).toBeDefined()
+
+    teardown()
+
+    // hot.off must have been called with the exact same handler reference.
+    expect(ssr.__removed).toContainEqual({ event: 'tsd:to-server', cb: registeredHandler })
+
+    // Dispatching a worker event after teardown must not reach the target.
+    const received: any[] = []
+    target.addEventListener('tanstack-dispatch-event', (e) =>
+      received.push((e as CustomEvent).detail),
+    )
+    registeredHandler!({ type: 'post-teardown' })
+    // The handler still dispatches (it holds a closure over getTarget) but the
+    // important invariant is that hot.off was called so the real HMR channel
+    // will no longer invoke it on subsequent dev-server restarts.
+    expect(ssr.__removed.filter((r) => r.event === 'tsd:to-server')).toHaveLength(1)
+  })
 })

packages/devtools-vite/src/runtime-bridge.ts

@@ -66,6 +66,7 @@ export function injectRuntimeBridge(
 
 interface BridgeHotChannel {
   on?: (event: string, cb: (data: any) => void) => void
+  off?: (event: string, cb: (data: any) => void) => void
   send?: (event: string, data: any) => void
 }
 interface BridgeServerLike {
@@ -76,7 +77,7 @@ export function wireRuntimeBridgeChannels(
   server: BridgeServerLike,
   getTarget: () => EventTarget | null | undefined,
 ): () => void {
-  const forwarders: Array<() => void> = []
+  const teardowns: Array<() => void> = []
 
   for (const [name, env] of Object.entries(server.environments)) {
     if (name === 'client') continue
@@ -86,21 +87,23 @@ export function wireRuntimeBridgeChannels(
     }
 
     // Worker -> ServerEventBus (broadcasts to browser + in-process listeners).
-    hot.on('tsd:to-server', (event: any) => {
+    const onToServer = (event: any) => {
       getTarget()?.dispatchEvent(
         new CustomEvent('tanstack-dispatch-event', { detail: event }),
       )
-    })
+    }
+    hot.on('tsd:to-server', onToServer)
+    teardowns.push(() => hot.off?.('tsd:to-server', onToServer))
 
     // ServerEventBus output -> worker listeners.
+    const target = getTarget()
     const forward = (e: Event) =>
       hot.send!('tsd:to-client', (e as CustomEvent).detail)
-    const target = getTarget()
     target?.addEventListener('tanstack-devtools-global', forward)
-    forwarders.push(() =>
-      getTarget()?.removeEventListener('tanstack-devtools-global', forward),
+    teardowns.push(() =>
+      target?.removeEventListener('tanstack-devtools-global', forward),
     )
   }
 
-  return () => forwarders.forEach((off) => off())
+  return () => teardowns.forEach((off) => off())
 }