Fix #580 - Fix false positives regarding components inside SVGs (#645)

* 580 - don't ignore custom components inside SVGs

* 580 - Add more cases

* 580 - Detect components inside SVGs and don't treat known SVG elements as components

Author: michalsnik

lib/rules/component-name-in-template-casing.js

@@ -61,7 +61,11 @@ module.exports = {
           return
         }
 
-        if (!utils.isHtmlElementNode(node) || utils.isHtmlWellKnownElementName(node.rawName)) {
+        if (
+          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+          utils.isHtmlWellKnownElementName(node.rawName) ||
+          utils.isSvgWellKnownElementName(node.rawName)
+        ) {
           return
         }
 

lib/rules/no-unused-components.js

@@ -37,28 +37,34 @@ module.exports = {
   create (context) {
     const options = context.options[0] || {}
     const ignoreWhenBindingPresent = options.ignoreWhenBindingPresent !== undefined ? options.ignoreWhenBindingPresent : true
-    const usedComponents = []
+    const usedComponents = new Set()
     let registeredComponents = []
     let ignoreReporting = false
     let templateLocation
 
     return utils.defineTemplateBodyVisitor(context, {
       VElement (node) {
-        if (utils.isHtmlElementNode(node) && !utils.isHtmlWellKnownElementName(node.rawName)) {
-          usedComponents.push(node.rawName)
+        if (
+          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+          utils.isHtmlWellKnownElementName(node.rawName) ||
+          utils.isSvgWellKnownElementName(node.rawName)
+        ) {
+          return
         }
+
+        usedComponents.add(node.rawName)
       },
       "VAttribute[directive=true][key.name='bind'][key.argument='is']" (node) {
         if (node.value.type !== 'VExpressionContainer') return
 
         if (node.value.expression.type === 'Literal') {
-          usedComponents.push(node.value.expression.value)
+          usedComponents.add(node.value.expression.value)
         } else if (ignoreWhenBindingPresent) {
           ignoreReporting = true
         }
       },
       "VAttribute[directive=false][key.name='is']" (node) {
-        usedComponents.push(node.value.value)
+        usedComponents.add(node.value.value)
       },
       "VElement[name='template']" (rootNode) {
         templateLocation = templateLocation || rootNode.loc.start
@@ -77,13 +83,13 @@ module.exports = {
             // like "theComponent", "The-component" etc.
             // but except snake_case
             if (casing.pascalCase(name) === name || casing.camelCase(name) === name) {
-              return !usedComponents.some(n => {
+              return ![...usedComponents].some(n => {
                 return n.indexOf('_') === -1 && (name === casing.pascalCase(n) || casing.camelCase(n) === name)
               })
             } else {
               // In any other case the used component name must exactly match
               // the registered name
-              return usedComponents.indexOf(name) === -1
+              return !usedComponents.has(name)
             }
           })
           .forEach(({ node, name }) => context.report({

lib/utils/index.js

@@ -10,6 +10,7 @@
 // ------------------------------------------------------------------------------
 
 const HTML_ELEMENT_NAMES = new Set(require('./html-elements.json'))
+const SVG_ELEMENT_NAMES = new Set(require('./svg-elements.json'))
 const VOID_ELEMENT_NAMES = new Set(require('./void-elements.json'))
 const assert = require('assert')
 const vueEslintParser = require('vue-eslint-parser')
@@ -283,6 +284,16 @@ module.exports = {
     return HTML_ELEMENT_NAMES.has(name)
   },
 
+  /**
+   * Check whether the given name is an well-known SVG element or not.
+   * @param {string} name The name to check.
+   * @returns {boolean} `true` if the name is an well-known SVG element name.
+   */
+  isSvgWellKnownElementName (name) {
+    assert(typeof name === 'string')
+    return SVG_ELEMENT_NAMES.has(name)
+  },
+
   /**
    * Check whether the given name is a void element name or not.
    * @param {string} name The name to check.

lib/utils/svg-elements.json

@@ -0,0 +1 @@
+["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"]

tests/lib/rules/component-name-in-template-casing.js

@@ -29,6 +29,9 @@ tester.run('component-name-in-template-casing', rule, {
     '<template><div><slot></slot></div></template>',
     '<template><h1>Title</h1></template>',
     '<template><h1 :is="customTitle">Title</h1></template>',
+    '<template><svg><TheComponent /></svg></template>',
+    '<template><text /></template>',
+    '<template><circle cx="0" cy="0" :d="radius"></template>',
 
     // kebab-case
     {
@@ -65,6 +68,23 @@ tester.run('component-name-in-template-casing', rule, {
     '<template><the-component><!--test</the-component></template>'
   ],
   invalid: [
+    {
+      code: `
+      <template>
+        <svg>
+          <the-component />
+        </svg>
+      </template>
+      `,
+      output: `
+      <template>
+        <svg>
+          <TheComponent />
+        </svg>
+      </template>
+      `,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
     {
       code: `
       <template>

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

@@ -52,6 +52,30 @@ tester.run('no-unused-components', rule, {
         }
       </script>`
     },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <svg>
+          <TheCircle />
+        </svg>
+      </template>
+      <script>
+        export default {
+          components: {
+            TheCircle
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <circle cx="0" cy="0" :d="radius" />
+      </template>
+      <script>
+        export default {}
+      </script>`
+    },
     {
       filename: 'test.vue',
       code: `<template>