Feat: Key Events - Key Modifiers

[jorenrui]

Description

Keyboard Events

For keyboard events, you can listen to them using :keyup, :keydown, and :keypress:

<input type="text" :keyup="console.log(event)" />

Key Modifiers

You can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:

<input
  type="text"
  :keyup.up="console.log('keyup.up')"
  :keydown.enter="console.log('keydown.enter')"
/>

You can chain multiple key modifiers together:

<input type="text" :keydown.slash.k="console.log('keydown.slash.k')" />

For key values that have multiple words like BracketLeft, except for arrow keys, kebab case is used:

<input
  type="text"
  :keydown.bracket-left="console.log('keydown.bracket-left')"
/>

The following are the available key modifiers:

Type	Key Value	Modifier	Usage
Digits (0-9)	Digit1, Digit2	1, 2	:keyup.1, :keyup.2
Letters (A-Z, a-z)	KeyA, KeyB	a, b	:keyup.a, :keyup.b
Numpad (0-9)	Numpad1, Numpad2	1, 2	:keyup.1, :keyup.2
Arrow Keys (up, down, left, right)	ArrowLeft, ArrowRight	left, right	:keyup.left, :keyup.right
Meta (left, right)	Meta, MetaLeft, MetaRight	meta, meta-left, meta-right	:keyup.meta, :keyup.meta-left, :keyup.meta-right
Alt (left, right)	Alt, AltLeft, AltRight	alt, alt-left, alt-right	:keyup.alt, :keyup.alt-left, :keyup.alt-right
Control (left, right)	Control, ControlLeft, ControlRight	ctrl, ctrl-left, ctrl-right	:keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right
Shift (left, right)	Shift, ShiftLeft, ShiftRight	shift, shift-left, shift-right	:keyup.shift, :keyup.shift-left, :keyup.shift-right
Symbols (., /, =, etc.)	Period, BracketLeft, Slash	period, bracket-left, slash	:keyup.period, :keyup.bracket-left, :keyup.slash

Note: If you don't know the "name" of a symbol key, you can use the console.log(event.code) to see the key value. Example for the "Enter" key: :keyup="console.log(event.code)" will log "Enter". So you can use :keyup.enter to listen to the "Enter" key.

Summary by CodeRabbit

• New Features
  • Added SPECIAL_KEYS and DIRECTION_KEYS constant arrays for enhanced keyboard event handling.
  • Introduced keysPressed object property and mapKey function for keycode mapping.
  • Added support for keyboard events like :keyup, :keydown, and :keypress with key modifiers.
  • Provided a table of available key modifiers for different key types.
  • Included camelToKebabCase function for string format conversion.
• Refactor
  • Updated key handling logic within event listeners for improved performance.

📦 Published PR as canary version: 1.0.1-canary.13.d0074c8.0

✨ Test out this PR locally via:

npm install tonic-minijs@1.0.1-canary.13.d0074c8.0
# or 
yarn add tonic-minijs@1.0.1-canary.13.d0074c8.0

[coderabbitai]

Warning

Rate Limit Exceeded

@jorenrui has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 26 minutes and 42 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 97b1abe and 3b2fd84.

Walkthrough

This update enhances the event handling system, focusing on keyboard interactions. It introduces new key constants like SPECIAL_KEYS, improves key handling with keysPressed, and refactors event listeners for keydown, keyup, and keypress events. These changes collectively streamline key event processing and enhance reliability.

Changes

File	Change Summary
lib/entity/events.js	- Added SPECIAL_KEYS and DIRECTION_KEYS constant arrays. - Added keysPressed object property. - Introduced mapKey function for keycode mapping. - Refactored key handling logic within event listeners. - Updated event handling for keydown, keyup, and keypress events.
lib/entity/attributes.js	- Updated dashToCamelCase to kebabToCamelCase in the Attributes class. This change impacts attribute name transformation logic.
lib/helpers/strings.js	- Added camelToKebabCase function alongside kebabToCamelCase for string format conversion.
readme.md	- Introduced special variables event and this in events. - Added support for keyboard events like :keyup, :keydown, and :keypress with key modifiers. - Provided a table of available key modifiers for different key types.

Poem

🐰✨
In the code where keys dance and play,
A rabbit hopped in, brightening the day.
With a hop, skip, and a magical tweak,
It made the keys sing, in a manner unique.
"Let's handle them all, both big and small,
In harmony," it said, "once and for all."
🌟🐾

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 4

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 9c978f6 and 15b10bb.

Files selected for processing (1)

• lib/entity/events.js (5 hunks)

Additional comments: 4

lib/entity/events.js (4)

• 17-17: The SPECIAL_KEYS constant is correctly defined and relevant for handling special key modifiers. Ensure that all special keys your application needs to support are included in this list.
• 60-60: The addition of the keysPressed object property is appropriate for tracking multiple simultaneous key presses. Verify that this property is consistently updated and cleared to prevent memory leaks or incorrect state tracking.
• 199-199: The setKeyEvent method correctly splits the attribute to separate the event from keycodes. Ensure that the method properly handles cases where no keycodes are specified.
• 243-243: Storing the key press state in ctx.keysPressed is a good approach. Ensure that keys are correctly removed on keyup to avoid incorrect state.

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 15b10bb and f038549.

Files selected for processing (1)

• lib/entity/events.js (5 hunks)

Additional comments: 3

lib/entity/events.js (3)

• 68-72: The isKeyEvent method is a good refactor, improving clarity and reusability of the key event check logic.
• 77-77: Adding keysPressed as an object property is appropriate for tracking pressed keys, aligning with the PR objectives.
• 116-120: The logic to determine if an attribute represents a key event has been correctly refactored based on previous feedback.

[coderabbitai]

Review Status

Actionable comments generated: 3

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between f038549 and 2e85fd5.

Files selected for processing (1)

• lib/entity/events.js (4 hunks)

Additional comments: 1

lib/entity/events.js (1)

• 68-72: The addition of the isKeyEvent method is a good practice for encapsulating the logic to determine if an attribute represents a key event. This enhances code readability and reusability, aligning with the previous suggestion to refactor this logic into a separate method. Well done on implementing this improvement.

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 2e85fd5 and 97b1abe.

Files selected for processing (4)

• lib/entity/attributes.js (3 hunks)
• lib/entity/events.js (7 hunks)
• lib/helpers/strings.js (1 hunks)
• readme.md (2 hunks)

Additional comments: 10

lib/helpers/strings.js (2)

• 1-5: The kebabToCamelCase function correctly converts kebab-case strings to camelCase. It uses a regular expression to find hyphenated characters and converts them to uppercase. This is a common and efficient approach for this task.
• 7-12: The camelToKebabCase function correctly converts camelCase strings to kebab-case. The regular expression used here is well-crafted to handle edge cases, such as consecutive uppercase letters that should not be preceded by a hyphen. The use of a function in the replace method to conditionally add a hyphen based on the offset is a clever solution to avoid leading hyphens.

lib/entity/attributes.js (3)

• 3-3: The import statement for kebabToCamelCase correctly brings in the necessary function from ../helpers/strings. This ensures that the Attributes class can utilize the function for attribute name transformation.
• 25-25: The use of kebabToCamelCase in isValidAttribute for transforming attribute names from kebab-case to camelCase is appropriate. This change aligns with the PR's objective to standardize attribute name handling and improves consistency across the library.
• 159-159: The application of kebabToCamelCase in evaluateOtherAttributes for converting dynamic attribute names to camelCase before accessing them on the element is correct. This ensures that custom attributes defined in kebab-case are properly handled and mapped to their corresponding properties on DOM elements.

lib/entity/events.js (4)

• 19-20: The addition of SPECIAL_KEYS and DIRECTION_KEYS constant arrays is a good practice for managing lists of special and directional keys. This makes the code more readable and maintainable by centralizing the key definitions.
• 22-48: The mapKey function provides a comprehensive mapping from various keycode formats to a standardized format. This function is well-designed, covering a wide range of keycodes including special keys and direction keys. The use of camelToKebabCase for general keycode conversion ensures consistency with the rest of the library's naming conventions.
• 87-91: Extracting the logic to determine if an attribute represents a key event into a separate method isKeyEvent improves clarity and reusability. This change aligns with best practices for code organization and modularity.
• 238-368: The setKeyEvents method has been significantly refactored to handle key events more efficiently. The method now correctly separates special keys from normal keys and sets up event listeners for keydown, keyup, and keypress events based on the attributes specified. This approach enhances the library's ability to handle complex keyboard interactions. Ensure that the logic for determining if keys are pressed (areKeysPressed function) and the event handling logic (handleKeyPress function) are thoroughly tested to prevent issues with key event detection.

readme.md (1)

• 148-152: The introduction of special variables event and this in events is a significant enhancement. It's important to ensure that these variables are consistently documented and their usage is clear to the users of the library. This change enhances the flexibility and power of event handling in MiniJS.

[github-actions]

🚀 PR was released in v1.0.1 🚀