feat(unbind): unsubscribe when vm is destroyed

Author: posva

package-lock.json

@@ -49,6 +49,7 @@
     "nyc": "^11.3.0",
     "rollup": "^0.51.1",
     "rollup-plugin-buble": "^0.17.0",
+    "sinon": "^4.1.2",
     "uglify-js": "^3.1.8",
     "vue": "^2.5.3"
   },

package.json

@@ -67,29 +67,39 @@ function bindDocument ({
 }
 
 function bind ({ vm, key, ref }) {
+  let unbind
   if (ref.add) {
-    bindCollection({
+    unbind = bindCollection({
       vm,
       key,
       collection: ref,
     })
   } else {
-    bindDocument({
+    unbind = bindDocument({
       vm,
       key,
       document: ref,
     })
   }
+  vm._firestoreUnbinds[key] = unbind
 }
 
 function install (Vue, options) {
   Vue.mixin({
     created () {
       const { firestore } = this.$options
+      this._firestoreUnbinds = Object.create(null)
       if (!firestore) return
       Object.keys(firestore).forEach(key => {
         this.$bind(key, firestore[key])
       })
+    },
+
+    beforeDestroy () {
+      Object.values(this._firestoreUnbinds).forEach(unbind => {
+        unbind()
+      })
+      this._firestoreUnbinds = null
     }
   })
 
@@ -101,6 +111,13 @@ function install (Vue, options) {
       ref,
     })
   }
+
+  Vue.prototype.$unbind = function (key) {
+    unbind({
+      vm: this,
+      key,
+    })
+  }
 }
 
 export default install

src/index.js

@@ -1,4 +1,5 @@
 import test from 'ava'
+import sinon from 'sinon'
 import Vuefire from '../src'
 import {
   createSnapshot
@@ -55,3 +56,19 @@ test('add properties', async t => {
   await doc.update({ other: 'bar' })
   t.deepEqual(t.context.vm.items[0], { text: 'foo', other: 'bar' })
 })
+
+test('unbinds when the instance is destroyed', async t => {
+  const vm = t.context.vm
+  t.truthy(vm._firestoreUnbinds)
+  t.deepEqual(t.context.vm.items, [])
+  const spy = sinon.spy(vm._firestoreUnbinds, 'items')
+  t.notThrows(() => {
+    vm.$destroy()
+  })
+  t.is(spy.callCount, 1)
+  t.is(vm._firestoreUnbinds, null)
+  await t.notThrows(async () => {
+    await t.context.collection.add({ text: 'foo' })
+    t.deepEqual(t.context.vm.items, [])
+  })
+})

test/collection.spec.js

@@ -41,6 +41,7 @@ class DocumentReference {
   onSnapshot (cb, onError) {
     this.cb = cb
     this.onError = onError
+    return () => this.cb = this.onError = noop
   }
 
 
@@ -64,6 +65,7 @@ class CollectionReference {
   onSnapshot (cb, onError) {
     this.cb = cb
     this.onError = onError
+    return () => this.cb = this.onError = noop
   }
 
   async add (data) {