From 62ad24bd914a3607a34ad2450d2b88afbf34d707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Fri, 3 Aug 2018 15:23:36 +0200
Subject: [PATCH 1/3] Add "no-unused-components" rule

---
 README.md                               |   1 +
 docs/rules/no-unused-components.md      |  52 ++++
 lib/configs/essential.js                |   1 +
 lib/index.js                            |   1 +
 lib/rules/no-unused-components.js       |  83 ++++++
 lib/utils/casing.js                     |   7 +-
 lib/utils/index.js                      |  70 ++++-
 tests/lib/rules/no-unused-components.js | 354 ++++++++++++++++++++++++
 tests/lib/utils/index.js                |  39 +++
 9 files changed, 596 insertions(+), 12 deletions(-)
 create mode 100644 docs/rules/no-unused-components.md
 create mode 100644 lib/rules/no-unused-components.js
 create mode 100644 tests/lib/rules/no-unused-components.js

diff --git a/README.md b/README.md
index 7870ed231..a38bee46c 100644
--- a/README.md
+++ b/README.md
@@ -156,6 +156,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |  | [vue/no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
 |  | [vue/no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
 |  | [vue/no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
+|  | [vue/no-unused-components](./docs/rules/no-unused-components.md) | disallow unused components |
 |  | [vue/no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
 |  | [vue/no-use-v-if-with-v-for](./docs/rules/no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |
 |  | [vue/require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
new file mode 100644
index 000000000..21b7ca946
--- /dev/null
+++ b/docs/rules/no-unused-components.md
@@ -0,0 +1,52 @@
+# disallow unused components (vue/no-unused-components)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+This rule reports components that haven't been used in the template.
+
+## :book: Rule Details
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+
+  export default {
+    components: {
+      TheButton // Unused component
+    }
+  }
+</script>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <TheButton>CTA</TheButton>
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+
+  export default {
+    components: {
+      TheButton
+    }
+  }
+</script>
+```
+
+## :wrench: Options
+
+Nothing.
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index 955571ad6..4022c37b4 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -15,6 +15,7 @@ module.exports = {
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',
     'vue/no-textarea-mustache': 'error',
+    'vue/no-unused-components': 'error',
     'vue/no-unused-vars': 'error',
     'vue/no-use-v-if-with-v-for': 'error',
     'vue/require-component-is': 'error',
diff --git a/lib/index.js b/lib/index.js
index 702fd41e0..4d3fb5d43 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -33,6 +33,7 @@ module.exports = {
     'no-template-key': require('./rules/no-template-key'),
     'no-template-shadow': require('./rules/no-template-shadow'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
+    'no-unused-components': require('./rules/no-unused-components'),
     'no-unused-vars': require('./rules/no-unused-vars'),
     'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
     'no-v-html': require('./rules/no-v-html'),
diff --git a/lib/rules/no-unused-components.js b/lib/rules/no-unused-components.js
new file mode 100644
index 000000000..779c95a0a
--- /dev/null
+++ b/lib/rules/no-unused-components.js
@@ -0,0 +1,83 @@
+/**
+ * @fileoverview Report used components
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'disallow registering components that are not used inside templates',
+      category: 'essential',
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.1/docs/rules/no-unused-components.md'
+    },
+    fixable: null,
+    schema: []
+  },
+
+  create (context) {
+    const usedComponents = []
+    let registeredComponents = []
+    let templateLocation
+
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement (node) {
+        if (!utils.isCustomComponent(node)) return
+        let usedComponentName
+
+        if (utils.hasAttribute(node, 'is')) {
+          usedComponentName = utils.findAttribute(node, 'is').value.value
+        } else if (!utils.hasDirective(node, 'bind', 'is')) {
+          usedComponentName = node.rawName
+        }
+
+        if (usedComponentName) {
+          usedComponents.push(usedComponentName)
+        }
+      },
+      "VElement[name='template']" (rootNode) {
+        templateLocation = templateLocation || rootNode.loc.start
+      },
+      "VElement[name='template']:exit" (rootNode) {
+        if (rootNode.loc.start !== templateLocation) return
+
+        registeredComponents
+          .filter(({ name }) => {
+            // If the component name is PascalCase
+            // it can be used in varoious of ways inside template,
+            // like "theComponent", "The-component" etc.
+            // but except snake_case
+            if (casing.pascalCase(name) === name) {
+              return !usedComponents.some(n => {
+                return n.indexOf('_') === -1 && name === casing.pascalCase(n)
+              })
+            } else {
+              // In any other case the used component name must exactly match
+              // the registered name
+              return usedComponents.indexOf(name) === -1
+            }
+          })
+          .forEach(({ node, name }) => context.report({
+            node,
+            message: 'The "{{name}}" component has been registered but not used.',
+            data: {
+              name
+            }
+          }))
+      }
+    }, utils.executeOnVue(context, (obj) => {
+      registeredComponents = utils.getRegisteredComponents(obj)
+    }))
+  }
+}
diff --git a/lib/utils/casing.js b/lib/utils/casing.js
index db73a5a23..f0c02b01a 100644
--- a/lib/utils/casing.js
+++ b/lib/utils/casing.js
@@ -75,5 +75,10 @@ module.exports = {
     assert(typeof name === 'string')
 
     return convertersMap[name] || pascalCase
-  }
+  },
+
+  camelCase,
+  pascalCase,
+  kebabCase,
+  snakeCase
 }
diff --git a/lib/utils/index.js b/lib/utils/index.js
index e0279636c..b39eeba04 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -76,40 +76,64 @@ module.exports = {
   },
 
   /**
-   * Check whether the given start tag has specific directive.
+   * Finds attribute in the given start tag
    * @param {ASTNode} node The start tag node to check.
    * @param {string} name The attribute name to check.
    * @param {string} [value] The attribute value to check.
-   * @returns {boolean} `true` if the start tag has the directive.
+   * @returns {ASTNode} attribute node
    */
-  hasAttribute (node, name, value) {
+  findAttribute (node, name, value) {
     assert(node && node.type === 'VElement')
-    return node.startTag.attributes.some(a =>
-      !a.directive &&
-      a.key.name === name &&
+    return node.startTag.attributes.find(attr => (
+      !attr.directive &&
+      attr.key.name === name &&
       (
         value === undefined ||
-        (a.value != null && a.value.value === value)
+        (attr.value != null && attr.value.value === value)
       )
-    )
+    ))
   },
 
   /**
    * Check whether the given start tag has specific directive.
    * @param {ASTNode} node The start tag node to check.
+   * @param {string} name The attribute name to check.
+   * @param {string} [value] The attribute value to check.
+   * @returns {boolean} `true` if the start tag has the attribute.
+   */
+  hasAttribute (node, name, value) {
+    assert(node && node.type === 'VElement')
+    return Boolean(this.findAttribute(node, name, value))
+  },
+
+  /**
+   * Finds directive in the given start tag
+   * @param {ASTNode} node The start tag node to check.
    * @param {string} name The directive name to check.
    * @param {string} [argument] The directive argument to check.
-   * @returns {boolean} `true` if the start tag has the directive.
+   * @returns {ASTNode} directive node
    */
-  hasDirective (node, name, argument) {
+  findDirective (node, name, argument) {
     assert(node && node.type === 'VElement')
-    return node.startTag.attributes.some(a =>
+    return node.startTag.attributes.find(a =>
       a.directive &&
       a.key.name === name &&
       (argument === undefined || a.key.argument === argument)
     )
   },
 
+  /**
+   * Check whether the given start tag has specific directive.
+   * @param {ASTNode} node The start tag node to check.
+   * @param {string} name The directive name to check.
+   * @param {string} [argument] The directive argument to check.
+   * @returns {boolean} `true` if the start tag has the directive.
+   */
+  hasDirective (node, name, argument) {
+    assert(node && node.type === 'VElement')
+    return Boolean(this.findDirective(node, name, argument))
+  },
+
   /**
    * Check whether the given attribute has their attribute value.
    * @param {ASTNode} node The attribute node to check.
@@ -158,6 +182,30 @@ module.exports = {
     )
   },
 
+  /**
+   * Returns the list of all registered components
+   * @param {ASTNode} componentObject
+   * @returns {Array} Array of ASTNodes
+   */
+  getRegisteredComponents (componentObject) {
+    const componentsNode = componentObject.properties
+      .find(p =>
+        p.type === 'Property' &&
+        p.key.type === 'Identifier' &&
+        p.key.name === 'components' &&
+        p.value.type === 'ObjectExpression'
+      )
+
+    if (!componentsNode) { return [] }
+
+    return componentsNode.value.properties
+      .filter(p => p.type === 'Property')
+      .map(node => ({
+        node,
+        name: this.getStaticPropertyName(node.key)
+      }))
+  },
+
   /**
    * Check whether the previous sibling element has `if` or `else-if` directive.
    * @param {ASTNode} node The element node to check.
diff --git a/tests/lib/rules/no-unused-components.js b/tests/lib/rules/no-unused-components.js
new file mode 100644
index 000000000..a5aee6953
--- /dev/null
+++ b/tests/lib/rules/no-unused-components.js
@@ -0,0 +1,354 @@
+/**
+ * @fileoverview Report used components
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-unused-components')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-unused-components', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `<template><div>Lorem ipsum</div></template>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <h2>Lorem ipsum</h2>
+        </div>
+      </template>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <TheButton />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="TheButton" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <theButton />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="theButton" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <the-button />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="the-button" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <The-button />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="The-button" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <The-Button />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="The-Button" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <the-Button />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="the-Button" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <the-button />
+          <next_Button />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            'the-button': TheButton,
+            'next_Button': NextButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component is="the-button" />
+          <component is="next_Button" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            'the-button': TheButton,
+            'next_Button': NextButton
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <h2>Lorem ipsum</h2>
+          <component is="TheButton" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
+
+    // Ignore when `render` is used instead of temoplate
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          components: {
+            TheButton
+          },
+          render() {
+            return
+          }
+        }
+      </script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <h2>Lorem ipsum</h2>
+          </div>
+        </template>
+        <script>
+          export default {
+            components: {
+              TheButton
+            },
+          }
+        </script>
+      `,
+      errors: [{
+        message: 'The "TheButton" component has been registered but not used.',
+        line: 10
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <h2>Lorem ipsum</h2>
+            <the_button />
+          </div>
+        </template>
+        <script>
+          export default {
+            components: {
+              TheButton
+            },
+          }
+        </script>
+      `,
+      errors: [{
+        message: 'The "TheButton" component has been registered but not used.',
+        line: 11
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <h2>Lorem ipsum</h2>
+            <TheButton />
+          </div>
+        </template>
+        <script>
+          export default {
+            components: {
+              'the-button': TheButton
+            },
+          }
+        </script>
+      `,
+      errors: [{
+        message: 'The "the-button" component has been registered but not used.',
+        line: 11
+      }]
+    }
+  ]
+})
diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index 09e39ef28..067ddc593 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -208,3 +208,42 @@ describe('parseMemberOrCallExpression', () => {
     assert.equal(parsed, 'this.lorem[][].map().dolor.reduce().sit')
   })
 })
+
+describe('getRegisteredComponents', () => {
+  let node
+
+  const parse = function (code) {
+    return babelEslint.parse(code).body[0].declarations[0].init
+  }
+
+  it('should return empty array when there are no components registered', () => {
+    node = parse(`const test = {
+      name: 'test',
+    }`)
+
+    assert.equal(
+      utils.getRegisteredComponents(node).length,
+      0
+    )
+  })
+
+  it('should return an array with all registered components', () => {
+    node = parse(`const test = {
+      name: 'test',
+      components: {
+        ...test,
+        PrimaryButton,
+        secondaryButton,
+        'the-modal': TheModal,
+        the_dropdown: TheDropdown,
+        the_input,
+        ['SomeComponent']: SomeComponent
+      }
+    }`)
+
+    assert.deepEqual(
+      utils.getRegisteredComponents(node).map(c => c.name),
+      ['PrimaryButton', 'secondaryButton', 'the-modal', 'the_dropdown', 'the_input', 'SomeComponent'],
+    )
+  })
+})

From 52c6e7c72c886c5098fecab624469f5f387fd276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sat, 4 Aug 2018 14:24:46 +0200
Subject: [PATCH 2/3] Handle case with Literal in :is binding expression,
 update docs

---
 docs/rules/no-unused-components.md      | 19 +++++++++++++++++--
 lib/rules/no-unused-components.js       | 10 +++++++++-
 tests/lib/rules/no-unused-components.js | 15 +++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 21b7ca946..1c0059028 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -12,36 +12,51 @@ This rule reports components that haven't been used in the template.
 <template>
   <div>
     <h2>Lorem ipsum</h2>
+    <TheModal />
   </div>
 </template>
 
 <script>
   import TheButton from 'components/TheButton.vue'
+  import TheModal from 'components/TheModal.vue'
 
   export default {
     components: {
       TheButton // Unused component
+      'the-modal': TheModal // Components registered under other than PascalCased name has to be 
     }
   }
 </script>
 ```
 
+Note that components registered under other than `PascalCase`d name has to be called directly under the specified name, whereas if you cregister it using `PascalCase` you can call it however you like, exept using `snake_case`.
+
 :+1: Examples of **correct** code for this rule:
 
 ```html
 <template>
   <div>
     <h2>Lorem ipsum</h2>
-    <TheButton>CTA</TheButton>
+    <the-modal>
+      <component is="TheInput" />
+      <component :is="'TheDropdown'" />
+      <TheButton>CTA</TheButton>
+    </the-modal>
   </div>
 </template>
 
 <script>
   import TheButton from 'components/TheButton.vue'
+  import TheModal from 'components/TheModal.vue'
+  import TheInput from 'components/TheInput.vue'
+  import TheDropdown from 'components/TheDropdown.vue'
 
   export default {
     components: {
-      TheButton
+      TheButton,
+      TheModal,
+      TheInput,
+      TheDropdown,
     }
   }
 </script>
diff --git a/lib/rules/no-unused-components.js b/lib/rules/no-unused-components.js
index 779c95a0a..5719f0cde 100644
--- a/lib/rules/no-unused-components.js
+++ b/lib/rules/no-unused-components.js
@@ -38,7 +38,15 @@ module.exports = {
 
         if (utils.hasAttribute(node, 'is')) {
           usedComponentName = utils.findAttribute(node, 'is').value.value
-        } else if (!utils.hasDirective(node, 'bind', 'is')) {
+        } else if (utils.hasDirective(node, 'bind', 'is')) {
+          const directiveNode = utils.findDirective(node, 'bind', 'is')
+          if (
+            directiveNode.value.type === 'VExpressionContainer' &&
+            directiveNode.value.expression.type === 'Literal'
+          ) {
+            usedComponentName = directiveNode.value.expression.value
+          }
+        } else {
           usedComponentName = node.rawName
         }
 
diff --git a/tests/lib/rules/no-unused-components.js b/tests/lib/rules/no-unused-components.js
index a5aee6953..f412b3ecb 100644
--- a/tests/lib/rules/no-unused-components.js
+++ b/tests/lib/rules/no-unused-components.js
@@ -52,6 +52,21 @@ tester.run('no-unused-components', rule, {
         }
       </script>`
     },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div>
+          <component :is="'TheButton'" />
+        </div>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheButton
+          }
+        }
+      </script>`
+    },
     {
       filename: 'test.vue',
       code: `<template>

From 9068cc8b10965a4742c5deb85219315b960064a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 13 Aug 2018 23:31:51 +0200
Subject: [PATCH 3/3] Update no-unused-components.md

---
 docs/rules/no-unused-components.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 1c0059028..85a584ba3 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -23,13 +23,13 @@ This rule reports components that haven't been used in the template.
   export default {
     components: {
       TheButton // Unused component
-      'the-modal': TheModal // Components registered under other than PascalCased name has to be 
+      'the-modal': TheModal // Unused component
     }
   }
 </script>
 ```
 
-Note that components registered under other than `PascalCase`d name has to be called directly under the specified name, whereas if you cregister it using `PascalCase` you can call it however you like, exept using `snake_case`.
+Note that components registered under other than `PascalCase` name have to be called directly under the specified name, whereas if you register it using `PascalCase` you can call it however you like, except using `snake_case`.
 
 :+1: Examples of **correct** code for this rule: