feat(core): plugin split pane functionality

.changeset/fair-crabs-sing.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/react-devtools': patch
+'@tanstack/devtools': patch
+---
+
+Adds split panel functionality to the devtools panel, allowing multiple instances of devtools to be shown.

packages/devtools/src/context/devtools-store.ts

@@ -65,7 +65,7 @@ export type DevtoolsStore = {
   state: {
     activeTab: TabName
     height: number
-    activePlugin?: string | undefined
+    activePlugins: Array<string>
     persistOpen: boolean
   }
   plugins?: Array<TanStackDevtoolsPlugin>
@@ -89,7 +89,7 @@ export const initialState: DevtoolsStore = {
   state: {
     activeTab: 'plugins',
     height: 400,
-    activePlugin: undefined,
+    activePlugins: [],
     persistOpen: false,
   },
 }

packages/devtools/src/context/use-devtools-context.ts

@@ -33,27 +33,35 @@ export const usePlugins = () => {
   const { setForceExpand } = useDrawContext()
 
   const plugins = createMemo(() => store.plugins)
-  const activePlugin = createMemo(() => store.state.activePlugin)
+  const activePlugins = createMemo(() => store.state.activePlugins)
 
   createEffect(() => {
-    if (activePlugin() == null) {
+    if (activePlugins().length === 0) {
       setForceExpand(true)
     } else {
       setForceExpand(false)
     }
   })
 
-  const setActivePlugin = (pluginId: string) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        activePlugin: pluginId,
-      },
-    }))
+  const toggleActivePlugins = (pluginId: string) => {
+    setStore((prev) => {
+      const isActive = prev.state.activePlugins.includes(pluginId)
+
+      const updatedPlugins = isActive
+        ? prev.state.activePlugins.filter((id) => id !== pluginId)
+        : [...prev.state.activePlugins, pluginId]
+      if (updatedPlugins.length > 3) return prev
+      return {
+        ...prev,
+        state: {
+          ...prev.state,
+          activePlugins: updatedPlugins,
+        },
+      }
+    })
   }
 
-  return { plugins, setActivePlugin, activePlugin }
+  return { plugins, toggleActivePlugins, activePlugins }
 }
 
 export const useDevtoolsState = () => {

packages/devtools/src/tabs/plugins-tab.tsx

@@ -1,25 +1,35 @@
-import { For, createEffect } from 'solid-js'
+import { For, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { useDrawContext } from '../context/draw-context'
 import { usePlugins, useTheme } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
-  const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
   const { expanded, hoverUtils, animationMs } = useDrawContext()
-  let activePluginRef: HTMLDivElement | undefined
+
+  const [pluginRefs, setPluginRefs] = createSignal(
+    new Map<string, HTMLDivElement>(),
+  )
+
+  const styles = useStyles()
 
   const { theme } = useTheme()
   createEffect(() => {
-    const currentActivePlugin = plugins()?.find(
-      (plugin) => plugin.id === activePlugin(),
+    const currentActivePlugins = plugins()?.filter((plugin) =>
+      activePlugins().includes(plugin.id!),
     )
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef, theme())
-    }
+
+    currentActivePlugins?.forEach((plugin) => {
+      const ref = pluginRefs().get(plugin.id!)
+
+      if (ref) {
+        plugin.render(ref, theme())
+      }
+    })
   })
-  const styles = useStyles()
+
   return (
     <div class={styles().pluginsTabPanel}>
       <div
@@ -30,12 +40,8 @@ export const PluginsTab = () => {
           },
           styles().pluginsTabDrawTransition(animationMs),
         )}
-        onMouseEnter={() => {
-          hoverUtils.enter()
-        }}
-        onMouseLeave={() => {
-          hoverUtils.leave()
-        }}
+        onMouseEnter={() => hoverUtils.enter()}
+        onMouseLeave={() => hoverUtils.leave()}
       >
         <div
           class={clsx(
@@ -46,33 +52,54 @@ export const PluginsTab = () => {
           <For each={plugins()}>
             {(plugin) => {
               let pluginHeading: HTMLHeadingElement | undefined
+
               createEffect(() => {
                 if (pluginHeading) {
                   typeof plugin.name === 'string'
                     ? (pluginHeading.textContent = plugin.name)
                     : plugin.name(pluginHeading, theme())
                 }
               })
+
+              const isActive = createMemo(() =>
+                activePlugins().includes(plugin.id!),
+              )
+
               return (
                 <div
-                  onClick={() => setActivePlugin(plugin.id!)}
+                  onClick={() => {
+                    toggleActivePlugins(plugin.id!)
+                  }}
                   class={clsx(styles().pluginName, {
-                    active: activePlugin() === plugin.id,
+                    active: isActive(),
                   })}
                 >
-                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
+                  <h3
+                    id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+                    ref={pluginHeading}
+                  />
                 </div>
               )
             }}
           </For>
         </div>
       </div>
 
-      <div
-        id={PLUGIN_CONTAINER_ID}
-        ref={activePluginRef}
-        class={styles().pluginsTabContent}
-      ></div>
+      <For each={activePlugins()}>
+        {(pluginId) => (
+          <div
+            id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
+            ref={(el) => {
+              setPluginRefs((prev) => {
+                const updated = new Map(prev)
+                updated.set(pluginId, el)
+                return updated
+              })
+            }}
+            class={styles().pluginsTabContent}
+          />
+        )}
+      </For>
     </div>
   )
 }

packages/react-devtools/src/devtools.tsx

@@ -1,9 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import {
-  PLUGIN_CONTAINER_ID,
-  PLUGIN_TITLE_CONTAINER_ID,
-  TanStackDevtoolsCore,
-} from '@tanstack/devtools'
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
 import { createPortal } from 'react-dom'
 import type { JSX, ReactElement } from 'react'
 import type {
@@ -94,13 +90,19 @@ export interface TanStackDevtoolsReactInit {
 
 const convertRender = (
   Component: PluginRender,
-  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
+  setComponents: React.Dispatch<
+    React.SetStateAction<Record<string, JSX.Element>>
+  >,
   e: HTMLElement,
   theme: 'dark' | 'light',
 ) => {
-  setComponent(
-    typeof Component === 'function' ? Component(e, theme) : Component,
-  )
+  const element =
+    typeof Component === 'function' ? Component(e, theme) : Component
+
+  setComponents((prev) => ({
+    ...prev,
+    [e.getAttribute('id') as string]: element,
+  }))
 }
 
 export const TanStackDevtools = ({
@@ -109,14 +111,21 @@ export const TanStackDevtools = ({
   eventBusConfig,
 }: TanStackDevtoolsReactInit): ReactElement | null => {
   const devToolRef = useRef<HTMLDivElement>(null)
-  const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(
-    null,
-  )
-  const [titleContainer, setTitleContainer] = useState<HTMLElement | null>(null)
-  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(
-    null,
-  )
-  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)
+
+  const [pluginContainers, setPluginContainers] = useState<
+    Record<string, HTMLElement>
+  >({})
+  const [titleContainers, setTitleContainers] = useState<
+    Record<string, HTMLElement>
+  >({})
+
+  const [PluginComponents, setPluginComponents] = useState<
+    Record<string, JSX.Element>
+  >({})
+  const [TitleComponents, setTitleComponents] = useState<
+    Record<string, JSX.Element>
+  >({})
+
   const [devtools] = useState(
     () =>
       new TanStackDevtoolsCore({
@@ -128,30 +137,42 @@ export const TanStackDevtools = ({
             name:
               typeof plugin.name === 'string'
                 ? plugin.name
-                : // The check above confirms that `plugin.name` is of Render type
-                  (e, theme) => {
-                    setTitleContainer(
-                      e.ownerDocument.getElementById(
-                        PLUGIN_TITLE_CONTAINER_ID,
-                      ) || null,
-                    )
+                : (e, theme) => {
+                    const id = e.getAttribute('id')!
+                    const target = e.ownerDocument.getElementById(id)
+
+                    if (target) {
+                      setTitleContainers((prev) => ({
+                        ...prev,
+                        [id]: e,
+                      }))
+                    }
+
                     convertRender(
                       plugin.name as PluginRender,
-                      setTitleComponent,
+                      setTitleComponents,
                       e,
                       theme,
                     )
                   },
             render: (e, theme) => {
-              setPluginContainer(
-                e.ownerDocument.getElementById(PLUGIN_CONTAINER_ID) || null,
-              )
-              convertRender(plugin.render, setPluginComponent, e, theme)
+              const id = e.getAttribute('id')!
+              const target = e.ownerDocument.getElementById(id)
+
+              if (target) {
+                setPluginContainers((prev) => ({
+                  ...prev,
+                  [id]: e,
+                }))
+              }
+
+              convertRender(plugin.render, setPluginComponents, e, theme)
             },
           }
         }),
       }),
   )
+
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current)
@@ -160,14 +181,27 @@ export const TanStackDevtools = ({
     return () => devtools.unmount()
   }, [devtools])
 
+  const hasPlugins =
+    Object.values(pluginContainers).length > 0 &&
+    Object.values(PluginComponents).length > 0
+  const hasTitles =
+    Object.values(titleContainers).length > 0 &&
+    Object.values(TitleComponents).length > 0
+
   return (
     <>
       <div style={{ position: 'absolute' }} ref={devToolRef} />
-      {pluginContainer && PluginComponent
-        ? createPortal(<>{PluginComponent}</>, pluginContainer)
+
+      {hasPlugins
+        ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>
+            createPortal(<>{PluginComponents[key]}</>, pluginContainer),
+          )
         : null}
-      {titleContainer && TitleComponent
-        ? createPortal(<>{TitleComponent}</>, titleContainer)
+
+      {hasTitles
+        ? Object.entries(titleContainers).map(([key, titleContainer]) =>
+            createPortal(<>{TitleComponents[key]}</>, titleContainer),
+          )
         : null}
     </>
   )