@tanstack/preact-hotkeys 0.19.1 → 0.19.2

package/dist/HotkeysProvider.js

@@ -1,6 +1,6 @@
 import { publishAppHotkeysStore } from "@tanstack/hotkeys";
 import { createContext } from "preact";
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useLayoutEffect, useMemo, useState } from "preact/hooks";
 import { activateHotkeysProviderScope, createAppHotkeysStore, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
 import { jsx } from "preact/jsx-runtime";
 
@@ -56,10 +56,10 @@ function HotkeysProvider({ children, appHotkeys, customHotkeys, onCustomHotkeysC
 		active,
 		parent: parent.defaultOptions.hotkey?.scope
 	});
-	useEffect(() => {
+	useLayoutEffect(() => {
 		return scopeKey ? activateHotkeysProviderScope(scopeKey) : void 0;
 	}, [scopeKey]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		store?.setOptions({
 			customHotkeys,
 			onCustomHotkeysChange
@@ -69,10 +69,10 @@ function HotkeysProvider({ children, appHotkeys, customHotkeys, onCustomHotkeysC
 		customHotkeys,
 		onCustomHotkeysChange
 	]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (appHotkeys) store?.setAppHotkeys(appHotkeys);
 	}, [store, appHotkeys]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!store) return;
 		return publishAppHotkeysStore(store);
 	}, [store]);

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,7 @@
 import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
 import { useSelector } from "./_useSelector.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
-import { useEffect, useRef } from "preact/hooks";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeyRecorder.ts
@@ -14,19 +14,22 @@ function useHotkeyRecorder(options) {
 	const isRecording = useSelector(recorder.store, (state) => state.isRecording);
 	const steps = useSelector(recorder.store, (state) => state.steps);
 	const recordedHotkey = useSelector(recorder.store, (state) => state.recordedHotkey);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		return () => {
 			recorderRef.current?.destroy();
 		};
 	}, []);
-	return {
-		isRecording,
-		steps,
-		recordedHotkey,
+	const [actions] = useState(() => ({
 		startRecording: () => recorderRef.current?.start(),
 		stopRecording: () => recorderRef.current?.stop(),
 		cancelRecording: () => recorderRef.current?.cancel(),
 		commitRecording: () => recorderRef.current?.commit()
+	}));
+	return {
+		isRecording,
+		steps,
+		recordedHotkey,
+		...actions
 	};
 }
 

package/dist/useHotkeys.js

@@ -1,7 +1,7 @@
 import { useHotkeysContext } from "./HotkeysProvider.js";
 import { useAppHotkeysStoreState } from "./_appHotkeysStore.js";
 import { resolveTarget } from "./utils.js";
-import { useEffect, useRef } from "preact/hooks";
+import { useLayoutEffect, useRef } from "preact/hooks";
 import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeys.ts
@@ -62,7 +62,7 @@ function useHotkeys(hotkeys, commonOptions = {}) {
 		appHotkeysStore
 	};
 	const bindingsRef = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		bindingsRef.current ??= createHotkeyBindings();
 		const { hotkeys, ...context } = latestRef.current;
 		bindingsRef.current.update(prepareHotkeyDefinitions(hotkeys, {
@@ -70,7 +70,7 @@ function useHotkeys(hotkeys, commonOptions = {}) {
 			resolveTarget
 		}));
 	});
-	useEffect(() => {
+	useLayoutEffect(() => {
 		return () => {
 			bindingsRef.current?.destroy();
 			bindingsRef.current = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/preact-hotkeys",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "Preact adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.22.0"
+    "@tanstack/hotkeys": "0.22.1"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.6",

package/skills/preact-hotkeys/SKILL.md

@@ -101,7 +101,8 @@ A hook uses the nearest `HotkeysProvider` above its component. Registering `Esca
 
 ## Pitfalls
 
-- **Pass the ref, not `ref.current`.** `target: listRef.current` is `null` on the first render, and a `null` target registers nothing, so the hotkey doesn't work until the component renders again. Pass `target: listRef`; a ref that is still empty waits for its element.
+- **Pass the ref, not `ref.current`.** `target: listRef.current` is `null` on the first render, and a `null` target registers nothing, so the hotkey doesn't work until the component renders again. Pass `target: listRef` for an element the component always renders.
+- **Keep elements that mount later in state.** The hook reads a ref only after its component renders, so it misses an element that mounts later, such as one a child shows from its own state. Use `const [el, setEl] = useState<HTMLElement | null>(null)`, `target: el`, and `ref={setEl}`; the hotkey registers when the element mounts and unregisters when it unmounts.
 - **No dependency arrays or `useCallback`.** The hooks read the hotkey, callback, and options on every render, so inline callbacks always see current state.
 - **Call the hooks directly.** A `useShortcut(keys: string)` wrapper has to cast strings to hotkeys, which turns off type checking and drops sequences, options, app hotkeys, and the typed callback context.
 - **In tests,** set `<HotkeysProvider defaultOptions={{ hotkey: { platform: 'mac' } }}>`.