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

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
   }
@@ -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,

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-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."]
     }
   ]
 })

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

@@ -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',