feat: simplify EventClient types to accept unprefixed event maps (#361)

AlemTuzlak · autofix-ci[bot] · web-flow · commit cf23787b9669 · 2026-03-04T11:02:09.000+01:00
* feat: simplify EventClient types to accept unprefixed event maps

EventClient now accepts event maps with plain event names instead of
requiring the pluginId prefix in every key. The prefix is handled
purely at runtime. This removes the complex conditional types that
were stripping prefixes from emit/on/createEventPayload signatures.

* ci: apply automated fixes

* chore: add patch changeset for event client type simplification

---------

Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/.changeset/simplify-event-client-types.md b/.changeset/simplify-event-client-types.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/devtools-client': patch
+---
+
+Simplify EventClient types to accept unprefixed event maps
diff --git a/examples/preact/basic/src/plugin.ts b/examples/preact/basic/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }
diff --git a/examples/preact/custom-devtools/src/eventClient.ts b/examples/preact/custom-devtools/src/eventClient.ts
@@ -1,15 +1,12 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 type EventMap = {
-  // The key of the event map is a combination of {pluginId}:{eventSuffix}
-  // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number; history: Array<number> }
+  'counter-state': { count: number; history: Array<number> }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
       debug: true,
     })
diff --git a/examples/react/basic/src/plugin.ts b/examples/react/basic/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }
diff --git a/examples/react/custom-devtools/src/eventClient.ts b/examples/react/custom-devtools/src/eventClient.ts
@@ -1,15 +1,12 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 type EventMap = {
-  // The key of the event map is a combination of {pluginId}:{eventSuffix}
-  // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number; history: Array<number> }
+  'counter-state': { count: number; history: Array<number> }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
       debug: true,
     })
diff --git a/examples/react/https/src/plugin.ts b/examples/react/https/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }
diff --git a/examples/react/start/src/devtools/route-navigation-event-client.ts b/examples/react/start/src/devtools/route-navigation-event-client.ts
@@ -9,14 +9,11 @@ export interface RouteNavigationEvent {
 }
 
 type RouteNavigationEventMap = {
-  'route-navigation:navigate': RouteNavigationEvent
-  'route-navigation:clear': undefined
+  navigate: RouteNavigationEvent
+  clear: undefined
 }
 
-class RouteNavigationEventClient extends EventClient<
-  RouteNavigationEventMap,
-  'route-navigation'
-> {
+class RouteNavigationEventClient extends EventClient<RouteNavigationEventMap> {
   constructor() {
     super({
       pluginId: 'route-navigation',
diff --git a/examples/react/time-travel/src/zustand-client.ts b/examples/react/time-travel/src/zustand-client.ts
@@ -2,8 +2,8 @@ import { EventClient } from '@tanstack/devtools-event-client'
 import { createStore } from 'zustand'
 
 interface ZustandEventMap {
-  'zustand:stateChange': any
-  'zustand:revertSnapshot': any
+  stateChange: any
+  revertSnapshot: any
 }
 export const eventClient = new EventClient<ZustandEventMap>({
   pluginId: 'zustand',
diff --git a/packages/devtools-client/src/index.ts b/packages/devtools-client/src/index.ts
@@ -53,37 +53,37 @@ export interface PluginInjection {
 }
 
 interface EventMap {
-  'tanstack-devtools-core:ready': {
+  ready: {
     packageJson: PackageJson | null
     outdatedDeps: OutdatedDeps | null
   }
-  'tanstack-devtools-core:outdated-deps-read': {
+  'outdated-deps-read': {
     outdatedDeps: OutdatedDeps | null
   }
-  'tanstack-devtools-core:package-json-read': {
+  'package-json-read': {
     packageJson: PackageJson | null
   }
-  'tanstack-devtools-core:mounted': void
-  'tanstack-devtools-core:install-devtools': PluginInjection
-  'tanstack-devtools-core:devtools-installed': {
+  mounted: void
+  'install-devtools': PluginInjection
+  'devtools-installed': {
     packageName: string
     success: boolean
     error?: string
   }
-  'tanstack-devtools-core:add-plugin-to-devtools': PluginInjection
-  'tanstack-devtools-core:plugin-added': {
+  'add-plugin-to-devtools': PluginInjection
+  'plugin-added': {
     packageName: string
     success: boolean
     error?: string
   }
-  'tanstack-devtools-core:bump-package-version': PluginInjection & {
+  'bump-package-version': PluginInjection & {
     devtoolsPackage: string
     minVersion?: string
   }
-  'tanstack-devtools-core:package-json-updated': {
+  'package-json-updated': {
     packageJson: PackageJson | null
   }
-  'tanstack-devtools-core:trigger-toggled': {
+  'trigger-toggled': {
     isOpen: boolean
   }
 }
diff --git a/packages/event-bus-client/src/plugin.ts b/packages/event-bus-client/src/plugin.ts
@@ -8,19 +8,12 @@ declare global {
 }
 
 type AllDevtoolsEvents<TEventMap extends Record<string, any>> = {
-  [Key in keyof TEventMap]: TanStackDevtoolsEvent<Key & string, TEventMap[Key]>
-}[keyof TEventMap]
+  [Key in keyof TEventMap & string]: TanStackDevtoolsEvent<Key, TEventMap[Key]>
+}[keyof TEventMap & string]
 
-export class EventClient<
-  TEventMap extends Record<string, any>,
-  TPluginId extends string = TEventMap extends Record<infer P, any>
-    ? P extends `${infer Id}:${string}`
-      ? Id
-      : never
-    : never,
-> {
+export class EventClient<TEventMap extends Record<string, any>> {
   #enabled = true
-  #pluginId: TPluginId
+  #pluginId: string
   #eventTarget: () => EventTarget
   #debug: boolean
   #queuedEvents: Array<TanStackDevtoolsEvent<string, any>>
@@ -80,7 +73,7 @@ export class EventClient<
     enabled = true,
     reconnectEveryMs = 300,
   }: {
-    pluginId: TPluginId
+    pluginId: string
     debug?: boolean
     reconnectEveryMs?: number
     enabled?: boolean
@@ -194,33 +187,19 @@ export class EventClient<
     this.dispatchCustomEvent('tanstack-dispatch-event', event)
   }
 
-  createEventPayload<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
+  createEventPayload<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    payload: TEventMap[TEvent],
   ) {
     return {
       type: `${this.#pluginId}:${eventSuffix}`,
       payload,
       pluginId: this.#pluginId,
     }
   }
-  emit<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
+  emit<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    payload: TEventMap[TEvent],
   ) {
     if (!this.#enabled) {
       this.debugLog(
@@ -262,21 +241,9 @@ export class EventClient<
     return this.emitEventToBus(this.createEventPayload(eventSuffix, payload))
   }
 
-  on<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    cb: (
-      event: TanStackDevtoolsEvent<
-        `${TPluginId & string}:${TSuffix}`,
-        TEventMap[`${TPluginId & string}:${TSuffix}`]
-      >,
-    ) => void,
+  on<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    cb: (event: TanStackDevtoolsEvent<TEvent, TEventMap[TEvent]>) => void,
     options?: {
       withEventTarget?: boolean
     },
diff --git a/packages/event-bus-client/tests/index.test.ts b/packages/event-bus-client/tests/index.test.ts
@@ -66,9 +66,9 @@ describe('EventClient', () => {
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('event', () => {})
       cleanup()
-      client.emit('test:event', { foo: 'bar' })
+      client.emit('event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
       expect(targetListenSpy).toHaveBeenCalledWith(
         expect.any(String),
@@ -90,9 +90,9 @@ describe('EventClient', () => {
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('event', () => {})
       cleanup()
-      client.emit('test:event', { foo: 'bar' })
+      client.emit('event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
       expect(targetListenSpy).toHaveBeenCalledWith(
         expect.any(String),

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`import { EventClient } from '@tanstack/devtools-event-client'`
`2`	`2`
`3`	`3`	`interface EventMap {`
`4`		`- 'query-devtools:test': {`
	`4`	`+ test: {`
`5`	`5`	`title: string`
`6`	`6`	`description: string`
`7`	`7`	`}`
`8`		`- 'query-devtools:init': {`
	`8`	`+ init: {`
`9`	`9`	`title: string`
`10`	`10`	`description: string`
`11`	`11`	`}`
`12`		`- 'query-devtools:query': {`
	`12`	`+ query: {`
`13`	`13`	`title: string`
`14`	`14`	`description: string`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,37 +53,37 @@ export interface PluginInjection {`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`interface EventMap {`
`56`		`- 'tanstack-devtools-core:ready': {`
	`56`	`+ ready: {`
`57`	`57`	`packageJson: PackageJson \| null`
`58`	`58`	`outdatedDeps: OutdatedDeps \| null`
`59`	`59`	`}`
`60`		`- 'tanstack-devtools-core:outdated-deps-read': {`
	`60`	`+ 'outdated-deps-read': {`
`61`	`61`	`outdatedDeps: OutdatedDeps \| null`
`62`	`62`	`}`
`63`		`- 'tanstack-devtools-core:package-json-read': {`
	`63`	`+ 'package-json-read': {`
`64`	`64`	`packageJson: PackageJson \| null`
`65`	`65`	`}`
`66`		`- 'tanstack-devtools-core:mounted': void`
`67`		`- 'tanstack-devtools-core:install-devtools': PluginInjection`
`68`		`- 'tanstack-devtools-core:devtools-installed': {`
	`66`	`+ mounted: void`
	`67`	`+ 'install-devtools': PluginInjection`
	`68`	`+ 'devtools-installed': {`
`69`	`69`	`packageName: string`
`70`	`70`	`success: boolean`
`71`	`71`	`error?: string`
`72`	`72`	`}`
`73`		`- 'tanstack-devtools-core:add-plugin-to-devtools': PluginInjection`
`74`		`- 'tanstack-devtools-core:plugin-added': {`
	`73`	`+ 'add-plugin-to-devtools': PluginInjection`
	`74`	`+ 'plugin-added': {`
`75`	`75`	`packageName: string`
`76`	`76`	`success: boolean`
`77`	`77`	`error?: string`
`78`	`78`	`}`
`79`		`- 'tanstack-devtools-core:bump-package-version': PluginInjection & {`
	`79`	`+ 'bump-package-version': PluginInjection & {`
`80`	`80`	`devtoolsPackage: string`
`81`	`81`	`minVersion?: string`
`82`	`82`	`}`
`83`		`- 'tanstack-devtools-core:package-json-updated': {`
	`83`	`+ 'package-json-updated': {`
`84`	`84`	`packageJson: PackageJson \| null`
`85`	`85`	`}`
`86`		`- 'tanstack-devtools-core:trigger-toggled': {`
	`86`	`+ 'trigger-toggled': {`
`87`	`87`	`isOpen: boolean`
`88`	`88`	`}`
`89`	`89`	`}`