@tanstack/preact-hotkeys 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/useHotkey.cjs +2 -7
- package/dist/useHotkey.cjs.map +1 -1
- package/dist/useHotkey.js +1 -6
- package/dist/useHotkey.js.map +1 -1
- package/dist/useHotkeySequence.cjs +2 -7
- package/dist/useHotkeySequence.cjs.map +1 -1
- package/dist/useHotkeySequence.js +1 -6
- package/dist/useHotkeySequence.js.map +1 -1
- package/dist/useHotkeys.cjs +137 -0
- package/dist/useHotkeys.cjs.map +1 -0
- package/dist/useHotkeys.d.cts +60 -0
- package/dist/useHotkeys.d.ts +60 -0
- package/dist/useHotkeys.js +137 -0
- package/dist/useHotkeys.js.map +1 -0
- package/dist/utils.cjs +12 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.js +11 -0
- package/dist/utils.js.map +1 -0
- package/package.json +4 -4
- package/src/index.ts +1 -0
- package/src/useHotkey.ts +1 -7
- package/src/useHotkeySequence.ts +1 -7
- package/src/useHotkeys.ts +217 -0
- package/src/utils.ts +8 -0
package/README.md
CHANGED
|
@@ -58,7 +58,7 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
|
|
|
58
58
|
> - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
|
|
59
59
|
> - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
|
|
60
60
|
> - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
|
|
61
|
-
> - Svelte Hotkeys
|
|
61
|
+
> - [**Svelte Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/svelte/reference)
|
|
62
62
|
|
|
63
63
|
## Get Involved
|
|
64
64
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
2
|
const require_HotkeysProvider = require('./HotkeysProvider.cjs');
|
|
3
3
|
const require_useHotkey = require('./useHotkey.cjs');
|
|
4
|
+
const require_useHotkeys = require('./useHotkeys.cjs');
|
|
4
5
|
const require_useHeldKeys = require('./useHeldKeys.cjs');
|
|
5
6
|
const require_useHeldKeyCodes = require('./useHeldKeyCodes.cjs');
|
|
6
7
|
const require_useKeyHold = require('./useKeyHold.cjs');
|
|
@@ -14,6 +15,7 @@ exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
|
|
|
14
15
|
exports.useHotkey = require_useHotkey.useHotkey;
|
|
15
16
|
exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
|
|
16
17
|
exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
|
|
18
|
+
exports.useHotkeys = require_useHotkeys.useHotkeys;
|
|
17
19
|
exports.useHotkeysContext = require_HotkeysProvider.useHotkeysContext;
|
|
18
20
|
exports.useKeyHold = require_useKeyHold.useKeyHold;
|
|
19
21
|
var _tanstack_hotkeys = require("@tanstack/hotkeys");
|
package/dist/index.d.cts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { UseHotkeyOptions, useHotkey } from "./useHotkey.cjs";
|
|
2
2
|
import { UseHotkeySequenceOptions, useHotkeySequence } from "./useHotkeySequence.cjs";
|
|
3
3
|
import { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, useDefaultHotkeysOptions, useHotkeysContext } from "./HotkeysProvider.cjs";
|
|
4
|
+
import { UseHotkeyDefinition, useHotkeys } from "./useHotkeys.cjs";
|
|
4
5
|
import { useHeldKeys } from "./useHeldKeys.cjs";
|
|
5
6
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.cjs";
|
|
6
7
|
import { useKeyHold } from "./useKeyHold.cjs";
|
|
7
8
|
import { PreactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
|
|
8
9
|
export * from "@tanstack/hotkeys";
|
|
9
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeysContext, useKeyHold };
|
|
10
|
+
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { UseHotkeyOptions, useHotkey } from "./useHotkey.js";
|
|
2
2
|
import { UseHotkeySequenceOptions, useHotkeySequence } from "./useHotkeySequence.js";
|
|
3
3
|
import { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, useDefaultHotkeysOptions, useHotkeysContext } from "./HotkeysProvider.js";
|
|
4
|
+
import { UseHotkeyDefinition, useHotkeys } from "./useHotkeys.js";
|
|
4
5
|
import { useHeldKeys } from "./useHeldKeys.js";
|
|
5
6
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
6
7
|
import { useKeyHold } from "./useKeyHold.js";
|
|
7
8
|
import { PreactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
8
9
|
export * from "@tanstack/hotkeys";
|
|
9
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeysContext, useKeyHold };
|
|
10
|
+
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { HotkeysProvider, useDefaultHotkeysOptions, useHotkeysContext } from "./HotkeysProvider.js";
|
|
2
2
|
import { useHotkey } from "./useHotkey.js";
|
|
3
|
+
import { useHotkeys } from "./useHotkeys.js";
|
|
3
4
|
import { useHeldKeys } from "./useHeldKeys.js";
|
|
4
5
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
5
6
|
import { useKeyHold } from "./useKeyHold.js";
|
|
@@ -8,4 +9,4 @@ import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
|
8
9
|
|
|
9
10
|
export * from "@tanstack/hotkeys"
|
|
10
11
|
|
|
11
|
-
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeysContext, useKeyHold };
|
|
12
|
+
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/useHotkey.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const require_HotkeysProvider = require('./HotkeysProvider.cjs');
|
|
2
|
+
const require_utils = require('./utils.cjs');
|
|
2
3
|
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
4
|
let preact_hooks = require("preact/hooks");
|
|
4
5
|
|
|
@@ -80,7 +81,7 @@ function useHotkey(hotkey, callback, options = {}) {
|
|
|
80
81
|
const hotkeyString = typeof hotkey === "string" ? hotkey : (0, _tanstack_hotkeys.formatHotkey)((0, _tanstack_hotkeys.rawHotkeyToParsedHotkey)(hotkey, platform));
|
|
81
82
|
const { target: _target, ...optionsWithoutTarget } = mergedOptions;
|
|
82
83
|
(0, preact_hooks.useEffect)(() => {
|
|
83
|
-
const resolvedTarget = isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
|
|
84
|
+
const resolvedTarget = require_utils.isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
|
|
84
85
|
if (!resolvedTarget) return;
|
|
85
86
|
const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
|
|
86
87
|
const hotkeyChanged = prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString;
|
|
@@ -106,12 +107,6 @@ function useHotkey(hotkey, callback, options = {}) {
|
|
|
106
107
|
registrationRef.current.setOptions(optionsWithoutTarget);
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
|
-
/**
|
|
110
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
111
|
-
*/
|
|
112
|
-
function isRef(value) {
|
|
113
|
-
return value !== null && typeof value === "object" && "current" in value;
|
|
114
|
-
}
|
|
115
110
|
|
|
116
111
|
//#endregion
|
|
117
112
|
exports.useHotkey = useHotkey;
|
package/dist/useHotkey.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkey.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { RefObject } from 'preact'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyOptions,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference Preact state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior\n *\n * @example\n * ```tsx\n * function SaveButton() {\n * const [count, setCount] = useState(0)\n *\n * // Callback always has access to latest count value\n * useHotkey('Mod+S', (event, { hotkey }) => {\n * console.log(`Save triggered, count is ${count}`)\n * handleSave()\n * })\n *\n * return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n * // enabled option is synced on every render\n * useHotkey('Escape', () => {\n * onClose()\n * }, { enabled: isOpen })\n *\n * if (!isOpen) return null\n * return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n * const editorRef = useRef<HTMLDivElement>(null)\n *\n * // Scoped to a specific element\n * useHotkey('Mod+S', () => {\n * save()\n * }, { target: editorRef })\n *\n * return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n hotkey: RegisterableHotkey,\n callback: HotkeyCallback,\n options: UseHotkeyOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkey,\n ...options,\n } as UseHotkeyOptions\n\n const manager = getHotkeyManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and hotkey to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevHotkeyRef = useRef<string | null>(null)\n\n // Normalize to hotkey string\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString: Hotkey =\n typeof hotkey === 'string'\n ? hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or hotkey changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const hotkeyChanged =\n prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n // If we have an active registration and target/hotkey changed, unregister first\n if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n // Use refs to access current values without adding them to dependencies\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n hotkeyString,\n callbackRef.current,\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevHotkeyRef.current = hotkeyString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeyString, options.enabled])\n\n // Sync callback and options on EVERY render (outside useEffect)\n // This avoids stale closures - the callback always has access to latest state\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = callback\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n
|
|
1
|
+
{"version":3,"file":"useHotkey.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyOptions,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference Preact state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior\n *\n * @example\n * ```tsx\n * function SaveButton() {\n * const [count, setCount] = useState(0)\n *\n * // Callback always has access to latest count value\n * useHotkey('Mod+S', (event, { hotkey }) => {\n * console.log(`Save triggered, count is ${count}`)\n * handleSave()\n * })\n *\n * return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n * // enabled option is synced on every render\n * useHotkey('Escape', () => {\n * onClose()\n * }, { enabled: isOpen })\n *\n * if (!isOpen) return null\n * return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n * const editorRef = useRef<HTMLDivElement>(null)\n *\n * // Scoped to a specific element\n * useHotkey('Mod+S', () => {\n * save()\n * }, { target: editorRef })\n *\n * return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n hotkey: RegisterableHotkey,\n callback: HotkeyCallback,\n options: UseHotkeyOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkey,\n ...options,\n } as UseHotkeyOptions\n\n const manager = getHotkeyManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and hotkey to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevHotkeyRef = useRef<string | null>(null)\n\n // Normalize to hotkey string\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString: Hotkey =\n typeof hotkey === 'string'\n ? hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or hotkey changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const hotkeyChanged =\n prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n // If we have an active registration and target/hotkey changed, unregister first\n if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n // Use refs to access current values without adding them to dependencies\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n hotkeyString,\n callbackRef.current,\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevHotkeyRef.current = hotkeyString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeyString, options.enabled])\n\n // Sync callback and options on EVERY render (outside useEffect)\n // This avoids stale closures - the callback always has access to latest state\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = callback\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,mDAA4B;CAGlC,MAAM,2CAA0D,KAAK;CAGrE,MAAM,uCAAqB,SAAS;CACpC,MAAM,sCAAoB,cAAc;CACxC,MAAM,sCAAoB,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,yCAA+D,KAAK;CAC1E,MAAM,yCAAsC,KAAK;CAGjD,MAAM,WAAW,cAAc,mDAA4B;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,4FACsC,QAAQ,SAAS,CAAC;CAG9D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,mCAAgB;EAEd,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;AAGxB,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,cAAc,QAAQ,QAAQ,CAAC;AAInC,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,WAAW;AACnC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
package/dist/useHotkey.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
|
+
import { isRef } from "./utils.js";
|
|
2
3
|
import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey } from "@tanstack/hotkeys";
|
|
3
4
|
import { useEffect, useRef } from "preact/hooks";
|
|
4
5
|
|
|
@@ -106,12 +107,6 @@ function useHotkey(hotkey, callback, options = {}) {
|
|
|
106
107
|
registrationRef.current.setOptions(optionsWithoutTarget);
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
|
-
/**
|
|
110
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
111
|
-
*/
|
|
112
|
-
function isRef(value) {
|
|
113
|
-
return value !== null && typeof value === "object" && "current" in value;
|
|
114
|
-
}
|
|
115
110
|
|
|
116
111
|
//#endregion
|
|
117
112
|
export { useHotkey };
|
package/dist/useHotkey.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkey.js","names":[],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { RefObject } from 'preact'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyOptions,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference Preact state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior\n *\n * @example\n * ```tsx\n * function SaveButton() {\n * const [count, setCount] = useState(0)\n *\n * // Callback always has access to latest count value\n * useHotkey('Mod+S', (event, { hotkey }) => {\n * console.log(`Save triggered, count is ${count}`)\n * handleSave()\n * })\n *\n * return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n * // enabled option is synced on every render\n * useHotkey('Escape', () => {\n * onClose()\n * }, { enabled: isOpen })\n *\n * if (!isOpen) return null\n * return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n * const editorRef = useRef<HTMLDivElement>(null)\n *\n * // Scoped to a specific element\n * useHotkey('Mod+S', () => {\n * save()\n * }, { target: editorRef })\n *\n * return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n hotkey: RegisterableHotkey,\n callback: HotkeyCallback,\n options: UseHotkeyOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkey,\n ...options,\n } as UseHotkeyOptions\n\n const manager = getHotkeyManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and hotkey to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevHotkeyRef = useRef<string | null>(null)\n\n // Normalize to hotkey string\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString: Hotkey =\n typeof hotkey === 'string'\n ? hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or hotkey changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const hotkeyChanged =\n prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n // If we have an active registration and target/hotkey changed, unregister first\n if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n // Use refs to access current values without adding them to dependencies\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n hotkeyString,\n callbackRef.current,\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevHotkeyRef.current = hotkeyString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeyString, options.enabled])\n\n // Sync callback and options on EVERY render (outside useEffect)\n // This avoids stale closures - the callback always has access to latest state\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = callback\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n
|
|
1
|
+
{"version":3,"file":"useHotkey.js","names":[],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyOptions,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference Preact state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior\n *\n * @example\n * ```tsx\n * function SaveButton() {\n * const [count, setCount] = useState(0)\n *\n * // Callback always has access to latest count value\n * useHotkey('Mod+S', (event, { hotkey }) => {\n * console.log(`Save triggered, count is ${count}`)\n * handleSave()\n * })\n *\n * return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n * // enabled option is synced on every render\n * useHotkey('Escape', () => {\n * onClose()\n * }, { enabled: isOpen })\n *\n * if (!isOpen) return null\n * return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n * const editorRef = useRef<HTMLDivElement>(null)\n *\n * // Scoped to a specific element\n * useHotkey('Mod+S', () => {\n * save()\n * }, { target: editorRef })\n *\n * return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n hotkey: RegisterableHotkey,\n callback: HotkeyCallback,\n options: UseHotkeyOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkey,\n ...options,\n } as UseHotkeyOptions\n\n const manager = getHotkeyManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and hotkey to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevHotkeyRef = useRef<string | null>(null)\n\n // Normalize to hotkey string\n const platform = mergedOptions.platform ?? detectPlatform()\n const hotkeyString: Hotkey =\n typeof hotkey === 'string'\n ? hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or hotkey changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const hotkeyChanged =\n prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n // If we have an active registration and target/hotkey changed, unregister first\n if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n // Use refs to access current values without adding them to dependencies\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n hotkeyString,\n callbackRef.current,\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevHotkeyRef.current = hotkeyString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeyString, options.enabled])\n\n // Sync callback and options on EVERY render (outside useEffect)\n // This avoids stale closures - the callback always has access to latest state\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = callback\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,kBAAkB;CAGlC,MAAM,kBAAkB,OAAwC,KAAK;CAGrE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,gBAAgB,OAAsB,KAAK;CAGjD,MAAM,WAAW,cAAc,YAAY,gBAAgB;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,SACC,aAAa,wBAAwB,QAAQ,SAAS,CAAC;CAG9D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;EAEd,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;AAGxB,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,cAAc,QAAQ,QAAQ,CAAC;AAInC,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,WAAW;AACnC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const require_HotkeysProvider = require('./HotkeysProvider.cjs');
|
|
2
|
+
const require_utils = require('./utils.cjs');
|
|
2
3
|
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
4
|
let preact_hooks = require("preact/hooks");
|
|
4
5
|
|
|
@@ -54,7 +55,7 @@ function useHotkeySequence(sequence, callback, options = {}) {
|
|
|
54
55
|
const { target: _target, ...optionsWithoutTarget } = mergedOptions;
|
|
55
56
|
(0, preact_hooks.useEffect)(() => {
|
|
56
57
|
if (sequence.length === 0) return;
|
|
57
|
-
const resolvedTarget = isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
|
|
58
|
+
const resolvedTarget = require_utils.isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
|
|
58
59
|
if (!resolvedTarget) return;
|
|
59
60
|
const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
|
|
60
61
|
const sequenceChanged = prevSequenceRef.current !== null && prevSequenceRef.current !== hotkeySequenceString;
|
|
@@ -84,12 +85,6 @@ function useHotkeySequence(sequence, callback, options = {}) {
|
|
|
84
85
|
registrationRef.current.setOptions(optionsWithoutTarget);
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
|
-
/**
|
|
88
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
89
|
-
*/
|
|
90
|
-
function isRef(value) {
|
|
91
|
-
return value !== null && typeof value === "object" && "current" in value;
|
|
92
|
-
}
|
|
93
88
|
|
|
94
89
|
//#endregion
|
|
95
90
|
exports.useHotkeySequence = useHotkeySequence;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,qDAA8B;CAGpC,MAAM,2CAA4D,KAAK;CAGvE,MAAM,uCAAqB,SAAS;CACpC,MAAM,sCAAoB,cAAc;CACxC,MAAM,sCAAoB,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,yCAA+D,KAAK;CAC1E,MAAM,2CAAwC,KAAK;CAGnD,MAAM,mEAA4C,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,mCAAgB;AACd,MAAI,SAAS,WAAW,EACtB;EAIF,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,WACC,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B;EAAC;EAAsB,cAAc;EAAS;EAAS,CAAC;AAG3D,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
|
+
import { isRef } from "./utils.js";
|
|
2
3
|
import { formatHotkeySequence, getSequenceManager } from "@tanstack/hotkeys";
|
|
3
4
|
import { useEffect, useRef } from "preact/hooks";
|
|
4
5
|
|
|
@@ -84,12 +85,6 @@ function useHotkeySequence(sequence, callback, options = {}) {
|
|
|
84
85
|
registrationRef.current.setOptions(optionsWithoutTarget);
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
|
-
/**
|
|
88
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
89
|
-
*/
|
|
90
|
-
function isRef(value) {
|
|
91
|
-
return value !== null && typeof value === "object" && "current" in value;
|
|
92
|
-
}
|
|
93
88
|
|
|
94
89
|
//#endregion
|
|
95
90
|
export { useHotkeySequence };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,oBAAoB;CAGpC,MAAM,kBAAkB,OAA0C,KAAK;CAGvE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,kBAAkB,OAAsB,KAAK;CAGnD,MAAM,uBAAuB,qBAAqB,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;AACd,MAAI,SAAS,WAAW,EACtB;EAIF,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,WACC,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B;EAAC;EAAsB,cAAc;EAAS;EAAS,CAAC;AAG3D,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
const require_HotkeysProvider = require('./HotkeysProvider.cjs');
|
|
2
|
+
const require_utils = require('./utils.cjs');
|
|
3
|
+
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
4
|
+
let preact_hooks = require("preact/hooks");
|
|
5
|
+
|
|
6
|
+
//#region src/useHotkeys.ts
|
|
7
|
+
/**
|
|
8
|
+
* Preact hook for registering multiple keyboard hotkeys at once.
|
|
9
|
+
*
|
|
10
|
+
* Uses the singleton HotkeyManager for efficient event handling.
|
|
11
|
+
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
12
|
+
* with variable-length lists without violating the rules of hooks.
|
|
13
|
+
*
|
|
14
|
+
* Options are merged in this order:
|
|
15
|
+
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
16
|
+
*
|
|
17
|
+
* Callbacks and options are synced on every render to avoid stale closures.
|
|
18
|
+
*
|
|
19
|
+
* @param hotkeys - Array of hotkey definitions to register
|
|
20
|
+
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* function Editor() {
|
|
25
|
+
* useHotkeys([
|
|
26
|
+
* { hotkey: 'Mod+S', callback: () => save() },
|
|
27
|
+
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
28
|
+
* { hotkey: 'Escape', callback: () => close() },
|
|
29
|
+
* ])
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* function MenuShortcuts({ items }) {
|
|
36
|
+
* // Dynamic hotkeys from data -- safe because it's a single hook call
|
|
37
|
+
* useHotkeys(
|
|
38
|
+
* items.map((item) => ({
|
|
39
|
+
* hotkey: item.shortcut,
|
|
40
|
+
* callback: item.action,
|
|
41
|
+
* options: { enabled: item.enabled },
|
|
42
|
+
* })),
|
|
43
|
+
* { preventDefault: true },
|
|
44
|
+
* )
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
function useHotkeys(hotkeys, commonOptions = {}) {
|
|
49
|
+
const defaultOptions = require_HotkeysProvider.useDefaultHotkeysOptions().hotkey;
|
|
50
|
+
const manager = (0, _tanstack_hotkeys.getHotkeyManager)();
|
|
51
|
+
const platform = commonOptions.platform ?? defaultOptions?.platform ?? (0, _tanstack_hotkeys.detectPlatform)();
|
|
52
|
+
const registrationsRef = (0, preact_hooks.useRef)(/* @__PURE__ */ new Map());
|
|
53
|
+
const hotkeysRef = (0, preact_hooks.useRef)(hotkeys);
|
|
54
|
+
const hotkeyStringsRef = (0, preact_hooks.useRef)([]);
|
|
55
|
+
const commonOptionsRef = (0, preact_hooks.useRef)(commonOptions);
|
|
56
|
+
const defaultOptionsRef = (0, preact_hooks.useRef)(defaultOptions);
|
|
57
|
+
const managerRef = (0, preact_hooks.useRef)(manager);
|
|
58
|
+
const hotkeyStrings = hotkeys.map((def) => typeof def.hotkey === "string" ? def.hotkey : (0, _tanstack_hotkeys.formatHotkey)((0, _tanstack_hotkeys.rawHotkeyToParsedHotkey)(def.hotkey, platform)));
|
|
59
|
+
hotkeysRef.current = hotkeys;
|
|
60
|
+
hotkeyStringsRef.current = hotkeyStrings;
|
|
61
|
+
commonOptionsRef.current = commonOptions;
|
|
62
|
+
defaultOptionsRef.current = defaultOptions;
|
|
63
|
+
managerRef.current = manager;
|
|
64
|
+
(0, preact_hooks.useEffect)(() => {
|
|
65
|
+
const prevRegistrations = registrationsRef.current;
|
|
66
|
+
const nextRegistrations = /* @__PURE__ */ new Map();
|
|
67
|
+
const rows = [];
|
|
68
|
+
for (let i = 0; i < hotkeysRef.current.length; i++) {
|
|
69
|
+
const def = hotkeysRef.current[i];
|
|
70
|
+
const hotkeyStr = hotkeyStringsRef.current[i];
|
|
71
|
+
const mergedOptions = {
|
|
72
|
+
...defaultOptionsRef.current,
|
|
73
|
+
...commonOptionsRef.current,
|
|
74
|
+
...def.options
|
|
75
|
+
};
|
|
76
|
+
const resolvedTarget = require_utils.isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
|
|
77
|
+
if (!resolvedTarget) continue;
|
|
78
|
+
const registrationKey = `${i}:${hotkeyStr}`;
|
|
79
|
+
rows.push({
|
|
80
|
+
registrationKey,
|
|
81
|
+
def,
|
|
82
|
+
hotkeyStr,
|
|
83
|
+
mergedOptions,
|
|
84
|
+
resolvedTarget
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
const nextKeys = new Set(rows.map((r) => r.registrationKey));
|
|
88
|
+
for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
|
|
89
|
+
for (const row of rows) {
|
|
90
|
+
const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } = row;
|
|
91
|
+
const existing = prevRegistrations.get(registrationKey);
|
|
92
|
+
if (existing?.handle.isActive && existing.target === resolvedTarget) {
|
|
93
|
+
nextRegistrations.set(registrationKey, existing);
|
|
94
|
+
continue;
|
|
95
|
+
}
|
|
96
|
+
if (existing?.handle.isActive) existing.handle.unregister();
|
|
97
|
+
const handle = managerRef.current.register(hotkeyStr, def.callback, {
|
|
98
|
+
...mergedOptions,
|
|
99
|
+
target: resolvedTarget
|
|
100
|
+
});
|
|
101
|
+
nextRegistrations.set(registrationKey, {
|
|
102
|
+
handle,
|
|
103
|
+
target: resolvedTarget
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
registrationsRef.current = nextRegistrations;
|
|
107
|
+
return () => {
|
|
108
|
+
for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
|
|
109
|
+
registrationsRef.current = /* @__PURE__ */ new Map();
|
|
110
|
+
};
|
|
111
|
+
}, [hotkeyStrings.join("\0"), hotkeys.map((def) => {
|
|
112
|
+
return {
|
|
113
|
+
...defaultOptions,
|
|
114
|
+
...commonOptions,
|
|
115
|
+
...def.options
|
|
116
|
+
}.enabled ?? true;
|
|
117
|
+
}).join("\0")]);
|
|
118
|
+
for (let i = 0; i < hotkeys.length; i++) {
|
|
119
|
+
const def = hotkeys[i];
|
|
120
|
+
const hotkeyStr = hotkeyStrings[i];
|
|
121
|
+
const registrationKey = `${i}:${hotkeyStr}`;
|
|
122
|
+
const handle = registrationsRef.current.get(registrationKey)?.handle;
|
|
123
|
+
if (handle?.isActive) {
|
|
124
|
+
handle.callback = def.callback;
|
|
125
|
+
const { target: _target, ...optionsWithoutTarget } = {
|
|
126
|
+
...defaultOptions,
|
|
127
|
+
...commonOptions,
|
|
128
|
+
...def.options
|
|
129
|
+
};
|
|
130
|
+
handle.setOptions(optionsWithoutTarget);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
//#endregion
|
|
136
|
+
exports.useHotkeys = useHotkeys;
|
|
137
|
+
//# sourceMappingURL=useHotkeys.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeys.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n typeof def.hotkey === 'string'\n ? def.hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n const hotkeyKey = hotkeyStrings.join('\\0')\n const enabledKey = hotkeys\n .map((def) => {\n const merged = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n }\n return merged.enabled ?? true\n })\n .join('\\0')\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [hotkeyKey, enabledKey])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiBA,kDAA0B,CAAC;CAClD,MAAM,mDAA4B;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,mDAA4B;CAExE,MAAM,4DAA2D,IAAI,KAAK,CAAC;CAC3E,MAAM,sCAAoB,QAAQ;CAClC,MAAM,4CAAyC,EAAE,CAAC;CAClD,MAAM,4CAA0B,cAAc;CAC9C,MAAM,6CAA2B,eAAe;CAChD,MAAM,sCAAoB,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,QACjC,OAAO,IAAI,WAAW,WAClB,IAAI,4FACkC,IAAI,QAAQ,SAAS,CAAC,CACjE;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAcrB,mCAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,QAAQ,KAAK;GAClD,MAAM,MAAM,WAAW,QAAQ;GAC/B,MAAM,YAAY,iBAAiB,QAAQ;GAC3C,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiBC,oBAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,WAAW,eAAe,mBACtD;GAEF,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,WAAW,IAAI,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;AAE3B,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,CA9Fe,cAAc,KAAK,KAAK,EACvB,QAChB,KAAK,QAAQ;AAMZ,SALe;GACb,GAAG;GACH,GAAG;GACH,GAAG,IAAI;GACR,CACa,WAAW;GACzB,CACD,KAAK,KAAK,CAoFa,CAAC;AAE3B,MAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,MAAM,QAAQ;EACpB,MAAM,YAAY,cAAc;EAChC,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,UAAU;AACpB,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { UseHotkeyOptions } from "./useHotkey.cjs";
|
|
2
|
+
import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
|
|
3
|
+
|
|
4
|
+
//#region src/useHotkeys.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* A single hotkey definition for use with `useHotkeys`.
|
|
7
|
+
*/
|
|
8
|
+
interface UseHotkeyDefinition {
|
|
9
|
+
/** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
|
|
10
|
+
hotkey: RegisterableHotkey;
|
|
11
|
+
/** The function to call when the hotkey is pressed */
|
|
12
|
+
callback: HotkeyCallback;
|
|
13
|
+
/** Per-hotkey options (merged on top of commonOptions) */
|
|
14
|
+
options?: UseHotkeyOptions;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Preact hook for registering multiple keyboard hotkeys at once.
|
|
18
|
+
*
|
|
19
|
+
* Uses the singleton HotkeyManager for efficient event handling.
|
|
20
|
+
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
21
|
+
* with variable-length lists without violating the rules of hooks.
|
|
22
|
+
*
|
|
23
|
+
* Options are merged in this order:
|
|
24
|
+
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
25
|
+
*
|
|
26
|
+
* Callbacks and options are synced on every render to avoid stale closures.
|
|
27
|
+
*
|
|
28
|
+
* @param hotkeys - Array of hotkey definitions to register
|
|
29
|
+
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* function Editor() {
|
|
34
|
+
* useHotkeys([
|
|
35
|
+
* { hotkey: 'Mod+S', callback: () => save() },
|
|
36
|
+
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
37
|
+
* { hotkey: 'Escape', callback: () => close() },
|
|
38
|
+
* ])
|
|
39
|
+
* }
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* function MenuShortcuts({ items }) {
|
|
45
|
+
* // Dynamic hotkeys from data -- safe because it's a single hook call
|
|
46
|
+
* useHotkeys(
|
|
47
|
+
* items.map((item) => ({
|
|
48
|
+
* hotkey: item.shortcut,
|
|
49
|
+
* callback: item.action,
|
|
50
|
+
* options: { enabled: item.enabled },
|
|
51
|
+
* })),
|
|
52
|
+
* { preventDefault: true },
|
|
53
|
+
* )
|
|
54
|
+
* }
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
57
|
+
declare function useHotkeys(hotkeys: Array<UseHotkeyDefinition>, commonOptions?: UseHotkeyOptions): void;
|
|
58
|
+
//#endregion
|
|
59
|
+
export { UseHotkeyDefinition, useHotkeys };
|
|
60
|
+
//# sourceMappingURL=useHotkeys.d.cts.map
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { UseHotkeyOptions } from "./useHotkey.js";
|
|
2
|
+
import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
|
|
3
|
+
|
|
4
|
+
//#region src/useHotkeys.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* A single hotkey definition for use with `useHotkeys`.
|
|
7
|
+
*/
|
|
8
|
+
interface UseHotkeyDefinition {
|
|
9
|
+
/** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
|
|
10
|
+
hotkey: RegisterableHotkey;
|
|
11
|
+
/** The function to call when the hotkey is pressed */
|
|
12
|
+
callback: HotkeyCallback;
|
|
13
|
+
/** Per-hotkey options (merged on top of commonOptions) */
|
|
14
|
+
options?: UseHotkeyOptions;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Preact hook for registering multiple keyboard hotkeys at once.
|
|
18
|
+
*
|
|
19
|
+
* Uses the singleton HotkeyManager for efficient event handling.
|
|
20
|
+
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
21
|
+
* with variable-length lists without violating the rules of hooks.
|
|
22
|
+
*
|
|
23
|
+
* Options are merged in this order:
|
|
24
|
+
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
25
|
+
*
|
|
26
|
+
* Callbacks and options are synced on every render to avoid stale closures.
|
|
27
|
+
*
|
|
28
|
+
* @param hotkeys - Array of hotkey definitions to register
|
|
29
|
+
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* function Editor() {
|
|
34
|
+
* useHotkeys([
|
|
35
|
+
* { hotkey: 'Mod+S', callback: () => save() },
|
|
36
|
+
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
37
|
+
* { hotkey: 'Escape', callback: () => close() },
|
|
38
|
+
* ])
|
|
39
|
+
* }
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* function MenuShortcuts({ items }) {
|
|
45
|
+
* // Dynamic hotkeys from data -- safe because it's a single hook call
|
|
46
|
+
* useHotkeys(
|
|
47
|
+
* items.map((item) => ({
|
|
48
|
+
* hotkey: item.shortcut,
|
|
49
|
+
* callback: item.action,
|
|
50
|
+
* options: { enabled: item.enabled },
|
|
51
|
+
* })),
|
|
52
|
+
* { preventDefault: true },
|
|
53
|
+
* )
|
|
54
|
+
* }
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
57
|
+
declare function useHotkeys(hotkeys: Array<UseHotkeyDefinition>, commonOptions?: UseHotkeyOptions): void;
|
|
58
|
+
//#endregion
|
|
59
|
+
export { UseHotkeyDefinition, useHotkeys };
|
|
60
|
+
//# sourceMappingURL=useHotkeys.d.ts.map
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
|
+
import { isRef } from "./utils.js";
|
|
3
|
+
import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey } from "@tanstack/hotkeys";
|
|
4
|
+
import { useEffect, useRef } from "preact/hooks";
|
|
5
|
+
|
|
6
|
+
//#region src/useHotkeys.ts
|
|
7
|
+
/**
|
|
8
|
+
* Preact hook for registering multiple keyboard hotkeys at once.
|
|
9
|
+
*
|
|
10
|
+
* Uses the singleton HotkeyManager for efficient event handling.
|
|
11
|
+
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
12
|
+
* with variable-length lists without violating the rules of hooks.
|
|
13
|
+
*
|
|
14
|
+
* Options are merged in this order:
|
|
15
|
+
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
16
|
+
*
|
|
17
|
+
* Callbacks and options are synced on every render to avoid stale closures.
|
|
18
|
+
*
|
|
19
|
+
* @param hotkeys - Array of hotkey definitions to register
|
|
20
|
+
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* function Editor() {
|
|
25
|
+
* useHotkeys([
|
|
26
|
+
* { hotkey: 'Mod+S', callback: () => save() },
|
|
27
|
+
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
28
|
+
* { hotkey: 'Escape', callback: () => close() },
|
|
29
|
+
* ])
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* function MenuShortcuts({ items }) {
|
|
36
|
+
* // Dynamic hotkeys from data -- safe because it's a single hook call
|
|
37
|
+
* useHotkeys(
|
|
38
|
+
* items.map((item) => ({
|
|
39
|
+
* hotkey: item.shortcut,
|
|
40
|
+
* callback: item.action,
|
|
41
|
+
* options: { enabled: item.enabled },
|
|
42
|
+
* })),
|
|
43
|
+
* { preventDefault: true },
|
|
44
|
+
* )
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
function useHotkeys(hotkeys, commonOptions = {}) {
|
|
49
|
+
const defaultOptions = useDefaultHotkeysOptions().hotkey;
|
|
50
|
+
const manager = getHotkeyManager();
|
|
51
|
+
const platform = commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform();
|
|
52
|
+
const registrationsRef = useRef(/* @__PURE__ */ new Map());
|
|
53
|
+
const hotkeysRef = useRef(hotkeys);
|
|
54
|
+
const hotkeyStringsRef = useRef([]);
|
|
55
|
+
const commonOptionsRef = useRef(commonOptions);
|
|
56
|
+
const defaultOptionsRef = useRef(defaultOptions);
|
|
57
|
+
const managerRef = useRef(manager);
|
|
58
|
+
const hotkeyStrings = hotkeys.map((def) => typeof def.hotkey === "string" ? def.hotkey : formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)));
|
|
59
|
+
hotkeysRef.current = hotkeys;
|
|
60
|
+
hotkeyStringsRef.current = hotkeyStrings;
|
|
61
|
+
commonOptionsRef.current = commonOptions;
|
|
62
|
+
defaultOptionsRef.current = defaultOptions;
|
|
63
|
+
managerRef.current = manager;
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
const prevRegistrations = registrationsRef.current;
|
|
66
|
+
const nextRegistrations = /* @__PURE__ */ new Map();
|
|
67
|
+
const rows = [];
|
|
68
|
+
for (let i = 0; i < hotkeysRef.current.length; i++) {
|
|
69
|
+
const def = hotkeysRef.current[i];
|
|
70
|
+
const hotkeyStr = hotkeyStringsRef.current[i];
|
|
71
|
+
const mergedOptions = {
|
|
72
|
+
...defaultOptionsRef.current,
|
|
73
|
+
...commonOptionsRef.current,
|
|
74
|
+
...def.options
|
|
75
|
+
};
|
|
76
|
+
const resolvedTarget = isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
|
|
77
|
+
if (!resolvedTarget) continue;
|
|
78
|
+
const registrationKey = `${i}:${hotkeyStr}`;
|
|
79
|
+
rows.push({
|
|
80
|
+
registrationKey,
|
|
81
|
+
def,
|
|
82
|
+
hotkeyStr,
|
|
83
|
+
mergedOptions,
|
|
84
|
+
resolvedTarget
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
const nextKeys = new Set(rows.map((r) => r.registrationKey));
|
|
88
|
+
for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
|
|
89
|
+
for (const row of rows) {
|
|
90
|
+
const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } = row;
|
|
91
|
+
const existing = prevRegistrations.get(registrationKey);
|
|
92
|
+
if (existing?.handle.isActive && existing.target === resolvedTarget) {
|
|
93
|
+
nextRegistrations.set(registrationKey, existing);
|
|
94
|
+
continue;
|
|
95
|
+
}
|
|
96
|
+
if (existing?.handle.isActive) existing.handle.unregister();
|
|
97
|
+
const handle = managerRef.current.register(hotkeyStr, def.callback, {
|
|
98
|
+
...mergedOptions,
|
|
99
|
+
target: resolvedTarget
|
|
100
|
+
});
|
|
101
|
+
nextRegistrations.set(registrationKey, {
|
|
102
|
+
handle,
|
|
103
|
+
target: resolvedTarget
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
registrationsRef.current = nextRegistrations;
|
|
107
|
+
return () => {
|
|
108
|
+
for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
|
|
109
|
+
registrationsRef.current = /* @__PURE__ */ new Map();
|
|
110
|
+
};
|
|
111
|
+
}, [hotkeyStrings.join("\0"), hotkeys.map((def) => {
|
|
112
|
+
return {
|
|
113
|
+
...defaultOptions,
|
|
114
|
+
...commonOptions,
|
|
115
|
+
...def.options
|
|
116
|
+
}.enabled ?? true;
|
|
117
|
+
}).join("\0")]);
|
|
118
|
+
for (let i = 0; i < hotkeys.length; i++) {
|
|
119
|
+
const def = hotkeys[i];
|
|
120
|
+
const hotkeyStr = hotkeyStrings[i];
|
|
121
|
+
const registrationKey = `${i}:${hotkeyStr}`;
|
|
122
|
+
const handle = registrationsRef.current.get(registrationKey)?.handle;
|
|
123
|
+
if (handle?.isActive) {
|
|
124
|
+
handle.callback = def.callback;
|
|
125
|
+
const { target: _target, ...optionsWithoutTarget } = {
|
|
126
|
+
...defaultOptions,
|
|
127
|
+
...commonOptions,
|
|
128
|
+
...def.options
|
|
129
|
+
};
|
|
130
|
+
handle.setOptions(optionsWithoutTarget);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
//#endregion
|
|
136
|
+
export { useHotkeys };
|
|
137
|
+
//# sourceMappingURL=useHotkeys.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n typeof def.hotkey === 'string'\n ? def.hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n const hotkeyKey = hotkeyStrings.join('\\0')\n const enabledKey = hotkeys\n .map((def) => {\n const merged = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n }\n return merged.enabled ?? true\n })\n .join('\\0')\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [hotkeyKey, enabledKey])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiB,0BAA0B,CAAC;CAClD,MAAM,UAAU,kBAAkB;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,YAAY,gBAAgB;CAExE,MAAM,mBAAmB,uBAAwC,IAAI,KAAK,CAAC;CAC3E,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,mBAAmB,OAAsB,EAAE,CAAC;CAClD,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,oBAAoB,OAAO,eAAe;CAChD,MAAM,aAAa,OAAO,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,QACjC,OAAO,IAAI,WAAW,WAClB,IAAI,SACH,aAAa,wBAAwB,IAAI,QAAQ,SAAS,CAAC,CACjE;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAcrB,iBAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,QAAQ,KAAK;GAClD,MAAM,MAAM,WAAW,QAAQ;GAC/B,MAAM,YAAY,iBAAiB,QAAQ;GAC3C,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiB,MAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,WAAW,eAAe,mBACtD;GAEF,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,WAAW,IAAI,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;AAE3B,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,CA9Fe,cAAc,KAAK,KAAK,EACvB,QAChB,KAAK,QAAQ;AAMZ,SALe;GACb,GAAG;GACH,GAAG;GACH,GAAG,IAAI;GACR,CACa,WAAW;GACzB,CACD,KAAK,KAAK,CAoFa,CAAC;AAE3B,MAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,MAAM,QAAQ;EACpB,MAAM,YAAY,cAAc;EAChC,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,UAAU;AACpB,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}
|
package/dist/utils.cjs
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/utils.ts
|
|
3
|
+
/**
|
|
4
|
+
* Type guard to check if a value is a Preact ref-like object.
|
|
5
|
+
*/
|
|
6
|
+
function isRef(value) {
|
|
7
|
+
return value !== null && typeof value === "object" && "current" in value;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
//#endregion
|
|
11
|
+
exports.isRef = isRef;
|
|
12
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import type { RefObject } from 'preact'\n\n/**\n * Type guard to check if a value is a Preact ref-like object.\n */\nexport function isRef(value: unknown): value is RefObject<HTMLElement | null> {\n return value !== null && typeof value === 'object' && 'current' in value\n}\n"],"mappings":";;;;;AAKA,SAAgB,MAAM,OAAwD;AAC5E,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,aAAa"}
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/utils.ts
|
|
2
|
+
/**
|
|
3
|
+
* Type guard to check if a value is a Preact ref-like object.
|
|
4
|
+
*/
|
|
5
|
+
function isRef(value) {
|
|
6
|
+
return value !== null && typeof value === "object" && "current" in value;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
//#endregion
|
|
10
|
+
export { isRef };
|
|
11
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import type { RefObject } from 'preact'\n\n/**\n * Type guard to check if a value is a Preact ref-like object.\n */\nexport function isRef(value: unknown): value is RefObject<HTMLElement | null> {\n return value !== null && typeof value === 'object' && 'current' in value\n}\n"],"mappings":";;;;AAKA,SAAgB,MAAM,OAAwD;AAC5E,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,aAAa"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/preact-hotkeys",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Preact adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@tanstack/preact-store": "^0.11.2",
|
|
43
|
-
"@tanstack/hotkeys": "0.4.
|
|
43
|
+
"@tanstack/hotkeys": "0.4.2"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@preact/preset-vite": "^2.10.
|
|
46
|
+
"@preact/preset-vite": "^2.10.5",
|
|
47
47
|
"@testing-library/preact": "^3.2.4",
|
|
48
|
-
"preact": "^10.
|
|
48
|
+
"preact": "^10.29.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"preact": ">=10.0.0"
|
package/src/index.ts
CHANGED
package/src/useHotkey.ts
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
rawHotkeyToParsedHotkey,
|
|
7
7
|
} from '@tanstack/hotkeys'
|
|
8
8
|
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
9
|
+
import { isRef } from './utils'
|
|
9
10
|
import type { RefObject } from 'preact'
|
|
10
11
|
import type {
|
|
11
12
|
Hotkey,
|
|
@@ -183,10 +184,3 @@ export function useHotkey(
|
|
|
183
184
|
registrationRef.current.setOptions(optionsWithoutTarget)
|
|
184
185
|
}
|
|
185
186
|
}
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
189
|
-
*/
|
|
190
|
-
function isRef(value: unknown): value is RefObject<HTMLElement | null> {
|
|
191
|
-
return value !== null && typeof value === 'object' && 'current' in value
|
|
192
|
-
}
|
package/src/useHotkeySequence.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'preact/hooks'
|
|
2
2
|
import { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'
|
|
3
3
|
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
4
|
+
import { isRef } from './utils'
|
|
4
5
|
import type { RefObject } from 'preact'
|
|
5
6
|
import type {
|
|
6
7
|
HotkeyCallback,
|
|
@@ -160,10 +161,3 @@ export function useHotkeySequence(
|
|
|
160
161
|
registrationRef.current.setOptions(optionsWithoutTarget)
|
|
161
162
|
}
|
|
162
163
|
}
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Type guard to check if a value is a Preact ref-like object.
|
|
166
|
-
*/
|
|
167
|
-
function isRef(value: unknown): value is RefObject<HTMLElement | null> {
|
|
168
|
-
return value !== null && typeof value === 'object' && 'current' in value
|
|
169
|
-
}
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'preact/hooks'
|
|
2
|
+
import {
|
|
3
|
+
detectPlatform,
|
|
4
|
+
formatHotkey,
|
|
5
|
+
getHotkeyManager,
|
|
6
|
+
rawHotkeyToParsedHotkey,
|
|
7
|
+
} from '@tanstack/hotkeys'
|
|
8
|
+
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
9
|
+
import { isRef } from './utils'
|
|
10
|
+
import type { UseHotkeyOptions } from './useHotkey'
|
|
11
|
+
import type {
|
|
12
|
+
Hotkey,
|
|
13
|
+
HotkeyCallback,
|
|
14
|
+
HotkeyRegistrationHandle,
|
|
15
|
+
RegisterableHotkey,
|
|
16
|
+
} from '@tanstack/hotkeys'
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* A single hotkey definition for use with `useHotkeys`.
|
|
20
|
+
*/
|
|
21
|
+
export interface UseHotkeyDefinition {
|
|
22
|
+
/** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
|
|
23
|
+
hotkey: RegisterableHotkey
|
|
24
|
+
/** The function to call when the hotkey is pressed */
|
|
25
|
+
callback: HotkeyCallback
|
|
26
|
+
/** Per-hotkey options (merged on top of commonOptions) */
|
|
27
|
+
options?: UseHotkeyOptions
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Preact hook for registering multiple keyboard hotkeys at once.
|
|
32
|
+
*
|
|
33
|
+
* Uses the singleton HotkeyManager for efficient event handling.
|
|
34
|
+
* Accepts a dynamic array of hotkey definitions, making it safe to use
|
|
35
|
+
* with variable-length lists without violating the rules of hooks.
|
|
36
|
+
*
|
|
37
|
+
* Options are merged in this order:
|
|
38
|
+
* HotkeysProvider defaults < commonOptions < per-definition options
|
|
39
|
+
*
|
|
40
|
+
* Callbacks and options are synced on every render to avoid stale closures.
|
|
41
|
+
*
|
|
42
|
+
* @param hotkeys - Array of hotkey definitions to register
|
|
43
|
+
* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* function Editor() {
|
|
48
|
+
* useHotkeys([
|
|
49
|
+
* { hotkey: 'Mod+S', callback: () => save() },
|
|
50
|
+
* { hotkey: 'Mod+Z', callback: () => undo() },
|
|
51
|
+
* { hotkey: 'Escape', callback: () => close() },
|
|
52
|
+
* ])
|
|
53
|
+
* }
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
58
|
+
* function MenuShortcuts({ items }) {
|
|
59
|
+
* // Dynamic hotkeys from data -- safe because it's a single hook call
|
|
60
|
+
* useHotkeys(
|
|
61
|
+
* items.map((item) => ({
|
|
62
|
+
* hotkey: item.shortcut,
|
|
63
|
+
* callback: item.action,
|
|
64
|
+
* options: { enabled: item.enabled },
|
|
65
|
+
* })),
|
|
66
|
+
* { preventDefault: true },
|
|
67
|
+
* )
|
|
68
|
+
* }
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
export function useHotkeys(
|
|
72
|
+
hotkeys: Array<UseHotkeyDefinition>,
|
|
73
|
+
commonOptions: UseHotkeyOptions = {},
|
|
74
|
+
): void {
|
|
75
|
+
type RegistrationRecord = {
|
|
76
|
+
handle: HotkeyRegistrationHandle
|
|
77
|
+
target: Document | HTMLElement | Window
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const defaultOptions = useDefaultHotkeysOptions().hotkey
|
|
81
|
+
const manager = getHotkeyManager()
|
|
82
|
+
const platform =
|
|
83
|
+
commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()
|
|
84
|
+
|
|
85
|
+
const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())
|
|
86
|
+
const hotkeysRef = useRef(hotkeys)
|
|
87
|
+
const hotkeyStringsRef = useRef<Array<Hotkey>>([])
|
|
88
|
+
const commonOptionsRef = useRef(commonOptions)
|
|
89
|
+
const defaultOptionsRef = useRef(defaultOptions)
|
|
90
|
+
const managerRef = useRef(manager)
|
|
91
|
+
|
|
92
|
+
const hotkeyStrings = hotkeys.map((def) =>
|
|
93
|
+
typeof def.hotkey === 'string'
|
|
94
|
+
? def.hotkey
|
|
95
|
+
: (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),
|
|
96
|
+
)
|
|
97
|
+
|
|
98
|
+
hotkeysRef.current = hotkeys
|
|
99
|
+
hotkeyStringsRef.current = hotkeyStrings
|
|
100
|
+
commonOptionsRef.current = commonOptions
|
|
101
|
+
defaultOptionsRef.current = defaultOptions
|
|
102
|
+
managerRef.current = manager
|
|
103
|
+
|
|
104
|
+
const hotkeyKey = hotkeyStrings.join('\0')
|
|
105
|
+
const enabledKey = hotkeys
|
|
106
|
+
.map((def) => {
|
|
107
|
+
const merged = {
|
|
108
|
+
...defaultOptions,
|
|
109
|
+
...commonOptions,
|
|
110
|
+
...def.options,
|
|
111
|
+
}
|
|
112
|
+
return merged.enabled ?? true
|
|
113
|
+
})
|
|
114
|
+
.join('\0')
|
|
115
|
+
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
const prevRegistrations = registrationsRef.current
|
|
118
|
+
const nextRegistrations = new Map<string, RegistrationRecord>()
|
|
119
|
+
|
|
120
|
+
const rows: Array<{
|
|
121
|
+
registrationKey: string
|
|
122
|
+
def: (typeof hotkeysRef.current)[number]
|
|
123
|
+
hotkeyStr: Hotkey
|
|
124
|
+
mergedOptions: UseHotkeyOptions
|
|
125
|
+
resolvedTarget: Document | HTMLElement | Window
|
|
126
|
+
}> = []
|
|
127
|
+
|
|
128
|
+
for (let i = 0; i < hotkeysRef.current.length; i++) {
|
|
129
|
+
const def = hotkeysRef.current[i]!
|
|
130
|
+
const hotkeyStr = hotkeyStringsRef.current[i]!
|
|
131
|
+
const mergedOptions = {
|
|
132
|
+
...defaultOptionsRef.current,
|
|
133
|
+
...commonOptionsRef.current,
|
|
134
|
+
...def.options,
|
|
135
|
+
} as UseHotkeyOptions
|
|
136
|
+
|
|
137
|
+
const resolvedTarget = isRef(mergedOptions.target)
|
|
138
|
+
? mergedOptions.target.current
|
|
139
|
+
: (mergedOptions.target ??
|
|
140
|
+
(typeof document !== 'undefined' ? document : null))
|
|
141
|
+
|
|
142
|
+
if (!resolvedTarget) {
|
|
143
|
+
continue
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const registrationKey = `${i}:${hotkeyStr}`
|
|
147
|
+
rows.push({
|
|
148
|
+
registrationKey,
|
|
149
|
+
def,
|
|
150
|
+
hotkeyStr,
|
|
151
|
+
mergedOptions,
|
|
152
|
+
resolvedTarget,
|
|
153
|
+
})
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
const nextKeys = new Set(rows.map((r) => r.registrationKey))
|
|
157
|
+
|
|
158
|
+
for (const [key, record] of prevRegistrations) {
|
|
159
|
+
if (!nextKeys.has(key) && record.handle.isActive) {
|
|
160
|
+
record.handle.unregister()
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
for (const row of rows) {
|
|
165
|
+
const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =
|
|
166
|
+
row
|
|
167
|
+
|
|
168
|
+
const existing = prevRegistrations.get(registrationKey)
|
|
169
|
+
if (existing?.handle.isActive && existing.target === resolvedTarget) {
|
|
170
|
+
nextRegistrations.set(registrationKey, existing)
|
|
171
|
+
continue
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
if (existing?.handle.isActive) {
|
|
175
|
+
existing.handle.unregister()
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
const handle = managerRef.current.register(hotkeyStr, def.callback, {
|
|
179
|
+
...mergedOptions,
|
|
180
|
+
target: resolvedTarget,
|
|
181
|
+
})
|
|
182
|
+
nextRegistrations.set(registrationKey, {
|
|
183
|
+
handle,
|
|
184
|
+
target: resolvedTarget,
|
|
185
|
+
})
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
registrationsRef.current = nextRegistrations
|
|
189
|
+
|
|
190
|
+
return () => {
|
|
191
|
+
for (const { handle } of registrationsRef.current.values()) {
|
|
192
|
+
if (handle.isActive) {
|
|
193
|
+
handle.unregister()
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
registrationsRef.current = new Map()
|
|
197
|
+
}
|
|
198
|
+
}, [hotkeyKey, enabledKey])
|
|
199
|
+
|
|
200
|
+
for (let i = 0; i < hotkeys.length; i++) {
|
|
201
|
+
const def = hotkeys[i]!
|
|
202
|
+
const hotkeyStr = hotkeyStrings[i]!
|
|
203
|
+
const registrationKey = `${i}:${hotkeyStr}`
|
|
204
|
+
const handle = registrationsRef.current.get(registrationKey)?.handle
|
|
205
|
+
|
|
206
|
+
if (handle?.isActive) {
|
|
207
|
+
handle.callback = def.callback
|
|
208
|
+
const mergedOptions = {
|
|
209
|
+
...defaultOptions,
|
|
210
|
+
...commonOptions,
|
|
211
|
+
...def.options,
|
|
212
|
+
} as UseHotkeyOptions
|
|
213
|
+
const { target: _target, ...optionsWithoutTarget } = mergedOptions
|
|
214
|
+
handle.setOptions(optionsWithoutTarget)
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
package/src/utils.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { RefObject } from 'preact'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Type guard to check if a value is a Preact ref-like object.
|
|
5
|
+
*/
|
|
6
|
+
export function isRef(value: unknown): value is RefObject<HTMLElement | null> {
|
|
7
|
+
return value !== null && typeof value === 'object' && 'current' in value
|
|
8
|
+
}
|