Fix unable to autofix event name with update:. (vuejs#1648)

Author: ota-meshi

lib/rules/v-on-event-hyphenation.js

@@ -51,15 +51,16 @@ module.exports = {
     const ignoredAttributes = (optionsPayload && optionsPayload.ignore) || []
     const autofix = Boolean(optionsPayload && optionsPayload.autofix)
 
-    const caseConverter = casing.getExactConverter(
+    const caseConverter = casing.getConverter(
       useHyphenated ? 'kebab-case' : 'camelCase'
     )
 
     /**
      * @param {VDirective} node
+     * @param {VIdentifier} argument
      * @param {string} name
      */
-    function reportIssue(node, name) {
+    function reportIssue(node, argument, name) {
       const text = sourceCode.getText(node.key)
 
       context.report({
@@ -71,13 +72,14 @@ module.exports = {
         data: {
           text
         },
-        fix: autofix
-          ? (fixer) =>
-              fixer.replaceText(
-                node.key,
-                text.replace(name, caseConverter(name))
-              )
-          : null
+        fix:
+          autofix &&
+          // It cannot be converted in snake_case.
+          !name.includes('_')
+            ? (fixer) => {
+                return fixer.replaceText(argument, caseConverter(name))
+              }
+            : null
       })
     }
 
@@ -99,14 +101,13 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=true][key.name.name='on']"(node) {
         if (!utils.isCustomComponent(node.parent.parent)) return
-
-        const name =
-          node.key.argument &&
-          node.key.argument.type === 'VIdentifier' &&
-          node.key.argument.rawName
+        if (!node.key.argument || node.key.argument.type !== 'VIdentifier') {
+          return
+        }
+        const name = node.key.argument.rawName
         if (!name || isIgnoredAttribute(name)) return
 
-        reportIssue(node, name)
+        reportIssue(node, node.key.argument, name)
       }
     })
   }

tests/lib/rules/v-on-event-hyphenation.js

@@ -102,6 +102,86 @@ tester.run('v-on-event-hyphenation', rule, {
       </template>
       `,
       errors: ["v-on event 'v-on:custom-event' can't be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      options: ['always', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @update:model-value="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      errors: ["v-on event '@update:modelValue' must be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      options: ['never', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:modelValue="foo"/>
+      </template>
+      `,
+      errors: ["v-on event '@update:model-value' can't be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @up-date:modelValue="foo"/>
+        <VueComponent @upDate:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      options: ['always', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      errors: [
+        "v-on event '@upDate:modelValue' must be hyphenated.",
+        "v-on event '@up-date:modelValue' must be hyphenated.",
+        "v-on event '@upDate:model-value' must be hyphenated."
+      ]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @up-date:modelValue="foo"/>
+        <VueComponent @upDate:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      options: ['never', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+      </template>
+      `,
+      errors: [
+        "v-on event '@up-date:modelValue' can't be hyphenated.",
+        "v-on event '@upDate:model-value' can't be hyphenated.",
+        "v-on event '@up-date:model-value' can't be hyphenated."
+      ]
     }
   ]
 })