Add namespace check of svg & mathML instead of tag names (#120)

* Add namespace check of svg & mathML instead of checking tag names

* isHtmlElementNode -> isKnownHtmlElementNode
add namespace check for html

Author: armano2

lib/rules/html-no-self-closing.js

@@ -24,7 +24,7 @@ const utils = require('../utils')
 function create (context) {
   utils.registerTemplateBodyVisitor(context, {
     'VElement' (node) {
-      if (utils.isSvgElementName(node.name)) {
+      if (utils.isSvgElementNode(node)) {
         return
       }
 

lib/utils/index.js

@@ -10,9 +10,9 @@
 // ------------------------------------------------------------------------------
 
 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')
 
 // ------------------------------------------------------------------------------
 // Exports
@@ -38,24 +38,6 @@ module.exports = {
     context.parserServices.registerTemplateBodyVisitor(context, visitor)
   },
 
-  /**
-   * Get the token store of template body from parser services.
-   * If the parser service of `vue-eslint-parser` was not found,
-   * this generates a warning.
-   *
-   * @returns {void}
-   */
-  getTemplateBodyTokenStore () {
-    if (context.parserServices.getTemplateBodyTokenStore == null) {
-      context.report({
-        loc: { line: 1, column: 0 },
-        message: 'Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error'
-      })
-      return context.getSourceCode()
-    }
-    return context.parserServices.getTemplateBodyTokenStore()
-  },
-
   /**
    * Check whether the given node is the root element or not.
    * @param {ASTNode} node The element node to check.
@@ -200,34 +182,44 @@ module.exports = {
   isCustomComponent (node) {
     assert(node && node.type === 'VElement')
 
-    const name = node.name
     return (
-            !(this.isHtmlElementName(name) || this.isSvgElementName(name)) ||
-            this.hasAttribute(node, 'is') ||
-            this.hasDirective(node, 'bind', 'is')
+      !(this.isKnownHtmlElementNode(node) || this.isSvgElementNode(node) || this.isMathMLElementNode(node)) ||
+      this.hasAttribute(node, 'is') ||
+      this.hasDirective(node, 'bind', 'is')
     )
   },
 
   /**
-   * Check whether the given name is a HTML element name or not.
-   * @param {string} name The name to check.
-   * @returns {boolean} `true` if the name is a HTML element name.
+   * Check whether the given node is a HTML element or not.
+   * @param {ASTNode} node The node to check.
+   * @returns {boolean} `true` if the node is a HTML element.
    */
-  isHtmlElementName (name) {
-    assert(typeof name === 'string')
+  isKnownHtmlElementNode (node) {
+    assert(node && node.type === 'VElement')
 
-    return HTML_ELEMENT_NAMES.has(name.toLowerCase())
+    return node.namespace === vueEslintParser.AST.NS.HTML && HTML_ELEMENT_NAMES.has(node.name.toLowerCase())
   },
 
   /**
-   * Check whether the given name is a SVG element name or not.
-   * @param {string} name The name to check.
-   * @returns {boolean} `true` if the name is a SVG element name.
+   * Check whether the given node is a SVG element or not.
+   * @param {ASTNode} node The node to check.
+   * @returns {boolean} `true` if the name is a SVG element.
    */
-  isSvgElementName (name) {
-    assert(typeof name === 'string')
+  isSvgElementNode (node) {
+    assert(node && node.type === 'VElement')
+
+    return node.namespace === vueEslintParser.AST.NS.SVG
+  },
+
+  /**
+   * Check whether the given name is a MathML element or not.
+   * @param {ASTNode} name The node to check.
+   * @returns {boolean} `true` if the node is a MathML element.
+   */
+  isMathMLElementNode (node) {
+    assert(node && node.type === 'VElement')
 
-    return SVG_ELEMENT_NAMES.has(name.toLowerCase())
+    return node.namespace === vueEslintParser.AST.NS.MathML
   },
 
   /**