refactor: working version firestore

Author: posva

src/core.ts

@@ -1,3 +1,3 @@
 export { walkSet, OperationsType, ResetOption } from './shared'
-export * from './rtdb/index'
-export * from './firestore/index'
+export * from './rtdb'
+export * from './firestore'

src/firestore/index.ts

@@ -1,6 +1,7 @@
 import { createSnapshot, extractRefs, FirestoreSerializer } from './utils'
 import { walkGet, callOnceWithArg, OperationsType } from '../shared'
 import { firestore } from 'firebase'
+import { ref, Ref, unref } from 'vue'
 
 export interface FirestoreOptions {
   maxRefDepth?: number
@@ -34,7 +35,7 @@ function unsubscribeAll(subs: Record<string, FirestoreSubscription>) {
 
 function updateDataFromDocumentSnapshot(
   options: Required<FirestoreOptions>,
-  target: CommonBindOptionsParameter['vm'],
+  target: CommonBindOptionsParameter['target'],
   path: string,
   snapshot: firestore.DocumentSnapshot,
   subs: Record<string, FirestoreSubscription>,
@@ -52,7 +53,7 @@ function updateDataFromDocumentSnapshot(
 }
 
 interface SubscribeToDocumentParamater {
-  target: CommonBindOptionsParameter['vm']
+  target: CommonBindOptionsParameter['target']
   path: string
   depth: number
   resolve: () => void
@@ -104,7 +105,7 @@ function subscribeToDocument(
 // updateDataFromDocumentSnapshot which may call subscribeToRefs as well
 function subscribeToRefs(
   options: Required<FirestoreOptions>,
-  target: CommonBindOptionsParameter['vm'],
+  target: CommonBindOptionsParameter['target'],
   path: string | number,
   subs: Record<string, FirestoreSubscription>,
   refs: Record<string, firestore.DocumentReference>,
@@ -165,27 +166,29 @@ function subscribeToRefs(
 }
 
 interface CommonBindOptionsParameter {
-  vm: Record<string, any>
-  key: string
+  // vm: Record<string, any>
+  target: Ref<any>
+  // key: string
   // Override this property in necessary functions
   resolve: (value: any) => void
   reject: (error: any) => void
   ops: OperationsType
 }
 
-interface BindCollectionParamater extends CommonBindOptionsParameter {
+interface BindCollectionParameter extends CommonBindOptionsParameter {
   collection: firestore.CollectionReference | firestore.Query
 }
 
 // TODO: refactor without using an object to improve size like the other functions
 
 export function bindCollection(
-  { vm, key, collection, ops, resolve, reject }: BindCollectionParamater,
+  { target, collection, ops, resolve, reject }: BindCollectionParameter,
   extraOptions: FirestoreOptions = DEFAULT_OPTIONS
 ) {
   const options = Object.assign({}, DEFAULT_OPTIONS, extraOptions) // fill default values
-  // TODO support pathes? nested.obj.list (walkSet)
-  const array = options.wait ? [] : ops.set(vm, key, [])
+  const key = 'value'
+  if (!options.wait) ops.set(target, key, [])
+  let arrayRef = ref(options.wait ? [] : target[key])
   const originalResolve = resolve
   let isResolved: boolean
 
@@ -198,11 +201,11 @@ export function bindCollection(
       arraySubs.splice(newIndex, 0, Object.create(null))
       const subs = arraySubs[newIndex]
       const [data, refs] = extractRefs(options.serialize(doc), undefined, subs)
-      ops.add(array, newIndex, data)
+      ops.add(unref(arrayRef), newIndex, data)
       subscribeToRefs(
         options,
-        array,
-        newIndex,
+        arrayRef,
+        `${key}.${newIndex}`,
         subs,
         refs,
         ops,
@@ -211,6 +214,7 @@ export function bindCollection(
       )
     },
     modified: ({ oldIndex, newIndex, doc }: firestore.DocumentChange) => {
+      const array = unref(arrayRef)
       const subs = arraySubs[oldIndex]
       const oldData = array[oldIndex]
       const [data, refs] = extractRefs(options.serialize(doc), oldData, subs)
@@ -219,9 +223,19 @@ export function bindCollection(
       arraySubs.splice(newIndex, 0, subs)
       ops.remove(array, oldIndex)
       ops.add(array, newIndex, data)
-      subscribeToRefs(options, array, newIndex, subs, refs, ops, 0, resolve)
+      subscribeToRefs(
+        options,
+        arrayRef,
+        `${key}.${newIndex}`,
+        subs,
+        refs,
+        ops,
+        0,
+        resolve
+      )
     },
     removed: ({ oldIndex }: firestore.DocumentChange) => {
+      const array = unref(arrayRef)
       ops.remove(array, oldIndex)
       unsubscribeAll(arraySubs.splice(oldIndex, 1)[0])
     },
@@ -255,8 +269,12 @@ export function bindCollection(
         if (id in validDocs) {
           if (++count >= expectedItems) {
             // if wait is true, finally set the array
-            if (options.wait) ops.set(vm, key, array)
-            originalResolve(vm[key])
+            if (options.wait) {
+              ops.set(target, key, unref(arrayRef))
+              // use the proxy object
+              // arrayRef = target.value
+            }
+            originalResolve(unref(arrayRef))
             // reset resolve to noop
             resolve = () => {}
           }
@@ -271,22 +289,26 @@ export function bindCollection(
     // since this can only happen once, there is no need to guard against it
     // being called multiple times
     if (!docChanges.length) {
-      if (options.wait) ops.set(vm, key, array)
-      resolve(array)
+      if (options.wait) {
+        ops.set(target, key, unref(arrayRef))
+        // use the proxy object
+        // arrayRef = target.value
+      }
+      resolve(unref(arrayRef))
     }
   }, reject)
 
   return (reset?: FirestoreOptions['reset']) => {
     unbind()
     if (reset !== false) {
       const value = typeof reset === 'function' ? reset() : []
-      ops.set(vm, key, value)
+      ops.set(target, key, value)
     }
     arraySubs.forEach(unsubscribeAll)
   }
 }
 
-interface BindDocumentParamater extends CommonBindOptionsParameter {
+interface BindDocumentParameter extends CommonBindOptionsParameter {
   document: firestore.DocumentReference
 }
 
@@ -296,22 +318,23 @@ interface BindDocumentParamater extends CommonBindOptionsParameter {
  * @param extraOptions
  */
 export function bindDocument(
-  { vm, key, document, resolve, reject, ops }: BindDocumentParamater,
+  { target, document, resolve, reject, ops }: BindDocumentParameter,
   extraOptions: FirestoreOptions = DEFAULT_OPTIONS
 ) {
   const options = Object.assign({}, DEFAULT_OPTIONS, extraOptions) // fill default values
+  const key = 'value'
   // TODO: warning check if key exists?
   // const boundRefs = Object.create(null)
 
   const subs = Object.create(null)
   // bind here the function so it can be resolved anywhere
   // this is specially useful for refs
-  resolve = callOnceWithArg(resolve, () => walkGet(vm, key))
+  resolve = callOnceWithArg(resolve, () => walkGet(target, key))
   const unbind = document.onSnapshot((snapshot) => {
     if (snapshot.exists) {
       updateDataFromDocumentSnapshot(
         options,
-        vm,
+        target,
         key,
         snapshot,
         subs,
@@ -320,7 +343,7 @@ export function bindDocument(
         resolve
       )
     } else {
-      ops.set(vm, key, null)
+      ops.set(target, key, null)
       resolve(null)
     }
   }, reject)
@@ -329,7 +352,7 @@ export function bindDocument(
     unbind()
     if (reset !== false) {
       const value = typeof reset === 'function' ? reset() : null
-      ops.set(vm, key, value)
+      ops.set(target, key, value)
     }
     unsubscribeAll(subs)
   }

src/vuefire/firestore.ts

@@ -7,7 +7,14 @@ import {
   OperationsType,
 } from '../core'
 import { firestore } from 'firebase'
-import { ComponentPublicInstance, onBeforeUnmount, Plugin, Ref } from 'vue'
+import {
+  ComponentPublicInstance,
+  getCurrentInstance,
+  onBeforeUnmount,
+  Plugin,
+  Ref,
+  toRef,
+} from 'vue'
 
 export const ops: OperationsType = {
   set: (target, key, value) => walkSet(target, key, value),
@@ -21,22 +28,20 @@ const firestoreUnbinds = new WeakMap<
 >()
 
 function internalBind(
-  vm: Record<string, any>,
-  key: string,
+  target: Ref<any>,
   ref:
     | firestore.CollectionReference
     | firestore.Query
     | firestore.DocumentReference,
   ops: OperationsType,
-  options: FirestoreOptions
+  options?: FirestoreOptions
 ) {
   return new Promise((resolve, reject) => {
     let unbind
     if ('where' in ref) {
       unbind = bindCollection(
         {
-          vm,
-          key,
+          target,
           ops,
           collection: ref,
           resolve,
@@ -47,8 +52,7 @@ function internalBind(
     } else {
       unbind = bindDocument(
         {
-          vm,
-          key,
+          target,
           ops,
           document: ref,
           resolve,
@@ -57,16 +61,19 @@ function internalBind(
         options
       )
     }
-    if (!firestoreUnbinds.has(vm)) {
-      firestoreUnbinds.set(vm, {})
+    if (!firestoreUnbinds.has(target)) {
+      firestoreUnbinds.set(target, {})
     }
-    const unbinds = firestoreUnbinds.get(vm)!
+    const unbinds = firestoreUnbinds.get(target)!
+    // TODO: remove and refactor the firestoreUnbinds
+    const key = 'value'
     unbinds[key] = unbind
   })
 }
 
 export function internalUnbind(
   target: object,
+  // TODO: can go during the refactor
   key: string,
   reset?: FirestoreOptions['reset']
 ) {
@@ -156,8 +163,9 @@ export const firestorePlugin: Plugin = function firestorePlugin(
   app,
   pluginOptions: PluginOptions = defaultOptions
 ) {
-  const strategies = app.config.optionMergeStrategies
-  strategies.firestore = strategies.provide
+  // const strategies = app.config.optionMergeStrategies
+  // TODO: implement
+  // strategies.firestore =
 
   const globalOptions = Object.assign({}, defaultOptions, pluginOptions)
   const { bindName, unbindName } = globalOptions
@@ -203,14 +211,19 @@ export const firestorePlugin: Plugin = function firestorePlugin(
       //     : options.reset
       // )
     }
-    const promise = internalBind(this, key, ref, ops, options)
+    const promise = internalBind(
+      toRef(this.$data as any, key),
+      ref,
+      ops,
+      options
+    )
     // @ts-ignore we are allowed to write it
     this.$firestoreRefs[key] = ref
     return promise
   }
 
   app.mixin({
-    beforeMount(this: ComponentPublicInstance) {
+    beforeCreate(this: ComponentPublicInstance) {
       this.$firestoreRefs = Object.create(null)
     },
     created(this: ComponentPublicInstance) {
@@ -249,13 +262,21 @@ export function bind(
     | firestore.CollectionReference
     | firestore.Query
     | firestore.DocumentReference,
-  options: FirestoreOptions
+  options?: FirestoreOptions
 ) {
-  const promise = internalBind(target, 'value', ref, ops, options)
+  const promise = internalBind(target, ref, ops, options)
 
-  onBeforeUnmount(() => {
-    unbind(target)
-  })
+  // TODO: SSR serialize the values for Nuxt to expose them later and use them
+  // as initial values while specifying a wait: true to only swap objects once
+  // Firebase has done its initial sync. Also, on server, you don't need to
+  // create sync, you can read only once the whole thing so maybe internalBind
+  // should take an option like once: true to not setting up any listener
+
+  if (getCurrentInstance()) {
+    onBeforeUnmount(() => {
+      unbind(target, options && options.reset)
+    })
+  }
 
   return promise
 }

src/vuefire/index.ts

@@ -1,4 +1,5 @@
-export * from './rtdb'
+// TODO: add binds
+// export { rtdbPlugin } from './rtdb'
 export {
   firestorePlugin,
   bind as firestoreBind,