diff --git a/lib/rules/html-no-self-closing.js b/lib/rules/html-no-self-closing.js
index 6378686e6..02e74b505 100644
--- a/lib/rules/html-no-self-closing.js
+++ b/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
}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 2cf39ddc4..76dcf3145 100644
--- a/lib/utils/index.js
+++ b/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
},
/**
diff --git a/lib/utils/svg-elements.json b/lib/utils/svg-elements.json
deleted file mode 100644
index aca5e7b67..000000000
--- a/lib/utils/svg-elements.json
+++ /dev/null
@@ -1 +0,0 @@
-["svg","animate","circle","clippath","cursor","defs","desc","ellipse","filter","font-face","foreignObject","g","glyph","image","line","marker","mask","missing-glyph","path","pattern","polygon","polyline","rect","switch","symbol","text","textpath","tspan","use","view"]