feat(core): plugin split pane functionality

Author: harry-whorlow

package.json

@@ -48,7 +48,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/esm/index.js",
-      "limit": "30 KB"
+      "limit": "33 KB"
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",

packages/devtools/package.json

@@ -48,6 +48,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@neodrag/solid": "3.0.0-next.8",
     "@solid-primitives/keyboard": "^1.2.8",
     "@tanstack/devtools-event-bus": "workspace:*",
     "@tanstack/devtools-ui": "workspace:*",

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

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

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
+}

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

@@ -23,27 +23,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 = () => {

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

@@ -1,24 +1,33 @@
-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 } 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()
 
   createEffect(() => {
-    const currentActivePlugin = plugins()?.find(
-      (plugin) => plugin.id === activePlugin(),
+    const currentActivePlugins = plugins()?.filter((plugin) =>
+      activePlugins().includes(plugin.id!),
     )
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef)
-    }
+
+    currentActivePlugins?.forEach((plugin) => {
+      const ref = pluginRefs().get(plugin.id!)
+
+      if (ref) {
+        plugin.render(ref)
+      }
+    })
   })
-  const styles = useStyles()
 
   return (
     <div class={styles().pluginsTabPanel}>
@@ -30,12 +39,8 @@ export const PluginsTab = () => {
           },
           styles().pluginsTabDrawTransition(animationMs),
         )}
-        onMouseEnter={() => {
-          hoverUtils.enter()
-        }}
-        onMouseLeave={() => {
-          hoverUtils.leave()
-        }}
+        onMouseEnter={() => hoverUtils.enter()}
+        onMouseLeave={() => hoverUtils.leave()}
       >
         <div
           class={clsx(
@@ -56,11 +61,18 @@ export const PluginsTab = () => {
                     : plugin.name(pluginHeading)
                 }
               })
+
+              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} />
@@ -71,11 +83,21 @@ export const PluginsTab = () => {
         </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>
   )
 }