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

feat: custom-event-name-casing custom casing #1260

Open
privatenumber opened this issue Jul 21, 2020 · 6 comments
Open

feat: custom-event-name-casing custom casing #1260

privatenumber opened this issue Jul 21, 2020 · 6 comments

Comments

@privatenumber
Copy link
Contributor

@privatenumber privatenumber commented Jul 21, 2020

Extension of this bug report: #1250

Request

For the ability to customize what kind of casing should be enforced on event names.

Use case

Name spacing

In my codebase we namespace events using : with the component name for frictionless composability. That way, when composing components, there would be no collision in emitted events. (eg. input:update)

For example, a custom Input component would emit input:update, which triggers the new v-model value (not to takeover native event names with different values). There could be another component, for example Search, that uses this Input component and emit another "update" event with more data via search:update.

camelCase in Vue 3 docs

With Vue v3, v-model replaces .sync and their docs seem to contain a lot of examples using camelCase in event names.

(This is pretty confusing considering they still recommend event names be case insensitive (lower case) at the top.)

If this isn't a mistake, then surely, some people would want to use camelCase in their event names. (vuejs/docs-next#308)

Edit:
Changing to v-model.prop-name seems to be necessary in a non-compiled environment (haven't tested in a compiled one). Both update:propName and update:prop-name seem to work. Codepen

Proposed API

Just some ideas I had:

  • ignoreCharacters: [':']
  • allowCharacters: [':']
  • allowNamespace: true
  • allowDelimiters: ':'
@ota-meshi
Copy link
Member

@ota-meshi ota-meshi commented Jul 21, 2020

Thank you for your proposal.

However, it seems to me that the options you have proposed are a bit limited.

The following is my idea.

Add the ignorePatterns option. You can specify an array of regular expressions with the ignorePatterns option.
Ignores event names whose names match the specified pattern from this rule's report.

e.g. "ignorePatterns": ["^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$"]

What do you think? Does the ignorePatterns option solve your needs?

@privatenumber
Copy link
Contributor Author

@privatenumber privatenumber commented Jul 21, 2020

Yeah that works! Thank you @ota-meshi 🙏

@jacekkarczmarczyk
Copy link

@jacekkarczmarczyk jacekkarczmarczyk commented Sep 30, 2020

Vuetify also uses : syntax for events, for example click:row, so that would be a great addition

@bitencode
Copy link

@bitencode bitencode commented Oct 6, 2020

👍 Vue itself uses examples of update:my-prop to distinguish which prop is being updated.

@ota-meshi
Copy link
Member

@ota-meshi ota-meshi commented Oct 6, 2020

@bitencode custom-event-name-casing rule already ignores update:my-prop.
If update:my-prop is reported as an error in your environment, could you open a new issue?

@bitencode
Copy link

@bitencode bitencode commented Oct 6, 2020

My apologies @ota-meshi, it does ignore that specific use case. When I upgraded to the new version of this plugin we had hundreds of errors about "must be kebab-case" that I missed the fact that using update:<prop-name> events were not in the list of errors.
We took the original Vue examples as being a good way of specifying a resource or context and an action, so we update props with that syntax, and then for lower level components we emit events similar to Vuetify and use events like change:sort-order, change:per-page, etc... Higher level components use higher concept events to notify their parents of what they are doing - like video:start, video:stop, etc... so all those events are resulting in lint errors. For now I have just disabled the rule.
Thank you

devTeaa added a commit to devTeaa/eslint-plugin-vue that referenced this issue Oct 8, 2020
devTeaa added a commit to devTeaa/eslint-plugin-vue that referenced this issue Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.