@tanstack/ember-hotkeys 0.8.1 → 0.9.0

package/dist/createHotkeysScope.d.ts

@@ -2,20 +2,21 @@ import { DefaultHotkeysOptions } from "./types.js";
 import { UseHotkey } from "./useHotkey.js";
 import { UseHotkeys } from "./useHotkeys.js";
 import { MaybeGetter } from "./utils.js";
-import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
 import { OnHotkeys } from "./onHotkeys.js";
 import { OnHotkey } from "./onHotkey.js";
 //#region src/createHotkeysScope.d.ts
-/** Helpers, modifiers, and recorder factories with shared defaults. Owners retain their own cleanup. */
+/**
+ * Helpers and modifiers with shared defaults. Owners retain their own cleanup.
+ * Pass the scope to `useHotkeyRecorder` to apply its recorder defaults.
+ */
 export interface EmberHotkeysScope {
   onHotkey: typeof OnHotkey;
   onHotkeys: typeof OnHotkeys;
   useHotkey: typeof UseHotkey;
   useHotkeys: typeof UseHotkeys;
-  useHotkeyRecorder: typeof useHotkeyRecorder;
 }
 /**
- * Creates contextual helpers, modifiers, and recorders with shared, optionally reactive defaults.
+ * Creates contextual helpers and modifiers with shared, optionally reactive defaults.
  * Pass the scope to child components through arguments to share configuration.
  */
 export declare function createHotkeysScope(defaultOptions?: MaybeGetter<DefaultHotkeysOptions>): EmberHotkeysScope;

package/dist/createHotkeysScope.js

@@ -1,18 +1,17 @@
 import { UseHotkey } from "./useHotkey.js";
 import { UseHotkeys } from "./useHotkeys.js";
-import { read } from "./utils.js";
-import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
+import { read, scopeDefaults } from "./utils.js";
 import { OnHotkey } from "./onHotkey.js";
 import { OnHotkeys } from "./onHotkeys.js";
-import { definedOptions, withDefaults } from "@tanstack/hotkeys/adapter";
+import { definedOptions } from "@tanstack/hotkeys/adapter";
 
 //#region src/createHotkeysScope.ts
 /**
-* Creates contextual helpers, modifiers, and recorders with shared, optionally reactive defaults.
+* Creates contextual helpers and modifiers with shared, optionally reactive defaults.
 * Pass the scope to child components through arguments to share configuration.
 */
 function createHotkeysScope(defaultOptions = {}) {
-	return {
+	const scope = {
 		onHotkey: class extends OnHotkey {
 			modify(...[element, args, options]) {
 				super.modify(element, args, { ...definedOptions(read(defaultOptions).hotkey, options) });
@@ -32,9 +31,10 @@ function createHotkeysScope(defaultOptions = {}) {
 			compute(...[args, options]) {
 				super.compute(args, { ...definedOptions(read(defaultOptions).hotkey, options) });
 			}
-		},
-		useHotkeyRecorder: ((owner, options) => useHotkeyRecorder(owner, () => withDefaults(read(defaultOptions).hotkeyRecorder, read(options))))
+		}
 	};
+	scopeDefaults.set(scope, defaultOptions);
+	return scope;
 }
 
 //#endregion

package/dist/index.d.ts

@@ -8,10 +8,10 @@ import { useKeyHold } from "./useKeyHold.js";
 import { useHotkeyHint } from "./useHotkeyHint.js";
 import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 import { useHotkeyScopesState } from "./useHotkeyScopesState.js";
-import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
-import { useAppHotkeyList, useAppHotkeys, useCustomHotkeys } from "./useAppHotkeys.js";
 import { ElementHotkeyOptions, OnHotkeys } from "./onHotkeys.js";
 import { OnHotkey } from "./onHotkey.js";
 import { EmberHotkeysScope, createHotkeysScope } from "./createHotkeysScope.js";
+import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
+import { useAppHotkeyList, useAppHotkeys, useCustomHotkeys } from "./useAppHotkeys.js";
 export * from "@tanstack/hotkeys";
 export { DefaultHotkeysOptions, type ElementHotkeyOptions, EmberAppHotkeyList, EmberCustomHotkeys, EmberHotkeyCommonOptions, EmberHotkeyDefinition, EmberHotkeyRecorder, EmberHotkeyState, EmberHotkeyTarget, EmberHotkeysScope, HotkeyRegistrationsResult, type MaybeGetter, createHotkeysScope, OnHotkey as onHotkey, OnHotkeys as onHotkeys, useAppHotkeyList, useAppHotkeys, useCustomHotkeys, useHeldKeyCodes, useHeldKeys, UseHotkey as useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeyScopesState, UseHotkeys as useHotkeys, useKeyHold };

package/dist/useHotkeyHint.js

@@ -13,11 +13,12 @@ import { getHotkeyManager, getKeyStateTracker, isAppHotkey, matchesHeldModifiers
 function useHotkeyHint(owner, hotkey, options = {}) {
 	const appHotkeys = trackPublishedAppHotkeys(owner);
 	const manager = getHotkeyManager();
-	const registrations = select(owner, manager.registrations, (state) => state);
+	const active = select(owner, manager.registrations, () => manager.hasActiveRegistration(read(hotkey)));
 	return select(owner, getKeyStateTracker().store, (state) => {
+		const isActive = active.value;
 		const value = read(hotkey);
 		const resolved = isAppHotkey(value) ? resolveAppHotkey(value, appHotkeys()).hotkey : value;
-		return resolved !== null && matchesHeldModifiers(resolved, state.heldKeys, read(options)) && registrations.value.size > 0 && manager.hasActiveRegistration(value);
+		return resolved !== null && matchesHeldModifiers(resolved, state.heldKeys, read(options)) && isActive;
 	});
 }
 

package/dist/useHotkeyRecorder.d.ts

@@ -1,4 +1,5 @@
 import { EmberHotkeyRecorder } from "./types.js";
+import { EmberHotkeysScope } from "./createHotkeysScope.js";
 import { HotkeyChord, HotkeyChordRecorderOptions, HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
 //#region src/useHotkeyRecorder.d.ts
 /**
@@ -7,10 +8,12 @@ import { HotkeyChord, HotkeyChordRecorderOptions, HotkeyRecorderOptions, HotkeyS
  * With a larger `maxSteps`, each chord adds a step; the recording commits on
  * Enter (unless `commitKeys: 'none'`), after `idleTimeoutMs`, or at
  * `maxSteps`, and `onRecord` receives a chord (one step) or a sequence.
+ * Pass a scope from `createHotkeysScope` to apply its `hotkeyRecorder`
+ * defaults.
  */
-export declare function useHotkeyRecorder(owner: object, options: HotkeyChordRecorderOptions): EmberHotkeyRecorder<HotkeyChord>;
-export declare function useHotkeyRecorder(owner: object, options: HotkeySequenceRecorderOptions): EmberHotkeyRecorder;
-export declare function useHotkeyRecorder(owner: object, options: () => HotkeySequenceRecorderOptions): EmberHotkeyRecorder;
-export declare function useHotkeyRecorder(owner: object, options: () => HotkeyChordRecorderOptions): EmberHotkeyRecorder<HotkeyChord>;
-export declare function useHotkeyRecorder(owner: object, options: () => HotkeyRecorderOptions): EmberHotkeyRecorder;
+export declare function useHotkeyRecorder(owner: object, options: HotkeyChordRecorderOptions, scope?: EmberHotkeysScope): EmberHotkeyRecorder<HotkeyChord>;
+export declare function useHotkeyRecorder(owner: object, options: HotkeySequenceRecorderOptions, scope?: EmberHotkeysScope): EmberHotkeyRecorder;
+export declare function useHotkeyRecorder(owner: object, options: () => HotkeySequenceRecorderOptions, scope?: EmberHotkeysScope): EmberHotkeyRecorder;
+export declare function useHotkeyRecorder(owner: object, options: () => HotkeyChordRecorderOptions, scope?: EmberHotkeysScope): EmberHotkeyRecorder<HotkeyChord>;
+export declare function useHotkeyRecorder(owner: object, options: () => HotkeyRecorderOptions, scope?: EmberHotkeysScope): EmberHotkeyRecorder;
 //#endregion

package/dist/useHotkeyRecorder.js

@@ -1,10 +1,11 @@
-import { read, select } from "./utils.js";
+import { read, scopeDefaults, select } from "./utils.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
+import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeyRecorder.ts
-function useHotkeyRecorder(owner, options) {
-	const recorder = new HotkeyRecorder(() => read(options));
+function useHotkeyRecorder(owner, options, scope) {
+	const recorder = new HotkeyRecorder(() => withDefaults(scope && read(scopeDefaults.get(scope)).hotkeyRecorder, read(options)));
 	const state = select(owner, recorder.store, (value) => value);
 	registerDestructor(owner, () => recorder.destroy());
 	return {

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import "./types.js";
 import "@tanstack/hotkeys";
 import "@tanstack/hotkeys/adapter";
 //#region src/utils.d.ts

package/dist/utils.js

@@ -4,17 +4,25 @@ import { subscribePublishedAppHotkeys } from "@tanstack/hotkeys/adapter";
 import { trackedObject } from "@ember/reactive/collections";
 
 //#region src/utils.ts
+/** The defaults behind each `createHotkeysScope` result. */
+const scopeDefaults = /* @__PURE__ */ new WeakMap();
 function read(value) {
 	return typeof value === "function" ? value() : value;
 }
 function select(owner, store, selector) {
-	const state = trackedObject({ snapshot: store.state });
+	const state = trackedObject({ version: 0 });
+	let last;
 	const subscription = store.subscribe(() => {
-		state.snapshot = store.state;
+		const next = selector(store.state);
+		if (!Object.is(next, last)) {
+			last = next;
+			state.version++;
+		}
 	});
 	registerDestructor(owner, () => subscription.unsubscribe());
 	return { get value() {
-		return selector(state.snapshot);
+		state.version;
+		return last = selector(store.state);
 	} };
 }
 /**
@@ -33,4 +41,4 @@ function trackPublishedAppHotkeys(owner) {
 }
 
 //#endregion
-export { read, select, trackPublishedAppHotkeys };
+export { read, scopeDefaults, select, trackPublishedAppHotkeys };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ember-hotkeys",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Ember adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,7 +40,7 @@
   ],
   "dependencies": {
     "@embroider/addon-shim": "^1.10.3",
-    "@tanstack/hotkeys": "0.22.0",
+    "@tanstack/hotkeys": "0.22.1",
     "ember-modifier": "^4.2.2"
   },
   "devDependencies": {

package/skills/ember-hotkeys/SKILL.md

@@ -21,6 +21,7 @@ sources:
   - src/onHotkey.ts
   - src/onHotkeys.ts
   - src/createHotkeysScope.ts
+  - src/useHotkeyRecorder.ts
   - src/useAppHotkeys.ts
   - TanStack/hotkeys:docs/framework/ember/quick-start.md
   - TanStack/hotkeys:docs/framework/ember/guides/app-hotkeys.md
@@ -60,13 +61,13 @@ export default class Editor extends Component {
 | `{{useHotkeys definitions}}`                        | Register several hotkeys, or a list built from data, in one helper.                                                                                                                    |
 | `{{onHotkey hotkey callback ...options}}`           | Attach a hotkey to the element the modifier is on, so it fires while focus is inside that element.                                                                                     |
 | `{{onHotkeys definitions}}`                         | Attach several hotkeys to one element.                                                                                                                                                 |
-| `createHotkeysScope(defaults?)`                     | Create `useHotkey`, `useHotkeys`, `onHotkey`, `onHotkeys`, and `useHotkeyRecorder` that share default options.                                                                         |
+| `createHotkeysScope(defaults?)`                     | Create `useHotkey`, `useHotkeys`, `onHotkey`, and `onHotkeys` that share default options.                                                                                              |
 | `provideAppHotkeys(appHotkeys, options?)`           | Declare app hotkeys and load the user's custom hotkeys before the app boots, since Ember has no provider.                                                                              |
 | `getHotkeyManager().activateScope(scope, options?)` | Turn on a scope, such as an exclusive one for a dialog; it returns the function that turns the scope off.                                                                              |
 | `useAppHotkeys(this)`                               | Get the declared app hotkeys with the user's custom hotkeys applied.                                                                                                                   |
 | `useAppHotkeyList(this)`                            | List every app hotkey with its status, for a cheat sheet or settings screen.                                                                                                           |
 | `useCustomHotkeys(this)`                            | Read, change, and reset the user's custom hotkeys, and check a new one for conflicts.                                                                                                  |
-| `useHotkeyRecorder(this, options)`                  | Record a chord or sequence the user presses, for a settings screen.                                                                                                                    |
+| `useHotkeyRecorder(this, options, scope?)`          | Record a chord or sequence the user presses, for a settings screen. Pass a `createHotkeysScope` result to apply its `hotkeyRecorder` defaults.                                         |
 | `useHotkeyRegistrations(this)`                      | Read `.hotkeys`, every registered hotkey with its options, `meta`, and `status` (whether it's enabled and in an active scope).                                                         |
 | `useHotkeyScopesState(this)`                        | Get the active scopes and the exclusive scope that owns the keyboard.                                                                                                                  |
 | `useHotkeyHint(this, hotkey, options?)`             | Get whether held modifiers should reveal a shortcut's hint. False unless a registration of the hotkey can fire: enabled, in an active scope, and with focus inside its element target. |
@@ -84,6 +85,7 @@ The helpers are template helpers, not JavaScript functions. State readers take t
 - **Build template sequences with `array`.** `{{useHotkey "G G" ...}}` registers a single key named `G G`, which never matches.
 - **`createHotkeysScope` isn't a hotkey scope.** It only sets defaults for its helpers. For a dialog, call `getHotkeyManager().activateScope(name, { exclusive: true })` in the constructor, pass the result to `registerDestructor(this, release)`, and put `scope=name` on the dialog's hotkeys. Give each open dialog its own name.
 - **Read app hotkeys through getters.** Template paths can't index ids that contain dots.
+- **Scopes have no `useHotkeyRecorder`** since v0.9.0. Call `useHotkeyRecorder(this, options, this.hotkeys)`, so apps that set defaults but don't record don't ship the recorder.
 
 When declaring app hotkeys, building a cheat sheet, or letting users rebind shortcuts, load `@tanstack/hotkeys#app-hotkeys` and read [app hotkeys in Ember](references/app-hotkeys.md).