From a74dd594fa1f9e72ae305a0bb07c620b96eeb8e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Csord=C3=A1s?= <csordasmarton92@gmail.com>
Date: Tue, 19 Oct 2021 01:42:28 +0200
Subject: [PATCH] Add `multi-word-component-names` rule (#1661)

* Add `multi-word-component-names` rule

* Fix review comments for `multi-word-component-names` rule
---
 docs/rules/README.md                          |   1 +
 docs/rules/multi-word-component-names.md      |  84 ++++++
 lib/index.js                                  |   1 +
 lib/rules/multi-word-component-names.js       | 115 ++++++++
 tests/lib/rules/multi-word-component-names.js | 253 ++++++++++++++++++
 5 files changed, 454 insertions(+)
 create mode 100644 docs/rules/multi-word-component-names.md
 create mode 100644 lib/rules/multi-word-component-names.js
 create mode 100644 tests/lib/rules/multi-word-component-names.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 3f65e92c4..401329378 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -296,6 +296,7 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
diff --git a/docs/rules/multi-word-component-names.md b/docs/rules/multi-word-component-names.md
new file mode 100644
index 000000000..4e9255742
--- /dev/null
+++ b/docs/rules/multi-word-component-names.md
@@ -0,0 +1,84 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/multi-word-component-names
+description: require component names to be always multi-word
+---
+# vue/multi-word-component-names
+
+> require component names to be always multi-word
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule require component names to be always multi-word, except for root `App`
+components, and built-in components provided by Vue, such as `<transition>` or
+`<component>`. This prevents conflicts with existing and future HTML elements,
+since all HTML elements are a single word.
+
+<eslint-code-block filename="src/TodoItem.js" language="javascript" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```js
+/* ✓ GOOD */
+Vue.component('todo-item', {
+  // ...
+})
+
+/* ✗ BAD */
+Vue.component('Todo', {
+  // ...
+})
+```
+</eslint-code-block>
+
+<eslint-code-block filename="src/TodoItem.js" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'TodoItem',
+  // ...
+}
+</script>
+```
+</eslint-code-block>
+
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  name: 'Todo',
+  // ...
+}
+</script>
+```
+</eslint-code-block>
+
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  // ...
+}
+</script>
+```
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Style guide - Multi-word component names](https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multi-word-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multi-word-component-names.js)
diff --git a/lib/index.js b/lib/index.js
index b4f4d4a6f..068d01d40 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -47,6 +47,7 @@ module.exports = {
     'match-component-file-name': require('./rules/match-component-file-name'),
     'max-attributes-per-line': require('./rules/max-attributes-per-line'),
     'max-len': require('./rules/max-len'),
+    'multi-word-component-names': require('./rules/multi-word-component-names'),
     'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
     'name-property-casing': require('./rules/name-property-casing'),
diff --git a/lib/rules/multi-word-component-names.js b/lib/rules/multi-word-component-names.js
new file mode 100644
index 000000000..f47f85349
--- /dev/null
+++ b/lib/rules/multi-word-component-names.js
@@ -0,0 +1,115 @@
+/**
+ * @author Marton Csordas
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const casing = require('../utils/casing')
+const utils = require('../utils')
+
+const RESERVED_NAMES_IN_VUE3 = new Set(
+  require('../utils/vue3-builtin-components')
+)
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Returns true if the given component name is valid, otherwise false.
+ * @param {string} name
+ * */
+function isValidComponentName(name) {
+  if (name.toLowerCase() === 'app' || RESERVED_NAMES_IN_VUE3.has(name)) {
+    return true
+  } else {
+    const elements = casing.kebabCase(name).split('-')
+    return elements.length > 1
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require component names to be always multi-word',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/multi-word-component-names.html'
+    },
+    schema: [],
+    messages: {
+      unexpected: 'Component name "{{value}}" should always be multi-word.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const fileName = context.getFilename()
+    let componentName = fileName.replace(/\.[^/.]+$/, '')
+
+    return utils.compositingVisitors(
+      {
+        /** @param {Program} node */
+        Program(node) {
+          if (
+            !node.body.length &&
+            utils.isVueFile(fileName) &&
+            !isValidComponentName(componentName)
+          ) {
+            context.report({
+              messageId: 'unexpected',
+              data: {
+                value: componentName
+              },
+              loc: { line: 1, column: 0 }
+            })
+          }
+        }
+      },
+
+      utils.executeOnVue(context, (obj) => {
+        const node = utils.findProperty(obj, 'name')
+
+        /** @type {SourceLocation | null} */
+        let loc = null
+
+        // Check if the component has a name property.
+        if (node) {
+          const valueNode = node.value
+          if (valueNode.type !== 'Literal') return
+
+          componentName = `${valueNode.value}`
+          loc = node.loc
+        } else if (
+          obj.parent.type === 'CallExpression' &&
+          obj.parent.arguments.length === 2
+        ) {
+          // The component is registered globally with 'Vue.component', where
+          // the first paremter is the component name.
+          const argument = obj.parent.arguments[0]
+          if (argument.type !== 'Literal') return
+
+          componentName = `${argument.value}`
+          loc = argument.loc
+        }
+
+        if (!isValidComponentName(componentName)) {
+          context.report({
+            messageId: 'unexpected',
+            data: {
+              value: componentName
+            },
+            loc: loc || { line: 1, column: 0 }
+          })
+        }
+      })
+    )
+  }
+}
diff --git a/tests/lib/rules/multi-word-component-names.js b/tests/lib/rules/multi-word-component-names.js
new file mode 100644
index 000000000..65b777984
--- /dev/null
+++ b/tests/lib/rules/multi-word-component-names.js
@@ -0,0 +1,253 @@
+/**
+ * @author Marton Csordas
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/multi-word-component-names')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('multi-word-component-names', rule, {
+  valid: [
+    {
+      filename: 'App.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'App' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('App', {})
+        </script>`
+    },
+    {
+      filename: 'app.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'app' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('app', {})
+        </script>`
+    },
+    {
+      filename: 'transition.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'transition' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('transition', {})
+        </script>`
+    },
+    {
+      filename: 'component.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'component' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('component', {})
+        </script>`
+    },
+    {
+      filename: 'multi-word.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'multi-word' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('multi-word', {})
+        </script>`
+    },
+    {
+      filename: 'multiWord.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'multiWord' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('multiWord', {})
+        </script>`
+    },
+    {
+      filename: 'MultiWord.vue',
+      code: ''
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default { name: 'MultiWord' }
+        </script>`
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('MultiWord', {})
+        </script>`
+    },
+    {
+      filename: 'TheTest.vue',
+      code: `
+      <script>
+      export default { name: 'TheTest' }
+      </script>
+      `
+    },
+    {
+      filename: 'TheTest.vue',
+      code: `
+      <script>
+      Vue.component('TheTest', {})
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '',
+      errors: [
+        {
+          message: 'Component name "test" should always be multi-word.',
+          line: 1
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default { name: 'test' }
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "test" should always be multi-word.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        Vue.component('test', {})
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "test" should always be multi-word.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'valid-name.vue',
+      code: `
+        <script>
+        export default { name: 'invalid' }
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "invalid" should always be multi-word.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'valid-name.vue',
+      code: `
+        <script>
+        Vue.component('invalid', {})
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "invalid" should always be multi-word.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        export default {}
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "invalid" should always be multi-word.',
+          line: 1
+        }
+      ]
+    },
+    {
+      filename: 'invalid.vue',
+      code: `
+        <script>
+        Vue.component('', {})
+        </script>`,
+      errors: [
+        {
+          message: 'Component name "" should always be multi-word.',
+          line: 3
+        }
+      ]
+    }
+  ]
+})