feat: update id getter

Author: harry-whorlow

packages/devtools/src/context/devtools-context.tsx

@@ -86,10 +86,7 @@ const getSettings = () => {
   }
 }
 
-export const generatePluginId = (
-  plugin: TanStackDevtoolsPlugin,
-  index: number,
-) => {
+const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
   // if set by user, return the plugin id
   if (plugin.id) {
     return plugin.id

packages/devtools/src/index.ts

@@ -5,4 +5,3 @@ export type {
   TanStackDevtoolsPlugin,
   TanStackDevtoolsConfig,
 } from './context/devtools-context'
-export { generatePluginId } from './context/devtools-context'

packages/react-devtools/src/devtools.tsx

@@ -1,10 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import {
-  PLUGIN_CONTAINER_ID,
-  PLUGIN_TITLE_CONTAINER_ID,
-  TanStackDevtoolsCore,
-  generatePluginId,
-} from '@tanstack/devtools'
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
 import { createPortal } from 'react-dom'
 import type { JSX, ReactElement } from 'react'
 import type {
@@ -124,19 +119,21 @@ export const TanStackDevtools = ({
       new TanStackDevtoolsCore({
         config,
         eventBusConfig,
-        plugins: plugins?.map((plugin, index) => {
+        plugins: plugins?.map((plugin) => {
           return {
             ...plugin,
             name:
               typeof plugin.name === 'string'
                 ? plugin.name
                 : (e, theme) => {
                     const target = e.ownerDocument.getElementById(
-                      `${PLUGIN_TITLE_CONTAINER_ID}-${generatePluginId(plugin as TanStackDevtoolsPlugin, index)}`,
+                      e.getAttribute('id')!,
                     )
+
                     if (target) {
                       setTitleContainers((prev) => [...prev, target])
                     }
+
                     convertRender(
                       plugin.name as PluginRender,
                       setTitleComponents,
@@ -146,8 +143,9 @@ export const TanStackDevtools = ({
                   },
             render: (e, theme) => {
               const target = e.ownerDocument.getElementById(
-                `${PLUGIN_CONTAINER_ID}-${generatePluginId(plugin as TanStackDevtoolsPlugin, index)}`,
+                e.getAttribute('id')!,
               )
+
               if (target) {
                 setPluginContainers((prev) => [...prev, target])
               }