feat(refs): support deeply nested refs in objects within docs

Author: posva

src/index.js

@@ -1,4 +1,4 @@
-import { createSnapshot, extractRefs, callOnceWithArg } from './utils'
+import { createSnapshot, extractRefs, callOnceWithArg, deepGetSplit } from './utils'
 
 function bindCollection ({
   vm,
@@ -43,8 +43,10 @@ function updateDataFromDocumentSnapshot ({ snapshot, obj, key, subs, depth = 0,
   const [data, refs] = extractRefs(snapshot)
   obj[key] = data
   const refKeys = Object.keys(refs)
-  if (!refKeys.length) resolve()
+  if (!refKeys.length) return resolve()
   // TODO check if no ref is missing
+  // TODO max depth param, default to 1?
+  if (++depth > 3) throw new Error('more than 5 nested refs')
   refKeys.forEach(refKey => {
     // check if already bound to the same ref -> skip
     const sub = subs[refKey]
@@ -53,12 +55,13 @@ function updateDataFromDocumentSnapshot ({ snapshot, obj, key, subs, depth = 0,
       sub.unbind()
     }
     // maybe wrap the unbind function to call unbind on every child
+    const [innerObj, innerKey] = deepGetSplit(obj[key], refKey)
     subs[refKey] = {
       unbind: subscribeToDocument({
         ref,
-        obj: obj[key],
-        key: refKey,
-        depth: depth + 1,
+        obj: innerObj,
+        key: innerKey,
+        depth,
         // TODO parentSubs
         resolve
       }),
@@ -72,8 +75,6 @@ function updateDataFromDocumentSnapshot ({ snapshot, obj, key, subs, depth = 0,
 }
 
 function subscribeToDocument ({ ref, obj, key, depth, resolve }) {
-  // TODO max depth param, default to 1?
-  if (depth > 3) throw new Error('more than 5 nested refs')
   const subs = Object.create(null)
   const unbind = ref.onSnapshot(doc => {
     if (doc.exists) {

src/utils.js

@@ -18,12 +18,11 @@ export function extractRefs (doc, path = '', result = [{}, {}]) {
       // TODO handle subpathes?
       tot[1][path + key] = ref
     } else if (Array.isArray(ref)) {
-      // TODO hndle array
+      // TODO handle array
       tot[0][key] = ref
     } else if (isObject(ref)) {
-      console.log('isobject omg', key, ref)
       tot[0][key] = {}
-      extractRefs(ref, key + '.', [tot[0][key], tot[1]])
+      extractRefs(ref, path + key + '.', [tot[0][key], tot[1]])
     } else {
       tot[0][key] = ref
     }
@@ -40,3 +39,16 @@ export function callOnceWithArg (fn, argFn) {
     }
   }
 }
+
+export function deepGetSplit (obj, path) {
+  const keys = path.split('.')
+  // We want the containing obj and the last key
+  // key is the one we're going to bind to
+  const key = keys.pop()
+  return [
+    keys.reduce((res, key) => {
+      return res[key]
+    }, obj),
+    key
+  ]
+}

test/refs.spec.js

@@ -19,7 +19,6 @@ beforeEach(async () => {
   await d.update({ ref: c })
 
   vm = new Vue({
-    render: h => h(),
     data: () => ({
       a: null,
       b: null,
@@ -56,6 +55,50 @@ test('binds refs on documents', async () => {
   })
 })
 
+test('binds refs nested in documents (objects)', async () => {
+  const item = collection.doc()
+  await item.update({
+    obj: {
+      ref: c
+    }
+  })
+  await vm.$bind('item', item)
+
+  // NOTE same as above
+  await delay(5)
+
+  expect(vm.item).toEqual({
+    obj: {
+      ref: { c: true }
+    }
+  })
+})
+
+test('binds refs deeply nested in documents (objects)', async () => {
+  const item = collection.doc()
+  await item.update({
+    obj: {
+      nested: {
+        ref: c
+      }
+    }
+  })
+  await vm.$bind('item', item)
+
+  // NOTE same as above
+  await delay(5)
+
+  expect(vm.item).toEqual({
+    obj: {
+      nested: {
+        ref: {
+          c: true
+        }
+      }
+    }
+  })
+})
+
 test('update inner ref', async () => {
   expect(vm.d).toEqual({
     ref: {

test/utils.spec.js

@@ -60,10 +60,22 @@ test('extract object nested refs from document', () => {
       ref: docRef
     }
   })
-  console.log(noRefsDoc)
   expect(noRefsDoc.obj.ref).toEqual(docRef.path)
-  console.log(refs)
   expect(refs).toEqual({
     'obj.ref': docRef
   })
 })
+
+test('extract deep object nested refs from document', () => {
+  const [noRefsDoc, refs] = extractRefs({
+    obj: {
+      nested: {
+        ref: docRef
+      }
+    }
+  })
+  expect(noRefsDoc.obj.nested.ref).toEqual(docRef.path)
+  expect(refs).toEqual({
+    'obj.nested.ref': docRef
+  })
+})