feat: add keyboard shortcuts

Author: AlemTuzlak

examples/react/basic/src/index.tsx

@@ -4,7 +4,9 @@ function App() {
   return (
     <div>
       <h1>TanStack Devtools Basic Example</h1>
-      <Devtools />
+      <Devtools options={{
+        openHotkey: ["Shift", "B"]
+      }} />
     </div>
   )
 }

examples/solid/basic/src/index.tsx

@@ -4,7 +4,9 @@ function App() {
   return (
     <div>
       <h1>TanStack Devtools Basic Example</h1>
-      <Devtools />
+      <Devtools options={{
+        openHotkey: ["Shift", "B"]
+      }} />
     </div>
   )
 }

packages/devtools/package.json

@@ -58,11 +58,12 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@solid-primitives/keyboard": "^1.2.8",
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.5"
   },
   "devDependencies": {
     "vite-plugin-solid": "^2.11.6"
   }
-}
+}

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

@@ -1,5 +1,8 @@
 import type { DevtoolsPlugin } from './devtools-context'
 
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
+type KeyboardKey = ModifierKey | (string & {})
+
 type TriggerPosition =
   | 'top-left'
   | 'top-right'
@@ -35,7 +38,7 @@ export type DevtoolsStore = {
      * The hotkey to open the dev tools
      * @default "shift+a"
      */
-    openHotkey: string
+    openHotkey: Array<KeyboardKey>
     /**
      * Whether to require the URL flag to open the dev tools
      * @default false
@@ -62,7 +65,7 @@ export const initialState: DevtoolsStore = {
     hideUntilHover: false,
     position: 'bottom-right',
     panelLocation: 'bottom',
-    openHotkey: 'shift+a',
+    openHotkey: ['Shift', 'A'],
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
   },

packages/devtools/src/devtools.tsx

@@ -1,4 +1,5 @@
 import { createEffect, createSignal } from 'solid-js'
+import { createShortcut } from '@solid-primitives/keyboard'
 import {
   useDevtoolsSettings,
   useHeight,
@@ -123,7 +124,9 @@ export default function DevTools() {
       el?.style.setProperty('--tsrd-font-size', fontSize)
     }
   })
-
+  createShortcut(settings().openHotkey, () => {
+    toggleOpen()
+  })
   return (
     <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
       <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />