Make rule vue/no-unregistered-components ignore recursive components

docs/rules/no-unregistered-components.md

@@ -78,7 +78,8 @@ are ignored by default.
 ```json
 {
   "vue/no-unregistered-components": ["error", {
-    "ignorePatterns": []
+    "ignorePatterns": [],
+    "ignoreRecursive": false
   }]
 }
 ```
@@ -131,6 +132,56 @@ are ignored by default.
 
 </eslint-code-block>
 
+- `ignoreRecursive` Suppresses all errors if component name matches its parent component name.
+
+```
+Beware: recursive components can cause infinite loops, so make sure you use it with a condition.
+```
+
+### `ignoreRecursive: true`
+
+Note that you have to declare explicitly the `name` property in your component to make the recursive component work. See https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components
+
+<eslint-code-block :rules="{'vue/no-unregistered-components': ['error', { 'ignoreRecursive': true }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <CustomComponent />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomComponent'
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unregistered-components': ['error', { 'ignoreRecursive': true }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <CustomComponent />
+  </div>
+</template>
+
+<script>
+  export default {
+    // name is not declared
+  }
+</script>
+```
+
+</eslint-code-block>
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unregistered-components.js)

lib/rules/no-unregistered-components.js

@@ -62,6 +62,9 @@ module.exports = {
         properties: {
           ignorePatterns: {
             type: 'array'
+          },
+          ignoreRecursive: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -73,14 +76,33 @@ module.exports = {
     const options = context.options[0] || {}
     /** @type {string[]} */
     const ignorePatterns = options.ignorePatterns || []
+    /** @type {boolean} */
+    const ignoreRecursive = options.ignoreRecursive || false
     /** @type { { node: VElement | VDirective | VAttribute, name: string }[] } */
     const usedComponentNodes = []
     /** @type { { node: Property, name: string }[] } */
     const registeredComponents = []
+    /** @type {string} */
+    let componentName = ''
 
-    return utils.defineTemplateBodyVisitor(
-      context,
-      {
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        /** @param {ObjectExpression} obj */
+        onVueObjectEnter(obj) {
+          const nameProperty = obj.properties.find(
+            /**
+             * @param {ESNode} p
+             * @returns {p is (Property & { key: Identifier & {name: 'name'}, value: ObjectExpression })}
+             */
+            (p) => p.key.name === 'name'
+          )
+
+          if (nameProperty) {
+            componentName = nameProperty.value.value
+          }
+        }
+      }),
+      utils.defineTemplateBodyVisitor(context, {
         /** @param {VElement} node */
         VElement(node) {
           if (
@@ -156,6 +178,11 @@ module.exports = {
               )
                 return false
 
+              // Check recursive components if they are ignored
+              if (ignoreRecursive) {
+                return kebabCaseName !== casing.kebabCase(componentName)
+              }
+
               // Component registered as `foo-bar` cannot be used as `FooBar`
               if (
                 casing.isPascalCase(name) &&
@@ -178,7 +205,7 @@ module.exports = {
               })
             )
         }
-      },
+      }),
       utils.executeOnVue(context, (obj) => {
         registeredComponents.push(...utils.getRegisteredComponents(obj))
       })

tests/lib/rules/no-unregistered-components.js

@@ -393,6 +393,96 @@ tester.run('no-unregistered-components', rule, {
         }
         </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      options: [
+        {
+          ignoreRecursive: true
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom-component />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      options: [
+        {
+          ignoreRecursive: true
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      options: [
+        {
+          ignoreRecursive: true
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="CustomComponent" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      options: [
+        {
+          ignoreRecursive: true
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      options: [
+        {
+          ignoreRecursive: true
+        }
+      ]
     }
   ],
   invalid: [
@@ -583,6 +673,106 @@ tester.run('no-unregistered-components', rule, {
           line: 3
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "CustomComponent" component has been used but not registered.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom-component />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "custom-component" component has been used but not registered.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "CustomComponent" component has been used but not registered.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="CustomComponent" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "CustomComponent" component has been used but not registered.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "CustomComponent" component has been used but not registered.',
+          line: 3
+        }
+      ]
     }
   ]
 })