@tanstack/lit-hotkeys 0.20.1 → 0.22.0

package/dist/controllers/app-hotkeys.js

@@ -67,6 +67,7 @@ var AppHotkeysController = class {
 		return requireStore().findConflicts(id, hotkey);
 	}
 	hostConnected() {
+		if (this._unsubscribe) return;
 		if (isServer()) return;
 		const update = () => this._host.requestUpdate();
 		const unsubscribeAppHotkeys = subscribeAppHotkeys(update);

package/dist/controllers/held-key-codes.js

@@ -43,6 +43,7 @@ var HeldKeyCodesController = class {
 	}
 	/** Subscribes to the tracker store and updates the internal state when changes occur. */
 	hostConnected() {
+		if (this._unsubscribe) return;
 		const tracker = getKeyStateTracker();
 		this._value = tracker.store.state.heldCodes;
 		this._host.requestUpdate();

package/dist/controllers/held-keys.js

@@ -42,8 +42,11 @@ var HeldKeysController = class {
 	}
 	/** Subscribes to the tracker store and updates the internal state when changes occur. */
 	hostConnected() {
-		if (isServer()) return;
+		if (this._unsubscribe) return;
 		const tracker = getKeyStateTracker();
+		this._value = tracker.store.state.heldKeys;
+		this._host.requestUpdate();
+		if (isServer()) return;
 		const subscription = tracker.store.subscribe(() => {
 			const { heldKeys } = tracker.store.state;
 			this._value = heldKeys;

package/dist/controllers/hotkey-hint.js

@@ -33,6 +33,7 @@ var HotkeyHintController = class {
 	* while disconnected.
 	*/
 	hostConnected() {
+		if (this.unsubscribe) return;
 		this.update();
 		this.host.requestUpdate();
 		if (isServer()) return;

package/dist/controllers/hotkey-recorder.js

@@ -76,6 +76,7 @@ var HotkeyRecorderController = class {
 	}
 	/** Subscribes to the recorder store and updates the internal state when changes occur. */
 	hostConnected() {
+		if (this._unsubscribe) return;
 		if (isServer()) return;
 		const subscription = this._recorder.store.subscribe(() => {
 			const { isRecording, recordedHotkey, steps } = this._recorder.store.state;

package/dist/controllers/hotkey-registrations.js

@@ -35,6 +35,7 @@ var HotkeyRegistrationsController = class {
 		this._host.addController(this);
 	}
 	hostConnected() {
+		if (this._unsubscribe) return;
 		const manager = getHotkeyManager();
 		const read = () => Array.from(manager.registrations.state.values()).map(toHotkeyRegistrationView);
 		this._hotkeys = read();

package/dist/controllers/hotkey-scopes-state.js

@@ -40,6 +40,7 @@ var HotkeyScopesStateController = class {
 	* disconnected.
 	*/
 	hostConnected() {
+		if (this._unsubscribe) return;
 		this._host.requestUpdate();
 		if (isServer()) return;
 		const subscription = getHotkeyManager().scopes.subscribe(() => this._host.requestUpdate());

package/dist/controllers/hotkey.d.ts

@@ -32,12 +32,6 @@ type MaybeGetter<T> = T | (() => T);
  * class MyElement extends LitElement {
  *   private save = new HotkeyController(this, 'Mod+S', () => this.doSave())
  *   private top = new HotkeyController(this, ['G', 'G'], () => this.scrollToTop())
- *
- *   constructor() {
- *     super()
- *     this.addController(this.save)
- *     this.addController(this.top)
- *   }
  * }
  * ```
  */
@@ -50,7 +44,7 @@ export declare class HotkeyController implements ReactiveController {
   private _boundCallback;
   private _unsubscribe;
   /**
-   * @param host - The Lit component that owns this controller. Add the controller with `addController()`.
+   * @param host - The Lit component that owns this controller. The controller adds itself to it.
    * @param hotkey - The chord, sequence, or app hotkey to register, or a getter. A getter is read on connection and after host updates. `undefined`, `null`, or `''` registers nothing, for an optional shortcut.
    * @param callback - Called with the host as `this`.
    * @param options - Options or a getter. Property getters are read on connection and after host updates.

package/dist/controllers/hotkey.js

@@ -18,12 +18,6 @@ import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkey
 * class MyElement extends LitElement {
 *   private save = new HotkeyController(this, 'Mod+S', () => this.doSave())
 *   private top = new HotkeyController(this, ['G', 'G'], () => this.scrollToTop())
-*
-*   constructor() {
-*     super()
-*     this.addController(this.save)
-*     this.addController(this.top)
-*   }
 * }
 * ```
 */
@@ -40,10 +34,11 @@ var HotkeyController = class {
 		this._hotkey = _hotkey;
 		this._options = _options;
 		this._boundCallback = callback.bind(this._host);
+		this._host.addController(this);
 	}
 	/** Registers when connected and a target is available. */
 	hostConnected() {
-		if (isServer()) return;
+		if (this._connected || isServer()) return;
 		this._connected = true;
 		this._unsubscribe = subscribeAppHotkeys(() => this._sync());
 		this._sync();

package/dist/controllers/key-hold.js

@@ -63,6 +63,7 @@ var KeyHoldController = class {
 		this._host.addController(this);
 	}
 	hostConnected() {
+		if (this._unsubscribe) return;
 		if (this._refresh()) this._host.requestUpdate();
 		if (isServer()) return;
 		const subscription = getKeyStateTracker().store.subscribe(() => {

package/dist/decorators/hotkey.d.ts

@@ -1,20 +1,27 @@
 import { AppHotkeyControllerOptions, HotkeyControllerOptionsFor } from "../controllers/hotkey.js";
 import { AppHotkey, HotkeyCallback, HotkeyCallbackContext, HotkeyCallbackContextFor, RegisterableHotkey } from "@tanstack/hotkeys";
-import { LitElement } from "lit";
+import { ReactiveElement } from "lit";
 //#region src/decorators/hotkey.d.ts
 /**
- * A method decorator. The method's context parameter can be typed as the
- * context for the decorated hotkey's kind, such as `HotkeyChordCallbackContext`.
+ * A method decorator for legacy (`experimentalDecorators`) and standard
+ * decorators. The method's context parameter can be typed as the context for
+ * the decorated hotkey's kind, such as `HotkeyChordCallbackContext`.
  */
-type HotkeyDecorator<TContext extends HotkeyCallbackContext = HotkeyCallbackContext> = <T extends HotkeyCallback<TContext>>(proto: LitElement, propertyKey: string, descriptor?: TypedPropertyDescriptor<T>) => void;
+export type HotkeyDecorator<TContext extends HotkeyCallbackContext = HotkeyCallbackContext> = {
+  <T extends HotkeyCallback<TContext>>(proto: ReactiveElement, name: string | symbol, descriptor?: TypedPropertyDescriptor<T>): void;
+  <THost extends ReactiveElement, T extends HotkeyCallback<TContext>>(method: T, context: ClassMethodDecoratorContext<THost, T>): void;
+};
 /**
  * Decorator that registers a hotkey on the element when it connects and
  * unregisters when it disconnects: a chord such as `'Mod+S'`, a sequence such
  * as `['G', 'G']`, or an app hotkey. Uses {@link HotkeyController} under the hood.
  *
+ * Works with legacy (`experimentalDecorators`) and standard decorators. The
+ * method is looked up when the hotkey fires, so subclass overrides run.
+ *
  * @param hotkey - The chord, sequence, or app hotkey to listen for.
  * @param options - Optional registration options (target, platform, enabled, etc.).
- * @returns A method decorator for use on LitElement methods.
+ * @returns A method decorator for use on Lit element methods.
  *
  * @example
  * ```ts

package/dist/decorators/hotkey.js

@@ -1,21 +1,18 @@
 import { HotkeyController } from "../controllers/hotkey.js";
 
 //#region src/decorators/hotkey.ts
-function hotkey(hotkey, options = {}) {
-	return function(proto, propertyKey, descriptor) {
-		const originalConnected = proto.connectedCallback;
-		const controllerKey = Symbol(`@hotkey:${propertyKey}`);
-		proto.connectedCallback = function() {
-			originalConnected.call(this);
-			const host = this;
-			if (!host[controllerKey]) {
-				const callback = descriptor?.value ? descriptor.value.bind(this) : host[propertyKey];
-				if (typeof callback !== "function") throw new Error(`@hotkey decorator can only be applied to functions`);
-				const controller = new HotkeyController(this, hotkey, callback, options);
-				host[controllerKey] = controller;
-				this.addController(controller);
-			}
+function hotkey(hotkey, options) {
+	return (proto, context) => {
+		const standard = typeof context === "object";
+		const init = (host) => {
+			new HotkeyController(host, hotkey, function(event, callbackContext) {
+				return (standard ? context.access.get(this) : this[context]).call(this, event, callbackContext);
+			}, options);
 		};
+		if (standard) context.addInitializer(function() {
+			init(this);
+		});
+		else proto.constructor.addInitializer(init);
 	};
 }
 

package/dist/decorators/index.d.ts

@@ -1,2 +1,2 @@
-import { hotkey } from "./hotkey.js";
-export { hotkey };
+import { HotkeyDecorator, hotkey } from "./hotkey.js";
+export { HotkeyDecorator, hotkey };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { AppHotkeyControllerOptions, HotkeyController, HotkeyControllerChordOptions, HotkeyControllerCommonOptions, HotkeyControllerOptions, HotkeyControllerOptionsFor, HotkeyControllerSequenceOptions, HotkeyControllerTarget } from "./controllers/hotkey.js";
-import { hotkey } from "./decorators/hotkey.js";
+import { HotkeyDecorator, hotkey } from "./decorators/hotkey.js";
 import "./decorators/index.js";
 import { AppHotkeysController } from "./controllers/app-hotkeys.js";
 import { HeldKeyCodesController } from "./controllers/held-key-codes.js";
@@ -11,4 +11,4 @@ import { HotkeyHintController } from "./controllers/hotkey-hint.js";
 import { HotkeyScopesStateController } from "./controllers/hotkey-scopes-state.js";
 import "./controllers/index.js";
 export * from "@tanstack/hotkeys";
-export { AppHotkeyControllerOptions, AppHotkeysController, HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyControllerChordOptions, HotkeyControllerCommonOptions, HotkeyControllerOptions, HotkeyControllerOptionsFor, HotkeyControllerSequenceOptions, HotkeyControllerTarget, HotkeyHintController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeyScopesStateController, KeyHoldController, hotkey };
+export { AppHotkeyControllerOptions, AppHotkeysController, HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyControllerChordOptions, HotkeyControllerCommonOptions, HotkeyControllerOptions, HotkeyControllerOptionsFor, HotkeyControllerSequenceOptions, HotkeyControllerTarget, HotkeyDecorator, HotkeyHintController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeyScopesStateController, KeyHoldController, hotkey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/lit-hotkeys",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "description": "Lit adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.22.0"
+    "@tanstack/hotkeys": "0.23.0"
   },
   "devDependencies": {
     "lit": "^3.3.3"

package/skills/lit-hotkeys/SKILL.md

@@ -41,17 +41,12 @@ export class MyEditor extends LitElement {
   @hotkey('Mod+K')
   openSearch() {}
 
-  constructor() {
-    super()
-    this.addController(
-      new HotkeyController(
-        this,
-        'Mod+S',
-        () => this.save(),
-        () => ({ enabled: this.dirty }),
-      ),
-    )
-  }
+  private saveHotkey = new HotkeyController(
+    this,
+    'Mod+S',
+    () => this.save(),
+    () => ({ enabled: this.dirty }),
+  )
 
   save() {}
 
@@ -66,7 +61,7 @@ export class MyEditor extends LitElement {
 | API                                                      | What it's for                                                                                                                                                                                     |
 | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@hotkey(hotkey, options?)`                              | Run the decorated method when the hotkey fires, with options fixed when the class is defined.                                                                                                     |
-| `new HotkeyController(host, hotkey, callback, options?)` | Register a hotkey whose options can change; add it with `this.addController(...)`.                                                                                                                |
+| `new HotkeyController(host, hotkey, callback, options?)` | Register a hotkey whose options can change. It adds itself to `host`, so a class field is enough.                                                                                                 |
 | `provideAppHotkeys(appHotkeys, options?)`                | Declare app hotkeys and load the user's custom hotkeys once at startup, since Lit 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.                                                                                         |
 | `new AppHotkeysController(host)`                         | Read `appHotkeys`, the cheat sheet `list`, and `customHotkeys`, and change custom hotkeys with `setCustomHotkey`, `resetCustomHotkey`, and `findConflicts`.                                       |
@@ -82,9 +77,9 @@ The package also re-exports `@tanstack/hotkeys`, such as `formatForDisplay`, `ma
 
 ## Pitfalls
 
-- **Add `HotkeyController` to its host.** It is the only controller that doesn't add itself, so without `this.addController(...)` it never registers.
-- **`@hotkey` is a legacy decorator.** It needs `"experimentalDecorators": true` and `"useDefineForClassFields": false`; with standard decorators it fails with TS1241. Use `HotkeyController` in that case.
-- **Decorator options are fixed when the class is defined.** For options that read instance state, or a `target` from a `ref`, use `HotkeyController` with an options function, which reruns after each update.
+- **`@hotkey` works with standard and legacy decorators.** It needs no tsconfig change. Lit's `@property` and `@state` have their own rules: with standard decorators they need `accessor` fields; with `"experimentalDecorators": true` they need `"useDefineForClassFields": false`. Match the project's existing mode.
+- **Decorator options are fixed when the class is defined.** For options that read instance state, or a `target` from a `ref`, use `HotkeyController` with an options function, which reruns after each update of its host.
+- **Render a `ref` target in the controller's host.** The options function reruns only when the host updates. If a child element renders the target, keep it in a reactive property or call `requestUpdate()` on the host when it changes.
 - **Release every scope you activate.** Lit has no provider, so a dialog activates its scope in `connectedCallback` with `this.release = getHotkeyManager().activateScope('dialog-1', { exclusive: true })` and calls `this.release()` in `disconnectedCallback`. A forgotten release keeps every other hotkey suspended. Give each open dialog its own scope name.
 
 When declaring app hotkeys, building a cheat sheet, or letting users rebind shortcuts, load `@tanstack/hotkeys#app-hotkeys` and read [app hotkeys in Lit](references/app-hotkeys.md).