feat(bind): manual bind with $bind

Author: posva

src/index.js

@@ -44,7 +44,7 @@ function bindDocument ({
 
  const unbind = document.onSnapshot((doc) => {
  // TODO test doc.exist
- console.log('doc data', doc)
+ // console.log('doc data', doc)
  const [data, refs] = extractRefs(createSnapshot(doc))
  vm[key] = data
  return
@@ -66,29 +66,41 @@ function bindDocument ({
  }
 }
 
+function bind ({ vm, key, ref }) {
+ if (ref.add) {
+ bindCollection({
+ vm,
+ key,
+ collection: ref,
+ })
+ } else {
+ bindDocument({
+ vm,
+ key,
+ document: ref,
+ })
+ }
+}
+
 function install (Vue, options) {
  Vue.mixin({
  created () {
  const { firestore } = this.$options
  if (!firestore) return
  Object.keys(firestore).forEach(key => {
- const ref = firestore[key]
- if (ref.add) {
- bindCollection({
- vm: this,
- key,
- collection: ref,
- })
- } else {
- bindDocument({
- vm: this,
- key,
- document: ref,
- })
- }
+ this.$bind(key, firestore[key])
  })
  }
  })
+
+ // TODO test if $bind exist and warns
+ Vue.prototype.$bind = function (key, ref) {
+ bind({
+ vm: this,
+ key,
+ ref,
+ })
+ }
 }
 
 export default install

test/bind.js

@@ -0,0 +1,41 @@
+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 && 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,
+ }),
+ }).$mount()
+ await tick()
+})
+
+test('manually binds a collection', async t => {
+ const vm = t.context.vm
+ const collection = t.context.collection
+ t.deepEqual(vm.items, null)
+ await vm.$bind('items', collection)
+ t.deepEqual(vm.items, [])
+ await collection.add({ text: 'foo' })
+ t.deepEqual(vm.items, [{ text: 'foo' }])
+})