fix: plugin ID generation to include index when using the plugin name (#51)

spaansba · web-flow · commit af35d92967b4 · 2025-08-20T13:48:30.000+02:00
If two plugins share the same name, they currently receive the same
`id`, which causes both to activate when you click on either one in the
sidebar.
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
@@ -85,7 +85,7 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
   }
   if (typeof plugin.name === 'string') {
     // if name is a string, use it to generate an id
-    return plugin.name.toLowerCase().replace(' ', '-')
+    return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`
   }
   // Name is JSX? return the index as a string
   return index.toString()

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {`
`85`	`85`	`}`
`86`	`86`	`if (typeof plugin.name === 'string') {`
`87`	`87`	`// if name is a string, use it to generate an id`
`88`		`- return plugin.name.toLowerCase().replace(' ', '-')`
	`88`	+ return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`
`89`	`89`	`}`
`90`	`90`	`// Name is JSX? return the index as a string`
`91`	`91`	`return index.toString()`