vue/custom-event-name-casing: should check and report update:kebab-case/update:camelCase event names too

[zfeher]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.57.0
• eslint-plugin-vue version: 9.24.0
• Vue version: 3.4.21
• Node version: 18.18.0
• Operating System: Windows 10

Please show your full configuration:

import pluginVue from 'eslint-plugin-vue';
import configPrettier from 'eslint-config-prettier';

export default [
  ...pluginVue.configs['flat/recommended'],
  configPrettier,

  {
    rules: {
      'vue/require-default-prop': 'off',
      'vue/attribute-hyphenation': ['error', 'never'],
      'vue/custom-event-name-casing': ['error', 'camelCase'],
      // 'vue/custom-event-name-casing': ['error', 'kebab-case'],
      'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
    },
  },
];

What did you do?

<script setup>
const emit = defineEmits(['update:model-value',]);

const handleEmitClick = () => {
  emit('update:model-value', 'new foo');
};
</script>

<template>
  <button type="button" @click="$emit('update:model-value', 'new foo')">
    Emit
  </button>
</template>

What did you expect to happen?
emit and $emit calls with update:kebab-case like event names should be reported because of wrong event name casing but no error is reported.
side note: vue/v-on-event-hyphenation are able to report such event names as error as expected.

What actually happened?

Nothing, no error is reported.
(It seems the rule only works with plain kebab-case/camelCase event names.)

Repository to reproduce this issue

Repo with minimal reproduction
Just open a new terminal or terminate dev server in current terminal then run npm run lint to see the problem. Feel free to change the eslint rule setting to kebab-case it won't report errors either.

[waynzh]

The source code and test case look like it's intentional. 🤔

[ThiloCode]

@waynzh I just ran into this too, and would suggest it is a bug, for the following reason: Vue itself performs event name remapping even when the event name starts with update:. So, if in a component I write emit('update:myCustomEvent'), I can create a listener for this event with either @update:my-custom-event or @update:myCustomEvent. I would argue that if Vue is doing this, the lint rule should be able to verify it too.

Additionally I noticed that the Utils casing.js performs the following check

  return (
    !hasUpper(str) &&
    !hasSymbols(str) &&
    !str.startsWith('-') && // starts with hyphen is not kebab-case
    !/_|--|\s/u.test(str)
  )
}

So anything containing symbols i.e. the : in update:model-value is registered as a symbol, which would cause the check to fail. I think the code just takes an unfortunate shortcut by ignoring every event starting with update: as seen here:

function isValidEventName(name) {
  return caseChecker(name) || name.startsWith('update:')
}

I'm new around here, but would be happy to try and contribute a fix if that's all right?

[FloEdelmann]

Is it specific to update:X though? Or are all colon-separated camelCase event names working as described above, e.g. fooBar:barBaz:bazFoo?