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.

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

Rule Proposal: Warn on emitting camelCase events #356

Closed
richardtallent opened this issue Jan 23, 2018 · 4 comments · Fixed by #1166
Closed

Rule Proposal: Warn on emitting camelCase events #356

richardtallent opened this issue Jan 23, 2018 · 4 comments · Fixed by #1166
Labels
accepted proposition new rule proposition

Comments

@richardtallent
Copy link

Please describe what the rule should do:

Ensure that developers emit events that are compatible with specifying listeners in a DOM-based template.

What category of rule is this? (place an "X" next to just one item)

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

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

methods: {
	clicked() {
		this.$emit("userClickedButton");
	},
	clicked() {
		this.$emit("Clicked");
	},
	clicked() {
		this.$emit("BUTTON_CLICKED");
	},
},

...

<body>
<div id="app">
     <child-comp @userClickedButton="doSomething"></child-comp>
</div>
</body>

Why should this rule be included in ESLint (instead of a plugin)?

If a component emits an event that includes a capital letter and you instantiate that component within an SFC or string template, you can use the @eventName / v-on:eventName attribute successfully to capture that event.

However, if you instantiate the component from within a DOM-based template, there is no way to capture the event. For props, Vue translates automatically between pascalCase and kebab-case, but it doesn't do so for events. Events simply won't be captured unless the listener attribute matches the emitted event string exactly.

As a result, component authors should be warned when they are creating events that can't be listened for from a DOM-based template. While I don't use DOM templates (I use SFCs almost exclusively), they are used quite often by new Vue developers, or developers just trying to play with a component.

Since this falls under the "silent failure" category, it's pretty frustrating both for the user and the component developer, but a rule to flag it during linting would be fairly simple to create.
@mysticatea
Copy link
Member

Thank you for the proposal.

Sounds good to me!

@chrisvfritz chrisvfritz mentioned this issue Jul 31, 2018
Merged
7 tasks
@chrisvfritz
Copy link
Contributor

I agree this would be good to add to essentials, but only once this PR is merged and included in a release. Until then, users will unfortunately have to use update:myProp instead of update:my-prop when using the .sync modifier of v-bind.

Also, this will provide new alerts for some users, for code that may not have been causing a problem before, so I think the message will be especially important. Perhaps something like:

For event names, kebab-case is recommended to ensure compatibility with DOM templates. Otherwise, HTML's case-insensitivity will cause v-on:theEventName to be interpreted as v-on:theeventname, making it impossible to listen for the theEventName event. Note that using the kebab-case convention with v-bind.sync requires Vue 2.5.19 or greater.`

Of course, we'll replace 2.5.19 with whatever version the PR is actually released under.

@michalsnik michalsnik mentioned this issue Sep 28, 2018
Closed
@michalsnik michalsnik mentioned this issue Nov 29, 2018
Merged
@metasean
Copy link

We were bitten by this silent error today. 😞

The PR that @chrisvfritz referenced as a blocker was merged back in December so it shouldn't be a blocker anymore. 😁

@garyo
Copy link

garyo commented Nov 5, 2019

I'd also like this.

@ota-meshi ota-meshi mentioned this issue Jan 6, 2020
Closed
@ota-meshi ota-meshi mentioned this issue May 27, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accepted proposition new rule proposition
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add vue/custom-event-name-casing rule vuejs/eslint-plugin-vue
5 participants
@garyo @mysticatea @richardtallent @chrisvfritz @metasean