feat: create event bus server + client communication for devtools

Author: AlemTuzlak

examples/react/start/package.json

@@ -23,15 +23,17 @@
     "@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",
@@ -43,4 +45,4 @@
     "vitest": "^3.1.2",
     "web-vitals": "^4.2.4"
   }
-}
+}

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

@@ -0,0 +1,7 @@
+import { DevtoolsClient } from '@tanstack/devtools/client'
+
+const devtoolsClient = new DevtoolsClient()
+
+devtoolsClient.connect()
+
+export { devtoolsClient }

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

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import { devtoolsClient } from '@/client-setup'
+
+export default function ClientPlugin() {
+  const [events, setEvents] = 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',
+            payload: {
+              title: 'Button Clicked',
+              description:
+                'This is a custom event triggered by the client plugin.',
+            },
+          })
+        }
+      >
+        Click me bro
+      </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()
 
@@ -24,6 +25,10 @@ export default function DevtoolsExample() {
               name: 'Prisma Studio',
               render: <StudioPlugin />,
             },
+            {
+              name: 'Client Plugin',
+              render: <ClientPlugin />,
+            },
           ]}
         />
       </QueryClientProvider>

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

@@ -0,0 +1,70 @@
+import {
+  DevtoolsServer,
+  DevtoolsPlugin,
+  type EventMap,
+} from '@tanstack/devtools/server'
+import { z } from 'zod'
+const devtoolsServer = new DevtoolsServer()
+
+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 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
+})
+
+export { devtoolsServer }

examples/react/start/vite.config.ts

@@ -3,13 +3,23 @@ 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'],
     }),
+    {
+      name: 'custom-devtools',
+
+      configureServer() {
+        devtoolsServer.on('init', (payload) => {
+          console.log('Devtools server initialized:', payload)
+        })
+      },
+    },
     tailwindcss(),
     tanstackStart({
       customViteReactPlugin: true,

package.json

@@ -78,4 +78,4 @@
     "@tanstack/react-devtools": "workspace:*",
     "@tanstack/solid-devtools": "workspace:*"
   }
-}
+}

packages/devtools/package.json

@@ -32,6 +32,26 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./server": {
+      "import": {
+        "types": "./dist/esm/server/index.d.ts",
+        "default": "./dist/esm/server/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/server/index.d.cts",
+        "default": "./dist/cjs/server/index.cjs"
+      }
+    },
+    "./client": {
+      "import": {
+        "types": "./dist/esm/client/index.d.ts",
+        "default": "./dist/esm/client/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/client/index.d.cts",
+        "default": "./dist/cjs/client/index.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -56,12 +76,16 @@
     "@solid-primitives/keyboard": "^1.2.8",
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
-    "solid-js": "^1.9.7"
+    "solid-js": "^1.9.7",
+    "ws": "^8.18.3"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {
+    "@standard-schema/spec": "^1.0.0",
+    "@types/node": "^22.15.2",
+    "@types/ws": "^8.18.1",
     "vite-plugin-solid": "^2.11.6"
   }
-}
+}