vuefire.js

var Vue // late binding

/**
 * Check if a value is an object.
 *
 * @param {*} val
 * @return {boolean}
 */
function isObject (val) {
  return Object.prototype.toString.call(val) === '[object Object]'
}

/**
 * Convert firebase snapshot into a bindable data record.
 *
 * @param {FirebaseSnapshot} snapshot
 * @return {Object}
 */
function createRecord (snapshot) {
  var value = snapshot.val()
  var res = isObject(value)
    ? value
    : { '.value': value }
  res['.key'] = snapshot.key()
  return res
}

/**
 * Find the index for an object with given key.
 *
 * @param {array} array
 * @param {string} key
 * @return {number}
 */
function indexForKey (array, key) {
  for (var i = 0; i < array.length; i++) {
    if (array[i]['.key'] === key) {
      return i
    }
  }
  /* istanbul ignore next */
  return -1
}

/**
 * Bind a firebase data source to a key on a vm.
 *
 * @param {Vue} vm
 * @param {string} key
 * @param {object} source
 */
function bind (vm, key, source) {
  var asObject = false
  var cancelCallback = null
  // check { source, asArray, cancelCallback } syntax
  if (isObject(source) && source.hasOwnProperty('source')) {
    asObject = source.asObject
    cancelCallback = source.cancelCallback
    source = source.source
  }
  if (!isObject(source)) {
    throw new Error('VueFire: invalid Firebase binding source.')
  }
  // get the original ref for possible queries
  var ref = source
  if (typeof source.ref === 'function') {
    ref = source.ref()
  }
  vm.$firebaseRefs[key] = ref
  vm._firebaseSources[key] = source
  // bind based on initial value type
  if (asObject) {
    bindAsObject(vm, key, source, cancelCallback)
  } else {
    bindAsArray(vm, key, source, cancelCallback)
  }
}

/**
 * Bind a firebase data source to a key on a vm as an Array.
 *
 * @param {Vue} vm
 * @param {string} key
 * @param {object} source
 * @param {function|null} cancelCallback
 */
function bindAsArray (vm, key, source, cancelCallback) {
  var array = []
  Vue.util.defineReactive(vm, key, array)

  var onAdd = source.on('child_added', function (snapshot, prevKey) {
    var index = prevKey ? indexForKey(array, prevKey) + 1 : 0
    array.splice(index, 0, createRecord(snapshot))
  }, cancelCallback)

  var onRemove = source.on('child_removed', function (snapshot) {
    var index = indexForKey(array, snapshot.key())
    array.splice(index, 1)
  }, cancelCallback)

  var onChange = source.on('child_changed', function (snapshot) {
    var index = indexForKey(array, snapshot.key())
    array.splice(index, 1, createRecord(snapshot))
  }, cancelCallback)

  var onMove = source.on('child_moved', function (snapshot, prevKey) {
    var index = indexForKey(array, snapshot.key())
    var record = array.splice(index, 1)[0]
    var newIndex = prevKey ? indexForKey(array, prevKey) + 1 : 0
    array.splice(newIndex, 0, record)
  }, cancelCallback)

  vm._firebaseListeners[key] = {
    child_added: onAdd,
    child_removed: onRemove,
    child_changed: onChange,
    child_moved: onMove
  }
}

/**
 * Bind a firebase data source to a key on a vm as an Object.
 *
 * @param {Vue} vm
 * @param {string} key
 * @param {Object} source
 * @param {function|null} cancelCallback
 */
function bindAsObject (vm, key, source, cancelCallback) {
  Vue.util.defineReactive(vm, key, {})
  var cb = source.on('value', function (snapshot) {
    vm[key] = createRecord(snapshot)
  }, cancelCallback)
  vm._firebaseListeners[key] = { value: cb }
}

/**
 * Unbind a firebase-bound key from a vm.
 *
 * @param {Vue} vm
 * @param {string} key
 */
function unbind (vm, key) {
  var source = vm._firebaseSources && vm._firebaseSources[key]
  if (!source) {
    throw new Error(
      'VueFire: unbind failed: "' + key + '" is not bound to ' +
      'a Firebase reference.'
    )
  }
  var listeners = vm._firebaseListeners[key]
  for (var event in listeners) {
    source.off(event, listeners[event])
  }
  vm[key] = null
  vm.$firebaseRefs[key] = null
  vm._firebaseSources[key] = null
  vm._firebaseListeners[key] = null
}

/**
 * Ensure the related bookkeeping variables on an instance.
 *
 * @param {Vue} vm
 */
function ensureRefs (vm) {
  if (!vm.$firebaseRefs) {
    vm.$firebaseRefs = Object.create(null)
    vm._firebaseSources = Object.create(null)
    vm._firebaseListeners = Object.create(null)
  }
}

var VueFireMixin = {
  init: function () {
    try {
      var bindings = this.$options.firebase.call(this)
    }
    catch (e) {
      var bindings = this.$options.firebase
    }
    // if (typeof bindings == function)
    if (!bindings) return
    ensureRefs(this)
    for (var key in bindings) {
      bind(this, key, bindings[key])
    }
  },
  beforeDestroy: function () {
    if (!this.$firebaseRefs) return
    for (var key in this.$firebaseRefs) {
      if (this.$firebaseRefs[key]) {
        this.$unbind(key)
      }
    }
    this.$firebaseRefs = null
    this._firebaseSources = null
    this._firebaseListeners = null
  }
}

/**
 * Install function passed to Vue.use() in manual installation.
 *
 * @param {function} _Vue
 */
function install (_Vue) {
  Vue = _Vue
  Vue.mixin(VueFireMixin)

  // use object-based merge strategy
  var mergeStrats = Vue.config.optionMergeStrategies
  mergeStrats.firebase = mergeStrats.methods

  // extend instance methods
  Vue.prototype.$bindAsObject = function (key, source, cancelCallback) {
    ensureRefs(this)
    bind(this, key, {
      source: source,
      asObject: true,
      cancelCallback: cancelCallback
    })
  }

  Vue.prototype.$bindAsArray = function (key, source, cancelCallback) {
    ensureRefs(this)
    bind(this, key, {
      source: source,
      cancelCallback: cancelCallback
    })
  }

  Vue.prototype.$unbind = function (key) {
    unbind(this, key)
  }
}

// auto install
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

window.VueFire = install