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"]