False positives with inline svg content

[ThomasR]

Tell us about your environment

• ESLint Version: 5.6.0
• eslint-plugin-vue Version: 5.0.0-beta3
• Node Version: 10

Please show your full configuration:

{
  root: true,
  extends: ['plugin:vue/recommended'],
  rules: {
    'vue/component-name-in-template-casing': 'error'
  }
}

What did you do? Please include the actual source code causing the issue.
I'm writing an app that makes use of SVG components. Apparently this does not work well with eslint-plugin-vue, even though the app works just fine.

The following is a minimal example to demonstrate the issues:

App.vue:

<template>
  <svg>
    <my-content />
  </svg>
</template>

<script>
import MyContent from './MyContent';

export default {
  components: {
    MyContent
  }
};
</script>

MyContent.vue:

<template>
  <text y="20">
    Hello, World!
  </text>
</template>

What did you expect to happen?
There should be one error

…/src/App.vue
  3:5  error  Component name "my-content" is not PascalCase  vue/component-name-in-template-casing

What actually happened? Please include the actual, raw output from ESLint.

• the expected error above is not shown
• two errors are shown, both are false positives

…/src/App.vue
  12:5  error  The "MyContent" component has been registered but not used  vue/no-unused-components

…/src/MyContent.vue
  2:3  error  Component name "text" is not PascalCase  vue/component-name-in-template-casing

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

[michalsnik]

Hey! Thank you for posting the issue!

The first error is to be expected as it’s the custom component. You can however change the casing to „kebab-case” if you want. The second error on the other hand should not happen and I’m grateful you have spotted it. We should extend the list of components to catch those possible inside SVGs.
You can however add it yourself temporarily to the „ignores” list. Check out the rule documentation to see how :)

[ThomasR]

Thanks! I'm not sure if you missed one point there: it's actually three problems

1. my-content should be MyContent in PascalCase.
2. The MyContent component is falsely reported as unused.
3. text is falsely reported as component name, but it is a well-known SVG element name.

---

1. can be fixed like this: https://github.com/ThomasR/eslint-plugin-vue/commit/df2211c282da3d294d2877428e7dcb3d6740a41d

---

Here's a fix for 2. : https://github.com/ThomasR/eslint-plugin-vue/commit/9714c42d4f4e3cd0c8b408071aa4113842889ec2

---

3. can be worked around using

"vue/component-name-in-template-casing": ["error", "PascalCase", {
    "ignores": ["a", "animate", "animateMotion", "animateTransform", "audio", "canvas", "circle", "clipPath", "defs", "desc", "discard", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "iframe", "image", "line", "linearGradient", "marker", "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "script", "set", "stop", "style", "svg", "switch", "symbol", "text", "textPath", "title", "tspan", "unknown", "use", "video", "view"]
}],

as you mentioned.

Not sure what's the cleanest way to fix it though. Since the parser does not know that the component gets injected into an SVG element, we would have to treat all SVG elements like HTML elements, that is: add all SVG elements to html-elements.json, which just feels wrong.

[michalsnik]

Alright @ThomasR I think I got it. You can take a look at #645 and let me know what do you think :)