@tanstack/solid-hotkeys 0.8.3 → 0.9.0

package/src/createHotkeySequence.ts

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from 'solid-js'
+import { createEffect, onCleanup, untrack } from 'solid-js'
 import { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProvider'
 import type {
@@ -119,32 +119,37 @@ export function createHotkeySequence(
 
     const sequenceKey = formatHotkeySequence(resolvedSequence)
 
-    if (
-      registration?.isActive &&
-      lastSequenceKey === sequenceKey &&
-      lastTarget === resolvedTarget
-    ) {
-      registration.callback = callback
-      registration.setOptions(optionsWithoutTarget)
-      return
-    }
+    // Untrack store mutations so that registering/updating the sequence doesn't
+    // create a circular reactive dependency when createHotkeyRegistrations
+    // subscribes to the same store.
+    untrack(() => {
+      if (
+        registration?.isActive &&
+        lastSequenceKey === sequenceKey &&
+        lastTarget === resolvedTarget
+      ) {
+        registration.callback = callback
+        registration.setOptions(optionsWithoutTarget)
+        return
+      }
 
-    if (registration?.isActive) {
-      registration.unregister()
-      registration = null
-    }
+      if (registration?.isActive) {
+        registration.unregister()
+        registration = null
+      }
 
-    registration = manager.register(resolvedSequence, callback, {
-      ...mergedOptions,
-      target: resolvedTarget,
-    })
+      registration = manager.register(resolvedSequence, callback, {
+        ...mergedOptions,
+        target: resolvedTarget,
+      })
 
-    if (registration.isActive) {
-      registration.callback = callback
-      registration.setOptions(optionsWithoutTarget)
-    }
+      if (registration.isActive) {
+        registration.callback = callback
+        registration.setOptions(optionsWithoutTarget)
+      }
 
-    lastSequenceKey = sequenceKey
-    lastTarget = resolvedTarget
+      lastSequenceKey = sequenceKey
+      lastTarget = resolvedTarget
+    })
   })
 }

package/src/createHotkeySequences.ts

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from 'solid-js'
+import { createEffect, onCleanup, untrack } from 'solid-js'
 import { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProvider'
 import type { CreateHotkeySequenceOptions } from './createHotkeySequence'
@@ -137,40 +137,45 @@ export function createHotkeySequences(
       })
     }
 
-    for (const [key, record] of [...registrations.entries()]) {
-      if (!nextKeys.has(key)) {
-        if (record.handle.isActive) {
-          record.handle.unregister()
+    // Untrack store mutations so that registering/updating sequences doesn't
+    // create a circular reactive dependency when createHotkeyRegistrations
+    // subscribes to the same store.
+    untrack(() => {
+      for (const [key, record] of [...registrations.entries()]) {
+        if (!nextKeys.has(key)) {
+          if (record.handle.isActive) {
+            record.handle.unregister()
+          }
+          registrations.delete(key)
         }
-        registrations.delete(key)
       }
-    }
 
-    for (const p of prepared) {
-      const existing = registrations.get(p.registrationKey)
-      if (existing?.handle.isActive && existing.target === p.resolvedTarget) {
-        existing.handle.callback = p.def.callback
-        const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
-        existing.handle.setOptions(optionsWithoutTarget)
-        continue
-      }
+      for (const p of prepared) {
+        const existing = registrations.get(p.registrationKey)
+        if (existing?.handle.isActive && existing.target === p.resolvedTarget) {
+          existing.handle.callback = p.def.callback
+          const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
+          existing.handle.setOptions(optionsWithoutTarget)
+          continue
+        }
 
-      if (existing) {
-        if (existing.handle.isActive) {
-          existing.handle.unregister()
+        if (existing) {
+          if (existing.handle.isActive) {
+            existing.handle.unregister()
+          }
+          registrations.delete(p.registrationKey)
         }
-        registrations.delete(p.registrationKey)
-      }
 
-      const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
-      const handle = manager.register(p.def.sequence, p.def.callback, {
-        ...optionsWithoutTarget,
-        target: p.resolvedTarget,
-      })
-      registrations.set(p.registrationKey, {
-        handle,
-        target: p.resolvedTarget,
-      })
-    }
+        const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
+        const handle = manager.register(p.def.sequence, p.def.callback, {
+          ...optionsWithoutTarget,
+          target: p.resolvedTarget,
+        })
+        registrations.set(p.registrationKey, {
+          handle,
+          target: p.resolvedTarget,
+        })
+      }
+    })
   })
 }

package/src/createHotkeys.ts

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from 'solid-js'
+import { createEffect, onCleanup, untrack } from 'solid-js'
 import {
   detectPlatform,
   getHotkeyManager,
@@ -141,42 +141,47 @@ export function createHotkeys(
       })
     }
 
-    // Drop stale keys first so list index shifts don't briefly double-register
-    // the same hotkey+target (conflictBehavior: 'warn' + devtools can loop).
-    for (const [key, record] of [...registrations.entries()]) {
-      if (!nextKeys.has(key)) {
-        if (record.handle.isActive) {
-          record.handle.unregister()
+    // Untrack store mutations so that registering/updating hotkeys doesn't
+    // create a circular reactive dependency when createHotkeyRegistrations
+    // subscribes to the same store.
+    untrack(() => {
+      // Drop stale keys first so list index shifts don't briefly double-register
+      // the same hotkey+target (conflictBehavior: 'warn' + devtools can loop).
+      for (const [key, record] of [...registrations.entries()]) {
+        if (!nextKeys.has(key)) {
+          if (record.handle.isActive) {
+            record.handle.unregister()
+          }
+          registrations.delete(key)
         }
-        registrations.delete(key)
       }
-    }
 
-    for (const p of prepared) {
-      const existing = registrations.get(p.registrationKey)
-      if (existing?.handle.isActive && existing.target === p.resolvedTarget) {
-        existing.handle.callback = p.def.callback
-        const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
-        existing.handle.setOptions(optionsWithoutTarget)
-        continue
-      }
+      for (const p of prepared) {
+        const existing = registrations.get(p.registrationKey)
+        if (existing?.handle.isActive && existing.target === p.resolvedTarget) {
+          existing.handle.callback = p.def.callback
+          const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
+          existing.handle.setOptions(optionsWithoutTarget)
+          continue
+        }
 
-      if (existing) {
-        if (existing.handle.isActive) {
-          existing.handle.unregister()
+        if (existing) {
+          if (existing.handle.isActive) {
+            existing.handle.unregister()
+          }
+          registrations.delete(p.registrationKey)
         }
-        registrations.delete(p.registrationKey)
-      }
 
-      const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
-      const handle = manager.register(p.hotkeyString, p.def.callback, {
-        ...optionsWithoutTarget,
-        target: p.resolvedTarget,
-      })
-      registrations.set(p.registrationKey, {
-        handle,
-        target: p.resolvedTarget,
-      })
-    }
+        const { target: _target, ...optionsWithoutTarget } = p.mergedOptions
+        const handle = manager.register(p.hotkeyString, p.def.callback, {
+          ...optionsWithoutTarget,
+          target: p.resolvedTarget,
+        })
+        registrations.set(p.registrationKey, {
+          handle,
+          target: p.resolvedTarget,
+        })
+      }
+    })
   })
 }

package/src/createKeyHold.ts

@@ -1,7 +1,7 @@
 import { createMemo } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
-import type { HeldKey } from '@tanstack/hotkeys'
+import type { IndividualKey } from '@tanstack/hotkeys'
 
 /**
  * SolidJS primitive that returns whether a specific key is currently being held.
@@ -43,7 +43,9 @@ import type { HeldKey } from '@tanstack/hotkeys'
  * }
  * ```
  */
-export function createKeyHold(key: HeldKey | (() => HeldKey)): () => boolean {
+export function createKeyHold(
+  key: IndividualKey | (() => IndividualKey),
+): () => boolean {
   const tracker = getKeyStateTracker()
   const heldKeysSelector = useStore(tracker.store, (state) => state.heldKeys)
 

package/src/index.ts

@@ -13,4 +13,5 @@ export * from './createKeyHold'
 export * from './createHotkeySequence'
 export * from './createHotkeySequences'
 export * from './createHotkeyRecorder'
+export * from './createHotkeyRegistrations'
 export * from './createHotkeySequenceRecorder'