Update vue/no-watch-after-await

Author: ota-meshi

docs/rules/no-watch-after-await.md

@@ -22,12 +22,35 @@ import { watch } from 'vue'
 export default {
   async setup() {
     /* ✓ GOOD */
-    watch(() => { /* ... */ })
+    watch(watchSource, () => { /* ... */ })
 
     await doSomething()
 
     /* ✗ BAD */
-    watch(() => { /* ... */ })
+    watch(watchSource, () => { /* ... */ })
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+This rule is not reported when using the stop handle.
+
+<eslint-code-block :rules="{'vue/no-watch-after-await': ['error']}">
+
+```vue
+<script>
+import { watch } from 'vue'
+export default {
+  async setup() {
+    await doSomething()
+
+    /* ✓ GOOD */
+    const stopHandle = watch(watchSource, () => { /* ... */ })
+
+    // later
+    stopHandle()
   }
 }
 </script>
@@ -42,6 +65,7 @@ Nothing.
 ## :books: Further reading
 
 - [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+- [Vue Composition API - API Reference - Stopping the Watcher](https://composition-api.vuejs.org/api.html#stopping-the-watcher)
 
 ## :mag: Implementation
 

lib/rules/no-watch-after-await.js

@@ -6,6 +6,33 @@
 const { ReferenceTracker } = require('eslint-utils')
 const utils = require('../utils')
 
+function isMaybeUsedStopHandle (node) {
+  const parent = node.parent
+  if (parent) {
+    if (parent.type === 'VariableDeclarator') {
+      // var foo = watch()
+      return true
+    }
+    if (parent.type === 'AssignmentExpression') {
+      // foo = watch()
+      return true
+    }
+    if (parent.type === 'CallExpression') {
+      // foo(watch())
+      return true
+    }
+    if (parent.type === 'Property') {
+      // {foo: watch()}
+      return true
+    }
+    if (parent.type === 'ArrayExpression') {
+      // [watch()]
+      return true
+    }
+  }
+  return false
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -82,7 +109,7 @@ module.exports = {
             return
           }
 
-          if (watchCallNodes.has(node)) {
+          if (watchCallNodes.has(node) && !isMaybeUsedStopHandle(node)) {
             addForbiddenNode(setupFunctionData.setupProperty, node)
           }
         },

tests/lib/rules/no-watch-after-await.js

@@ -20,7 +20,7 @@ tester.run('no-watch-after-await', rule, {
       import {watch} from 'vue'
       export default {
         async setup() {
-          watch(() => { /* ... */ }) // ok
+          watch(foo, () => { /* ... */ }) // ok
 
           await doSomething()
         }
@@ -35,7 +35,7 @@ tester.run('no-watch-after-await', rule, {
       import {watch} from 'vue'
       export default {
         async setup() {
-          watch(() => { /* ... */ })
+          watch(foo, () => { /* ... */ })
         }
       }
       </script>
@@ -49,7 +49,7 @@ tester.run('no-watch-after-await', rule, {
       export default {
         async setup() {
           watchEffect(() => { /* ... */ })
-          watch(() => { /* ... */ })
+          watch(foo, () => { /* ... */ })
           await doSomething()
         }
       }
@@ -70,6 +70,27 @@ tester.run('no-watch-after-await', rule, {
       }
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import {watch, watchEffect} from 'vue'
+      export default {
+        async setup() {
+          await doSomething()
+          const a = watchEffect(() => { /* ... */ })
+          const b = watch(foo, () => { /* ... */ })
+          c = watch()
+          d(watch())
+          e = {
+            foo: watch()
+          }
+          f = [watch()]
+        }
+      }
+      </script>
+      `
     }
   ],
   invalid: [
@@ -82,7 +103,7 @@ tester.run('no-watch-after-await', rule, {
         async setup() {
           await doSomething()
 
-          watch(() => { /* ... */ }) // error
+          watch(foo, () => { /* ... */ }) // error
         }
       }
       </script>
@@ -93,7 +114,7 @@ tester.run('no-watch-after-await', rule, {
           line: 8,
           column: 11,
           endLine: 8,
-          endColumn: 37
+          endColumn: 42
         }
       ]
     },
@@ -107,7 +128,7 @@ tester.run('no-watch-after-await', rule, {
           await doSomething()
 
           watchEffect(() => { /* ... */ })
-          watch(() => { /* ... */ })
+          watch(foo, () => { /* ... */ })
         }
       }
       </script>
@@ -132,11 +153,11 @@ tester.run('no-watch-after-await', rule, {
         async setup() {
           await doSomething()
 
-          watch(() => { /* ... */ })
+          watch(foo, () => { /* ... */ })
 
           await doSomething()
 
-          watch(() => { /* ... */ })
+          watch(foo, () => { /* ... */ })
         }
       }
       </script>