feat: usePendingPromises()

Author: posva

src/database/index.ts

@@ -13,17 +13,24 @@ import type { DatabaseReference, Query } from 'firebase/database'
 import {
   noop,
   OperationsType,
+  ResetOption,
   walkSet,
   _MaybeRef,
   _RefWithState,
 } from '../shared'
 import { rtdbUnbinds } from './optionsApi'
-import { bindAsArray, bindAsObject, _DatabaseRefOptions } from './subscribe'
+import {
+  bindAsArray,
+  bindAsObject,
+  rtdbOptions,
+  _DatabaseRefOptions,
+} from './subscribe'
 import {
   VueDatabaseDocumentData,
   VueDatabaseQueryData,
   _RefDatabase,
 } from './utils'
+import { addPendingPromise } from '../ssr/plugin'
 
 export { databasePlugin } from './optionsApi'
 
@@ -43,17 +50,19 @@ type UnbindType = ReturnType<typeof bindAsArray | typeof bindAsObject>
 
 export function _useDatabaseRef(
   reference: _MaybeRef<DatabaseReference | Query>,
-  options: UseDatabaseRefOptions = {}
+  localOptions: UseDatabaseRefOptions = {}
 ) {
+  const options = Object.assign({}, rtdbOptions, localOptions)
   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>>()
+  let isPromiseAdded = false
   const hasCurrentScope = getCurrentScope()
+  let removePendingPromise = noop
 
   function bindDatabaseRef() {
     const p = new Promise<unknown | null>((resolve, reject) => {
@@ -84,11 +93,10 @@ export function _useDatabaseRef(
     })
 
     // only add the first promise to the pending ones
-    if (!createdPromises.size) {
-      // TODO: add the pending promise like in firestore
-      // pendingPromises.add(p)
+    if (!isPromiseAdded) {
+      removePendingPromise = addPendingPromise(p, unref(reference))
+      isPromiseAdded = true
     }
-    createdPromises.add(p)
     promise.value = p
 
     p.catch((reason) => {
@@ -112,19 +120,14 @@ export function _useDatabaseRef(
   }
 
   if (hasCurrentScope) {
-    onScopeDispose(() => {
-      // TODO: clear pending promises
-      // for (const p of createdPromises) {
-      //   pendingPromises.delete(p)
-      // }
-      _unbind(options.reset)
-    })
+    onScopeDispose(unbind)
   }
 
   // TODO: rename to stop
-  function unbind() {
+  function unbind(reset: ResetOption = options.reset) {
     stopWatcher()
-    _unbind(options.reset)
+    removePendingPromise()
+    _unbind(reset)
   }
 
   return Object.defineProperties(data, {
@@ -140,7 +143,7 @@ export function _useDatabaseRef(
 export function internalUnbind(
   key: string,
   unbinds: Record<string, UnbindType> | undefined,
-  reset?: _DatabaseRefOptions['reset']
+  reset?: ResetOption
 ) {
   if (unbinds && unbinds[key]) {
     unbinds[key](reset)

src/firestore/index.ts

@@ -20,6 +20,7 @@ import {
   isDocumentRef,
   noop,
   OperationsType,
+  ResetOption,
   walkSet,
   _MaybeRef,
   _RefWithState,
@@ -67,6 +68,7 @@ export function _useFirestoreRef(
   const promise = shallowRef() as ShallowRef<Promise<unknown | null>>
   let isPromiseAdded = false
   const hasCurrentScope = getCurrentScope()
+  let removePendingPromise = noop
 
   function bindFirestoreRef() {
     const p = new Promise<unknown | null>((resolve, reject) => {
@@ -91,7 +93,8 @@ export function _useFirestoreRef(
 
     // only add the first promise to the pending ones
     if (!isPromiseAdded) {
-      addPendingPromise(p, unref(docOrCollectionRef))
+      // TODO: is there a way to make this only for the first render?
+      removePendingPromise = addPendingPromise(p, unref(docOrCollectionRef))
       isPromiseAdded = true
     }
     promise.value = p
@@ -120,15 +123,14 @@ export function _useFirestoreRef(
 
   // TODO: warn else
   if (hasCurrentScope) {
-    onScopeDispose(() => {
-      _unbind(options.reset)
-    })
+    onScopeDispose(unbind)
   }
 
   // TODO: rename to stop
-  function unbind() {
+  function unbind(reset: ResetOption = options.reset) {
     stopWatcher()
-    _unbind(options.reset)
+    removePendingPromise()
+    _unbind(reset)
   }
 
   // allow to destructure the returned value

src/firestore/subscribe.ts

@@ -1,11 +1,12 @@
+import { extractRefs, firestoreDefaultConverter } from './utils'
 import {
-  createSnapshot,
-  extractRefs,
-  firestoreDefaultConverter,
-  FirestoreSerializer,
-} from './utils'
-import { walkGet, callOnceWithArg, OperationsType, _MaybeRef } from '../shared'
-import { isRef, ref, Ref, unref, watch } from 'vue-demi'
+  walkGet,
+  callOnceWithArg,
+  OperationsType,
+  _MaybeRef,
+  ResetOption,
+} from '../shared'
+import { ref, Ref, unref } from 'vue-demi'
 import type {
   CollectionReference,
   DocumentChange,
@@ -21,7 +22,7 @@ import { onSnapshot } from 'firebase/firestore'
 
 export interface FirestoreOptions {
   maxRefDepth?: number
-  reset?: boolean | (() => any)
+  reset?: ResetOption
 
   // FIXME: should only be possible in global options
   converter?: FirestoreDataConverter<unknown>
@@ -40,7 +41,7 @@ export interface FirestoreOptions {
 
 export interface _GlobalFirestoreOptions extends FirestoreOptions {
   maxRefDepth: number
-  reset: boolean | (() => any)
+  reset: ResetOption
   converter: FirestoreDataConverter<unknown>
   wait: boolean
 }

src/index.ts

@@ -29,3 +29,6 @@ export type {
   VueFirestoreObject,
   FirestoreOption,
 } from './firestore/optionsApi'
+
+export { useFirebaseApp } from './app'
+export { usePendingPromises } from './ssr/plugin'

src/shared.ts

@@ -24,7 +24,10 @@ export interface OperationsType {
   remove<T extends unknown = unknown>(array: T[], index: number): T[]
 }
 
-// TODO: probably boolean | void or just boolean
+/**
+ * Allow resetting a subscription vue ref when the source changes or is removed. `false` keeps the value as is while
+ * true resets it to `null` for objects and `[]` for arrays. A function allows to specify a custom reset value.
+ */
 export type ResetOption = boolean | (() => TODO)
 
 export type TODO = any
@@ -142,9 +145,8 @@ export interface _RefWithState<T, E = Error> extends Ref<T> {
   get error(): Ref<E | undefined>
   get pending(): Ref<boolean>
 
-  get promise(): ShallowRef<Promise<void>>
-  // TODO: extract type from bindDocument and bindCollection
-  unbind: () => void
+  get promise(): ShallowRef<Promise<T>>
+  unbind: (reset?: ResetOption) => void
 }
 
 /**

src/ssr/plugin.ts

@@ -7,7 +7,7 @@ import {
 } from 'firebase/firestore'
 import type { App } from 'vue'
 import { useFirebaseApp, _FirebaseAppInjectionKey } from '../app'
-import { isDatabaseReference, isFirestoreDataReference } from '../shared'
+import { isDatabaseReference, isFirestoreDataReference, noop } from '../shared'
 
 export function VueFireSSR(app: App, firebaseApp: FirebaseApp) {
   app.provide(_FirebaseAppInjectionKey, firebaseApp)
@@ -41,6 +41,8 @@ export function addPendingPromise(
     // TODO: warn if in SSR context
     // throw new Error('Could not get the path of the data source')
   }
+
+  return ssrKey ? () => pendingPromises.delete(ssrKey!) : noop
 }
 
 function getDataSourcePath(
@@ -57,6 +59,24 @@ function getDataSourcePath(
     : null
 }
 
+/**
+ * Allows awaiting for all pending data sources. Useful to wait for SSR
+ *
+ * @param name - optional name of teh firebase app
+ * @returns - a Promise that resolves with an array of all the resolved pending promises
+ */
+export function usePendingPromises(name?: string) {
+  const app = useFirebaseApp(name)
+  const pendingPromises = appPendingPromises.get(app)
+  return pendingPromises
+    ? Promise.all(
+        Array.from(pendingPromises).map(([key, promise]) =>
+          promise.then((data) => [key, data] as const)
+        )
+      )
+    : Promise.resolve([])
+}
+
 export function getInitialData(
   app?: FirebaseApp
 ): Promise<Record<string, unknown>> {
@@ -70,11 +90,7 @@ export function getInitialData(
     return Promise.resolve({})
   }
 
-  return Promise.all(
-    Array.from(pendingPromises).map(([key, promise]) =>
-      promise.then((data) => [key, data] as const)
-    )
-  ).then((keyData) =>
+  return usePendingPromises(app.name).then((keyData) =>
     keyData.reduce((initialData, [key, data]) => {
       initialData[key] = data
       return initialData