Fix false positives when using <svg> in vue/valid-v-slot and vue/valid-v-model rule

Author: ota-meshi

lib/rules/require-toggle-inside-transition.js

@@ -10,26 +10,6 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-/**
- * Check whether the given node is an well-known element or not.
- * @param {VElement} node The element node to check.
- * @returns {boolean} `true` if the name is an well-known element name.
- */
-function isWellKnownElement(node) {
-  if (
-    (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-    utils.isHtmlWellKnownElementName(node.rawName) ||
-    utils.isSvgWellKnownElementName(node.rawName)
-  ) {
-    return true
-  }
-  return false
-}
-
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -61,9 +41,6 @@ module.exports = {
       if (utils.isCustomComponent(element)) {
         return
       }
-      if (!isWellKnownElement(element)) {
-        return
-      }
       if (
         !utils.hasDirective(element, 'if') &&
         !utils.hasDirective(element, 'show')

lib/rules/valid-v-bind-sync.js

@@ -20,11 +20,7 @@ const utils = require('../utils')
  * @returns {boolean} `true` if the node is valid.
  */
 function isValidElement(node) {
-  if (
-    (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-    utils.isHtmlWellKnownElementName(node.rawName) ||
-    utils.isSvgWellKnownElementName(node.rawName)
-  ) {
+  if (!utils.isCustomComponent(node)) {
     // non Vue-component
     return false
   }

lib/utils/index.js

@@ -590,6 +590,8 @@ module.exports = {
     return (
       (this.isHtmlElementNode(node) &&
         !this.isHtmlWellKnownElementName(node.rawName)) ||
+      (this.isSvgElementNode(node) &&
+        !this.isSvgWellKnownElementName(node.rawName)) ||
       this.hasAttribute(node, 'is') ||
       this.hasDirective(node, 'bind', 'is') ||
       this.hasDirective(node, 'is')

tests/lib/rules/valid-v-model.js

@@ -151,6 +151,15 @@ tester.run('valid-v-model', rule, {
       code:
         '<template><MyComponent v-model.modifier.modifierTwo="a"></MyComponent></template>'
     },
+    // svg
+    {
+      code: `
+      <template>
+        <svg>
+          <MyComponent v-model="slotProps"></MyComponent>
+        </svg>
+      </template>`
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',

tests/lib/rules/valid-v-slot.js

@@ -107,6 +107,17 @@ tester.run('valid-v-slot', rule, {
       `,
       options: [{ allowModifiers: true }]
     },
+    // svg
+    {
+      code: `
+      <template>
+        <svg>
+          <MyComponent v-slot="slotProps">
+            <MyChildComponent :thing="slotProps.thing" />
+          </MyComponent>
+        </svg>
+      </template>`
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',