feat(core): plugin split pane functionality

harry-whorlow · harry-whorlow · commit 299d849bcef4 · 2025-09-09T13:42:29.000+02:00
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -55,6 +55,7 @@
     "build": "tsup"
   },
   "dependencies": {
+    "@neodrag/solid": "3.0.0-next.8",
     "@solid-primitives/keyboard": "^1.2.8",
     "@tanstack/devtools-event-bus": "workspace:*",
     "@tanstack/devtools-ui": "workspace:*",
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
@@ -86,7 +86,10 @@ const getSettings = () => {
   }
 }
 
-const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
+export const generatePluginId = (
+  plugin: TanStackDevtoolsPlugin,
+  index: number,
+) => {
   // if set by user, return the plugin id
   if (plugin.id) {
     return plugin.id
diff --git a/packages/devtools/src/context/devtools-store.ts b/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,
   },
 }
diff --git a/packages/devtools/src/context/dropzone-context.tsx b/packages/devtools/src/context/dropzone-context.tsx
@@ -0,0 +1,60 @@
+import { createContext, createSignal, useContext } from 'solid-js'
+
+import type { ParentComponent } from 'solid-js'
+
+type DropZone = {
+  id: string
+  name: string
+  ref: HTMLElement
+}
+
+const useDropzone = () => {
+  const [isDragging, setDragging] = createSignal(false)
+  const dropZones: Array<DropZone> = []
+
+  const registerDropZone = (zone: DropZone) => {
+    dropZones.push(zone)
+  }
+
+  const checkDrop = (dragEl: HTMLElement): string | null => {
+    const dragRect = dragEl.getBoundingClientRect()
+    for (const { ref, name } of dropZones) {
+      const dropRect = ref.getBoundingClientRect()
+      const isInside =
+        dragRect.left >= dropRect.left &&
+        dragRect.right <= dropRect.right &&
+        dragRect.top >= dropRect.top &&
+        dragRect.bottom <= dropRect.bottom
+      if (isInside) return name
+    }
+    return null
+  }
+
+  return { isDragging, setDragging, checkDrop, registerDropZone }
+}
+
+type ContextType = ReturnType<typeof useDropzone>
+
+const DropzoneContext = createContext<ContextType | undefined>(undefined)
+
+export const DropzoneProvider: ParentComponent = (props) => {
+  const value = useDropzone()
+
+  return (
+    <DropzoneContext.Provider value={value}>
+      {props.children}
+    </DropzoneContext.Provider>
+  )
+}
+
+export function useDropzoneContext() {
+  const context = useContext(DropzoneContext)
+
+  if (context === undefined) {
+    throw new Error(
+      `useDropzoneContext must be used within a DropzoneClientProvider`,
+    )
+  }
+
+  return context
+}
diff --git a/packages/devtools/src/context/use-devtools-context.ts b/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(false)
     } else {
       setForceExpand(true)
     }
   })
 
-  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]
+
+      return {
+        ...prev,
+        state: {
+          ...prev.state,
+          activePlugins: updatedPlugins,
+        },
+      }
+    })
   }
 
-  return { plugins, setActivePlugin, activePlugin }
+  return { plugins, toggleActivePlugins, activePlugins }
 }
 
 export const useDevtoolsState = () => {
diff --git a/packages/devtools/src/index.ts b/packages/devtools/src/index.ts
@@ -5,3 +5,4 @@ export type {
   TanStackDevtoolsPlugin,
   TanStackDevtoolsConfig,
 } from './context/devtools-context'
+export { generatePluginId } from './context/devtools-context'
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/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>
   )
 }
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
@@ -3,6 +3,7 @@ import {
   PLUGIN_CONTAINER_ID,
   PLUGIN_TITLE_CONTAINER_ID,
   TanStackDevtoolsCore,
+  generatePluginId,
 } from '@tanstack/devtools'
 import { createPortal } from 'react-dom'
 import type { JSX, ReactElement } from 'react'
@@ -109,49 +110,67 @@ export const TanStackDevtools = ({
   eventBusConfig,
 }: TanStackDevtoolsReactInit): ReactElement | null => {
   const devToolRef = useRef<HTMLDivElement>(null)
-  const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(
-    null,
+  const [pluginContainers, setPluginContainers] = useState<Array<HTMLElement>>(
+    [],
   )
-  const [titleContainer, setTitleContainer] = useState<HTMLElement | null>(null)
-  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(
-    null,
+  const [titleContainers, setTitleContainers] = useState<Array<HTMLElement>>([])
+  const [PluginComponents, setPluginComponents] = useState<Array<JSX.Element>>(
+    [],
   )
-  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)
+  const [TitleComponents, setTitleComponents] = useState<Array<JSX.Element>>([])
+
   const [devtools] = useState(
     () =>
       new TanStackDevtoolsCore({
         config,
         eventBusConfig,
-        plugins: plugins?.map((plugin) => {
+        plugins: plugins?.map((plugin, index) => {
           return {
             ...plugin,
             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,
+                    const target = e.ownerDocument.getElementById(
+                      // @ts-ignore just testing
+                      `${PLUGIN_TITLE_CONTAINER_ID}-${generatePluginId(plugin, index)}`,
                     )
+                    if (target) {
+                      setTitleContainers((prev) => [...prev, target])
+                    }
                     convertRender(
                       plugin.name as PluginRender,
-                      setTitleComponent,
+                      (newVal) =>
+                        // @ts-ignore just testing
+                        setTitleComponents((prev) => [...prev, newVal]),
                       e,
                       theme,
                     )
                   },
             render: (e, theme) => {
-              setPluginContainer(
-                e.ownerDocument.getElementById(PLUGIN_CONTAINER_ID) || null,
+              const target = e.ownerDocument.getElementById(
+                // @ts-ignore just testing
+                `${PLUGIN_CONTAINER_ID}-${generatePluginId(plugin, index)}`,
+              )
+              if (target) {
+                setPluginContainers((prev) => [...prev, target])
+              }
+
+              convertRender(
+                plugin.render,
+                (newVal) =>
+                  // @ts-ignore just testing
+                  setPluginComponents((prev) => [...prev, newVal]),
+                e,
+                theme,
               )
-              convertRender(plugin.render, setPluginComponent, e, theme)
             },
           }
         }),
       }),
   )
+
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current)
@@ -163,11 +182,17 @@ export const TanStackDevtools = ({
   return (
     <>
       <div style={{ position: 'absolute' }} ref={devToolRef} />
-      {pluginContainer && PluginComponent
-        ? createPortal(<>{PluginComponent}</>, pluginContainer)
+
+      {pluginContainers.length > 0 && PluginComponents.length > 0
+        ? pluginContainers.map((pluginContainer, index) =>
+            createPortal(<>{PluginComponents[index]}</>, pluginContainer),
+          )
         : null}
-      {titleContainer && TitleComponent
-        ? createPortal(<>{TitleComponent}</>, titleContainer)
+
+      {titleContainers.length > 0 && TitleComponents.length > 0
+        ? titleContainers.map((titleContainer, index) =>
+            createPortal(<>{TitleComponents[index]}</>, titleContainer),
+          )
         : null}
     </>
   )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,10 @@ const getSettings = () => {`
`86`	`86`	`}`
`87`	`87`	`}`
`88`	`88`
`89`		`-const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {`
	`89`	`+export const generatePluginId = (`
	`90`	`+ plugin: TanStackDevtoolsPlugin,`
	`91`	`+ index: number,`
	`92`	`+) => {`
`90`	`93`	`// if set by user, return the plugin id`
`91`	`94`	`if (plugin.id) {`
`92`	`95`	`return plugin.id`