feat(vuexfire): add wait option

Author: posva

packages/documentation/docs/api/vuexfire.md

@@ -68,13 +68,14 @@ Can contain the following properties:
 
 - `maxRefDepth`: How many levels of nested references should be automatically bound. Defaults to 2, meaning that References inside of References inside of documents bound with `bindFirestoreRef` will automatically be bound too.
 - `reset`: Allows to define the behavior when a previously bound reference is unbound. Defaults to `true`, which resets the property in the vue instance to `null` for documents and to an empty array `[]` for collections. It can also be set to a function returning a value to customize the value set. Setting it to `false` will keep the data as-is when unbinding.
+- `wait`: Waits for the binding to be completely resolved before setting the value in data. This will also force `reset: false` unless `reset` is provided as a function.
 - `serialize`: a function to provide a custom serialization strategy when a
   document from firebase is set on the Vue instance. This allows to customize
   the `id` key, to transform data, etc. See [Vuefire plugin options for examples](./vuefire.md#options-serialize)
 
 ### unbindFirestoreRef
 
-`unbindFirestoreRef(key: string): void`
+`unbindFirestoreRef(key: string, reset?: FirestoreOptions['reset']): void`
 
 Unsubscribes from updates for a given key.
 
@@ -112,12 +113,13 @@ Returns a promise that is resolved once the data is fetched and the state is in
 Can contain the following properties:
 
 - `reset`: Allows to define the behavior when a previously bound reference is unbound. Defaults to `true`, which resets the property in the vue instance to `null` for properties bound as objects and to an empty array `[]` for properties bound as arrays. It can also be set to a function returning a value to customize the value set. Setting it to `false` will keep the data as-is when unbinding.
+- `wait`: Waits for the binding to be completely resolved before setting the value in data. This will also force `reset: false` unless `reset` is provided as a function.
 - `serialize`: a function to provide a custom serialization strategy when a
   document from firebase is set on the Vue instance. This allows to customize
   the `id` key, to transform data, etc. See [Vuefire plugin options for examples](./vuefire.md#options-serialize-2)
 
 ### unbindFirebaseRef
 
-`unbindFirebaseRef(key: string): void`
+`unbindFirebaseRef(key: string, reset?: RTDBOptions['reset']): void`
 
 Unsubscribes from updates for a given key.

packages/vuexfire/__tests__/firestore.spec.ts

@@ -2,6 +2,7 @@ import Vuex from 'vuex'
 import { vuexfireMutations, firestoreAction } from '../src'
 import { db, tick, Vue, delayUpdate } from '@posva/vuefire-test-helpers'
 import { firestore } from 'firebase'
+import { FirestoreOptions } from '@posva/vuefire-core/dist/packages/@posva/vuefire-core/src'
 
 Vue.use(Vuex)
 
@@ -34,9 +35,14 @@ describe('firestoreAction', () => {
     },
   })
 
-  const setItems = (collection: firestore.CollectionReference | firestore.Query) =>
+  const setItems = (
+    collection: firestore.CollectionReference | firestore.Query,
+    options?: FirestoreOptions
+  ) =>
     // @ts-ignore
-    store.dispatch('action', ({ bindFirestoreRef }) => bindFirestoreRef('items', collection))
+    store.dispatch('action', ({ bindFirestoreRef }) =>
+      bindFirestoreRef('items', collection, options)
+    )
   const setItem = (document: firestore.DocumentReference) =>
     // @ts-ignore
     store.dispatch('action', ({ bindFirestoreRef }) => bindFirestoreRef('item', document))
@@ -168,6 +174,18 @@ describe('firestoreAction', () => {
     expect(store.state.items).toEqual([{ text: 'foo' }, { text: 'foo' }])
   })
 
+  it('can unbind without resetting', async () => {
+    await setItems(collection)
+    await collection.add({ text: 'foo' })
+    await store.dispatch(
+      'action',
+      // @ts-ignore
+      ({ unbindFirestoreRef }) => unbindFirestoreRef('items', false)
+    )
+
+    expect(store.state.items).toEqual([{ text: 'foo' }])
+  })
+
   it('does not throw there is nothing to unbind', async () => {
     await setItems(collection)
     await store.dispatch(
@@ -197,4 +215,26 @@ describe('firestoreAction', () => {
       expect(this._vm).toBeInstanceOf(Vue)
     })
   })
+
+  it('does not reset if wait: true', async () => {
+    // @ts-ignore
+    const col2: firestore.CollectionReference = db.collection()
+    await setItems(collection)
+    await collection.add({ text: 'foo' })
+    const p = setItems(col2, { wait: true, reset: true })
+    expect(store.state.items).toEqual([{ text: 'foo' }])
+    await p
+    expect(store.state.items).toEqual([])
+  })
+
+  it('wait + reset can be overriden with a function', async () => {
+    // @ts-ignore
+    const col2: firestore.CollectionReference = db.collection()
+    await setItems(collection)
+    await collection.add({ text: 'foo' })
+    const p = setItems(col2, { wait: true, reset: () => ['foo'] })
+    expect(store.state.items).toEqual(['foo'])
+    await p
+    expect(store.state.items).toEqual([])
+  })
 })

packages/vuexfire/__tests__/rtdb.spec.ts

@@ -140,7 +140,7 @@ describe('RTDB: firebaseAction', () => {
     })
   })
 
-  it('can prevent resetting the value when unbinding', async () => {
+  it('can unbind without resetting', async () => {
     await setItem(document)
     document.set({ text: 'foo' })
     await store.dispatch(

packages/vuexfire/src/firestore.ts

@@ -51,7 +51,11 @@ function bind(
 
   // unbind if ref is already bound
   if (key in sub) {
-    unbind(commit, key)
+    unbind(
+      commit,
+      key,
+      options.wait ? (typeof options.reset === 'function' ? options.reset : false) : options.reset
+    )
   }
 
   return new Promise((resolve, reject) => {
@@ -82,11 +86,11 @@ function bind(
   })
 }
 
-function unbind(commit: CommitFunction, key: string) {
+function unbind(commit: CommitFunction, key: string, reset?: FirestoreOptions['reset']) {
   const sub = subscriptions.get(commit)
   if (!sub || !sub[key]) return
   // TODO dev check before
-  sub[key]()
+  sub[key](reset)
   delete sub[key]
 }
 
@@ -148,9 +152,10 @@ export function firestoreAction<S, R>(
             // @ts-ignore
             ref,
             ops,
-            options
+            Object.assign({}, firestoreOptions, options)
           ),
-        unbindFirestoreRef: (key: string) => unbind(commit, key),
+        unbindFirestoreRef: (key: string, reset?: FirestoreOptions['reset']) =>
+          unbind(commit, key, reset),
       },
       payload
     )

packages/vuexfire/src/rtdb.ts

@@ -32,7 +32,7 @@ function bind(
   key: string,
   ref: database.Reference | database.Query,
   ops: OperationsType,
-  options?: RTDBOptions
+  options: RTDBOptions
 ): Promise<database.DataSnapshot> {
   // TODO check ref is valid
   // TODO check defined in state
@@ -118,7 +118,7 @@ export function firebaseAction<S, R>(
           key: string,
           ref: database.Reference | database.Query,
           options?: RTDBOptions
-        ) => bind(state, commit, key, ref, ops, options),
+        ) => bind(state, commit, key, ref, ops, Object.assign({}, rtdbOptions, options)),
         unbindFirebaseRef: (key: string, reset?: RTDBOptions['reset']) =>
           unbind(commit, key, reset),
       },