Fix multiple reporting of same warnings in vue/no-unregistered-component

[enzo360]

Hi 👋 First, thank you for your work on this project 🙏
It is my first open-source PR, I hope it is the right way to do.

Issue

In components' templates using multiple <template> to target named slots, I noticed the vue/no-unregistered-component linter warnings were repeated as many times as there are <template>s, for the same unregistered components.
It is not very convenient, especially for large projects ongoing refactoring.

Example

<template>
  <TableView>

    <template #name>
      {{ tableViewName }}
    </template>

    <template #footer>
      <TableViewFooter>

        <template #action>
          <CustomButton />
        </template>

      </TableViewFooter>
    </template>

  </TableView>
</template>

Would display these errors:

warning: The "TableView" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:2:3:
  1 | <template>
> 2 |   <TableView>
    |   ^
  3 |     <template #name>
  4 |       {{ tableViewName }}
  5 |     </template>


warning: The "TableView" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:2:3:
  1 | <template>
> 2 |   <TableView>
    |   ^
  3 |     <template #name>
  4 |       {{ tableViewName }}
  5 |     </template>


warning: The "TableView" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:2:3:
  1 | <template>
> 2 |   <TableView>
    |   ^
  3 |     <template #name>
  4 |       {{ tableViewName }}
  5 |     </template>


warning: The "TableView" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:2:3:
  1 | <template>
> 2 |   <TableView>
    |   ^
  3 |     <template #name>
  4 |       {{ tableViewName }}
  5 |     </template>


warning: The "TableViewFooter" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:7:7:
   5 |     </template>
   6 |     <template #footer>
>  7 |       <TableViewFooter>
     |       ^
   8 |         <template #action>
   9 |           <CustomButton />
  10 |         </template>


warning: The "TableViewFooter" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:7:7:
   5 |     </template>
   6 |     <template #footer>
>  7 |       <TableViewFooter>
     |       ^
   8 |         <template #action>
   9 |           <CustomButton />
  10 |         </template>


warning: The "TableViewFooter" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:7:7:
   5 |     </template>
   6 |     <template #footer>
>  7 |       <TableViewFooter>
     |       ^
   8 |         <template #action>
   9 |           <CustomButton />
  10 |         </template>


warning: The "CustomButton" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:9:11:
   7 |       <TableViewFooter>
   8 |         <template #action>
>  9 |           <CustomButton />
     |           ^
  10 |         </template>
  11 |       </TableViewFooter>
  12 |     </template>


warning: The "CustomButton" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:9:11:
   7 |       <TableViewFooter>
   8 |         <template #action>
>  9 |           <CustomButton />
     |           ^
  10 |         </template>
  11 |       </TableViewFooter>
  12 |     </template>


warning: The "CustomButton" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:9:11:
   7 |       <TableViewFooter>
   8 |         <template #action>
>  9 |           <CustomButton />
     |           ^
  10 |         </template>
  11 |       </TableViewFooter>
  12 |     </template>


10 warnings found.

Potential fix

Quick fix I could find from the existing code is to only use the root template to report the errors.

Resulting in the following warnings:

warning: The "TableView" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:2:3:
  1 | <template>
> 2 |   <TableView>
    |   ^
  3 |     <template #name>
  4 |       {{ tableViewName }}
  5 |     </template>


warning: The "TableViewFooter" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:7:7:
   5 |     </template>
   6 |     <template #footer>
>  7 |       <TableViewFooter>
     |       ^
   8 |         <template #action>
   9 |           <CustomButton />
  10 |         </template>


warning: The "CustomButton" component has been used but not registered (vue/no-unregistered-components) at src/components/HelloWorld.vue:9:11:
   7 |       <TableViewFooter>
   8 |         <template #action>
>  9 |           <CustomButton />
     |           ^
  10 |         </template>
  11 |       </TableViewFooter>
  12 |     </template>


3 warnings found.

Changes

• Target <template> whose parent is of type VDocumentFragment (root template) to report the unregisteredComponents.
• Add tests using named template to prevent potential regressions.

[ota-meshi]

Thank you for this PR!
Could you fix the linting errors?

[enzo360]

@ota-meshi Done! Sorry I forgot to run the linter 😅 Thanks for the review.

[ota-meshi]

LGTM! Thank you!