feat(no-v-text-v-html-on-component): add ignore namespace option

Author: waynzh

lib/rules/no-v-text-v-html-on-component.js

@@ -26,6 +26,9 @@ module.exports = {
               type: 'string'
             },
             uniqueItems: true
+          },
+          ignoreElementNamespaces: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -41,6 +44,8 @@ module.exports = {
     const options = context.options[0] || {}
     /** @type {Set<string>} */
     const allow = new Set(options.allow)
+    /** @type {boolean} */
+    const ignoreElementNamespaces = options.ignoreElementNamespaces === true
 
     /**
      * Check whether the given node is an allowed component or not.
@@ -56,13 +61,29 @@ module.exports = {
       )
     }
 
+    /** @param {VElement} element */
+    function isCustomComponent(element) {
+      if (ignoreElementNamespaces) {
+        return (
+          (!utils.isHtmlWellKnownElementName(element.rawName) &&
+            !utils.isSvgWellKnownElementName(element.rawName) &&
+            !utils.isMathWellKnownElementName(element.rawName)) ||
+          utils.hasAttribute(element, 'is') ||
+          utils.hasDirective(element, 'bind', 'is') ||
+          utils.hasDirective(element, 'is')
+        )
+      }
+
+      return utils.isCustomComponent(element)
+    }
+
     /**
      * Verify for v-text and v-html directive
      * @param {VDirective} node
      */
     function verify(node) {
       const element = node.parent.parent
-      if (utils.isCustomComponent(element) && !isAllowedComponent(element)) {
+      if (isCustomComponent(element) && !isAllowedComponent(element)) {
         context.report({
           node,
           loc: node.loc,

tests/lib/rules/no-v-text-v-html-on-component.js

@@ -59,6 +59,26 @@ tester.run('no-v-text-v-html-on-component', rule, {
       </template>
       `,
       options: [{ allow: ['RouterLink', 'nuxt-link'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <svg><g v-text="content" /></svg>
+        <math><mspace v-text="content" /></math>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <h1 v-html="content" />
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: true }]
     }
   ],
   invalid: [
@@ -167,6 +187,28 @@ tester.run('no-v-text-v-html-on-component', rule, {
           column: 22
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: false }],
+      errors: [
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 3,
+          column: 12
+        },
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 4,
+          column: 13
+        }
+      ]
     }
   ]
 })