add custom trigger handling (#250)

* add custom trigger handling

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/hungry-tables-strive.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-client': patch
+'@tanstack/devtools': patch
+---
+
+add the ability to open up devtools programatically

packages/devtools-client/src/index.ts

@@ -83,6 +83,9 @@ interface EventMap {
   'tanstack-devtools-core:package-json-updated': {
     packageJson: PackageJson | null
   }
+  'tanstack-devtools-core:trigger-toggled': {
+    isOpen: boolean
+  }
 }
 
 export class DevtoolsEventClient extends EventClient<EventMap> {

packages/devtools/src/devtools.tsx

@@ -1,7 +1,8 @@
-import { Show, createEffect, createSignal } from 'solid-js'
+import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
 import { Portal } from 'solid-js/web'
 import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import {
   useDevtoolsSettings,
   useHeight,
@@ -31,14 +32,36 @@ export default function DevTools() {
   const pip = usePiPWindow()
   let panelRef: HTMLDivElement | undefined = undefined
   const [isResizing, setIsResizing] = createSignal(false)
+
   const toggleOpen = () => {
     if (pip().pipWindow) {
       return
     }
     const open = isOpen()
-    setIsOpen(!open)
-    setPersistOpen(!open)
+    const newState = !open
+    setIsOpen(newState)
+    setPersistOpen(newState)
+
+    // Emit event when user toggles devtools
+    devtoolsEventClient.emit('trigger-toggled', { isOpen: newState })
   }
+
+  // Listen for trigger-toggled events to control devtools
+  createEffect(() => {
+    const unsubscribe = devtoolsEventClient.on('trigger-toggled', (event) => {
+      if (pip().pipWindow) {
+        return
+      }
+      const payload = event.payload as unknown as { isOpen: boolean }
+      const shouldBeOpen = payload.isOpen
+      if (shouldBeOpen !== isOpen()) {
+        setIsOpen(shouldBeOpen)
+        setPersistOpen(shouldBeOpen)
+      }
+    })
+
+    onCleanup(unsubscribe)
+  })
   // Used to resize the panel
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,