Improve the vue/no-setup-props-destructure rule

Author: davidmyersdev

lib/rules/no-setup-props-destructure.js

@@ -23,7 +23,10 @@ module.exports = {
         'Getting a value from the `props` in root scope of `{{scopeName}}` will cause the value to lose reactivity.'
     }
   },
-  /** @param {RuleContext} context */
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   **/
   create(context) {
     /**
      * @typedef {object} ScopePropsReferences
@@ -59,13 +62,38 @@ module.exports = {
       }
 
       const rightNode = utils.skipChainExpression(right)
+
+      if (rightNode.type === 'CallExpression') {
+        const propRefs = [...propsReferences.refs.values()]
+        const isPropsMemberAccessed = propRefs.some((props) => {
+          const isPropsInCallExpression = utils.inRange(rightNode.range, props)
+
+          if (isPropsInCallExpression) {
+            const isPropMemberExpression =
+              props.parent.type === 'MemberExpression' &&
+              props.parent.object === props
+
+            if (isPropMemberExpression) {
+              return true
+            }
+          }
+
+          return false
+        })
+
+        if (isPropsMemberAccessed) {
+          return report(left, 'getProperty', propsReferences.scopeName)
+        }
+      }
+
       if (
         left.type !== 'ArrayPattern' &&
         left.type !== 'ObjectPattern' &&
         rightNode.type !== 'MemberExpression'
       ) {
         return
       }
+
       /** @type {Expression | Super} */
       let rightId = rightNode
       while (rightId.type === 'MemberExpression') {
@@ -114,6 +142,11 @@ module.exports = {
       }
       const propsReferenceIds = new Set()
       for (const reference of variable.references) {
+        // If reference is in another scope, we can't check it.
+        if (reference.from !== context.getScope()) {
+          continue
+        }
+
         if (!reference.isRead()) {
           continue
         }

tests/lib/rules/no-setup-props-destructure.js

@@ -204,6 +204,27 @@ tester.run('no-setup-props-destructure', rule, {
           line: 4
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup: (props) => {
+          const count = computed(() => props.count)
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const count = computed(() => props.count)
+      </script>
+      `
     }
   ],
   invalid: [
@@ -410,6 +431,18 @@ tester.run('no-setup-props-destructure', rule, {
         {
           messageId: 'getProperty',
           line: 7
+        },
+        {
+          messageId: 'getProperty',
+          line: 9
+        },
+        {
+          messageId: 'getProperty',
+          line: 10
+        },
+        {
+          messageId: 'getProperty',
+          line: 11
         }
       ]
     },
@@ -524,6 +557,49 @@ tester.run('no-setup-props-destructure', rule, {
           line: 5
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup: (props) => {
+          const count = ref(props.count)
+          count = fn(props.count)
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        },
+        {
+          messageId: 'getProperty',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const count = ref(props.count)
+      count = fn(props.count)
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        },
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
     }
   ]
 })