Conversation
| } | ||
|
|
||
| export const HOTKEYS_INJECTION_TOKEN = new InjectionToken<HotkeysContextValue>( | ||
| 'HOTKEYS_INJECTION_TOKEN', |
There was a problem hiding this comment.
I'd recommend to add a providedIn: 'root'and a factory for the default value in the second argument to revisit the injectHotkeysContext implementation and always return a value (so optional flag will not be needed anymore)
| const defaultOptions = injectDefaultHotkeysOptions() | ||
| const manager = getHotkeyManager() | ||
|
|
||
| let registration: HotkeyRegistrationHandle | null = null |
There was a problem hiding this comment.
This
onCleanupfunction lets you register a callback that is invoked before the next run of the effect begins, or when the effect is destroyed.
As the angular docs says, onCleanup is also called before the next run of the effect begins. I think we can declare that variable inside the effect as a constant and just call the unregister method inside the onCleanup. It allows us to just move that checks like:
if (registration?.isActive) { // <-- into onCleanup
registration.unregister()
registration = null // <-- probably not needed
}| export interface AngularHotkeyRecorder { | ||
| /** Whether recording is currently active */ | ||
| isRecording: () => boolean | ||
| /** The currently recorded hotkey (for live preview) */ | ||
| recordedHotkey: () => Hotkey | null | ||
| /** Start recording a new hotkey */ | ||
| startRecording: () => void | ||
| /** Stop recording (same as cancel) */ | ||
| stopRecording: () => void | ||
| /** Cancel recording without saving */ | ||
| cancelRecording: () => void | ||
| } |
There was a problem hiding this comment.
| export interface AngularHotkeyRecorder { | |
| /** Whether recording is currently active */ | |
| isRecording: () => boolean | |
| /** The currently recorded hotkey (for live preview) */ | |
| recordedHotkey: () => Hotkey | null | |
| /** Start recording a new hotkey */ | |
| startRecording: () => void | |
| /** Stop recording (same as cancel) */ | |
| stopRecording: () => void | |
| /** Cancel recording without saving */ | |
| cancelRecording: () => void | |
| } | |
| export interface AngularHotkeyRecorder { | |
| /** Whether recording is currently active */ | |
| readonly isRecording: () => boolean | |
| /** The currently recorded hotkey (for live preview) */ | |
| readonly recordedHotkey: () => Hotkey | null | |
| /** Start recording a new hotkey */ | |
| readonly startRecording: () => void | |
| /** Stop recording (same as cancel) */ | |
| readonly stopRecording: () => void | |
| /** Cancel recording without saving */ | |
| readonly cancelRecording: () => void | |
| } |
| ) | ||
|
|
||
| export function provideHotkeys(defaultOptions?: HotkeysProviderOptions): { | ||
| provide: typeof HOTKEYS_INJECTION_TOKEN |
There was a problem hiding this comment.
Return type of provideHotkeys could be "StaticProvider"
| const resolvedOptions = typeof options === 'function' ? options() : options | ||
| const mergedOptions = { | ||
| ...defaultOptions.hotkeyRecorder, | ||
| ...resolvedOptions, | ||
| } as HotkeyRecorderOptions | ||
|
|
||
| // Create recorder once synchronously (matches React's useRef pattern) | ||
| const recorder = new HotkeyRecorder(mergedOptions) | ||
|
|
||
| // Subscribe to recorder state using useStore (same pattern as useHotkeyRecorder) | ||
| const isRecording = injectStore(recorder.store, (state) => state.isRecording) | ||
| const recordedHotkey = injectStore( | ||
| recorder.store, | ||
| (state) => state.recordedHotkey, | ||
| ) |
There was a problem hiding this comment.
The only blocker before making this PR ready is that the options are called on initialization, causing an error when the options have a value from a input signal.
We could subscribe to the store manually, but it would be better to have a clear solution for this problem in the Angular Store adapter.
I started a discussion here: TanStack/store#284
There was a problem hiding this comment.
@theVedanta Did you have to solve something like this recently in TanStack Angular Pacer?
There was a problem hiding this comment.
The difference is that pacer doesn't look like it supports reactive options in Angular or Solid. For example, React's useRateLimiter has options as an object, and in every render, the options are updated. But both Solid and Angular also only accept an object, so they don't allow reactive options. Ideally, both should be able to accept a function, to update the options like in React, and match how we are doing options it in hotkeys and in query. I will open an issue in pacer.
|
Hi, I'm also following along with this PR. Consider merging main back in to resolve some larger conflicts. The |
- unregister factory in injector token - cleanup at the end instead of injectHotkeys - readonly hotkey recorder
|
Rebased the branch with the sequence-manager 🏃 For the input signal issue: I added a temporary approach in |
@tanstack/angular-hotkeys
@tanstack/hotkeys
@tanstack/hotkeys-devtools
@tanstack/preact-hotkeys
@tanstack/preact-hotkeys-devtools
@tanstack/react-hotkeys
@tanstack/react-hotkeys-devtools
@tanstack/solid-hotkeys
@tanstack/solid-hotkeys-devtools
commit: |
3 participants
🎯 Changes
This PR adds an Angular Adapter + examples for each main function exported.
There is not devtools package yet, since there is no
createAngularPluginin@tanstack/devtools-utils.I had to dowgrade TS from 5.9 to 5.8 since it's the latest TS version Angular 19 supports. It supports angular 19 and up since 19 is the oldest with LTS.
A lot of the code was AI asisted, but I reviewed and refractored the adapter to match as closelly as the solid adapter.
✅ Checklist
pnpm run test:pr.🚀 Release Impact