@tanstack/vue-hotkeys 0.17.0 → 0.18.0

package/dist/HotkeysProviderContext.d.ts

@@ -63,6 +63,11 @@ export interface ProvideHotkeysContextOptions {
  * ```
  */
 export declare function provideHotkeysContext(options?: ProvideHotkeysContextOptions): void;
+/**
+ * The nearest context, or `null`. Outside a component, such as in a bare
+ * `effectScope`, there is no context to read, so this skips `inject` and its
+ * warning.
+ */
 export declare function useHotkeysContext(): HotkeysContextValue | null;
 export declare function useDefaultHotkeysOptions(): HotkeysProviderOptions;
 //#endregion

package/dist/HotkeysProviderContext.js

@@ -1,6 +1,6 @@
-import { AppHotkeysStore, publishAppHotkeysStore } from "@tanstack/hotkeys";
-import { computed, inject, onMounted, onScopeDispose, provide, toValue, watch } from "vue";
-import { activateHotkeysProviderScope, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
+import { publishAppHotkeysStore } from "@tanstack/hotkeys";
+import { computed, hasInjectionContext, inject, onMounted, onScopeDispose, provide, toValue, watch } from "vue";
+import { activateHotkeysProviderScope, createAppHotkeysStore, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/HotkeysProviderContext.ts
 const HotkeysContext = Symbol("HotkeysContext");
@@ -28,7 +28,7 @@ const DEFAULT_OPTIONS = {};
 function provideHotkeysContext(options = {}) {
 	const parent = inject(HotkeysContext, null);
 	const appHotkeys = toValue(options.appHotkeys);
-	const store = appHotkeys ? new AppHotkeysStore(appHotkeys, {
+	const store = appHotkeys ? createAppHotkeysStore(appHotkeys, {
 		customHotkeys: options.customHotkeys,
 		onCustomHotkeysChange: (custom) => options.onCustomHotkeysChange?.(custom)
 	}) : null;
@@ -62,11 +62,16 @@ function provideHotkeysContext(options = {}) {
 	};
 	provide(HotkeysContext, contextValue);
 }
+/**
+* The nearest context, or `null`. Outside a component, such as in a bare
+* `effectScope`, there is no context to read, so this skips `inject` and its
+* warning.
+*/
 function useHotkeysContext() {
-	return inject(HotkeysContext, null);
+	return hasInjectionContext() ? inject(HotkeysContext, null) : null;
 }
 function useDefaultHotkeysOptions() {
-	return inject(HotkeysContext, null)?.defaultOptions ?? DEFAULT_OPTIONS;
+	return useHotkeysContext()?.defaultOptions ?? DEFAULT_OPTIONS;
 }
 
 //#endregion

package/dist/defaultOptions.js

@@ -1,5 +1,6 @@
 import { useHotkeysContext } from "./HotkeysProviderContext.js";
-import { Store, useSelector } from "@tanstack/vue-store";
+import { useStoreSelector } from "./useStoreSelector.js";
+import { shallowRef } from "vue";
 
 //#region src/defaultOptions.ts
 /** Captures the context once and reads current defaults inside reactive computations. */
@@ -7,7 +8,6 @@ function useDefaultHotkeysOptionsSource() {
 	const context = useHotkeysContext();
 	return () => context?.defaultOptions ?? {};
 }
-const NO_APP_HOTKEYS = new Store(null);
 /**
 * The provider's app hotkeys store and a ref that tracks its state, so
 * watchers re-run when app hotkeys or custom hotkeys change.
@@ -16,7 +16,7 @@ function useAppHotkeysStoreSource() {
 	const store = useHotkeysContext()?.appHotkeysStore ?? null;
 	return {
 		store,
-		state: useSelector(store?.store ?? NO_APP_HOTKEYS, (value) => value)
+		state: store ? useStoreSelector(store.store, (value) => value) : shallowRef(null)
 	};
 }
 

package/dist/useHeldKeyCodes.js

@@ -1,5 +1,5 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHeldKeyCodes.ts
 /**
@@ -30,7 +30,7 @@ import { useSelector } from "@tanstack/vue-store";
 */
 function useHeldKeyCodes() {
 	const tracker = getKeyStateTracker();
-	return useSelector(tracker.store, (state) => state.heldCodes);
+	return useStoreSelector(tracker.store, (state) => state.heldCodes);
 }
 
 //#endregion

package/dist/useHeldKeys.d.ts

@@ -3,8 +3,7 @@ import { Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref of currently held keyboard keys.
  *
- * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
- * to the global KeyStateTracker and updates whenever keys are pressed
+ * This composable subscribes to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *
  * @returns Reactive ref containing array of currently held key names

package/dist/useHeldKeys.js

@@ -1,12 +1,11 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHeldKeys.ts
 /**
 * Vue composable that returns a reactive ref of currently held keyboard keys.
 *
-* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
-* to the global KeyStateTracker and updates whenever keys are pressed
+* This composable subscribes to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
 * @returns Reactive ref containing array of currently held key names
@@ -28,7 +27,7 @@ import { useSelector } from "@tanstack/vue-store";
 */
 function useHeldKeys() {
 	const tracker = getKeyStateTracker();
-	return useSelector(tracker.store, (state) => state.heldKeys);
+	return useStoreSelector(tracker.store, (state) => state.heldKeys);
 }
 
 //#endregion

package/dist/useHotkeyHint.js

@@ -1,7 +1,7 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { useAppHotkeysStoreSource } from "./defaultOptions.js";
 import { getHotkeyManager, getKeyStateTracker, isAppHotkey, matchesHeldModifiers, resolveAppHotkey } from "@tanstack/hotkeys";
 import { computed, toValue } from "vue";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyHint.ts
 /**
@@ -15,8 +15,8 @@ import { useSelector } from "@tanstack/vue-store";
 function useHotkeyHint(hotkey, options = {}) {
 	const appHotkeys = useAppHotkeysStoreSource();
 	const manager = getHotkeyManager();
-	const registrations = useSelector(manager.registrations, (state) => state);
-	const held = useSelector(getKeyStateTracker().store, (state) => state.heldKeys);
+	const registrations = useStoreSelector(manager.registrations, (state) => state);
+	const held = useStoreSelector(getKeyStateTracker().store, (state) => state.heldKeys);
 	return computed(() => {
 		appHotkeys.state.value;
 		const value = toValue(hotkey);

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,7 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { useDefaultHotkeysOptionsSource } from "./defaultOptions.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { onScopeDispose, toValue, watch } from "vue";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyRecorder.ts
 function useHotkeyRecorder(options) {
@@ -11,9 +11,9 @@ function useHotkeyRecorder(options) {
 		...toValue(options)
 	});
 	const recorder = new HotkeyRecorder(resolve());
-	const isRecording = useSelector(recorder.store, (state) => state.isRecording);
-	const steps = useSelector(recorder.store, (state) => state.steps);
-	const recordedHotkey = useSelector(recorder.store, (state) => state.recordedHotkey);
+	const isRecording = useStoreSelector(recorder.store, (state) => state.isRecording);
+	const steps = useStoreSelector(recorder.store, (state) => state.steps);
+	const recordedHotkey = useStoreSelector(recorder.store, (state) => state.recordedHotkey);
 	const stopWatcher = watch(resolve, (resolved) => recorder.setOptions(resolved));
 	onScopeDispose(() => {
 		stopWatcher();

package/dist/useHotkeyRegistrations.js

@@ -1,5 +1,5 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyRegistrations.ts
 /**
@@ -23,7 +23,7 @@ import { useSelector } from "@tanstack/vue-store";
 * ```
 */
 function useHotkeyRegistrations() {
-	return useSelector(getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView));
+	return useStoreSelector(getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView));
 }
 
 //#endregion

package/dist/useHotkeyScopesState.js

@@ -1,5 +1,5 @@
+import { useStoreSelector } from "./useStoreSelector.js";
 import { getHotkeyManager } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyScopesState.ts
 /**
@@ -23,7 +23,7 @@ import { useSelector } from "@tanstack/vue-store";
 * ```
 */
 function useHotkeyScopesState() {
-	return useSelector(getHotkeyManager().scopes, (state) => state);
+	return useStoreSelector(getHotkeyManager().scopes, (state) => state);
 }
 
 //#endregion

package/dist/useKeyHold.d.ts

@@ -4,9 +4,8 @@ import { MaybeRefOrGetter, Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
  *
- * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
- * to the global KeyStateTracker and uses a selector to determine if
- * the specified key is held.
+ * Reads the held keys from the global KeyStateTracker. The key may be a ref
+ * or getter; the result follows it without waiting for a key event.
  *
  * @param key - The key to check (e.g., 'Shift', 'Control', 'A')
  * @returns Reactive ref that is true if the key is currently held down

package/dist/useKeyHold.js

@@ -1,14 +1,12 @@
-import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { unref } from "vue";
-import { useSelector } from "@tanstack/vue-store";
+import { useHeldKeys } from "./useHeldKeys.js";
+import { computed, toValue } from "vue";
 
 //#region src/useKeyHold.ts
 /**
 * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
 *
-* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
-* to the global KeyStateTracker and uses a selector to determine if
-* the specified key is held.
+* Reads the held keys from the global KeyStateTracker. The key may be a ref
+* or getter; the result follows it without waiting for a key event.
 *
 * @param key - The key to check (e.g., 'Shift', 'Control', 'A')
 * @returns Reactive ref that is true if the key is currently held down
@@ -48,11 +46,10 @@ import { useSelector } from "@tanstack/vue-store";
 * ```
 */
 function useKeyHold(key) {
-	const tracker = getKeyStateTracker();
-	return useSelector(tracker.store, (state) => {
-		const keyValue = unref(key);
-		const normalizedKey = (typeof keyValue === "string" ? keyValue : String(keyValue)).toLowerCase();
-		return state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);
+	const heldKeys = useHeldKeys();
+	return computed(() => {
+		const target = toValue(key).toLowerCase();
+		return heldKeys.value.some((heldKey) => heldKey.toLowerCase() === target);
 	});
 }
 

package/dist/useStoreSelector.js

@@ -0,0 +1,23 @@
+import { onScopeDispose, shallowReadonly, shallowRef } from "vue";
+
+//#region src/useStoreSelector.ts
+/**
+* Subscribes to a store until the effect scope is disposed and returns a ref
+* to the selected value, which updates when it changes (by `===`).
+*
+* Does not subscribe during server rendering. Vue never disposes component
+* scopes on the server, so a subscription to a shared store would never be
+* released. The server gets the current value instead.
+*/
+function useStoreSelector(store, selector) {
+	const selected = shallowRef(selector(store.get()));
+	if (typeof document === "undefined") return selected;
+	const { unsubscribe } = store.subscribe((state) => {
+		selected.value = selector(state);
+	});
+	onScopeDispose(unsubscribe);
+	return shallowReadonly(selected);
+}
+
+//#endregion
+export { useStoreSelector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Vue adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -38,8 +38,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.18.0",
-    "@tanstack/vue-store": "^0.11.2"
+    "@tanstack/hotkeys": "0.20.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",
@@ -47,7 +46,7 @@
     "vue": "^3.5.43"
   },
   "peerDependencies": {
-    "vue": ">=3.0.0"
+    "vue": ">=3.3.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",