fix(event-bus): respect explicit connection config

Author: kolaworld

.changeset/calm-buses-connect.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-event-bus': patch
+---
+
+Honor explicit client connection options when bundlers inject event bus defaults.

packages/event-bus/src/client/client.ts

@@ -89,18 +89,18 @@ export class ClientEventBus {
     this.#eventTarget.dispatchEvent(new CustomEvent('tanstack-connect-success'))
   }
   constructor({
-    port = 4206,
-    host = 'localhost',
-    protocol = 'http',
+    port = getDefaultPort(4206),
+    host = getDefaultHost('localhost'),
+    protocol = getDefaultProtocol('http'),
     debug = false,
     connectToServerBus = false,
   }: ClientEventBusConfig = {}) {
     this.#debug = debug
     this.#broadcastChannel = new BroadcastChannel('tanstack-devtools')
     this.#eventSource = null
-    this.#port = getDefaultPort(port)
-    this.#host = getDefaultHost(host)
-    this.#protocol = getDefaultProtocol(protocol)
+    this.#port = port
+    this.#host = host
+    this.#protocol = protocol
     this.#socket = null
     this.#connectToServerBus = connectToServerBus
     this.#eventTarget = this.getGlobalTarget()

packages/event-bus/tests/client.test.ts

@@ -101,6 +101,33 @@ describe('ClientEventBus', () => {
       expect(mockEventSourceInstances.length).toBe(0)
       bus.stop()
     })
+
+    it('should prefer explicit config over bundler-injected defaults', () => {
+      Object.assign(globalThis, {
+        __TANSTACK_DEVTOOLS_PORT__: 4206,
+        __TANSTACK_DEVTOOLS_HOST__: 'localhost',
+        __TANSTACK_DEVTOOLS_PROTOCOL__: 'http',
+      })
+
+      try {
+        const bus = new ClientEventBus({
+          connectToServerBus: true,
+          port: 443,
+          host: 'devtools.example.com',
+          protocol: 'https',
+        })
+        bus.start()
+
+        expect(mockWebSocketInstances[0].url).toBe(
+          'wss://devtools.example.com:443/__devtools/ws',
+        )
+        bus.stop()
+      } finally {
+        Reflect.deleteProperty(globalThis, '__TANSTACK_DEVTOOLS_PORT__')
+        Reflect.deleteProperty(globalThis, '__TANSTACK_DEVTOOLS_HOST__')
+        Reflect.deleteProperty(globalThis, '__TANSTACK_DEVTOOLS_PROTOCOL__')
+      }
+    })
   })
 
   describe('connectWebSocket with protocol', () => {