feat(bind): automatically bind refs on documents

Author: posva

src/index.js

@@ -38,6 +38,46 @@ function bindCollection ({
   }, reject)
 }
 
+function updateDataFromDocumentSnapshot ({ snapshot, obj, key, subs, depth = 0 }) {
+  // TODO extract refs
+  const [data, refs] = extractRefs(snapshot)
+  obj[key] = data
+  // TODO check if no ref is missing
+  Object.keys(refs).forEach(refKey => {
+    // check if already bound to the same ref -> skip
+    const sub = subs[refKey]
+    const ref = refs[refKey]
+    if (sub && sub.path !== ref.path) {
+      sub.unbind()
+    }
+    // maybe wrap the unbind function to call unbind on every child
+    subs[refKey] = {
+      unbind: subscribeToDocument({
+        ref,
+        obj: obj[key],
+        key: refKey,
+        depth: depth + 1
+      }),
+      path: ref.path
+    }
+    // unbind currently bound ref
+    // bind ref
+    // save unbind callback
+    // probably save key or something as well
+  })
+}
+
+function subscribeToDocument ({ ref, obj, key, depth }) {
+  // TODO max depth param, default to 1?
+  if (depth > 3) throw new Error('more than 5 nested refs')
+  const subs = Object.create(null)
+  return ref.onSnapshot(doc => {
+    if (doc.exists) {
+      updateDataFromDocumentSnapshot({ snapshot: createSnapshot(doc), obj, key, subs, depth })
+    }
+  })
+}
+
 function bindDocument ({
   vm,
   key,
@@ -50,12 +90,17 @@ function bindDocument ({
   // const boundRefs = Object.create(null)
 
   let ready
+  const subs = Object.create(null)
   return document.onSnapshot(doc => {
-    // TODO extract refs
     if (doc.exists) {
-      const [data] = extractRefs(createSnapshot(doc))
-      vm[key] = data
+      updateDataFromDocumentSnapshot({
+        snapshot: createSnapshot(doc),
+        obj: vm,
+        key,
+        subs
+      })
     }
+    // TODO should resolve be called when all refs are bound?
     if (!ready) {
       ready = true
       resolve(vm[key])

src/utils.js

@@ -9,7 +9,7 @@ export function extractRefs (doc) {
   return Object.keys(doc).reduce((tot, key) => {
     const ref = doc[key]
     if (typeof ref.isEqual === 'function') {
-      tot[0][key] = null
+      tot[0][key] = ref.path
       // TODO handle subpathes?
       tot[1][key] = ref
     } else {

test/bind.spec.js

@@ -4,6 +4,7 @@ import Vuefire from '../src'
 import {
   db,
   tick,
+  delay,
   Vue
 } from './helpers'
 
@@ -79,3 +80,20 @@ test('unbinds previously bound refs', async t => {
   t.is(vm.$firestoreRefs.item, doc2)
   t.deepEqual(vm.item, { bar: 'bar' })
 })
+
+test('binds refs on documents', async t => {
+  const { vm, document, collection } = t.context
+  // create an empty doc and update using the ref instead of plain data
+  const a = collection.doc()
+  a.update({ foo: 'foo' })
+  await document.update({ ref: a })
+  await vm.$bind('item', document)
+
+  // XXX dirty hack until $bind resolves when all refs are bound
+  // NOTE should add option for it waitForRefs: true (by default)
+  await delay(5)
+
+  t.deepEqual(vm.item, {
+    ref: { foo: 'foo' }
+  })
+})

test/helpers/mock.js

@@ -52,11 +52,19 @@ class DocumentReference {
     }
   }
 
+  get path () {
+    return `${this.collection.name}/${this.id.v}`
+  }
+
   async delete () {
     this.exists = false
     return this.collection._remove(this.id)
   }
 
+  isEqual (ref) {
+    return this.id.v === ref.id.v
+  }
+
   async update (data) {
     Object.assign(this.data, data)
     this.exists = true
@@ -66,8 +74,9 @@ class DocumentReference {
 }
 
 class CollectionReference {
-  constructor () {
+  constructor (name) {
     this.data = {}
+    this.name = name
     this.cb = this.onError = noop
   }
 
@@ -154,6 +163,6 @@ export const db = {
   collection (name) {
     // create a collection if no name provided
     name = name || `random__${this.n++}`
-    return (db[name] = db[name] || new CollectionReference())
+    return (db[name] = db[name] || new CollectionReference(name))
   }
 }