Merge pull request #11 from TanStack/feat/bus-connection

feat: create event bus server + client communication for devtools

Author: AlemTuzlak

.changeset/metal-aliens-juggle.md

@@ -0,0 +1,15 @@
+---
+'@tanstack/devtools-event-client': minor
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools-event-bus': minor
+'@tanstack/devtools': minor
+---
+
+Added event bus functionality into @tanstack/devtools
+
+- @tanstack/devtools now comes with an integrated Event Bus on the Client.
+- The Event Bus allows for seamless communication between different parts of your running application
+  without tight coupling.
+- Exposed APIs for publishing and subscribing to events.
+- Added config for the client event bus

examples/react/basic/package.json

@@ -9,13 +9,15 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/devtools-event-client": "workspace:^",
     "@tanstack/react-devtools": "^0.1.1",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.130.2",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "zod": "^4.0.14"
   },
   "devDependencies": {
     "@types/react": "^19.1.2",

examples/react/basic/src/index.tsx

@@ -1,6 +1,17 @@
 import ReactDOM from 'react-dom/client'
 import Devtools from './setup'
+import { queryPlugin } from './plugin'
+setTimeout(() => {
+  queryPlugin.emit('test', {
+    title: 'Test Event',
+    description:
+      'This is a test event from the TanStack Query Devtools plugin.',
+  })
+}, 1000)
 
+queryPlugin.on('test', (event) => {
+  console.log('Received test event:', event)
+})
 function App() {
   return (
     <div>

examples/react/basic/src/plugin.ts

@@ -0,0 +1,25 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+
+interface EventMap {
+  'query-devtools:test': {
+    title: string
+    description: string
+  }
+  'query-devtools:init': {
+    title: string
+    description: string
+  }
+  'query-devtools:query': {
+    title: string
+    description: string
+  }
+}
+class QueryDevtoolsPlugin extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'query-devtools',
+    })
+  }
+}
+
+export const queryPlugin = new QueryDevtoolsPlugin()

examples/react/start/package.json

@@ -17,21 +17,25 @@
     "@prisma/extension-accelerate": "^2.0.2",
     "@prisma/studio-core": "^0.5.1",
     "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/devtools-event-bus": "workspace:^",
+    "@tanstack/devtools-event-client": "workspace:^",
     "@tanstack/react-devtools": "^0.1.1",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.130.2",
     "@tanstack/react-router-with-query": "^1.130.2",
-    "@tanstack/react-start": "^1.130.2",
+    "@tanstack/react-start": "^1.130.15",
     "@tanstack/router-plugin": "^1.121.2",
     "prisma": "^6.13.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.0.6",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "zod": "^4.0.14"
   },
   "devDependencies": {
+    "@tanstack/devtools": "workspace:^",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.1.2",

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

@@ -0,0 +1,41 @@
+import { queryPlugin } from '@/plugin'
+import { useEffect, useState } from 'react'
+
+export default function ClientPlugin() {
+  const [events, setEvents] = useState<
+    Array<{ type: string; payload: { title: string; description: string } }>
+  >([])
+  useEffect(() => {
+    const cleanup = queryPlugin.on('test', (event) => {
+      console.log('Received message in here:', event)
+      setEvents((prev) => [...prev, event as any])
+    })
+
+    return cleanup
+  }, [])
+  return (
+    <div>
+      <h1>Client Plugin Initialized</h1>
+      <p>Devtools Client is connected.</p>
+      <button
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+        onClick={() => {
+          console.log('Button clicked, emitting event')
+          queryPlugin.emit('test', {
+            title: 'Button Clicked',
+            description:
+              'This is a custom event triggered by the client plugin.',
+          })
+        }}
+      >
+        Click me
+      </button>
+      {events.map((event, i) => (
+        <div key={i}>
+          <h2>{event.payload.title}</h2>
+          <p style={{ color: 'gray' }}>{event.payload.description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

examples/react/start/src/components/devtools.tsx

@@ -3,6 +3,7 @@ import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { TanstackDevtools } from '@tanstack/react-devtools'
 import { StudioPlugin } from './prisma-plugin'
+import ClientPlugin from './client-plugin'
 
 const queryClient = new QueryClient()
 
@@ -11,6 +12,9 @@ export default function DevtoolsExample() {
     <>
       <QueryClientProvider client={queryClient}>
         <TanstackDevtools
+          eventBusConfig={{
+            debug: true,
+          }}
           plugins={[
             {
               name: 'Tanstack Query',
@@ -24,6 +28,10 @@ export default function DevtoolsExample() {
               name: 'Prisma Studio',
               render: <StudioPlugin />,
             },
+            {
+              name: 'Client Plugin',
+              render: <ClientPlugin />,
+            },
           ]}
         />
       </QueryClientProvider>

examples/react/start/src/plugin.ts

@@ -0,0 +1,26 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+
+interface EventMap {
+  'query-devtools:test': {
+    title: string
+    description: string
+  }
+  'query-devtools:init': {
+    title: string
+    description: string
+  }
+  'query-devtools:query': {
+    title: string
+    description: string
+  }
+}
+
+class QueryDevtoolsClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'query-devtools',
+    })
+  }
+}
+
+export const queryPlugin = new QueryDevtoolsClient()

examples/react/start/src/server-setup.ts

@@ -0,0 +1,7 @@
+import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
+
+const devtoolsServer = new ServerEventBus()
+
+devtoolsServer.start()
+
+export { devtoolsServer }

examples/react/start/vite.config.ts

@@ -3,13 +3,15 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
+//import { devtoolsServer } from './src/server-setup'
 
 const config = defineConfig({
   plugins: [
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
+
     tailwindcss(),
     tanstackStart({
       customViteReactPlugin: true,