Open
Conversation
Contributor
🚀 Changeset Version Preview6 package(s) bumped directly, 0 bumped as dependents. 🟨 Minor bumps
|
@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
@tanstack/svelte-hotkeys
@tanstack/vue-hotkeys
@tanstack/vue-hotkeys-devtools
commit: |
📝 WalkthroughWalkthroughThis pull request introduces plural sequence registration APIs ( Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Nitpick comments (3)
docs/framework/preact/guides/sequences.md (1)
38-38: Optional: add acommonOptionsexample snippet.Since this line explains second-argument precedence, adding a tiny example with
useHotkeySequences(definitions, commonOptions)would make the behavior immediately actionable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/framework/preact/guides/sequences.md` at line 38, Add a short example demonstrating the second-argument precedence for useHotkeySequences so readers can see how HotkeysProvider defaults, the second-argument commonOptions, and each definition’s options merge (e.g., show calling useHotkeySequences(definitions, commonOptions) with one shared option overridden by a per-definition options entry). Refer to useHotkeySequences, HotkeysProvider, commonOptions, definitions, and each definition’s options in the example so it clearly shows the precedence order in practice.examples/angular/injectHotkeySequences/src/app/app.component.html (1)
72-74: Announce triggered sequence updates to assistive tech.At Line 73, this status changes dynamically; adding
aria-live="polite"improves screen-reader feedback.♿ Suggested tweak
- <div class="info-box success"><strong>Triggered:</strong> {{ seq }}</div> + <div class="info-box success" aria-live="polite"> + <strong>Triggered:</strong> {{ seq }} + </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/angular/injectHotkeySequences/src/app/app.component.html` around lines 72 - 74, The dynamic "Triggered" status rendered via the lastSequence() template binding (as seq) should announce updates to assistive tech; add aria-live="polite" to the div with class "info-box success" that displays {{ seq }} so screen readers are notified of changes without interrupting. Target the template block using lastSequence() / seq and update that div to include the aria-live attribute.packages/angular-hotkeys/src/injectHotkeySequences.ts (1)
106-110: Inconsistentenabledhandling compared to other framework implementations.The Angular implementation skips registration when
enabled: falseat lines 106-110, and always passesenabled: truewhen registering (line 158). Other framework implementations (React, Vue, Solid, Preact, Svelte) pass the resolvedenabledvalue through tosetOptions()or the registration call, allowing the underlying manager to handle enable/disable state.This inconsistency means:
- Angular: Toggling
enabledcauses unregister/re-register cycles- Other frameworks: Toggling
enabledupdates the existing handle viasetOptions()Consider aligning with other frameworks by passing the
enabledvalue through to the handle:♻️ Suggested alignment with other frameworks
- const { enabled = true, ...sequenceOpts } = mergedOptions + const { enabled = true, target, ...restOptions } = mergedOptions - if (!enabled || resolvedSequence.length === 0) { + if (resolvedSequence.length === 0) { continue } + const resolvedTarget = + target ?? (typeof document !== 'undefined' ? document : null) + + if (!resolvedTarget) { + continue + } + + const sequenceOpts = { ...restOptions, enabled }And when registering:
const handle = manager.register(p.resolvedSequence, p.def.callback, { ...p.sequenceOpts, - enabled: true, target: p.resolvedTarget, })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/angular-hotkeys/src/injectHotkeySequences.ts` around lines 106 - 110, The Angular implementation currently destructures enabled from mergedOptions and skips registration when enabled is false (using const { enabled = true, ...sequenceOpts } = mergedOptions and continue), and later always registers with enabled: true; instead, preserve and pass the resolved enabled value through like other frameworks: do not early-continue on enabled === false (still register the sequence handle), and when calling the registration or setOptions helper (the code path that currently uses sequenceOpts/registration call), include enabled (the actual resolved enabled) rather than hardcoding true so the manager can toggle state via setOptions/update instead of unregistering/re-registering; adjust uses of mergedOptions, sequenceOpts, and the register/setOptions call accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/framework/angular/guides/sequences.md`:
- Around line 28-48: The example is missing the import for the Angular decorator
used: add an import for Component from '@angular/core' at the top of the snippet
so the `@Component` decorator on AppComponent resolves; keep the existing import
of injectHotkeySequences from '@tanstack/angular-hotkeys' and the AppComponent
class/constructor unchanged.
In `@examples/angular/injectHotkeySequences/src/app/app.component.ts`:
- Line 12: The history property uses the bracket-array form which violates the
lint rule; change its type to the generic form by replacing any occurrences of
string[] with Array<string> (e.g., update history = signal<string[]>([]) to
history = signal<Array<string>>([]) and adjust any other annotations or uses of
history in the AppComponent class accordingly).
In `@examples/angular/injectHotkeySequences/src/app/app.config.ts`:
- Around line 1-6: The file currently imports provideHotkeys but doesn't use it
and pulls in ApplicationConfig as a value import; change the ApplicationConfig
import to a type-only import (import type { ApplicationConfig }) and add
provideHotkeys(...) into the providers array of the exported appConfig so the
example demonstrates hotkey setup; reference the symbols ApplicationConfig,
provideHotkeys, appConfig and provideZoneChangeDetection when making these
edits.
In `@examples/angular/injectHotkeySequences/src/styles.css`:
- Around line 22-27: Remove the duplicate margin declaration in the CSS rule for
selector "header p": delete the earlier "margin: 0" and keep the later "margin:
0 auto" so only one margin declaration remains in the "header p" rule to satisfy
Stylelint and avoid redundancy.
In `@examples/preact/useHotkeySequences/src/index.css`:
- Around line 26-30: The CSS block for the selector "header p" contains a
duplicate margin declaration; remove the redundant "margin: 0;" so the rule only
keeps the intended layout declaration ("margin: 0 auto") in the header p rule to
avoid dead code and ensure the paragraph is centered horizontally.
In `@examples/react/useHotkeySequences/src/index.css`:
- Around line 26-31: The CSS selector "header p" contains a duplicate margin
declaration: remove the redundant "margin: 0" so only "margin: 0 auto" remains
(or consolidate into a single margin rule) within the header p block to satisfy
Stylelint and prevent the overwritten property.
In `@examples/solid/createHotkeySequences/src/index.css`:
- Around line 22-27: The selector "header p" contains a duplicated margin
declaration; remove the redundant "margin: 0" so only the intended "margin: 0
auto" remains (or merge them into a single "margin: 0 auto") alongside the
existing "max-width: 500px" and other properties to satisfy Stylelint and avoid
the overridden rule.
In `@examples/solid/createHotkeySequences/src/index.tsx`:
- Around line 3-8: Reorder the named imports to satisfy the ESLint sort-imports
rule: in the first import list swap createSignal and Show so Show comes before
createSignal, and in the second import list reorder the three symbols so
HotkeysProvider appears before createHotkey and createHotkeySequences
(preserving the relative order between the two create* names).
In `@examples/svelte/create-hotkey-sequences/README.md`:
- Around line 16-19: Update the recreate command in the README so the generated
project name matches the example directory: replace the erroneous
"create-hotkey" token in the shell command with "create-hotkey-sequences" (the
command string in the README's recreate example).
In `@examples/svelte/create-hotkey-sequences/src/index.css`:
- Around line 26-31: The CSS rule for the selector "header p" contains a
duplicate margin declaration; remove the redundant "margin: 0;" and keep the
intended "margin: 0 auto;" in the header p rule (locate the header p block in
index.css) so only a single margin declaration remains and the stylelint error
is resolved.
In `@examples/vue/useHotkeySequences/src/index.css`:
- Around line 26-31: The CSS rule for selector "header p" contains a duplicate
margin declaration; remove the redundant "margin: 0;" and keep a single
consolidated margin declaration (e.g., "margin: 0 auto;") in the "header p" rule
so there is no overridden/unused property.
In `@packages/solid-hotkeys/tests/createHotkeySequences.test.tsx`:
- Around line 2-10: Reorder and split the imports to satisfy ESLint rules:
alphabetize named members inside each import, move type-only imports to
top-level "import type" statements, and place the "solid-js" import before the
relative module import. Specifically, convert "type
CreateHotkeySequenceDefinition" and "type Component" to top-level import type
lines, alphabetize members in the vitest import (afterEach, beforeEach,
describe, expect, it, vi) and in the `@tanstack/hotkeys` import (SequenceManager),
ensure "createSignal" and "Component" from "solid-js" are imported before
"../src/createHotkeySequences", and keep "render" from
"@solidjs/testing-library" ordered appropriately.
---
Nitpick comments:
In `@docs/framework/preact/guides/sequences.md`:
- Line 38: Add a short example demonstrating the second-argument precedence for
useHotkeySequences so readers can see how HotkeysProvider defaults, the
second-argument commonOptions, and each definition’s options merge (e.g., show
calling useHotkeySequences(definitions, commonOptions) with one shared option
overridden by a per-definition options entry). Refer to useHotkeySequences,
HotkeysProvider, commonOptions, definitions, and each definition’s options in
the example so it clearly shows the precedence order in practice.
In `@examples/angular/injectHotkeySequences/src/app/app.component.html`:
- Around line 72-74: The dynamic "Triggered" status rendered via the
lastSequence() template binding (as seq) should announce updates to assistive
tech; add aria-live="polite" to the div with class "info-box success" that
displays {{ seq }} so screen readers are notified of changes without
interrupting. Target the template block using lastSequence() / seq and update
that div to include the aria-live attribute.
In `@packages/angular-hotkeys/src/injectHotkeySequences.ts`:
- Around line 106-110: The Angular implementation currently destructures enabled
from mergedOptions and skips registration when enabled is false (using const {
enabled = true, ...sequenceOpts } = mergedOptions and continue), and later
always registers with enabled: true; instead, preserve and pass the resolved
enabled value through like other frameworks: do not early-continue on enabled
=== false (still register the sequence handle), and when calling the
registration or setOptions helper (the code path that currently uses
sequenceOpts/registration call), include enabled (the actual resolved enabled)
rather than hardcoding true so the manager can toggle state via
setOptions/update instead of unregistering/re-registering; adjust uses of
mergedOptions, sequenceOpts, and the register/setOptions call accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 216e776a-35f5-4f4b-97a0-20356289fa95
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (95)
.changeset/plural-sequences.mddocs/config.jsondocs/framework/angular/guides/sequences.mddocs/framework/angular/reference/functions/injectHotkeySequences.mddocs/framework/angular/reference/index.mddocs/framework/angular/reference/interfaces/InjectHotkeySequenceDefinition.mddocs/framework/preact/guides/sequences.mddocs/framework/preact/reference/functions/useHotkeySequences.mddocs/framework/preact/reference/index.mddocs/framework/preact/reference/interfaces/UseHotkeySequenceDefinition.mddocs/framework/react/guides/sequences.mddocs/framework/react/reference/functions/useHotkeySequences.mddocs/framework/react/reference/index.mddocs/framework/react/reference/interfaces/UseHotkeySequenceDefinition.mddocs/framework/solid/guides/sequences.mddocs/framework/solid/reference/functions/createHotkeySequences.mddocs/framework/solid/reference/index.mddocs/framework/solid/reference/interfaces/CreateHotkeySequenceDefinition.mddocs/framework/svelte/guides/sequences.mddocs/framework/svelte/reference/functions/createHotkeySequences.mddocs/framework/svelte/reference/functions/createHotkeySequencesAttachment.mddocs/framework/svelte/reference/index.mddocs/framework/svelte/reference/interfaces/CreateHotkeySequenceDefinition.mddocs/framework/vue/guides/sequences.mddocs/framework/vue/quick-start.mddocs/framework/vue/reference/functions/useHotkeySequences.mddocs/framework/vue/reference/index.mddocs/framework/vue/reference/interfaces/UseHotkeySequenceDefinition.mdexamples/angular/injectHotkeySequences/angular.jsonexamples/angular/injectHotkeySequences/package.jsonexamples/angular/injectHotkeySequences/src/app/app.component.cssexamples/angular/injectHotkeySequences/src/app/app.component.htmlexamples/angular/injectHotkeySequences/src/app/app.component.tsexamples/angular/injectHotkeySequences/src/app/app.config.tsexamples/angular/injectHotkeySequences/src/index.htmlexamples/angular/injectHotkeySequences/src/main.tsexamples/angular/injectHotkeySequences/src/styles.cssexamples/angular/injectHotkeySequences/tsconfig.jsonexamples/preact/useHotkeySequences/eslint.config.jsexamples/preact/useHotkeySequences/index.htmlexamples/preact/useHotkeySequences/package.jsonexamples/preact/useHotkeySequences/src/index.cssexamples/preact/useHotkeySequences/src/index.tsxexamples/preact/useHotkeySequences/tsconfig.jsonexamples/preact/useHotkeySequences/vite.config.tsexamples/react/useHotkeySequences/eslint.config.jsexamples/react/useHotkeySequences/index.htmlexamples/react/useHotkeySequences/package.jsonexamples/react/useHotkeySequences/src/index.cssexamples/react/useHotkeySequences/src/index.tsxexamples/react/useHotkeySequences/tsconfig.jsonexamples/react/useHotkeySequences/vite.config.tsexamples/solid/createHotkeySequences/index.htmlexamples/solid/createHotkeySequences/package.jsonexamples/solid/createHotkeySequences/src/index.cssexamples/solid/createHotkeySequences/src/index.tsxexamples/solid/createHotkeySequences/tsconfig.jsonexamples/solid/createHotkeySequences/vite.config.tsexamples/svelte/create-hotkey-sequences/.gitignoreexamples/svelte/create-hotkey-sequences/.npmrcexamples/svelte/create-hotkey-sequences/README.mdexamples/svelte/create-hotkey-sequences/index.htmlexamples/svelte/create-hotkey-sequences/package.jsonexamples/svelte/create-hotkey-sequences/src/App.svelteexamples/svelte/create-hotkey-sequences/src/Root.svelteexamples/svelte/create-hotkey-sequences/src/index.cssexamples/svelte/create-hotkey-sequences/src/main.tsexamples/svelte/create-hotkey-sequences/static/robots.txtexamples/svelte/create-hotkey-sequences/svelte.config.jsexamples/svelte/create-hotkey-sequences/tsconfig.jsonexamples/svelte/create-hotkey-sequences/vite.config.tsexamples/vue/useHotkeySequences/eslint.config.jsexamples/vue/useHotkeySequences/index.htmlexamples/vue/useHotkeySequences/package.jsonexamples/vue/useHotkeySequences/src/App.vueexamples/vue/useHotkeySequences/src/index.cssexamples/vue/useHotkeySequences/src/index.tsexamples/vue/useHotkeySequences/src/vue.d.tsexamples/vue/useHotkeySequences/tsconfig.jsonexamples/vue/useHotkeySequences/vite.config.tspackages/angular-hotkeys/src/index.tspackages/angular-hotkeys/src/injectHotkeySequences.tspackages/preact-hotkeys/src/index.tspackages/preact-hotkeys/src/useHotkeySequences.tspackages/preact-hotkeys/tests/useHotkeySequences.test.tsxpackages/react-hotkeys/src/index.tspackages/react-hotkeys/src/useHotkeySequences.tspackages/react-hotkeys/tests/useHotkeySequences.test.tsxpackages/solid-hotkeys/src/createHotkeySequences.tspackages/solid-hotkeys/src/index.tspackages/solid-hotkeys/tests/createHotkeySequences.test.tsxpackages/svelte-hotkeys/src/createHotkeySequences.svelte.tspackages/svelte-hotkeys/src/index.tspackages/vue-hotkeys/src/index.tspackages/vue-hotkeys/src/useHotkeySequences.ts
Comment on lines
+28
to
+48
| ```ts | ||
| import { injectHotkeySequences } from '@tanstack/angular-hotkeys' | ||
|
|
||
| @Component({ standalone: true, template: `` }) | ||
| export class AppComponent { | ||
| constructor() { | ||
| injectHotkeySequences([ | ||
| { | ||
| sequence: ['G', 'G'], | ||
| callback: () => | ||
| window.scrollTo({ top: 0, behavior: 'smooth' }), | ||
| }, | ||
| { | ||
| sequence: ['D', 'D'], | ||
| callback: () => console.log('delete line'), | ||
| options: { timeout: 500 }, | ||
| }, | ||
| ]) | ||
| } | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Missing Component import in code example.
The example uses @Component decorator but doesn't import it, unlike the "Basic Usage" example above which shows import { Component } from '@angular/core'.
📝 Proposed fix
```ts
+import { Component } from '@angular/core'
import { injectHotkeySequences } from '@tanstack/angular-hotkeys'
`@Component`({ standalone: true, template: `` })📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ```ts | |
| import { injectHotkeySequences } from '@tanstack/angular-hotkeys' | |
| @Component({ standalone: true, template: `` }) | |
| export class AppComponent { | |
| constructor() { | |
| injectHotkeySequences([ | |
| { | |
| sequence: ['G', 'G'], | |
| callback: () => | |
| window.scrollTo({ top: 0, behavior: 'smooth' }), | |
| }, | |
| { | |
| sequence: ['D', 'D'], | |
| callback: () => console.log('delete line'), | |
| options: { timeout: 500 }, | |
| }, | |
| ]) | |
| } | |
| } | |
| ``` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/framework/angular/guides/sequences.md` around lines 28 - 48, The example
is missing the import for the Angular decorator used: add an import for
Component from '@angular/core' at the top of the snippet so the `@Component`
decorator on AppComponent resolves; keep the existing import of
injectHotkeySequences from '@tanstack/angular-hotkeys' and the AppComponent
class/constructor unchanged.
| }) | ||
| export class AppComponent { | ||
| lastSequence = signal<string | null>(null) | ||
| history = signal<string[]>([]) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check if the file exists and read line 12
cat -n "examples/angular/injectHotkeySequences/src/app/app.component.ts" | sed -n '1,20p'Repository: TanStack/hotkeys
Length of output: 766
🏁 Script executed:
# Find ESLint configuration files
find examples/angular/injectHotkeySequences -name ".eslintrc*" -o -name "eslint.config.*" | head -20Repository: TanStack/hotkeys
Length of output: 42
🏁 Script executed:
# Also check if there's a root-level ESLint config
find . -maxdepth 2 -name ".eslintrc*" -o -name "eslint.config.*" | grep -v node_modulesRepository: TanStack/hotkeys
Length of output: 78
🏁 Script executed:
# Read the eslint config file
cat ./eslint.config.jsRepository: TanStack/hotkeys
Length of output: 669
🏁 Script executed:
# Find if we can access the tanstack config package
find . -type f -name "eslint-config" -o -path "*/node_modules/@tanstack/eslint-config*" | head -20Repository: TanStack/hotkeys
Length of output: 3937
🏁 Script executed:
# Check the package.json to understand dependencies
cat package.json | head -50Repository: TanStack/hotkeys
Length of output: 2966
🏁 Script executed:
# Search for any array-type configuration in the repo
rg "array-type" --type json --type js --type tsRepository: TanStack/hotkeys
Length of output: 42
🏁 Script executed:
# Check the typescript config from `@tanstack/eslint-config`
cat "./node_modules/.pnpm/@tanstack+eslint-config@0.4.0_@typescript-eslint+utils@8.57.1_eslint@9.39.4_jiti@2.6.1__6ca1f9f7b11847c70a7fd36c7acf4bd4/node_modules/@tanstack/eslint-config/dist/typescript.js"Repository: TanStack/hotkeys
Length of output: 1692
Use Array<string> for history to satisfy the configured TS lint rule.
Line 12 currently uses string[], which violates @typescript-eslint/array-type rule configured to require the generic Array<T> format.
Proposed fix
- history = signal<string[]>([])
+ history = signal<Array<string>>([])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| history = signal<string[]>([]) | |
| history = signal<Array<string>>([]) |
🧰 Tools
🪛 ESLint
[error] 12-12: Array type using 'string[]' is forbidden. Use 'Array' instead.
(@typescript-eslint/array-type)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/angular/injectHotkeySequences/src/app/app.component.ts` at line 12,
The history property uses the bracket-array form which violates the lint rule;
change its type to the generic form by replacing any occurrences of string[]
with Array<string> (e.g., update history = signal<string[]>([]) to history =
signal<Array<string>>([]) and adjust any other annotations or uses of history in
the AppComponent class accordingly).
Comment on lines
+1
to
+6
| import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' | ||
| import { provideHotkeys } from '@tanstack/angular-hotkeys' | ||
|
|
||
| export const appConfig: ApplicationConfig = { | ||
| providers: [provideZoneChangeDetection({ eventCoalescing: true })], | ||
| } |
There was a problem hiding this comment.
Unused import and type-only import issue.
provideHotkeysis imported but not used in the providers array. For aninjectHotkeySequencesexample, you likely want to include it to demonstrate proper setup.- Per ESLint,
ApplicationConfigshould use a type-only import.
📝 Proposed fix (option A: use provideHotkeys)
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'
+import type { ApplicationConfig } from '@angular/core'
+import { provideZoneChangeDetection } from '@angular/core'
import { provideHotkeys } from '@tanstack/angular-hotkeys'
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true })],
+ providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideHotkeys()],
}📝 Proposed fix (option B: remove unused import)
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'
-import { provideHotkeys } from '@tanstack/angular-hotkeys'
+import type { ApplicationConfig } from '@angular/core'
+import { provideZoneChangeDetection } from '@angular/core'
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true })],
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' | |
| import { provideHotkeys } from '@tanstack/angular-hotkeys' | |
| export const appConfig: ApplicationConfig = { | |
| providers: [provideZoneChangeDetection({ eventCoalescing: true })], | |
| } | |
| import type { ApplicationConfig } from '@angular/core' | |
| import { provideZoneChangeDetection } from '@angular/core' | |
| import { provideHotkeys } from '@tanstack/angular-hotkeys' | |
| export const appConfig: ApplicationConfig = { | |
| providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideHotkeys()], | |
| } |
Suggested change
| import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' | |
| import { provideHotkeys } from '@tanstack/angular-hotkeys' | |
| export const appConfig: ApplicationConfig = { | |
| providers: [provideZoneChangeDetection({ eventCoalescing: true })], | |
| } | |
| import type { ApplicationConfig } from '@angular/core' | |
| import { provideZoneChangeDetection } from '@angular/core' | |
| export const appConfig: ApplicationConfig = { | |
| providers: [provideZoneChangeDetection({ eventCoalescing: true })], | |
| } |
🧰 Tools
🪛 ESLint
[error] 1-1: Imports "ApplicationConfig" are only used as type.
(@typescript-eslint/consistent-type-imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/angular/injectHotkeySequences/src/app/app.config.ts` around lines 1
- 6, The file currently imports provideHotkeys but doesn't use it and pulls in
ApplicationConfig as a value import; change the ApplicationConfig import to a
type-only import (import type { ApplicationConfig }) and add provideHotkeys(...)
into the providers array of the exported appConfig so the example demonstrates
hotkey setup; reference the symbols ApplicationConfig, provideHotkeys, appConfig
and provideZoneChangeDetection when making these edits.
Comment on lines
+22
to
+27
| header p { | ||
| color: #666; | ||
| margin: 0; | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
Remove duplicate margin declaration in header p.
margin: 0 on Line 24 is redundant because Line 26 sets margin: 0 auto, and this is flagged by Stylelint.
✂️ Proposed fix
header p {
color: `#666`;
- margin: 0;
max-width: 500px;
margin: 0 auto;
}🧰 Tools
🪛 Stylelint (17.4.0)
[error] 24-24: Unexpected duplicate "margin" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/angular/injectHotkeySequences/src/styles.css` around lines 22 - 27,
Remove the duplicate margin declaration in the CSS rule for selector "header p":
delete the earlier "margin: 0" and keep the later "margin: 0 auto" so only one
margin declaration remains in the "header p" rule to satisfy Stylelint and avoid
redundancy.
Comment on lines
+26
to
+30
| header p { | ||
| color: #666; | ||
| margin: 0; | ||
| max-width: 500px; | ||
| margin: 0 auto; |
There was a problem hiding this comment.
Remove the duplicate margin declaration in header p.
margin is declared twice in the same block, and the first one is dead code (Line 28 is overridden by Line 30).
🧹 Proposed fix
header p {
color: `#666`;
- margin: 0;
max-width: 500px;
margin: 0 auto;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| header p { | |
| color: #666; | |
| margin: 0; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| header p { | |
| color: `#666`; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } |
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 28-28: Unexpected duplicate "margin" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/preact/useHotkeySequences/src/index.css` around lines 26 - 30, The
CSS block for the selector "header p" contains a duplicate margin declaration;
remove the redundant "margin: 0;" so the rule only keeps the intended layout
declaration ("margin: 0 auto") in the header p rule to avoid dead code and
ensure the paragraph is centered horizontally.
Comment on lines
+3
to
+8
| import { createSignal, Show } from 'solid-js' | ||
| import { | ||
| createHotkey, | ||
| createHotkeySequences, | ||
| HotkeysProvider, | ||
| } from '@tanstack/solid-hotkeys' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n examples/solid/createHotkeySequences/src/index.tsx | head -20Repository: TanStack/hotkeys
Length of output: 845
🏁 Script executed:
# Find ESLint configuration files
fd -type f -name ".eslintrc*" -o -name "eslint.config.*" -o -name "eslintignore"Repository: TanStack/hotkeys
Length of output: 230
🏁 Script executed:
# Check for eslint config in package.json
cat package.json | grep -A 20 '"eslintConfig"'Repository: TanStack/hotkeys
Length of output: 42
🏁 Script executed:
find . -maxdepth 2 -name ".eslintrc*" -o -name "eslint.config.*" 2>/dev/nullRepository: TanStack/hotkeys
Length of output: 78
🏁 Script executed:
# Look for ESLint config in the root
ls -la | grep -i eslintRepository: TanStack/hotkeys
Length of output: 128
🏁 Script executed:
# Check package.json for eslintConfig
cat package.json 2>/dev/null | head -50Repository: TanStack/hotkeys
Length of output: 2966
🏁 Script executed:
cat -n eslint.config.jsRepository: TanStack/hotkeys
Length of output: 844
🏁 Script executed:
# Search for sort-imports mentions in the repo
rg "sort-imports" --type-list | head -20Repository: TanStack/hotkeys
Length of output: 449
🏁 Script executed:
# Check if tanstack/eslint-config is mentioned anywhere or check node_modules
find . -path ./node_modules -prune -o -type f -name "*.json" -o -name "*.js" -o -name "*.ts" 2>/dev/null | xargs grep -l "sort-imports" 2>/dev/null | head -10Repository: TanStack/hotkeys
Length of output: 42
🏁 Script executed:
# Let me check the actual sort-imports rule behavior by looking at similar files in the repo
rg "^import \{" examples/solid/createHotkeySequences/src/ -A 3Repository: TanStack/hotkeys
Length of output: 948
🏁 Script executed:
# Check other import statements in the repo to see if they follow the pattern suggested
rg "^import \{" examples/ -A 3 | head -50Repository: TanStack/hotkeys
Length of output: 2960
🏁 Script executed:
# Also check package imports in other example files
find examples -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | head -5 | xargs head -15Repository: TanStack/hotkeys
Length of output: 1860
🏁 Script executed:
# Let me look for the exact sort-imports configuration by checking web sources
# First, let me verify the alphabetical ordering claim by checking similar multi-line imports
rg -A 5 "^import \{$" packages/ examples/ | grep -A 4 "createHotkey\|formatKey\|injectHotkey" | head -30Repository: TanStack/hotkeys
Length of output: 1905
🏁 Script executed:
# Check the current sorting order of the solid example more carefully
sed -n '3,8p' examples/solid/createHotkeySequences/src/index.tsxRepository: TanStack/hotkeys
Length of output: 207
🏁 Script executed:
# Let me check if there are any ESLint configuration hints in a parent or root eslint config
cat eslint.config.jsRepository: TanStack/hotkeys
Length of output: 669
🏁 Script executed:
# Check if there are any other files with explicit import ordering to understand the pattern
rg "^import \{" packages/solid-hotkeys/src/ -A 3 | head -40Repository: TanStack/hotkeys
Length of output: 3018
🏁 Script executed:
# Look for test files that might have sorted imports
rg "^import \{" packages/solid-hotkeys/tests/ -A 5 | head -50Repository: TanStack/hotkeys
Length of output: 3277
🏁 Script executed:
# Let me check what `@tanstack/eslint-config` might configure by looking at how other files are structured
find . -path ./node_modules -prune -o -name "*.tsx" -o -name "*.ts" | xargs grep -l "^import { [A-Z]" | head -5Repository: TanStack/hotkeys
Length of output: 385
🏁 Script executed:
# Let me check more examples to understand the import sorting pattern
rg "^import \{" packages/ | grep -E "^[^:]+:import \{[^}]+\}" | head -15Repository: TanStack/hotkeys
Length of output: 1577
🏁 Script executed:
# Check if the tanstack config might be documented or if there's a lockfile that shows its version
cat pnpm-lock.yaml 2>/dev/null | grep -A 3 "tanstack/eslint-config" | head -10Repository: TanStack/hotkeys
Length of output: 513
🏁 Script executed:
# Let me search for information about `@tanstack/eslint-config` and its sort-imports configuration
# First, let me check if there's documentation in the repo or hints in other config files
find . -name "*.md" -o -name "*.txt" | xargs grep -l "sort-imports" 2>/dev/null | head -5Repository: TanStack/hotkeys
Length of output: 42
🏁 Script executed:
# Let me analyze the ASCII ordering more carefully - the proposed fix suggests case-sensitive sorting
# Let me verify by checking the ASCII values
python3 << 'EOF'
# Current code line 3
current_1 = "createSignal"
current_2 = "Show"
# Proposed code line 3
proposed_1 = "Show"
proposed_2 = "createSignal"
# Check first import
print("First import 'solid-js':")
print(f"Current: {current_1} ({ord(current_1[0])}) < {current_2} ({ord(current_2[0])}): {current_1 < current_2}")
print(f"Proposed: {proposed_1} ({ord(proposed_1[0])}) < {proposed_2} ({ord(proposed_2[0])}): {proposed_1 < proposed_2}")
print()
# Current code lines 5-7
current_1 = "createHotkey"
current_2 = "createHotkeySequences"
current_3 = "HotkeysProvider"
# Proposed code
proposed_1 = "HotkeysProvider"
proposed_2 = "createHotkey"
proposed_3 = "createHotkeySequences"
print("Second import '@tanstack/solid-hotkeys':")
print(f"Current order: {current_1}, {current_2}, {current_3}")
print(f" {current_1} < {current_2}: {current_1 < current_2}")
print(f" {current_2} < {current_3}: {current_2 < current_3}")
print()
print(f"Proposed order: {proposed_1}, {proposed_2}, {proposed_3}")
print(f" {proposed_1} < {proposed_2}: {proposed_1 < proposed_2}")
print(f" {proposed_2} < {proposed_3}: {proposed_2 < proposed_3}")
EOFRepository: TanStack/hotkeys
Length of output: 534
Fix named import ordering to satisfy ESLint sort-imports rule.
The imports on lines 3 and 5–7 are not in alphabetical order. Line 3 has createSignal before Show (should be reversed), and the second import has createHotkeySequences and HotkeysProvider out of order (uppercase letters sort before lowercase in case-sensitive ordering).
Proposed fix
-import { createSignal, Show } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
import {
+ HotkeysProvider,
createHotkey,
createHotkeySequences,
- HotkeysProvider,
} from '@tanstack/solid-hotkeys'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { createSignal, Show } from 'solid-js' | |
| import { | |
| createHotkey, | |
| createHotkeySequences, | |
| HotkeysProvider, | |
| } from '@tanstack/solid-hotkeys' | |
| import { Show, createSignal } from 'solid-js' | |
| import { | |
| HotkeysProvider, | |
| createHotkey, | |
| createHotkeySequences, | |
| } from '@tanstack/solid-hotkeys' |
🧰 Tools
🪛 ESLint
[error] 3-3: Member 'Show' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 7-7: Member 'HotkeysProvider' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/solid/createHotkeySequences/src/index.tsx` around lines 3 - 8,
Reorder the named imports to satisfy the ESLint sort-imports rule: in the first
import list swap createSignal and Show so Show comes before createSignal, and in
the second import list reorder the three symbols so HotkeysProvider appears
before createHotkey and createHotkeySequences (preserving the relative order
between the two create* names).
Comment on lines
+16
to
+19
| ```sh | ||
| # recreate this project | ||
| pnpm dlx sv create --template minimal --types ts --install pnpm create-hotkey | ||
| ``` |
There was a problem hiding this comment.
Project name mismatch in recreate command.
The project name create-hotkey doesn't match the example directory name create-hotkey-sequences.
📝 Proposed fix
```sh
# recreate this project
-pnpm dlx sv create --template minimal --types ts --install pnpm create-hotkey
+pnpm dlx sv create --template minimal --types ts --install pnpm create-hotkey-sequences</details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
```suggestion
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/svelte/create-hotkey-sequences/README.md` around lines 16 - 19,
Update the recreate command in the README so the generated project name matches
the example directory: replace the erroneous "create-hotkey" token in the shell
command with "create-hotkey-sequences" (the command string in the README's
recreate example).
Comment on lines
+26
to
+31
| header p { | ||
| color: #666; | ||
| margin: 0; | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
Remove duplicate margin declaration in header p.
Line 28 is overridden by Line 30, and this triggers the stylelint error. Keep only one margin declaration.
Proposed fix
header p {
color: `#666`;
- margin: 0;
max-width: 500px;
margin: 0 auto;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| header p { | |
| color: #666; | |
| margin: 0; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| header p { | |
| color: `#666`; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } |
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 28-28: Unexpected duplicate "margin" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/svelte/create-hotkey-sequences/src/index.css` around lines 26 - 31,
The CSS rule for the selector "header p" contains a duplicate margin
declaration; remove the redundant "margin: 0;" and keep the intended "margin: 0
auto;" in the header p rule (locate the header p block in index.css) so only a
single margin declaration remains and the stylelint error is resolved.
Comment on lines
+26
to
+31
| header p { | ||
| color: #666; | ||
| margin: 0; | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -path "*/examples/vue/useHotkeySequences/src/index.css" | head -5Repository: TanStack/hotkeys
Length of output: 107
🏁 Script executed:
cat -n examples/vue/useHotkeySequences/src/index.css | sed -n '20,35p'Repository: TanStack/hotkeys
Length of output: 388
Remove duplicate margin declaration in header p.
Line 28 (margin: 0;) is overridden by line 30 (margin: 0 auto;), making it redundant.
Proposed fix
header p {
color: `#666`;
- margin: 0;
max-width: 500px;
margin: 0 auto;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| header p { | |
| color: #666; | |
| margin: 0; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| header p { | |
| color: `#666`; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } |
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 28-28: Unexpected duplicate "margin" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/vue/useHotkeySequences/src/index.css` around lines 26 - 31, The CSS
rule for selector "header p" contains a duplicate margin declaration; remove the
redundant "margin: 0;" and keep a single consolidated margin declaration (e.g.,
"margin: 0 auto;") in the "header p" rule so there is no overridden/unused
property.
Comment on lines
+2
to
+10
| import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest' | ||
| import { render } from '@solidjs/testing-library' | ||
| import { SequenceManager } from '@tanstack/hotkeys' | ||
| import { | ||
| createHotkeySequences, | ||
| type CreateHotkeySequenceDefinition, | ||
| } from '../src/createHotkeySequences' | ||
| import { createSignal, type Component } from 'solid-js' | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify this file passes eslint import rules after the fix
pnpm -s eslint packages/solid-hotkeys/tests/createHotkeySequences.test.tsxRepository: TanStack/hotkeys
Length of output: 1062
Consolidate imports to satisfy ESLint ordering and type-import rules.
This block violates sort-imports, import/order, and import/consistent-type-specifier-style. Sort members alphabetically within imports, extract inline type specifiers to top-level import type statements, and reorder to place solid-js before ../src/createHotkeySequences.
Proposed import cleanup
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { render } from '@solidjs/testing-library'
import { SequenceManager } from '@tanstack/hotkeys'
+import { createSignal } from 'solid-js'
+import type { Component } from 'solid-js'
import {
createHotkeySequences,
- type CreateHotkeySequenceDefinition,
} from '../src/createHotkeySequences'
-import { createSignal, type Component } from 'solid-js'
+import type { CreateHotkeySequenceDefinition } from '../src/createHotkeySequences'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest' | |
| import { render } from '@solidjs/testing-library' | |
| import { SequenceManager } from '@tanstack/hotkeys' | |
| import { | |
| createHotkeySequences, | |
| type CreateHotkeySequenceDefinition, | |
| } from '../src/createHotkeySequences' | |
| import { createSignal, type Component } from 'solid-js' | |
| import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' | |
| import { render } from '@solidjs/testing-library' | |
| import { SequenceManager } from '@tanstack/hotkeys' | |
| import { createSignal } from 'solid-js' | |
| import type { Component } from 'solid-js' | |
| import { | |
| createHotkeySequences, | |
| } from '../src/createHotkeySequences' | |
| import type { CreateHotkeySequenceDefinition } from '../src/createHotkeySequences' |
🧰 Tools
🪛 ESLint
[error] 2-2: Member 'beforeEach' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 7-7: Member 'CreateHotkeySequenceDefinition' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 7-7: Prefer using a top-level type-only import instead of inline type specifiers.
(import/consistent-type-specifier-style)
[error] 9-9: solid-js import should occur before import of ../src/createHotkeySequences
(import/order)
[error] 9-9: Member 'Component' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 9-9: Prefer using a top-level type-only import instead of inline type specifiers.
(import/consistent-type-specifier-style)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/solid-hotkeys/tests/createHotkeySequences.test.tsx` around lines 2 -
10, Reorder and split the imports to satisfy ESLint rules: alphabetize named
members inside each import, move type-only imports to top-level "import type"
statements, and place the "solid-js" import before the relative module import.
Specifically, convert "type CreateHotkeySequenceDefinition" and "type Component"
to top-level import type lines, alphabetize members in the vitest import
(afterEach, beforeEach, describe, expect, it, vi) and in the `@tanstack/hotkeys`
import (SequenceManager), ensure "createSignal" and "Component" from "solid-js"
are imported before "../src/createHotkeySequences", and keep "render" from
"@solidjs/testing-library" ordered appropriately.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Changes
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
New Features
useHotkeySequences(React/Preact/Vue),createHotkeySequences(Solid/Svelte), andinjectHotkeySequences(Angular)Documentation