Support MathML elements

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

@@ -122,9 +122,12 @@ module.exports = {
       }
 
       if (
-        (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+        (!utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)) ||
         utils.isHtmlWellKnownElementName(node.rawName) ||
         utils.isSvgWellKnownElementName(node.rawName) ||
+        utils.isMathWellKnownElementName(node.rawName) ||
         utils.isVueBuiltInElementName(node.rawName)
       ) {
         return false

lib/rules/html-self-closing.js

@@ -63,7 +63,7 @@ function getElementType(node) {
   if (utils.isSvgElementNode(node)) {
     return 'SVG'
   }
-  if (utils.isMathMLElementNode(node)) {
+  if (utils.isMathElementNode(node)) {
     return 'MATH'
   }
   return 'UNKNOWN'

lib/rules/no-deprecated-html-element-is.js

@@ -27,7 +27,8 @@ module.exports = {
     function isValidElement(node) {
       return (
         !utils.isHtmlWellKnownElementName(node.rawName) &&
-        !utils.isSvgWellKnownElementName(node.rawName)
+        !utils.isSvgWellKnownElementName(node.rawName) &&
+        !utils.isMathWellKnownElementName(node.rawName)
       )
     }
     return utils.defineTemplateBodyVisitor(context, {

lib/rules/no-undef-components.js

@@ -149,6 +149,7 @@ module.exports = {
       if (
         utils.isHtmlWellKnownElementName(rawName) ||
         utils.isSvgWellKnownElementName(rawName) ||
+        utils.isMathWellKnownElementName(rawName) ||
         utils.isBuiltInComponentName(kebabCaseName)
       ) {
         return false
@@ -177,7 +178,11 @@ module.exports = {
     /** @type {TemplateListener} */
     const templateBodyVisitor = {
       VElement(node) {
-        if (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) {
+        if (
+          !utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)
+        ) {
           return
         }
         verifyName(node.rawName, node.startTag)

lib/rules/no-unused-components.js

@@ -52,9 +52,12 @@ module.exports = {
         /** @param {VElement} node */
         VElement(node) {
           if (
-            (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+            (!utils.isHtmlElementNode(node) &&
+              !utils.isSvgElementNode(node) &&
+              !utils.isMathElementNode(node)) ||
             utils.isHtmlWellKnownElementName(node.rawName) ||
-            utils.isSvgWellKnownElementName(node.rawName)
+            utils.isSvgWellKnownElementName(node.rawName) ||
+            utils.isMathWellKnownElementName(node.rawName)
           ) {
             return
           }

lib/rules/script-setup-uses-vars.js

@@ -94,10 +94,13 @@ module.exports = {
         },
         VElement(node) {
           if (
-            (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+            (!utils.isHtmlElementNode(node) &&
+              !utils.isSvgElementNode(node) &&
+              !utils.isMathElementNode(node)) ||
             (node.rawName === node.name &&
               (utils.isHtmlWellKnownElementName(node.rawName) ||
-                utils.isSvgWellKnownElementName(node.rawName))) ||
+                utils.isSvgWellKnownElementName(node.rawName) ||
+                utils.isMathWellKnownElementName(node.rawName))) ||
             utils.isBuiltInComponentName(node.rawName)
           ) {
             return

lib/utils/index.js

@@ -51,6 +51,7 @@ const { getScope } = require('./scope')
 
 const HTML_ELEMENT_NAMES = new Set(require('./html-elements.json'))
 const SVG_ELEMENT_NAMES = new Set(require('./svg-elements.json'))
+const MATH_ELEMENT_NAMES = new Set(require('./math-elements.json'))
 const VOID_ELEMENT_NAMES = new Set(require('./void-elements.json'))
 const VUE2_BUILTIN_COMPONENT_NAMES = new Set(
   require('./vue2-builtin-components')
@@ -948,6 +949,8 @@ module.exports = {
         !this.isHtmlWellKnownElementName(node.rawName)) ||
       (this.isSvgElementNode(node) &&
         !this.isSvgWellKnownElementName(node.rawName)) ||
+      (this.isMathElementNode(node) &&
+        !this.isMathWellKnownElementName(node.rawName)) ||
       hasAttribute(node, 'is') ||
       hasDirective(node, 'bind', 'is') ||
       hasDirective(node, 'is')
@@ -977,7 +980,7 @@ module.exports = {
    * @param {VElement} node The node to check.
    * @returns {boolean} `true` if the node is a MathML element.
    */
-  isMathMLElementNode(node) {
+  isMathElementNode(node) {
     return node.namespace === NS.MathML
   },
 
@@ -999,6 +1002,15 @@ module.exports = {
     return SVG_ELEMENT_NAMES.has(name)
   },
 
+  /**
+   * Check whether the given name is a well-known MathML element or not.
+   * @param {string} name The name to check.
+   * @returns {boolean} `true` if the name is a well-known MathML element name.
+   */
+  isMathWellKnownElementName(name) {
+    return MATH_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/math-elements.json

@@ -0,0 +1,34 @@
+[
+  "math",
+  "maction",
+  "annotation",
+  "annotation-xml",
+  "menclose",
+  "merror",
+  "mfenced",
+  "mfrac",
+  "mi",
+  "mmultiscripts",
+  "mn",
+  "mo",
+  "mover",
+  "mpadded",
+  "mphantom",
+  "mprescripts",
+  "mroot",
+  "mrow",
+  "ms",
+  "semantics",
+  "mspace",
+  "msqrt",
+  "mstyle",
+  "msub",
+  "msup",
+  "msubsup",
+  "mtable",
+  "mtd",
+  "mtext",
+  "mtr",
+  "munder",
+  "munderover"
+]