feat(database): allow passing a vue ref

Author: posva

src/database/index.ts

@@ -1,6 +1,22 @@
-import { Ref, ref, getCurrentScope, onScopeDispose } from 'vue-demi'
+import {
+  Ref,
+  ref,
+  getCurrentScope,
+  onScopeDispose,
+  shallowRef,
+  ShallowRef,
+  unref,
+  watch,
+  isRef,
+} from 'vue-demi'
 import type { DatabaseReference, Query } from 'firebase/database'
-import { OperationsType, walkSet, _RefWithState } from '../shared'
+import {
+  noop,
+  OperationsType,
+  walkSet,
+  _MaybeRef,
+  _RefWithState,
+} from '../shared'
 import { rtdbUnbinds } from './optionsApi'
 import { bindAsArray, bindAsObject, _DatabaseRefOptions } from './subscribe'
 
@@ -14,68 +30,98 @@ const ops: OperationsType = {
   remove: (array, index) => array.splice(index, 1),
 }
 
-export interface _UseDatabaseRefOptions extends _DatabaseRefOptions {
+export interface UseDatabaseRefOptions extends _DatabaseRefOptions {
   target?: Ref<unknown>
 }
 
 type UnbindType = ReturnType<typeof bindAsArray | typeof bindAsObject>
 
 export function _useDatabaseRef(
-  reference: DatabaseReference | Query,
-  options: _UseDatabaseRefOptions = {}
+  reference: _MaybeRef<DatabaseReference | Query>,
+  options: UseDatabaseRefOptions = {}
 ) {
-  let unbind!: UnbindType
+  let _unbind!: UnbindType
 
   const data = options.target || ref<unknown | null>(options.initialValue)
   const error = ref<Error>()
   const pending = ref(true)
+  // force the type since its value is set right after and undefined isn't possible
+  const promise = shallowRef() as ShallowRef<Promise<unknown | null>>
+  const createdPromises = new Set<Promise<unknown | null>>()
+  const hasCurrentScope = getCurrentScope()
+
+  function bindDatabaseRef() {
+    const p = new Promise<unknown | null>((resolve, reject) => {
+      const referenceValue = unref(reference)
+      if (Array.isArray(data.value)) {
+        _unbind = bindAsArray(
+          {
+            target: data,
+            collection: referenceValue,
+            resolve,
+            reject,
+            ops,
+          },
+          options
+        )
+      } else {
+        _unbind = bindAsObject(
+          {
+            target: data,
+            document: referenceValue,
+            resolve,
+            reject,
+            ops,
+          },
+          options
+        )
+      }
+    })
 
-  const promise = new Promise((resolve, reject) => {
-    if (Array.isArray(data.value)) {
-      unbind = bindAsArray(
-        {
-          target: data,
-          collection: reference,
-          resolve,
-          reject,
-          ops,
-        },
-        options
-      )
-    } else {
-      unbind = bindAsObject(
-        {
-          target: data,
-          document: reference,
-          resolve,
-          reject,
-          ops,
-        },
-        options
-      )
+    // only add the first promise to the pending ones
+    if (!createdPromises.size) {
+      // TODO: add the pending promise like in firestore
+      // pendingPromises.add(p)
     }
-  })
+    createdPromises.add(p)
+    promise.value = p
 
-  promise
-    .catch((reason) => {
+    p.catch((reason) => {
       error.value = reason
-    })
-    .finally(() => {
+    }).finally(() => {
       pending.value = false
     })
 
-  // 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 _useDatabaseRef
-  // should take an option like once: true to not setting up any listener
+    // 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 _useDatabaseRef
+    // should take an option like once: true to not setting up any listener
+  }
+
+  let stopWatcher: ReturnType<typeof watch> = noop
+  if (isRef(reference)) {
+    stopWatcher = watch(reference, bindDatabaseRef, { immediate: true })
+  } else {
+    bindDatabaseRef()
+  }
 
-  if (getCurrentScope()) {
+  if (hasCurrentScope) {
     onScopeDispose(() => {
-      unbind(options.reset)
+      // TODO: clear pending promises
+      // for (const p of createdPromises) {
+      //   pendingPromises.delete(p)
+      // }
+      _unbind(options.reset)
     })
   }
 
+  // TODO: rename to stop
+  function unbind() {
+    stopWatcher()
+    _unbind(options.reset)
+  }
+
   return Object.defineProperties(data, {
     data: { get: () => data },
     error: { get: () => error },
@@ -100,36 +146,58 @@ export function internalUnbind(
   // delete vm._firebaseUnbinds[key]
 }
 
+export type UseListOptions = UseDatabaseRefOptions
+export type UseObjectOptions = UseDatabaseRefOptions
+
 /**
  * Creates a reactive variable connected to the database.
  *
  * @param reference - Reference or query to the database
  * @param options - optional options
  */
 export function useList<T = unknown>(
-  reference: DatabaseReference | Query,
-  options?: _DatabaseRefOptions
-): _RefDatabase<T[]> {
+  reference: _MaybeRef<DatabaseReference | Query>,
+  options?: UseListOptions
+): _RefDatabase<VueDatabaseQueryData<T>> {
   const unbinds = {}
   const data = ref<T[]>([]) as Ref<T[]>
   return _useDatabaseRef(reference, {
     target: data,
     ...options,
-  }) as _RefDatabase<T[]>
+  }) as _RefDatabase<VueDatabaseQueryData<T>>
 }
 
 export function useObject<T = unknown>(
-  reference: DatabaseReference,
-  options?: _DatabaseRefOptions
-): _RefDatabase<T | undefined> {
+  reference: _MaybeRef<DatabaseReference>,
+  options?: UseObjectOptions
+): _RefDatabase<VueDatabaseDocumentData<T> | undefined> {
   const data = ref<T>() as Ref<T | undefined>
   return _useDatabaseRef(reference, {
     target: data,
     ...options,
-  }) as _RefDatabase<T | undefined>
+  }) as _RefDatabase<VueDatabaseDocumentData<T> | undefined>
 }
 
 export const unbind = (target: Ref, reset?: _DatabaseRefOptions['reset']) =>
   internalUnbind('', rtdbUnbinds.get(target), reset)
 
 export interface _RefDatabase<T> extends _RefWithState<T, Error> {}
+
+/**
+ * Type used by default by the `serialize` option.
+ */
+export type VueDatabaseDocumentData<T = unknown> =
+  | null
+  | (T & {
+      /**
+       * id of the document
+       */
+      readonly id: string
+    })
+
+/**
+ * Same as VueDatabaseDocumentData but for a query.
+ */
+export type VueDatabaseQueryData<T = unknown> = Array<
+  Exclude<VueDatabaseDocumentData<T>, null>
+>

src/firestore/index.ts

@@ -18,6 +18,7 @@ import {
 } from 'vue-demi'
 import {
   isDocumentRef,
+  noop,
   OperationsType,
   walkSet,
   _MaybeRef,
@@ -101,9 +102,11 @@ export function _useFirestoreRef(
     })
   }
 
-  let unwatch: ReturnType<typeof watch> | undefined
+  let stopWatcher: ReturnType<typeof watch> = noop
   if (isRef(docOrCollectionRef)) {
-    unwatch = watch(docOrCollectionRef, bindFirestoreRef, { immediate: true })
+    stopWatcher = watch(docOrCollectionRef, bindFirestoreRef, {
+      immediate: true,
+    })
   } else {
     bindFirestoreRef()
   }
@@ -126,9 +129,7 @@ export function _useFirestoreRef(
 
   // TODO: rename to stop
   function unbind() {
-    if (unwatch) {
-      unwatch()
-    }
+    stopWatcher()
     _unbind(options.reset)
   }
 

src/index.ts

@@ -1,10 +1,17 @@
 export { useList, useObject } from './database'
+export type {
+  UseListOptions,
+  UseObjectOptions,
+  _RefDatabase,
+  UseDatabaseRefOptions,
+  VueDatabaseDocumentData,
+  VueDatabaseQueryData,
+} from './database'
 
 export { databasePlugin } from './database/optionsApi'
 export type { DatabasePluginOptions } from './database/optionsApi'
 
 export { useCollection, useDocument } from './firestore'
-
 export type {
   UseCollectionOptions,
   UseDocumentOptions,

src/shared.ts

@@ -7,6 +7,8 @@ import type {
 } from 'firebase/firestore'
 import type { Ref, ShallowRef } from 'vue-demi'
 
+export const noop = () => {}
+
 // FIXME: replace any with unknown or T generics
 
 export interface OperationsType {