@tanstack/devtools 0.8.1 → 0.9.0

package/src/context/devtools-store.ts

@@ -1,13 +1,15 @@
 import type { TabName } from '../tabs'
 import type { TanStackDevtoolsPlugin } from './devtools-context'
 
-type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta'
 type KeyboardKey = ModifierKey | (string & {})
+export type { ModifierKey, KeyboardKey }
 export const keyboardModifiers: Array<ModifierKey> = [
   'Alt',
   'Control',
   'Meta',
   'Shift',
+  'CtrlOrMeta',
 ]
 
 type TriggerPosition =
@@ -47,9 +49,14 @@ export type DevtoolsStore = {
     panelLocation: 'top' | 'bottom'
     /**
      * The hotkey to open the dev tools
-     * @default "shift+a"
+     * @default ["Shift", "A"]
      */
     openHotkey: Array<KeyboardKey>
+    /**
+     * The hotkey to open the source inspector
+     * @default ["Shift", "CtrlOrMeta"]
+     */
+    inspectHotkey: Array<KeyboardKey>
     /**
      * Whether to require the URL flag to open the dev tools
      * @default false
@@ -93,6 +100,7 @@ export const initialState: DevtoolsStore = {
     position: 'bottom-right',
     panelLocation: 'bottom',
     openHotkey: ['Shift', 'A'],
+    inspectHotkey: ['Shift', 'CtrlOrMeta'],
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
     theme:

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

@@ -48,6 +48,14 @@ export const usePlugins = () => {
     setStore((prev) => {
       const isActive = prev.state.activePlugins.includes(pluginId)
 
+      const currentPlugin = store.plugins?.find(
+        (plugin) => plugin.id === pluginId,
+      )
+
+      if (currentPlugin?.destroy && isActive) {
+        currentPlugin.destroy(pluginId)
+      }
+
       const updatedPlugins = isActive
         ? prev.state.activePlugins.filter((id) => id !== pluginId)
         : [...prev.state.activePlugins, pluginId]

package/src/devtools.tsx

@@ -3,6 +3,7 @@ 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,
@@ -11,13 +12,12 @@ import {
 } from './context/use-devtools-context'
 import { useDisableTabbing } from './hooks/use-disable-tabbing'
 import { TANSTACK_DEVTOOLS } from './utils/storage'
+import { getHotkeyPermutations } from './utils/hotkey'
 import { Trigger } from './components/trigger'
 import { MainPanel } from './components/main-panel'
 import { ContentPanel } from './components/content-panel'
 import { Tabs } from './components/tabs'
 import { TabContent } from './components/tab-content'
-import { keyboardModifiers } from './context/devtools-store'
-import { getAllPermutations } from './utils/sanitize'
 import { usePiPWindow } from './context/pip-context'
 import { SourceInspector } from './components/source-inspector'
 
@@ -165,18 +165,9 @@ export default function DevTools() {
     }
   })
   createEffect(() => {
-    // we create all combinations of modifiers
-    const modifiers = settings().openHotkey.filter((key) =>
-      keyboardModifiers.includes(key as any),
-    )
-    const nonModifiers = settings().openHotkey.filter(
-      (key) => !keyboardModifiers.includes(key as any),
-    )
-
-    const allModifierCombinations = getAllPermutations(modifiers)
-
-    for (const combination of allModifierCombinations) {
-      const permutation = [...combination, ...nonModifiers]
+    const permutations = getHotkeyPermutations(settings().openHotkey)
+
+    for (const permutation of permutations) {
       createShortcut(permutation, () => {
         toggleOpen()
       })

package/src/styles/use-styles.ts

@@ -466,6 +466,11 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       display: flex;
       gap: 0.5rem;
     `,
+    settingsStack: css`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `,
 
     // No Plugins Fallback Styles
     noPluginsFallback: css`

package/src/tabs/hotkey-config.tsx

@@ -0,0 +1,97 @@
+import { Show } from 'solid-js'
+import { Button, Input } from '@tanstack/devtools-ui'
+
+import { uppercaseFirstLetter } from '../utils/sanitize'
+import { useStyles } from '../styles/use-styles'
+import type { KeyboardKey } from '../context/devtools-store'
+
+interface HotkeyConfigProps {
+  title: string
+  description: string
+  hotkey: Array<KeyboardKey>
+  modifiers: Array<KeyboardKey>
+  onHotkeyChange: (hotkey: Array<KeyboardKey>) => void
+}
+
+const MODIFIER_DISPLAY_NAMES: Record<KeyboardKey, string> = {
+  Shift: 'Shift',
+  Alt: 'Alt',
+  Meta: 'Meta',
+  Control: 'Control',
+  CtrlOrMeta: 'Ctrl Or Meta',
+}
+
+export const HotkeyConfig = (props: HotkeyConfigProps) => {
+  const styles = useStyles()
+
+  const toggleModifier = (modifier: KeyboardKey) => {
+    if (props.hotkey.includes(modifier)) {
+      props.onHotkeyChange(props.hotkey.filter((key) => key !== modifier))
+    } else {
+      const existingModifiers = props.hotkey.filter((key) =>
+        props.modifiers.includes(key as any),
+      )
+      const otherKeys = props.hotkey.filter(
+        (key) => !props.modifiers.includes(key as any),
+      )
+      props.onHotkeyChange([...existingModifiers, modifier, ...otherKeys])
+    }
+  }
+
+  const getNonModifierValue = () => {
+    return props.hotkey
+      .filter((key) => !props.modifiers.includes(key as any))
+      .join('+')
+  }
+
+  const handleKeyInput = (input: string) => {
+    const makeModifierArray = (key: string) => {
+      if (key.length === 1) return [uppercaseFirstLetter(key)]
+      const modifiersArray: Array<string> = []
+      for (const character of key) {
+        const newLetter = uppercaseFirstLetter(character)
+        if (!modifiersArray.includes(newLetter)) modifiersArray.push(newLetter)
+      }
+      return modifiersArray
+    }
+
+    const hotkeyModifiers = props.hotkey.filter((key) =>
+      props.modifiers.includes(key as any),
+    )
+    const newKeys = input
+      .split('+')
+      .flatMap((key) => makeModifierArray(key))
+      .filter(Boolean)
+    props.onHotkeyChange([...hotkeyModifiers, ...newKeys])
+  }
+
+  const getDisplayHotkey = () => {
+    return props.hotkey.join(' + ')
+  }
+
+  return (
+    <div class={styles().settingsGroup}>
+      <h4 style={{ margin: 0 }}>{props.description}</h4>
+      <div class={styles().settingsModifiers}>
+        <Show keyed when={props.hotkey}>
+          {props.modifiers.map((modifier) => (
+            <Button
+              variant="success"
+              onclick={() => toggleModifier(modifier)}
+              outline={!props.hotkey.includes(modifier)}
+            >
+              {MODIFIER_DISPLAY_NAMES[modifier] || modifier}
+            </Button>
+          ))}
+        </Show>
+      </div>
+      <Input
+        description="Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above"
+        placeholder="a"
+        value={getNonModifierValue()}
+        onChange={handleKeyInput}
+      />
+      Final shortcut is: {getDisplayHotkey()}
+    </div>
+  )
+}

package/src/tabs/settings-tab.tsx

@@ -1,6 +1,5 @@
-import { Show, createMemo } from 'solid-js'
+import { Show } from 'solid-js'
 import {
-  Button,
   Checkbox,
   Input,
   MainPanel,
@@ -16,32 +15,18 @@ import {
   Link,
   SettingsCog,
 } from '@tanstack/devtools-ui/icons'
+
 import { useDevtoolsSettings } from '../context/use-devtools-context'
-import { uppercaseFirstLetter } from '../utils/sanitize'
 import { useStyles } from '../styles/use-styles'
-import type { ModifierKey } from '@solid-primitives/keyboard'
+import { HotkeyConfig } from './hotkey-config'
+import type { KeyboardKey } from '../context/devtools-store'
 
 export const SettingsTab = () => {
   const { setSettings, settings } = useDevtoolsSettings()
   const styles = useStyles()
-  const hotkey = createMemo(() => settings().openHotkey)
-  const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']
-  const changeHotkey = (newHotkey: ModifierKey) => () => {
-    if (hotkey().includes(newHotkey)) {
-      return setSettings({
-        openHotkey: hotkey().filter((key) => key !== newHotkey),
-      })
-    }
-    const existingModifiers = hotkey().filter((key) =>
-      modifiers.includes(key as any),
-    )
-    const otherModifiers = hotkey().filter(
-      (key) => !modifiers.includes(key as any),
-    )
-    setSettings({
-      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],
-    })
-  }
+
+  const modifiers: Array<KeyboardKey> = ['CtrlOrMeta', 'Alt', 'Shift']
+
   return (
     <MainPanel withPadding>
       <Section>
@@ -144,71 +129,23 @@ export const SettingsTab = () => {
         <SectionDescription>
           Customize keyboard shortcuts for quick access.
         </SectionDescription>
-        <div class={styles().settingsGroup}>
-          <div class={styles().settingsModifiers}>
-            <Show keyed when={hotkey()}>
-              <Button
-                variant="success"
-                onclick={changeHotkey('Shift')}
-                outline={!hotkey().includes('Shift')}
-              >
-                Shift
-              </Button>
-              <Button
-                variant="success"
-                onclick={changeHotkey('Alt')}
-                outline={!hotkey().includes('Alt')}
-              >
-                Alt
-              </Button>
-              <Button
-                variant="success"
-                onclick={changeHotkey('Meta')}
-                outline={!hotkey().includes('Meta')}
-              >
-                Meta
-              </Button>
-              <Button
-                variant="success"
-                onclick={changeHotkey('Control')}
-                outline={!hotkey().includes('Control')}
-              >
-                Control
-              </Button>
-            </Show>
-          </div>
-          <Input
-            label="Hotkey to open/close devtools"
-            description="Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above"
-            placeholder="a"
-            value={hotkey()
-              .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))
-              .join('+')}
-            onChange={(e) => {
-              const makeModifierArray = (key: string) => {
-                if (key.length === 1) return [uppercaseFirstLetter(key)]
-                const modifiers: Array<string> = []
-                for (const character of key) {
-                  const newLetter = uppercaseFirstLetter(character)
-                  if (!modifiers.includes(newLetter)) modifiers.push(newLetter)
-                }
-                return modifiers
-              }
-              const modifiers = e
-                .split('+')
-                .flatMap((key) => makeModifierArray(key))
-                .filter(Boolean)
-              return setSettings({
-                openHotkey: [
-                  ...hotkey().filter((key) =>
-                    ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),
-                  ),
-                  ...modifiers,
-                ],
-              })
-            }}
+
+        <div class={styles().settingsStack}>
+          <HotkeyConfig
+            title="Open/Close Devtools"
+            description="Hotkey to open/close devtools"
+            hotkey={settings().openHotkey}
+            modifiers={modifiers}
+            onHotkeyChange={(hotkey) => setSettings({ openHotkey: hotkey })}
+          />
+
+          <HotkeyConfig
+            title="Source Inspector"
+            description="Hotkey to open source inspector"
+            hotkey={settings().inspectHotkey}
+            modifiers={modifiers}
+            onHotkeyChange={(hotkey) => setSettings({ inspectHotkey: hotkey })}
           />
-          Final shortcut is: {hotkey().join(' + ')}
         </div>
       </Section>
 

package/src/utils/hotkey.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getHotkeyPermutations,
+  isHotkeyCombinationPressed,
+  normalizeHotkey,
+} from './hotkey'
+import type { KeyboardKey } from '../context/devtools-store'
+
+describe('hotkey utilities', () => {
+  describe('normalizeHotkey', () => {
+    it('should return unchanged array when CtrlOrMeta is not present', () => {
+      const hotkey: Array<KeyboardKey> = ['Shift', 'A']
+      const result = normalizeHotkey(hotkey)
+      expect(result).toEqual([['Shift', 'A']])
+    })
+
+    it('should expand CtrlOrMeta to Control and Meta variants', () => {
+      const hotkey: Array<KeyboardKey> = ['Shift', 'CtrlOrMeta']
+      const result = normalizeHotkey(hotkey)
+      expect(result).toHaveLength(2)
+      expect(result).toContainEqual(['Shift', 'Control'])
+      expect(result).toContainEqual(['Shift', 'Meta'])
+    })
+  })
+
+  describe('getHotkeyPermutations', () => {
+    it('should generate permutations for modifiers in any order', () => {
+      const hotkey: Array<KeyboardKey> = ['Shift', 'Control', 'A']
+      const result = getHotkeyPermutations(hotkey)
+      expect(result).toContainEqual(['Shift', 'Control', 'A'])
+      expect(result).toContainEqual(['Control', 'Shift', 'A'])
+    })
+
+    it('should handle CtrlOrMeta expansion with multiple permutations', () => {
+      const hotkey: Array<KeyboardKey> = ['Shift', 'CtrlOrMeta']
+      const result = getHotkeyPermutations(hotkey)
+      expect(result).toContainEqual(['Shift', 'Control'])
+      expect(result).toContainEqual(['Control', 'Shift'])
+      expect(result).toContainEqual(['Shift', 'Meta'])
+      expect(result).toContainEqual(['Meta', 'Shift'])
+    })
+
+    it('should handle single key hotkey with no modifiers', () => {
+      const hotkey: Array<KeyboardKey> = ['A']
+      const result = getHotkeyPermutations(hotkey)
+      expect(result).toEqual([['A']])
+    })
+
+    it('should not have duplicate permutations', () => {
+      const hotkey: Array<KeyboardKey> = ['Shift', 'Alt', 'A']
+      const result = getHotkeyPermutations(hotkey)
+      const stringified = result.map((combo) => JSON.stringify(combo))
+      const unique = new Set(stringified)
+      expect(unique.size).toBe(stringified.length)
+    })
+  })
+
+  describe('isHotkeyCombinationPressed', () => {
+    it('should match exact key combination', () => {
+      expect(isHotkeyCombinationPressed(['Shift', 'A'], ['Shift', 'A'])).toBe(
+        true,
+      )
+    })
+
+    it('should be case-insensitive', () => {
+      expect(isHotkeyCombinationPressed(['shift', 'a'], ['Shift', 'A'])).toBe(
+        true,
+      )
+    })
+
+    it('should match regardless of modifier order', () => {
+      expect(
+        isHotkeyCombinationPressed(
+          ['A', 'Control', 'Shift'],
+          ['Shift', 'Control', 'A'],
+        ),
+      ).toBe(true)
+    })
+
+    it('should handle CtrlOrMeta with Control', () => {
+      expect(
+        isHotkeyCombinationPressed(
+          ['Shift', 'Control'],
+          ['Shift', 'CtrlOrMeta'],
+        ),
+      ).toBe(true)
+    })
+
+    it('should handle CtrlOrMeta with Meta', () => {
+      expect(
+        isHotkeyCombinationPressed(['Shift', 'Meta'], ['Shift', 'CtrlOrMeta']),
+      ).toBe(true)
+    })
+
+    it('should reject incomplete key combinations', () => {
+      expect(isHotkeyCombinationPressed(['Shift'], ['Shift', 'A'])).toBe(false)
+    })
+
+    it('should reject extra keys', () => {
+      expect(
+        isHotkeyCombinationPressed(['Shift', 'A', 'B'], ['Shift', 'A']),
+      ).toBe(false)
+    })
+
+    it('should handle single key hotkey', () => {
+      expect(isHotkeyCombinationPressed(['A'], ['A'])).toBe(true)
+    })
+  })
+})

package/src/utils/hotkey.ts

@@ -0,0 +1,66 @@
+import { keyboardModifiers } from '../context/devtools-store'
+import { getAllPermutations } from './sanitize'
+
+import type { KeyboardKey, ModifierKey } from '../context/devtools-store'
+
+/** Expands CtrlOrMeta into separate Control and Meta variants */
+export const normalizeHotkey = (
+  keys: Array<KeyboardKey>,
+): Array<Array<KeyboardKey>> => {
+  // no normalization needed if CtrlOrMeta not used
+  if (!keys.includes('CtrlOrMeta')) {
+    return [keys]
+  }
+
+  return [
+    keys.map((key) => (key === 'CtrlOrMeta' ? 'Control' : key)),
+    keys.map((key) => (key === 'CtrlOrMeta' ? 'Meta' : key)),
+  ]
+}
+
+/**
+ * Generates all keyboard permutations for a given hotkey configuration
+ * Handles CtrlOrMeta expansion and creates all possible combinations
+ */
+export const getHotkeyPermutations = (
+  hotkey: Array<KeyboardKey>,
+): Array<Array<KeyboardKey>> => {
+  const normalizedHotkeys = normalizeHotkey(hotkey)
+
+  return normalizedHotkeys.flatMap((normalizedHotkey) => {
+    const modifiers = normalizedHotkey.filter((key) =>
+      keyboardModifiers.includes(key as any),
+    ) as Array<ModifierKey>
+
+    const nonModifiers = normalizedHotkey.filter(
+      (key) => !keyboardModifiers.includes(key as any),
+    )
+
+    // handle case with no modifiers (just non-modifier keys)
+    if (modifiers.length === 0) {
+      return [nonModifiers]
+    }
+
+    const allModifierCombinations = getAllPermutations(modifiers)
+    return allModifierCombinations.map((combo) => [...combo, ...nonModifiers])
+  })
+}
+
+/** Checks if the currently pressed keys match any of the hotkey permutations */
+export const isHotkeyCombinationPressed = (
+  keys: Array<string>,
+  hotkey: Array<KeyboardKey>,
+): boolean => {
+  const permutations = getHotkeyPermutations(hotkey)
+  const pressedKeys = keys.map((key) => key.toUpperCase())
+
+  return permutations.some(
+    (combo) =>
+      // every key in the combo must be pressed
+      combo.every((key) => pressedKeys.includes(String(key).toUpperCase())) &&
+      // and no extra keys beyond the combo
+      pressedKeys.every((key) =>
+        combo.map((k) => String(k).toUpperCase()).includes(key),
+      ),
+  )
+}