From 9932d13c37fdd7d0af1120d71209d107dddb4489 Mon Sep 17 00:00:00 2001
From: devTeaa <devtea@protonmail.com>
Date: Sun, 18 Oct 2020 20:18:17 +0700
Subject: [PATCH] added options for events that ignore custom-event-name-casing
 (#1321)

* added options for custom-event-name-casing

* add test case to close #1260

* update docs for custom-event-name-casing

* Update test case event name with regex

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

* Update docs/rules/custom-event-name-casing.md for better description

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

* updated custom-event-name-casing readme with ignores options

* added custom-event-name-casing invalid test cases

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 docs/rules/custom-event-name-casing.md      |  42 ++++++-
 lib/rules/custom-event-name-casing.js       |  21 +++-
 tests/lib/rules/custom-event-name-casing.js | 122 ++++++++++++++++++++
 3 files changed, 182 insertions(+), 3 deletions(-)

diff --git a/docs/rules/custom-event-name-casing.md b/docs/rules/custom-event-name-casing.md
index b4faacfbd..2b3dfb089 100644
--- a/docs/rules/custom-event-name-casing.md
+++ b/docs/rules/custom-event-name-casing.md
@@ -49,7 +49,47 @@ export default {
 
 ## :wrench: Options
 
-Nothing.
+
+```json
+{
+  "vue/custom-event-name-casing": ["error", {
+    "ignores": []
+  }]
+}
+```
+- `ignores` (`string[]`) ... The event names to ignore. Sets the event name to allow. For example, custom event names, Vue components event with special name, or Vue library component event name. You can set the regexp by writing it like `"/^name/"` or `click:row` or `fooBar`.
+
+### `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
+
+<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', {ignores:'/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button @click="$emit('click:row')" />
+  <button @click="$emit('fooBar')" />
+
+  <!-- ✗ BAD -->
+  <button @click="$emit('myEvent')" />
+</template>
+<script>
+export default {
+  methods: {
+    onClick () {
+      /* ✓ GOOD */
+      this.$emit('click:row')
+      this.$emit('fooBar')
+
+      /* ✗ BAD */
+      this.$emit('myEvent')
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
 
 ## :books: Further Reading
 
diff --git a/lib/rules/custom-event-name-casing.js b/lib/rules/custom-event-name-casing.js
index 6c5f072c3..7ed9335a2 100644
--- a/lib/rules/custom-event-name-casing.js
+++ b/lib/rules/custom-event-name-casing.js
@@ -11,6 +11,7 @@
 const { findVariable } = require('eslint-utils')
 const utils = require('../utils')
 const { isKebabCase } = require('../utils/casing')
+const { toRegExp } = require('../utils/regexp')
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -72,7 +73,20 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/custom-event-name-casing.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignores: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       unexpected: "Custom event name '{{name}}' must be kebab-case."
     }
@@ -80,13 +94,16 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const setupContexts = new Map()
+    const options = context.options[0] || {}
+    /** @type {RegExp[]} */
+    const ignores = (options.ignores || []).map(toRegExp)
 
     /**
      * @param { Literal & { value: string } } nameLiteralNode
      */
     function verify(nameLiteralNode) {
       const name = nameLiteralNode.value
-      if (isValidEventName(name)) {
+      if (ignores.some((re) => re.test(name)) || isValidEventName(name)) {
         return
       }
       context.report({
diff --git a/tests/lib/rules/custom-event-name-casing.js b/tests/lib/rules/custom-event-name-casing.js
index 934bb079f..ed0ba0eb5 100644
--- a/tests/lib/rules/custom-event-name-casing.js
+++ b/tests/lib/rules/custom-event-name-casing.js
@@ -166,6 +166,66 @@ tester.run('custom-event-name-casing', rule, {
       }
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('fooBar')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('barBaz')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('bazQux')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['fooBar', 'barBaz', 'bazQux'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input:update')">
+        <input
+          @click="$emit('search:update')">
+        <input
+          @click="$emit('click:row')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('input:update')
+              context.emit('search:update')
+              context.emit('click:row')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('input:update')
+            this.$emit('search:update')
+            this.$emit('click:row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]
     }
   ],
   invalid: [
@@ -276,6 +336,68 @@ tester.run('custom-event-name-casing', rule, {
         "Custom event name 'barBaz' must be kebab-case.",
         "Custom event name 'bazQux' must be kebab-case."
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input/update')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('search/update')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('click/row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }],
+      errors: [
+        "Custom event name 'input/update' must be kebab-case.",
+        "Custom event name 'search/update' must be kebab-case.",
+        "Custom event name 'click/row' must be kebab-case."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input/update')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('search/update')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('click/row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['input:update', 'search:update', 'click:row'] }],
+      errors: [
+        "Custom event name 'input/update' must be kebab-case.",
+        "Custom event name 'search/update' must be kebab-case.",
+        "Custom event name 'click/row' must be kebab-case."
+      ]
     }
   ]
 })