From 3f2b669799a2f53b1c7145fe13a860ee1c8f15d0 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 4 Dec 2020 13:10:06 +0900
Subject: [PATCH] Fix false positives when using <svg> in `vue/valid-v-slot`
 and `vue/valid-v-model` rule (#1367)

---
 lib/rules/require-toggle-inside-transition.js | 23 ------------------
 lib/rules/valid-v-bind-sync.js                | 24 ++-----------------
 lib/utils/index.js                            |  2 ++
 tests/lib/rules/valid-v-bind-sync.js          | 12 ++++++++++
 tests/lib/rules/valid-v-model.js              |  9 +++++++
 tests/lib/rules/valid-v-slot.js               | 11 +++++++++
 6 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index 93a074f2b..12b77d741 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/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')
diff --git a/lib/rules/valid-v-bind-sync.js b/lib/rules/valid-v-bind-sync.js
index d6ab658e2..945ab0a77 100644
--- a/lib/rules/valid-v-bind-sync.js
+++ b/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
   }
@@ -82,22 +78,6 @@ function maybeNullObjectMemberExpression(node) {
   return false
 }
 
-function isValidIs(node) {
-  const { attributes } = node
-  const isAttribute = attributes.some((attr) => {
-    // check for `VAttribute`
-    if (attr.type === 'VAttribute') {
-      // check for `is` attribute
-      if (attr.key.type === 'VIdentifier' && attr.key.name === 'is') return true
-
-      // check for `:is` `bind` attribute
-      if (attr.key.type === 'VDirectiveKey' && attr.key.argument.name === 'is')
-        return true
-    }
-  })
-  return isAttribute
-}
-
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -136,7 +116,7 @@ module.exports = {
         const element = node.parent.parent
         const name = element.name
 
-        if (!isValidElement(element) && !isValidIs(node.parent)) {
+        if (!isValidElement(element)) {
           context.report({
             node,
             loc: node.loc,
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 24b9a1bbf..793d34403 100644
--- a/lib/utils/index.js
+++ b/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')
diff --git a/tests/lib/rules/valid-v-bind-sync.js b/tests/lib/rules/valid-v-bind-sync.js
index 6ff2c462d..763ae582d 100644
--- a/tests/lib/rules/valid-v-bind-sync.js
+++ b/tests/lib/rules/valid-v-bind-sync.js
@@ -428,6 +428,18 @@ tester.run('valid-v-bind-sync', rule, {
       filename: 'test.vue',
       code: '<template><MyComponent :foo.sync="(a?.b).c.d" /></template>',
       errors: ["'.sync' modifier has potential null object property access."]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><tr v-on:is="myRow" :some-prop.sync="somePropValue"></template>',
+      errors: ["'.sync' modifiers aren't supported on <tr> non Vue-components."]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><tr v-bind="myRow" :some-prop.sync="somePropValue"></template>',
+      errors: ["'.sync' modifiers aren't supported on <tr> non Vue-components."]
     }
   ]
 })
diff --git a/tests/lib/rules/valid-v-model.js b/tests/lib/rules/valid-v-model.js
index 2369fe4df..8c3e384a3 100644
--- a/tests/lib/rules/valid-v-model.js
+++ b/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',
diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
index dfcb0eb75..99dc4b39b 100644
--- a/tests/lib/rules/valid-v-slot.js
+++ b/tests/lib/rules/valid-v-slot.js
@@ -131,6 +131,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',