feat: improve plugin ts typing

Author: AlemTuzlak

examples/react/basic/src/index.tsx

@@ -2,17 +2,14 @@ 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',
+  queryPlugin.emit('test', {
+    title: 'Test Event',
+    description:
+      'This is a test event from the TanStack Query Devtools plugin.',
   })
 }, 1000)
 
-queryPlugin.on('query-devtools:test', (event) => {
+queryPlugin.on('test', (event) => {
   console.log('Received test event:', event)
 })
 function App() {

examples/react/basic/src/plugin.ts

@@ -1,24 +1,20 @@
-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(),
-  }),
+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 TanstackDevtoolsEventSubscription<
-  typeof eventMap
-> {
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<EventMap> {
   constructor() {
     super({
       pluginId: 'query-devtools',

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

@@ -6,9 +6,9 @@ export default function ClientPlugin() {
     Array<{ type: string; payload: { title: string; description: string } }>
   >([])
   useEffect(() => {
-    const cleanup = queryPlugin.on('query-devtools:test', (event) => {
+    const cleanup = queryPlugin.on('test', (event) => {
       console.log('Received message in here:', event)
-      setEvents((prev) => [...prev, event])
+      setEvents((prev) => [...prev, event as any])
     })
 
     return cleanup
@@ -21,13 +21,10 @@ export default function ClientPlugin() {
         className="bg-blue-500 text-white px-4 py-2 rounded"
         onClick={() => {
           console.log('Button clicked, emitting event')
-          queryPlugin.emit({
-            type: 'query-devtools:test',
-            payload: {
-              title: 'Button Clicked',
-              description:
-                'This is a custom event triggered by the client plugin.',
-            },
+          queryPlugin.emit('test', {
+            title: 'Button Clicked',
+            description:
+              'This is a custom event triggered by the client plugin.',
           })
         }}
       >

examples/react/start/src/plugin.ts

@@ -1,24 +1,21 @@
-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(),
-  }),
+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 TanstackDevtoolsEventSubscription<
-  typeof eventMap
-> {
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<EventMap> {
   constructor() {
     super({
       pluginId: 'query-devtools',

packages/event-bus-plugin/README.md

@@ -6,16 +6,13 @@ This package is still under active development and might have breaking changes i
 
 ```tsx 
 import { TanstackDevtoolsEventSubscription } from '@tanstack/devtools-event-bus-plugin'
- interface EventMap {
+
+interface EventMap {
   'query-devtools:a': { foo: string }
   'query-devtools:b': { foo: number }
-}
- 
- 
+} 
 
-class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<
-  EventMap
-> {
+class QueryDevtoolsPlugin extends TanstackDevtoolsEventSubscription<EventMap> {
   constructor() {
     super({
       pluginId: 'query-devtools',

packages/event-bus-plugin/package.json

@@ -51,6 +51,5 @@
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "vite build"
-  },
-  "devDependencies": {}
-}
+  }
+}

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

@@ -1,2 +1 @@
 export { TanstackDevtoolsEventSubscription } from './plugin'
-export type { EventMap } from './plugin'

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

@@ -22,8 +22,8 @@ export class TanstackDevtoolsEventSubscription<
 > {
   #pluginId: TPluginId
   #eventTarget: () => EventTarget
-  #debug: boolean
 
+  #debug: boolean
   constructor({
     pluginId,
     debug = false,
@@ -72,18 +72,31 @@ export class TanstackDevtoolsEventSubscription<
     )
   }
 
-  emit<TSuffix extends string>(
+  emit<
+    TSuffix extends Extract<
+      keyof TEventMap,
+      `${TPluginId & string}:${string}`
+    > extends `${TPluginId & string}:${infer S}`
+      ? S
+      : never,
+  >(
     eventSuffix: TSuffix,
     payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
   ) {
     this.emitEventToBus({
       type: `${this.#pluginId}:${eventSuffix}`,
       payload,
-      pluginId: this.#pluginId,
     })
   }
 
-  on<TSuffix extends string>(
+  on<
+    TSuffix extends Extract<
+      keyof TEventMap,
+      `${TPluginId & string}:${string}`
+    > extends `${TPluginId & string}:${infer S}`
+      ? S
+      : never,
+  >(
     eventSuffix: TSuffix,
     cb: (
       event: TanStackDevtoolsEvent<