Skip to content
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.

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

Rule Proposal: Disallow shadowing of native HTML event names #2557

Open
JoCa96 opened this issue Sep 16, 2024 · 0 comments · May be fixed by #2558
Open

Rule Proposal: Disallow shadowing of native HTML event names #2557

JoCa96 opened this issue Sep 16, 2024 · 0 comments · May be fixed by #2558

Comments

@JoCa96
Copy link

JoCa96 commented Sep 16, 2024

Please describe what the rule should do:
Using native HTML event names (like click) for Vue component emits can lead to incorrect assumptions about the emit and cause confusion. This is caused by Vue emits behaving differently from native events. E.g. :

  • The payload of a Vue emit can be chosen arbitrarily
  • Vue emits do not bubble, while most native events do
  • Event modifiers only work on HTML events or when the original event is re-emitted as emit payload.
  • When the native event is re-emitted the event.target might not match the actual event-listener's location.

The rule would mostly be aimed at developers of component libraries or web components.

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('close')">Close</button>
  <!-- ✗ BAD -->
  <button @click="$emit('click')">Close</button>
</template>
<script>
export default {
  <!--GOOD -->
  emits: ['close'],
  <!--BAD -->
  emits: ['click'],
}
</script>

Additional context
From a clean code perspective it is preferable to use an emit name that communicates intent (e.g., "close", "accept", "loadMore") over generic names.

@FloEdelmann FloEdelmann linked a pull request Sep 16, 2024 that will close this issue
JoCa96 added a commit to SchwarzIT/onyx that referenced this issue Sep 17, 2024
JoCa96 added a commit to SchwarzIT/onyx that referenced this issue Sep 17, 2024
JoCa96 added a commit to SchwarzIT/onyx that referenced this issue Sep 17, 2024
…lint-plugin-vue" until its released (#1877)

Duplicate "no-shadow-native-events" from "eslint-plugin-vue" until it is
released:
- PR with `eslint-plugin-vue`:
vuejs/eslint-plugin-vue#2558
  - Tests can also be found in that PR
- Official Rule proposal:
vuejs/eslint-plugin-vue#2557

Relates to #1603
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant