@tanstack/lit-hotkeys 0.13.1 → 0.14.0

package/README.md

@@ -67,6 +67,9 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 > [!NOTE]
 > You may know **TanStack Hotkeys** by our adapter names, too!
 >
+> - [**Alpine Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/alpine/quick-start)
+> - [**Ember Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/ember/quick-start)
+> - [**Octane Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/octane/quick-start)
 > - [**React Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/react/react-hotkeys)
 > - [**Preact Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/preact/preact-hotkeys)
 > - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)

package/dist/controllers/hotkey-recorder.d.ts

@@ -41,6 +41,7 @@ export declare class HotkeyRecorderController implements ReactiveController {
   private _options;
   /** The recorder instance. */
   private _recorder;
+  private _optionOverrides;
   /** The unsubscribe function to unsubscribe from the recorder store. */
   private _unsubscribe;
   /** Whether recording is currently active. */
@@ -53,9 +54,9 @@ export declare class HotkeyRecorderController implements ReactiveController {
   get recordedHotkey(): Hotkey | null;
   /**
    * @param _host - The Lit component that owns this controller.
-   * @param _options - Configuration options for the recorder.
+   * @param _options - Options or a getter, read during recording.
    */
-  constructor(_host: ReactiveControllerHost, _options: HotkeyRecorderOptions);
+  constructor(_host: ReactiveControllerHost, _options: HotkeyRecorderOptions | (() => HotkeyRecorderOptions));
   /** Subscribes to the recorder store and updates the internal state when changes occur. */
   hostConnected(): void;
   /** Unsubscribes from the recorder store and destroys the recorder instance to prevent memory leaks. */

package/dist/controllers/hotkey-recorder.js

@@ -41,6 +41,7 @@ var HotkeyRecorderController = class {
 	_options;
 	/** The recorder instance. */
 	_recorder;
+	_optionOverrides = {};
 	/** The unsubscribe function to unsubscribe from the recorder store. */
 	_unsubscribe;
 	/** Whether recording is currently active. */
@@ -57,12 +58,15 @@ var HotkeyRecorderController = class {
 	}
 	/**
 	* @param _host - The Lit component that owns this controller.
-	* @param _options - Configuration options for the recorder.
+	* @param _options - Options or a getter, read during recording.
 	*/
 	constructor(_host, _options) {
 		this._host = _host;
 		this._options = _options;
-		this._recorder = new HotkeyRecorder(_options);
+		this._recorder = new HotkeyRecorder(() => ({
+			...typeof this._options === "function" ? this._options() : this._options,
+			...this._optionOverrides
+		}));
 		this._host.addController(this);
 	}
 	/** Subscribes to the recorder store and updates the internal state when changes occur. */
@@ -87,11 +91,10 @@ var HotkeyRecorderController = class {
 	}
 	/** Updates the recorder options (e.g. callbacks). */
 	setOptions(options) {
-		this._options = {
-			...this._options,
+		this._optionOverrides = {
+			...this._optionOverrides,
 			...options
 		};
-		this._recorder.setOptions(this._options);
 	}
 	/** Start recording a new hotkey. */
 	startRecording() {

package/dist/controllers/hotkey-sequence-recorder.d.ts

@@ -43,6 +43,7 @@ export declare class HotkeySequenceRecorderController implements ReactiveControl
   private _options;
   /** The recorder instance. */
   private _recorder;
+  private _optionOverrides;
   /** The unsubscribe function. */
   private _unsubscribe;
   /** Whether recording is currently active. */
@@ -59,9 +60,9 @@ export declare class HotkeySequenceRecorderController implements ReactiveControl
   get recordedSequence(): HotkeySequence | null;
   /**
    * @param _host - The Lit component that owns this controller.
-   * @param _options - Configuration options for the sequence recorder.
+   * @param _options - Options or a getter, read during recording.
    */
-  constructor(_host: ReactiveControllerHost, _options: HotkeySequenceRecorderOptions);
+  constructor(_host: ReactiveControllerHost, _options: HotkeySequenceRecorderOptions | (() => HotkeySequenceRecorderOptions));
   /** Subscribes to the recorder store and updates internal state when changes occur. */
   hostConnected(): void;
   /** Unsubscribes from the recorder store and destroys the recorder instance to prevent memory leaks. */

package/dist/controllers/hotkey-sequence-recorder.js

@@ -43,6 +43,7 @@ var HotkeySequenceRecorderController = class {
 	_options;
 	/** The recorder instance. */
 	_recorder;
+	_optionOverrides = {};
 	/** The unsubscribe function. */
 	_unsubscribe;
 	/** Whether recording is currently active. */
@@ -65,12 +66,15 @@ var HotkeySequenceRecorderController = class {
 	}
 	/**
 	* @param _host - The Lit component that owns this controller.
-	* @param _options - Configuration options for the sequence recorder.
+	* @param _options - Options or a getter, read during recording.
 	*/
 	constructor(_host, _options) {
 		this._host = _host;
 		this._options = _options;
-		this._recorder = new HotkeySequenceRecorder(_options);
+		this._recorder = new HotkeySequenceRecorder(() => ({
+			...typeof this._options === "function" ? this._options() : this._options,
+			...this._optionOverrides
+		}));
 		this._host.addController(this);
 	}
 	/** Subscribes to the recorder store and updates internal state when changes occur. */
@@ -97,11 +101,10 @@ var HotkeySequenceRecorderController = class {
 	}
 	/** Updates the recorder options. */
 	setOptions(options) {
-		this._options = {
-			...this._options,
+		this._optionOverrides = {
+			...this._optionOverrides,
 			...options
 		};
-		this._recorder.setOptions(this._options);
 	}
 	/** Start recording a new sequence. */
 	startRecording() {

package/dist/controllers/hotkey-sequence.d.ts

@@ -20,23 +20,23 @@ import { ReactiveController, ReactiveControllerHost } from "lit";
 export declare class HotkeySequenceController implements ReactiveController {
   private _host;
   private _sequence;
-  private _callback;
   private _options;
-  /** The sequence registration handle. */
-  private _registration;
+  private _bindings;
+  private _connected;
+  private _boundCallback;
   /**
-   * @param _host - The Lit component that owns this controller (use `this` and pass it to `addController()`).
-   * @param _sequence - The key sequence to listen for (e.g. `['G', 'G']`).
-   * @param _callback - Function to run when the sequence is completed; called with the host as `this`.
-   * @param _options - Optional sequence options (target, timeout, enabled, etc.).
-   */
-  constructor(_host: ReactiveControllerHost, _sequence: HotkeySequence, _callback: HotkeyCallback, _options?: SequenceOptions);
-  /**
-   * Registers the sequence with the global sequence manager when the host is connected to the DOM.
-   * Skips registration if disabled, sequence is empty, or no target is available.
+   * @param _host - The Lit component that owns this controller. Add the controller with `addController()`.
+   * @param _sequence - The sequence to register.
+   * @param callback - Called with the host as `this`.
+   * @param _options - Options or a getter. Property getters are read on connection and after host updates.
    */
+  constructor(_host: ReactiveControllerHost, _sequence: HotkeySequence, callback: HotkeyCallback, _options?: SequenceOptions | (() => SequenceOptions));
+  /** Registers when connected and a target is available. */
   hostConnected(): void;
-  /** Unregisters the sequence when the host is disconnected from the DOM. */
+  /** Refreshes options after rendering, when scoped targets are available. */
+  hostUpdated(): void;
+  private _sync;
+  /** Releases registrations when the host disconnects. */
   hostDisconnected(): void;
 }
 //#endregion

package/dist/controllers/hotkey-sequence.js

@@ -1,5 +1,5 @@
 import { HOTKEY_SEQUENCE_DEFAULT_OPTIONS } from "../constants.js";
-import { getSequenceManager } from "@tanstack/hotkeys";
+import { createHotkeySequenceBindings } from "@tanstack/hotkeys/adapter";
 
 //#region src/controllers/hotkey-sequence.ts
 /**
@@ -21,41 +21,43 @@ import { getSequenceManager } from "@tanstack/hotkeys";
 var HotkeySequenceController = class {
 	_host;
 	_sequence;
-	_callback;
 	_options;
-	/** The sequence registration handle. */
-	_registration;
+	_bindings = createHotkeySequenceBindings();
+	_connected = false;
+	_boundCallback;
 	/**
-	* @param _host - The Lit component that owns this controller (use `this` and pass it to `addController()`).
-	* @param _sequence - The key sequence to listen for (e.g. `['G', 'G']`).
-	* @param _callback - Function to run when the sequence is completed; called with the host as `this`.
-	* @param _options - Optional sequence options (target, timeout, enabled, etc.).
+	* @param _host - The Lit component that owns this controller. Add the controller with `addController()`.
+	* @param _sequence - The sequence to register.
+	* @param callback - Called with the host as `this`.
+	* @param _options - Options or a getter. Property getters are read on connection and after host updates.
 	*/
-	constructor(_host, _sequence, _callback, _options = HOTKEY_SEQUENCE_DEFAULT_OPTIONS) {
+	constructor(_host, _sequence, callback, _options = HOTKEY_SEQUENCE_DEFAULT_OPTIONS) {
 		this._host = _host;
 		this._sequence = _sequence;
-		this._callback = _callback;
 		this._options = _options;
+		this._boundCallback = callback.bind(this._host);
 	}
-	/**
-	* Registers the sequence with the global sequence manager when the host is connected to the DOM.
-	* Skips registration if disabled, sequence is empty, or no target is available.
-	*/
+	/** Registers when connected and a target is available. */
 	hostConnected() {
-		const { target: _target, ...optionsWithoutTarget } = this._options;
-		const manager = getSequenceManager();
-		const resolvedTarget = "target" in this._options ? this._options.target ?? null : typeof document !== "undefined" ? document : null;
-		if (!resolvedTarget) return;
-		const boundCallback = this._callback.bind(this._host);
-		this._registration = manager.register(this._sequence, boundCallback, {
-			...optionsWithoutTarget,
-			target: resolvedTarget
-		});
+		this._connected = true;
+		this._sync();
+	}
+	/** Refreshes options after rendering, when scoped targets are available. */
+	hostUpdated() {
+		if (this._connected) this._sync();
+	}
+	_sync() {
+		const options = typeof this._options === "function" ? this._options() : this._options;
+		this._bindings.update([{
+			sequence: this._sequence,
+			callback: this._boundCallback,
+			options
+		}]);
 	}
-	/** Unregisters the sequence when the host is disconnected from the DOM. */
+	/** Releases registrations when the host disconnects. */
 	hostDisconnected() {
-		if (this._registration?.isActive) this._registration.unregister();
-		this._registration = void 0;
+		this._connected = false;
+		this._bindings.destroy();
 	}
 };
 

package/dist/controllers/hotkey.d.ts

@@ -20,23 +20,23 @@ import { ReactiveController, ReactiveControllerHost } from "lit";
 export declare class HotkeyController implements ReactiveController {
   private _host;
   private _hotkey;
-  private _callback;
   private _options;
-  /** The hotkey registration handle. */
-  private _registration;
+  private _bindings;
+  private _connected;
+  private _boundCallback;
   /**
-   * @param _host - The Lit component that owns this controller (use `this` and pass it to `addController()`).
-   * @param _hotkey - The key or key combo to listen for (e.g. `'Mod+S'` or a raw hotkey object).
-   * @param _callback - Function to run when the hotkey is pressed; called with the host as `this`.
-   * @param _options - Optional registration options (target, platform, enabled, etc.).
-   */
-  constructor(_host: ReactiveControllerHost, _hotkey: RegisterableHotkey, _callback: HotkeyCallback, _options?: HotkeyOptions);
-  /**
-   * Registers the hotkey with the global manager when the host is connected to the DOM.
-   * Skips registration if no target is available (e.g. no document or options.target is null).
+   * @param _host - The Lit component that owns this controller. Add the controller with `addController()`.
+   * @param _hotkey - The shortcut to register.
+   * @param callback - Called with the host as `this`.
+   * @param _options - Options or a getter. Property getters are read on connection and after host updates.
    */
+  constructor(_host: ReactiveControllerHost, _hotkey: RegisterableHotkey, callback: HotkeyCallback, _options?: HotkeyOptions | (() => HotkeyOptions));
+  /** Registers when connected and a target is available. */
   hostConnected(): void;
-  /** Unregisters the hotkey when the host is disconnected from the DOM. */
+  /** Refreshes options after rendering, when scoped targets are available. */
+  hostUpdated(): void;
+  private _sync;
+  /** Releases registrations when the host disconnects. */
   hostDisconnected(): void;
 }
 //#endregion

package/dist/controllers/hotkey.js

@@ -1,5 +1,5 @@
 import { HOTKEY_DEFAULT_OPTIONS } from "../constants.js";
-import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey } from "@tanstack/hotkeys";
+import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
 
 //#region src/controllers/hotkey.ts
 /**
@@ -21,43 +21,43 @@ import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey
 var HotkeyController = class {
 	_host;
 	_hotkey;
-	_callback;
 	_options;
-	/** The hotkey registration handle. */
-	_registration;
+	_bindings = createHotkeyBindings();
+	_connected = false;
+	_boundCallback;
 	/**
-	* @param _host - The Lit component that owns this controller (use `this` and pass it to `addController()`).
-	* @param _hotkey - The key or key combo to listen for (e.g. `'Mod+S'` or a raw hotkey object).
-	* @param _callback - Function to run when the hotkey is pressed; called with the host as `this`.
-	* @param _options - Optional registration options (target, platform, enabled, etc.).
+	* @param _host - The Lit component that owns this controller. Add the controller with `addController()`.
+	* @param _hotkey - The shortcut to register.
+	* @param callback - Called with the host as `this`.
+	* @param _options - Options or a getter. Property getters are read on connection and after host updates.
 	*/
-	constructor(_host, _hotkey, _callback, _options = HOTKEY_DEFAULT_OPTIONS) {
+	constructor(_host, _hotkey, callback, _options = HOTKEY_DEFAULT_OPTIONS) {
 		this._host = _host;
 		this._hotkey = _hotkey;
-		this._callback = _callback;
 		this._options = _options;
+		this._boundCallback = callback.bind(this._host);
 	}
-	/**
-	* Registers the hotkey with the global manager when the host is connected to the DOM.
-	* Skips registration if no target is available (e.g. no document or options.target is null).
-	*/
+	/** Registers when connected and a target is available. */
 	hostConnected() {
-		const manager = getHotkeyManager();
-		const platform = this._options.platform ?? detectPlatform();
-		const hotkeyString = typeof this._hotkey === "string" ? this._hotkey : formatHotkey(rawHotkeyToParsedHotkey(this._hotkey, platform));
-		const resolvedTarget = "target" in this._options ? this._options.target ?? null : typeof document !== "undefined" ? document : null;
-		if (!resolvedTarget) return;
-		const { target: _target, ...optionsWithoutTarget } = this._options;
-		const boundCallback = this._callback.bind(this._host);
-		this._registration = manager.register(hotkeyString, boundCallback, {
-			...optionsWithoutTarget,
-			target: resolvedTarget
-		});
+		this._connected = true;
+		this._sync();
+	}
+	/** Refreshes options after rendering, when scoped targets are available. */
+	hostUpdated() {
+		if (this._connected) this._sync();
+	}
+	_sync() {
+		const options = typeof this._options === "function" ? this._options() : this._options;
+		this._bindings.update([{
+			hotkey: this._hotkey,
+			callback: this._boundCallback,
+			options
+		}]);
 	}
-	/** Unregisters the hotkey when the host is disconnected from the DOM. */
+	/** Releases registrations when the host disconnects. */
 	hostDisconnected() {
-		if (this._registration?.isActive) this._registration.unregister();
-		this._registration = void 0;
+		this._connected = false;
+		this._bindings.destroy();
 	}
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/lit-hotkeys",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Lit adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "dist"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.10.1"
+    "@tanstack/hotkeys": "0.11.0"
   },
   "devDependencies": {
     "lit": "^3.3.3"