fix(no-setup-props-reactivity-loss): false negative for conditional expressions

docs/rules/no-setup-props-reactivity-loss.md

@@ -5,13 +5,14 @@ title: vue/no-setup-props-reactivity-loss
 description: disallow usages that lose the reactivity of `props` passed to `setup`
 since: v9.17.0
 ---
+
 # vue/no-setup-props-reactivity-loss
 
 > disallow usages that lose the reactivity of `props` passed to `setup`
 
 ## :book: Rule Details
 
-This rule reports the destructuring or member expression of `props` passed to `setup` causing the value to lose reactivity.
+This rule reports the destructuring, member expression or conditional expression of `props` passed to `setup` causing the value to lose reactivity.
 
 <eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
 
@@ -20,9 +21,12 @@ This rule reports the destructuring or member expression of `props` passed to `s
 export default {
   /* ✓ GOOD */
   setup(props) {
-    watch(() => props.count, () => {
-      console.log(props.count)
-    })
+    watch(
+      () => props.count,
+      () => {
+        console.log(props.count)
+      }
+    )
 
     return () => {
       return h('div', props.count)
@@ -43,9 +47,13 @@ Destructuring the `props` passed to `setup` will cause the value to lose reactiv
 export default {
   /* ✗ BAD */
   setup({ count }) {
-    watch(() => count, () => { // not going to detect changes
-      console.log(count)
-    })
+    watch(
+      () => count,
+      () => {
+        // not going to detect changes
+        console.log(count)
+      }
+    )
 
     return () => {
       return h('div', count) // not going to update
@@ -68,11 +76,14 @@ export default {
     /* ✗ BAD */
     const { count } = props
 
-    watch(() => props.count, () => {
-      /* ✓ GOOD */
-      const { count } = props
-      console.log(count)
-    })
+    watch(
+      () => props.count,
+      () => {
+        /* ✓ GOOD */
+        const { count } = props
+        console.log(count)
+      }
+    )
 
     return () => {
       /* ✓ GOOD */
@@ -86,6 +97,38 @@ export default {
 
 </eslint-code-block>
 
+Also, using a conditonal expression in root scope of `setup()` should error, but ok inside callbacks or returned render functions:
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  setup(props) {
+    /* ✗ BAD */
+    const test = props.foo ? true : false
+
+    watch(
+      () => props.foo,
+      () => {
+        /* ✓ GOOD */
+        const test = props.foo ? true : false
+        console.log(test)
+      }
+    )
+
+    return () => {
+      /* ✓ GOOD */
+      const test = props.foo ? true : false
+      return h('div', test)
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
 ## :wrench: Options
 
 Nothing.

lib/rules/no-setup-props-reactivity-loss.js

@@ -78,7 +78,8 @@ module.exports = {
       if (
         left.type !== 'ArrayPattern' &&
         left.type !== 'ObjectPattern' &&
-        rightNode.type !== 'MemberExpression'
+        rightNode.type !== 'MemberExpression' &&
+        rightNode.type !== 'ConditionalExpression'
       ) {
         return
       }
@@ -91,6 +92,14 @@ module.exports = {
       if (rightId.type === 'Identifier' && propsReferences.refs.has(rightId)) {
         report(left, 'getProperty', propsReferences.scopeName)
       }
+      if (
+        rightId.type === 'ConditionalExpression' &&
+        (isPropsMemberAccessed(rightId.test, propsReferences) ||
+          isPropsMemberAccessed(rightId.consequent, propsReferences) ||
+          isPropsMemberAccessed(rightId.alternate, propsReferences))
+      ) {
+        report(right, 'getProperty', propsReferences.scopeName)
+      }
     }
 
     /**

tests/lib/rules/no-setup-props-reactivity-loss.js

@@ -113,6 +113,28 @@ tester.run('no-setup-props-reactivity-loss', rule, {
       </script>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          watch(
+            () => props.count,
+            () => {
+              const test = props.count ? true : false
+              console.log(test)
+            }
+          )
+
+          return () => {
+            return h('div', props.count ? true : false)
+          }
+        }
+      }
+      </script>
+      `
+    },
     {
       filename: 'test.vue',
       code: `
@@ -680,6 +702,21 @@ tester.run('no-setup-props-reactivity-loss', rule, {
           line: 6
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const buildCounter = props.count ? 1 : undefined
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
     }
   ]
 })