Improved vue/no-ref-as-operand rule. (#1180)

- Changed `vue/no-ref-as-operand` rule to additionally track variables generated by `computed`, `toRef`, `customRef` and `shallowRef`.
- Changed `vue/no-ref-as-operand` rule to report incorrect use of TemplateLiteral and MemberExpression.

Author: ota-meshi

Diff for: docs/rules/no-ref-as-operand.md

@@ -11,7 +11,8 @@ description: disallow use of value wrapped by `ref()` (Composition API) as an op
 
 ## :book: Rule Details
 
-This rule reports cases where a ref is used incorrectly as an operand.
+This rule reports cases where a ref is used incorrectly as an operand.  
+You must use `.value` to access the `Ref` value.
 
 <eslint-code-block :rules="{'vue/no-ref-as-operand': ['error']}">
 

Diff for: lib/rules/no-ref-as-operand.js

@@ -4,6 +4,7 @@
  */
 'use strict'
 const { ReferenceTracker, findVariable } = require('eslint-utils')
+const utils = require('../utils')
 
 module.exports = {
   meta: {
@@ -18,19 +19,23 @@ module.exports = {
     schema: [],
     messages: {
       requireDotValue:
-        'Must use `.value` to read or write the value wrapped by `ref()`.'
+        'Must use `.value` to read or write the value wrapped by `{{method}}()`.'
     }
   },
   create(context) {
     const refReferenceIds = new Map()
 
     function reportIfRefWrapped(node) {
-      if (!refReferenceIds.has(node)) {
+      const data = refReferenceIds.get(node)
+      if (!data) {
         return
       }
       context.report({
         node,
-        messageId: 'requireDotValue'
+        messageId: 'requireDotValue',
+        data: {
+          method: data.method
+        }
       })
     }
     return {
@@ -41,11 +46,23 @@ module.exports = {
             [ReferenceTracker.ESM]: true,
             ref: {
               [ReferenceTracker.CALL]: true
+            },
+            computed: {
+              [ReferenceTracker.CALL]: true
+            },
+            toRef: {
+              [ReferenceTracker.CALL]: true
+            },
+            customRef: {
+              [ReferenceTracker.CALL]: true
+            },
+            shallowRef: {
+              [ReferenceTracker.CALL]: true
             }
           }
         }
 
-        for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+        for (const { node, path } of tracker.iterateEsmReferences(traceMap)) {
           const variableDeclarator = node.parent
           if (
             !variableDeclarator ||
@@ -73,7 +90,8 @@ module.exports = {
 
             refReferenceIds.set(reference.identifier, {
               variableDeclarator,
-              variableDeclaration
+              variableDeclaration,
+              method: path[1]
             })
           }
         }
@@ -108,13 +126,13 @@ module.exports = {
           return
         }
         // Report only constants.
-        const info = refReferenceIds.get(node)
-        if (!info) {
+        const data = refReferenceIds.get(node)
+        if (!data) {
           return
         }
         if (
-          !info.variableDeclaration ||
-          info.variableDeclaration.kind !== 'const'
+          !data.variableDeclaration ||
+          data.variableDeclaration.kind !== 'const'
         ) {
           return
         }
@@ -126,6 +144,26 @@ module.exports = {
           return
         }
         reportIfRefWrapped(node)
+      },
+      // `${refValue}`
+      'TemplateLiteral>Identifier'(node) {
+        reportIfRefWrapped(node)
+      },
+      // refValue.x
+      'MemberExpression>Identifier'(node) {
+        if (node.parent.object !== node) {
+          return
+        }
+        const name = utils.getStaticPropertyName(node.parent)
+        if (
+          name === 'value' ||
+          name == null ||
+          // WritableComputedRef
+          name === 'effect'
+        ) {
+          return
+        }
+        reportIfRefWrapped(node)
       }
     }
   }

Diff for: tests/lib/rules/no-ref-as-operand.js

@@ -103,7 +103,25 @@ tester.run('no-ref-as-operand', rule, {
     import { ref } from 'vue'
     const count = ref
     count++
-    `
+    `,
+    {
+      code: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        const foo = shallowRef({})
+        foo[bar] = 123
+      </script>
+      `
+    },
+    {
+      code: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        const foo = shallowRef({})
+        const isComp = foo.effect
+      </script>
+      `
+    }
   ],
   invalid: [
     {
@@ -332,6 +350,89 @@ tester.run('no-ref-as-operand', rule, {
           line: 9
         }
       ]
+    },
+    {
+      code: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        let count = ref(0)
+        let cntcnt = computed(()=>count.value+count.value)
+
+        const state = reactive({
+          foo: 1,
+          bar: 2
+        })
+
+        const fooRef = toRef(state, 'foo')
+
+        let value = 'hello'
+        const cref = customRef((track, trigger) => {
+          return {
+            get() {
+              track()
+              return value
+            },
+            set(newValue) {
+              clearTimeout(timeout)
+              timeout = setTimeout(() => {
+                value = newValue
+                trigger()
+              }, delay)
+            }
+          }
+        })
+
+        const foo = shallowRef({})
+
+        count++ // error
+        cntcnt++ // error
+
+        const s = \`\${fooRef} : \${cref}\` // error x 2
+
+        const n = foo + 1 // error
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 33
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `computed()`.',
+          line: 34
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `toRef()`.',
+          line: 36
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `customRef()`.',
+          line: 36
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `shallowRef()`.',
+          line: 38
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        const foo = shallowRef({})
+        foo.bar = 123
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'requireDotValue'
+        }
+      ]
     }
   ]
 })