fix: fix a bug where event client wouldn't connect to the event bus (#88)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/cold-adults-sleep.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools-event-bus': patch
+---
+
+fix a bug for server event bus not connecting with clients properly

examples/react/basic/src/setup.tsx

@@ -60,6 +60,9 @@ export default function DevtoolsExample() {
   return (
     <>
       <TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
         plugins={[
           {
             name: 'TanStack Query',

examples/react/start/src/components/client-plugin.tsx

@@ -1,5 +1,5 @@
-import { queryPlugin } from '@/plugin'
 import { useEffect, useState } from 'react'
+import { queryPlugin } from '@/plugin'
 
 export default function ClientPlugin() {
   const [events, setEvents] = useState<

packages/devtools-vite/src/utils.ts

@@ -1,4 +1,5 @@
 import { normalizePath } from 'vite'
+// import fs from 'node:fs/promises'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 
@@ -47,3 +48,24 @@ export const handleDevToolsViteRequest = (
     res.write('OK')
   })
 }
+
+/* export const tryReadFile = async (
+  filePath: string
+) => {
+  try {
+    const data = await fs.readFile(filePath, 'utf-8')
+    return data
+  } catch (error) {
+
+    return null
+  }
+}
+
+export const tryParseJson = (jsonString: string) => {
+  try {
+    const result = JSON.parse(jsonString)
+    return result
+  } catch (error) {
+    return null
+  }
+} */

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

@@ -42,11 +42,16 @@ export class EventClient<
     )
   }
   #connectFunction = () => {
+    this.#eventTarget().addEventListener(
+      'tanstack-connect-success',
+      this.#onConnected,
+    )
     if (this.#retryCount < this.#maxRetries) {
       this.#retryCount++
       this.#eventTarget().dispatchEvent(new CustomEvent('tanstack-connect'))
       return
     }
+
     this.#eventTarget().removeEventListener(
       'tanstack-connect',
       this.#connectFunction,
@@ -71,10 +76,6 @@ export class EventClient<
     this.#connectIntervalId = null
     this.#connectEveryMs = 500
 
-    this.#eventTarget().addEventListener(
-      'tanstack-connect-success',
-      this.#onConnected,
-    )
     this.#connectFunction()
     this.startConnectLoop()
   }

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

@@ -17,7 +17,7 @@ declare global {
   // eslint-disable-next-line no-var
   var __TANSTACK_DEVTOOLS_WSS_SERVER__: WebSocketServer | null
   // eslint-disable-next-line no-var
-  var __EVENT_TARGET__: EventTarget | null
+  var __TANSTACK_EVENT_TARGET__: EventTarget | null
 }
 
 export interface ServerEventBusConfig {
@@ -39,14 +39,18 @@ export class ServerEventBus {
     this.emit(event)
   }
   #connectFunction = () => {
+    this.debugLog(
+      'Connection request made to event-bus, replying back with success',
+    )
     this.#eventTarget.dispatchEvent(new CustomEvent('tanstack-connect-success'))
   }
   constructor({ port = 42069, debug = false }: ServerEventBusConfig = {}) {
     this.#port = port
-    this.#eventTarget = globalThis.__EVENT_TARGET__ ?? new EventTarget()
+    this.#eventTarget =
+      globalThis.__TANSTACK_EVENT_TARGET__ ?? new EventTarget()
     // we want to set the global event target only once so that we can emit/listen to events on the server
-    if (!globalThis.__EVENT_TARGET__) {
-      globalThis.__EVENT_TARGET__ = this.#eventTarget
+    if (!globalThis.__TANSTACK_EVENT_TARGET__) {
+      globalThis.__TANSTACK_EVENT_TARGET__ = this.#eventTarget
     }
     this.#server = globalThis.__TANSTACK_DEVTOOLS_SERVER__ ?? null
     this.#wssServer = globalThis.__TANSTACK_DEVTOOLS_WSS_SERVER__ ?? null