Lit adapter

[fredericbahr]

Hey,
as multiple other Tanstack projects also provide an adapter for Lit i was thinking that this could be benificial for Hotkeys as well.
What are your ideas/needs for this. I could not see them planned in the README.

API Design wise i would propose the following:

Core principles:

• Use TanStack Hotkeys core as the single source of truth
• Mirror the React API where possible
• Keep registration declarative via decorators

Decorators

Single Hotkey Decorator

@hotkey(hotkey: HotKey | RawHotkey, options?: HotkeyOptions): Registers a single hotkey that triggers a class method

class EditorView extends LitElement {
  @hotkey('Mod+S', { preventDefault: true })
  save(event: KeyboardEvent, context: HotkeyCallbackContext) {
    this.saveDocument()
  }
}

Hotkey Sequences

@hotkeySequence(sequence: (Hotkey | RawHotkey)[], options?: HotkeySequenceOptions): Registers a multi-step key sequence that triggers a class method

class VimEditor extends LitElement {
    @hotkeySequence(['G', 'G'])
    scrollTop() {
        this.scrollTo({ top: 0 })
    }

    @hotkeySequence(['G', 'Shift+G'])
    scrollBottom() {
        this.scrollTo({ top: this.scrollHeight })
    }
}

Controllers

Decorators solve event registration.
Controllers solve reactive key state.

KeyHoldController

Tracks whether a specific key is currently held.

new KeyHoldController(host, key)

class GameView extends LitElement {
    spaceHeld = new KeyHoldController(this, 'Space')
    
    render() {
        return html`<div> Space held: ${this.spaceHeld.isKeyHeld} </div> ` 
    }
}

HeldKeysController

Tracks all currently pressed keys.

new HeldKeysController(host)

class DebugPanel extends LitElement {
    keys = new HeldKeysController(this);
    
    render() {
        return html` <p>Held keys: ${this.keys.heldKeys.join(', ')}</p> `
    }
}

HotkeyRecorderController

Used for building user configurable hotkeys.

new HotkeyRecorderController(host, options?: HotkeyRecorderOptions)

class ShortcutSettings extends LitElement {
    recorder = new HotkeyRecorderController(this, { onRecord: (hotkey: Hotkey) => { this.saveShortcut(hotkey) } })

    render() {
        return html`
        <button @click=${() => this.recorder.startRecording()}> Record shortcut </button>
        <p> Current: ${this.recorder.recordedHotkey} </p>
        `
    }
}

Let me know what you think about the API design and if im missing something.
I am happy to help implement/maintain this adapter.

[KevinVandy]

Yep, we just forget about Lit a lot, since we don't have a regular contributor or Lit champion on the tanstack team. This would be welcome