Fix: Add registeredComponentsOnly option to component-name-in-template-casing rule

[ota-meshi]

This PR makes the following changes to component-name-in-template-casing rule.

• Add registeredComponentsOnly option.
• Change the default for registeredComponentsOnly options to true.
• Add globalRegisteredComponents option.
• Add globalRegisteredComponentPatterns option.
• Changed to be able to set regexp for ignores option.

The feature of each additional option is as follows.

• registeredComponentsOnly ... If true, only registered components (in PascalCase) are checked. If false, check all.
  default true
• globalRegisteredComponents (string[]) ... (Only available when registeredComponentsOnly is true) The name of globally registered components.
• globalRegisteredComponentPatterns (string[]) ... (Only available when registeredComponentsOnly is true) The pattern of the names of globally registered components.

---

https://vuejs.org/v2/guide/components-registration.html#Name-Casing

Since the casing of the globally registered component is unknown, we made an option to check only the local registered components that are explicitly used.
Also, I changed this option to work by default.

This fixes the problem pointed out below.

• ⭐️New: Add vue/component-name-in-template-casing #397 (comment)
• vue/component-name-in-template-casing transforms <b-button> to <BButton>. #710

Fixed #710 #705

[fxxkscript]

Now, if i use this option in single file component, it will change component name in template but not in js. Will this PR fix this issue?

<template>
<ComponentA> // this changes
</template>
<script>
var ComponentB = {
  components: {
    // this is a bug, it did not change this key
    'componentA': ComponentA
  },
}
<script>

#736

[ota-meshi]

@fxxkscript Hi.

If you have the following .vue file and you do not want to convert the casing of the elements in the template, I think that issue will be solved.

<template>
<componentA>
</template>
<script>
// @vue/component
var ComponentB = {
  components: {
    'componentA': ComponentA
  },
}
</script>

[michalsnik]

Good job @ota-meshi I like the idea with registeredComponentsOnly option.

I also have a question though, what do you think about simplifying the API a little bit? That is, having only these two:

• ignores
• registeredComponentsOnly

Isn't globalRegisteredComponents and ignores kinda the same? If we registered something globally and want to ignore it, we could just put it there as till now. With one update though - we could allow using regex inside, to support Vuetify case etc.

Then registeredComponentsOnly would work exactly as you wrote - ignoring all components, but those explicitly registered. It would however still support ignores array :)

[ota-meshi]

@michalsnik I think that your proposal is simple and good!

I will remove the globalRegisteredComponents option and allow the regexp in ignores option.

[ota-meshi]

I updated it. Please check again.

[michalsnik]

Awesome @ota-meshi Good job :) I left only two suggestions.

[michalsnik]

What do you think about adding comment above for a reference with example string that it describes? Or even better, write unit test for each REGEX? From my experience unit tests serve the best documentation for regular expressions :)

[ota-meshi]

@michalsnik
Thank you for review! I added test cases.

[michalsnik]

Well done @ota-meshi