Skip to content

feat(useKeybinds): add useKeybinds #4756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(useKeybinds): add useKeybinds #4756

wants to merge 1 commit into from

Conversation

veselj43
Copy link

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.
⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

Description

The name is quite self-explanatory, so I will give an example use case. Also I've checked all existing key related functions, but I don't think any of them solves the following situation well.

Let's say I have a issue tracking app and I want to have keybinds for some actions like Ctrl + k to open command palette, s - d (key sequence) to change issue state to done, etc.

Also in VueUse docs, vitepress has Ctrl/Command + k for search. Something like that is really easy to implement with useKeybinds.

Additional context

This feature is inspired by Nuxt UI - defineShortcuts. However their implementation lacks a few key pieces like using modifier keys in sequence.

Instead of updating their implementation I decided to make this function, so anybody can benefit, including Nuxt UI (if they want) since they use this lib already.

For reviewers

Interface, probably the most important part as it is a new function. Would be nice to make sense to others, not just me (even though I think it's quite standard).

Also I have internal.ts file with tests, because I wanted to test more than the "public interface" and I don't need every function to be exported from lib.
I didn't see this approach anywhere else, so let me know if there are conventions about that. I didn't find it.

@dosubot dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. enhancement New feature or request labels May 15, 2025
@OrbisK
Copy link
Collaborator

OrbisK commented May 15, 2025

Hey, Thank you for your PR

Can you briefly explain the diff to https://vueuse.org/core/useMagicKeys/#usemagickeys?

Thank you!

@veselj43
Copy link
Author

@OrbisK Hey, sure.

The main difference is key sequences. useKeybinds offers easy way to define key sequences with any key or modifier. On the other hand, my solution is not interactive like useMagicKeys.

I see there are many common things with useMagicKeys, it didn't feel like it was designed with sequence keybinds in mind.

Maybe if I spend more time on useMagicKeys there might be a reasonable way to extend it with sequences. I had this solution in my project almost ready, so I decided to finish it and share it as I felt like the Nuxt UI - defineShortcuts was (almost) the right interface for the job.

I get that there is quite an overlap. Let me know if you think this is not the way.

Thanks.

@OrbisK
Copy link
Collaborator

OrbisK commented May 15, 2025

Thank you for the clarification.

I think it should be possible to combine both composables into one. I would not have two composables that similar. Maybe we should update useMagicKeys to be able to do the same (breaking changes possible). Or migrate useMagicKeys to useShortcut/useKeybinds.

The main diff should be the current handling of the keys.

@OrbisK
Copy link
Collaborator

OrbisK commented May 20, 2025

Instead of updating their implementation I decided to make this function, so anybody can benefit, including Nuxt UI (if they want) since they use this lib already.

If we want Nuxt UI to be able to use this, I think we should make it compatible with defineShortcuts. We should also get @benjamincanac involved to discuss your new feature ideas, as he is the original author of defineShortcuts. He may be aware of some pitfalls that we need to be aware of. :)

I always assumed defineShortcuts was some kind of macro, but its just a composable. 🤔 Why is it not useShortcuts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
enhancement New feature or request new function size:XL This PR changes 500-999 lines, ignoring generated files.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@veselj43 @OrbisK @antfu