feat: drastically improve the event buses, split into server/client, add new packages

Author: AlemTuzlak

examples/react/basic/package.json

@@ -9,13 +9,15 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/devtools-event-bus-plugin": "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",
@@ -35,4 +37,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/react/basic/src/index.tsx

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

examples/react/basic/src/plugin.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod'
+import { TanstackDevtoolsEventSubscription } from '@tanstack/devtools-event-bus-plugin'
+
+const eventMap = {
+  'query-devtools:test': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:init': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:query': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+}
+
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<
+  typeof eventMap
+> {
+  constructor() {
+    super({
+      pluginId: 'query-devtools',
+    })
+  }
+}
+
+export const queryPlugin = new QueryDevtoolsPlugin()

examples/react/start/package.json

@@ -17,6 +17,8 @@
     "@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-bus-plugin": "workspace:^",
     "@tanstack/react-devtools": "^0.1.1",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",

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

@@ -1,31 +1,21 @@
+import { queryPlugin } from '@/plugin'
 import { useEffect, useState } from 'react'
-import { devtoolsClient } from '@/client-setup'
-
+queryPlugin.on('query-devtools:test', (event) => {
+  console.log('Received message in here:', event)
+})
 export default function ClientPlugin() {
-  const [events, setEvents] = useState<
+  const [events] = useState<
     Array<{ type: string; payload: { title: string; description: string } }>
   >([])
-  useEffect(() => {
-    devtoolsClient.onAll((event) => {
-      console.log('Received message:', event)
-      setEvents((prev) => [...prev, event])
-    })
-    devtoolsClient.emit({
-      type: 'init',
-      payload: {
-        title: 'Client Plugin Initialized',
-        description: 'Listening for events',
-      },
-    })
-  }, [])
+
   return (
     <div>
       <h1>Client Plugin Initialized</h1>
       <p>Devtools Client is connected.</p>
       <button
         onClick={() =>
-          devtoolsClient.emit({
-            type: 'click-event',
+          queryPlugin.emit({
+            type: 'query-devtools:test',
             payload: {
               title: 'Button Clicked',
               description:

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

@@ -12,6 +12,7 @@ export default function DevtoolsExample() {
     <>
       <QueryClientProvider client={queryClient}>
         <TanstackDevtools
+          hasDevtoolsServer={true}
           plugins={[
             {
               name: 'Tanstack Query',

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

@@ -0,0 +1,29 @@
+import { z } from 'zod'
+import { TanstackDevtoolsEventSubscription } from '@tanstack/devtools-event-bus-plugin'
+
+const eventMap = {
+  'query-devtools:test': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:init': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  'query-devtools:query': z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+}
+
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<
+  typeof eventMap
+> {
+  constructor() {
+    super({
+      pluginId: 'query-devtools',
+    })
+  }
+}
+
+export const queryPlugin = new QueryDevtoolsPlugin()

examples/react/start/src/plugin.ts

@@ -1,70 +1,7 @@
-import {
-  DevtoolsServer,
-  DevtoolsPlugin,
-  type EventMap,
-} from '@tanstack/devtools/server'
-import { z } from 'zod'
-const devtoolsServer = new DevtoolsServer()
+import { TanstackDevtoolsServerEventBus } from '@tanstack/devtools-event-bus/server'
 
-devtoolsServer.start()
-
-devtoolsServer.on('click-event', (payload) => {
-  console.log('Click event received:', payload)
-})
-
-devtoolsServer.onAll((e) => {
-  console.log('All events:', e)
-})
-
-setInterval(() => {
-  console.log('Emitting server event...')
-  devtoolsServer.emit({
-    type: 'server-event',
-    payload: {
-      title: 'Server Event',
-      description: 'This is a custom event emitted by the server.',
-    },
-  })
-}, 5000)
+const devtoolsServer = new TanstackDevtoolsServerEventBus()
 
-const eventMap = {
-  'query-devtools:test': z.object({
-    title: z.string(),
-    description: z.string(),
-  }),
-  'query-devtools:init': z.object({
-    title: z.string(),
-    description: z.string(),
-  }),
-  'query-devtools:b': z.object({
-    title: z.string(),
-    description: z.string(),
-  }),
-} satisfies EventMap<'query-devtools'>
-
-class QueryDevtoolsPlugin extends DevtoolsPlugin<typeof eventMap> {
-  constructor() {
-    super({
-      pluginId: 'query-devtools',
-    })
-  }
-}
-
-const plugin = new QueryDevtoolsPlugin()
-/* plugin.emit({
-  type: `query-devtools:init`,
-  payload: {
-    // Add your payload data here
-  },
-}) */
-
-plugin.onAll((e) => {
-  if (e.type === 'query-devtools:test') {
-    console.log('Received query-devtools:test event:', e.payload)
-  }
-})
-plugin.on('query-devtools:test', (e) => {
-  e.payload
-})
+devtoolsServer.start()
 
 export { devtoolsServer }

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

@@ -11,15 +11,7 @@ const config = defineConfig({
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-    {
-      name: 'custom-devtools',
 
-      configureServer() {
-        devtoolsServer.on('init', (payload) => {
-          console.log('Devtools server initialized:', payload)
-        })
-      },
-    },
     tailwindcss(),
     tanstackStart({
       customViteReactPlugin: true,