feat(support document binding):

Author: posva

src/index.js

@@ -1,6 +1,6 @@
-import { createSnapshot } from './utils'
+import { createSnapshot, extractRefs } from './utils'
 
-function bindCollection({
+function bindCollection ({
   vm,
   key,
   collection,
@@ -34,6 +34,38 @@ function bindCollection({
 
 }
 
+function bindDocument ({
+  vm,
+  key,
+  document,
+}) {
+  // TODO warning check if key exists?
+  const boundRefs = Object.create(null)
+
+  const unbind = document.onSnapshot((doc) => {
+    // TODO test doc.exist
+    console.log('doc data', doc)
+    const [data, refs] = extractRefs(createSnapshot(doc))
+    vm[key] = data
+    return
+    // TODO bind refs
+    const d = doc.data()
+    if (!boundRefs[d.path]) {
+      console.log('bound ref', d.path)
+      boundRefs[d.path] = d.onSnapshot((doc) => {
+        console.log('ref snap', doc)
+      }, err => console.log('onSnapshot ref ERR', err))
+    }
+  }, err => {
+    console.log('onSnapshot ERR' ,err)
+  })
+
+  return () => {
+    // TODO unbind all from boundRefs
+    return unbind()
+  }
+}
+
 function install (Vue, options) {
   Vue.mixin({
     created () {
@@ -48,7 +80,11 @@ function install (Vue, options) {
             collection: ref,
           })
         } else {
-          // TODO
+          bindDocument({
+            vm: this,
+            key,
+            document: ref,
+          })
         }
       })
     }

src/utils.js

@@ -4,3 +4,18 @@ export function createSnapshot (doc) {
     value: doc.id,
   })
 }
+
+export function extractRefs (doc) {
+  return Object.keys(doc).reduce((tot, key) => {
+    const ref = doc[key]
+    if (typeof ref.isEqual === 'function') {
+      tot[0][key] = null
+      // TODO handle subpathes?
+      tot[1][key] = ref
+    } else {
+      // TODO recursive check
+      tot[0][key] = ref
+    }
+    return tot
+  }, [{}, {}])
+}

test/collection.js

@@ -45,9 +45,9 @@ test('delets items', async t => {
 })
 
 test('update items', async t => {
-  const doc = await t.context.collection.add({ text: 'foo' })
+  const doc = await t.context.collection.add({ text: 'foo', more: true })
   await doc.update({ text: 'bar' })
-  t.deepEqual(t.context.vm.items[0], { text: 'bar' })
+  t.deepEqual(t.context.vm.items[0], { text: 'bar', more: true })
 })
 
 test('add properties', async t => {

test/document.js

@@ -0,0 +1,46 @@
+import test from 'ava'
+import Vuefire from '../src'
+import {
+  createSnapshot
+} from '../src/utils'
+import {
+  db,
+  tick,
+  Vue
+} from './helpers'
+
+Vue.use(Vuefire)
+
+test.beforeEach(async t => {
+  t.context.collection = db.collection()
+  t.context.document = t.context.collection.doc()
+  t.context.vm = new Vue({
+    render (h) {
+      return h('ul', this.items.map(
+        item => h('li', [item])
+      ))
+    },
+    // purposely set items as null
+    // but it's a good practice to set it to an empty array
+    data: () => ({
+      items: null,
+      item: null,
+    }),
+    firestore: {
+      items: t.context.collection,
+      item: t.context.document
+    }
+  }).$mount()
+  await tick()
+})
+
+test('binds a document', t => {
+  t.deepEqual(t.context.vm.item, null)
+})
+
+test('updates a document', async t => {
+  await t.context.document.update({ foo: 'foo' })
+  t.deepEqual(t.context.vm.item, { foo: 'foo' })
+  await t.context.document.update({ bar: 'bar' })
+  t.deepEqual(t.context.vm.item, { foo: 'foo', bar: 'bar' })
+})

test/helpers/mock.js

@@ -27,14 +27,22 @@ class DocumentReference {
     this.id = id
     this.data = data
     this.index = index
+    this.cb = this.onError = noop
   }
 
+  onSnapshot (cb, onError) {
+    this.cb = cb
+    this.onError = onError
+  }
+
+
   async delete () {
     return this.collection._remove(this.id)
   }
 
   async update (data) {
     Object.assign(this.data, data)
+    this.cb(new DocumentSnapshot(null, this.id, this.data))
     return this.collection._modify(this.id, this.data)
   }
 }

test/index.js

@@ -22,7 +22,10 @@ test.beforeEach(async t => {
     },
     // purposely set items as null
     // but it's a good practice to set it to an empty array
-    data: () => ({ items: null }),
+    data: () => ({
+      items: null,
+      item: null,
+    }),
     firestore: {
       items: t.context.collection,
       item: t.context.document
@@ -31,22 +34,10 @@ test.beforeEach(async t => {
   await tick()
 })
 
-test('detects collections', async t => {
-  await t.context.document.update({ foo: 'foo' })
-  t.deepEqual(t.context.vm.item, { foo: 'foo' })
-})
-
-test('detects documents', async t => {
-  await t.context.collection.add({ foo: 'foo' })
-  t.deepEqual(t.context.vm.items, [{ foo: 'foo' }])
-})
-
 test('does nothing with no firestore', t => {
   const vm = new Vue({
     render (h) {
-      return h('ul', this.items.map(
-        item => h('li', [item])
-      ))
+      return h('p', 'eh')
     },
     data: () => ({ items: null }),
   })