chore: improve the client event bus api

Author: AlemTuzlak

packages/devtools/src/core.tsx

@@ -3,29 +3,12 @@ import { Portal, render } from 'solid-js/web'
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
 import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
+import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
 import type {
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
 } from './context/devtools-context'
 
-export interface EventBusConfig {
-  /**
-   * Optional flag to indicate if the devtools server event bus is available to connect to.
-   * This is used to determine if the devtools can connect to the server for real-time event streams.
-   */
-  hasServer?: boolean
-
-  /**
-   * Optional flag to enable debug mode for the event bus.
-   */
-  debug?: boolean
-
-  /**
-   * Optional port to connect to the devtools server event bus.
-   * Defaults to 42069.
-   */
-  port?: number
-}
 export interface TanStackDevtoolsInit {
   /**
    * Configuration for the devtools shell. These configuration options are used to set the
@@ -53,7 +36,7 @@ export interface TanStackDevtoolsInit {
    * ```
    */
   plugins?: Array<TanStackDevtoolsPlugin>
-  eventBusConfig?: EventBusConfig
+  eventBusConfig?: ClientEventBusConfig
 }
 
 export class TanStackDevtoolsCore {
@@ -65,7 +48,7 @@ export class TanStackDevtoolsCore {
   #dispose?: () => void
   #Component: any
   #eventBus: ClientEventBus | undefined
-  #eventBusConfig: EventBusConfig | undefined
+  #eventBusConfig: ClientEventBusConfig | undefined
 
   constructor(init: TanStackDevtoolsInit) {
     this.#plugins = init.plugins || []
@@ -83,10 +66,9 @@ export class TanStackDevtoolsCore {
     const mountTo = el
     const dispose = render(() => {
       this.#Component = lazy(() => import('./devtools'))
-      const { hasServer, ...rest } = this.#eventBusConfig || {}
       const Devtools = this.#Component
-      this.#eventBus = new ClientEventBus(rest)
-      this.#eventBus.start(hasServer)
+      this.#eventBus = new ClientEventBus(this.#eventBusConfig)
+      this.#eventBus.start()
       return (
         <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>
@@ -116,3 +98,5 @@ export class TanStackDevtoolsCore {
     }
   }
 }
+
+export type { ClientEventBusConfig }

packages/devtools/src/index.ts

@@ -1,6 +1,6 @@
 export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants'
 export { TanStackDevtoolsCore } from './core'
-export type { TanStackDevtoolsInit, EventBusConfig } from './core'
+export type { TanStackDevtoolsInit, ClientEventBusConfig } from './core'
 export type {
   TanStackDevtoolsPlugin,
   TanStackDevtoolsConfig,

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

@@ -4,22 +4,47 @@ interface TanStackDevtoolsEvent<TEventName extends string, TPayload = any> {
   pluginId?: string // Optional pluginId to filter events by plugin
 }
 
+export interface ClientEventBusConfig {
+  /**
+   * Optional flag to indicate if the devtools server event bus is available to connect to.
+   * This is used to determine if the devtools can connect to the server for real-time event streams.
+   */
+  connectToServerBus?: boolean
+
+  /**
+   * Optional flag to enable debug mode for the event bus.
+   */
+  debug?: boolean
+
+  /**
+   * Optional port to connect to the devtools server event bus.
+   * Defaults to 42069.
+   */
+  port?: number
+}
+
 export class ClientEventBus {
   #port: number
   #socket: WebSocket | null
   #eventSource: EventSource | null
   #eventTarget: EventTarget
   #debug: boolean
+  #connectToServerBus: boolean
   #dispatcher = (e: Event) => {
     const event = (e as CustomEvent).detail
     this.emitToServer(event)
     this.emitToClients(event)
   }
-  constructor({ port = 42069, debug = false } = {}) {
+  constructor({
+    port = 42069,
+    debug = false,
+    connectToServerBus = false,
+  }: ClientEventBusConfig = {}) {
     this.#debug = debug
     this.#eventSource = null
     this.#port = port
     this.#socket = null
+    this.#connectToServerBus = connectToServerBus
     this.#eventTarget = this.getGlobalTarget()
     this.debugLog('Initializing client event bus')
   }
@@ -53,12 +78,12 @@ export class ClientEventBus {
       }).catch(() => {})
     }
   }
-  start(hasServer?: boolean) {
+  start() {
     this.debugLog('Starting client event bus')
     if (typeof window === 'undefined') {
       return
     }
-    if (hasServer) {
+    if (this.#connectToServerBus) {
       this.connect()
     }
     this.#eventTarget = window

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

@@ -1 +1,2 @@
 export { ClientEventBus } from './client'
+export type { ClientEventBusConfig } from './client'

packages/react-devtools/src/devtools.tsx

@@ -7,7 +7,7 @@ import {
 import { createPortal } from 'react-dom'
 import type { JSX } from 'react'
 import type {
-  EventBusConfig,
+  ClientEventBusConfig,
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
 } from '@tanstack/devtools'
@@ -87,7 +87,7 @@ export interface TanStackDevtoolsReactInit {
   /**
    * Configuration for the TanStack Devtools client event bus.
    */
-  eventBusConfig?: EventBusConfig
+  eventBusConfig?: ClientEventBusConfig
 }
 
 const convertRender = (

packages/solid-devtools/src/devtools.tsx

@@ -3,7 +3,7 @@ import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import type { JSX } from 'solid-js'
 import type {
-  EventBusConfig,
+  ClientEventBusConfig,
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
 } from '@tanstack/devtools'
@@ -90,7 +90,7 @@ interface TanstackDevtoolsInit {
   /**
    * Configuration for the TanStack Devtools client event bus.
    */
-  eventBusConfig?: EventBusConfig
+  eventBusConfig?: ClientEventBusConfig
 }
 
 export const TanstackDevtools = ({