refactor: correct types and useCollection

Author: posva

Diff for: src/firestore/index.ts

@@ -41,11 +41,11 @@ function unsubscribeAll(subs: Record<string, FirestoreSubscription>) {
   }
 }
 
-function updateDataFromDocumentSnapshot(
+function updateDataFromDocumentSnapshot<T>(
   options: Required<FirestoreOptions>,
-  target: CommonBindOptionsParameter['target'],
+  target: Ref<T>,
   path: string,
-  snapshot: DocumentSnapshot,
+  snapshot: DocumentSnapshot<T>,
   subs: Record<string, FirestoreSubscription>,
   ops: CommonBindOptionsParameter['ops'],
   depth: number,
@@ -189,9 +189,9 @@ interface BindCollectionParameter extends CommonBindOptionsParameter {
 
 // TODO: refactor without using an object to improve size like the other functions
 
-export function bindCollection(
+export function bindCollection<T>(
   target: BindCollectionParameter['target'],
-  collection: BindCollectionParameter['collection'],
+  collection: CollectionReference<T> | Query<T>,
   ops: BindCollectionParameter['ops'],
   resolve: BindCollectionParameter['resolve'],
   reject: BindCollectionParameter['reject'],
@@ -209,7 +209,7 @@ export function bindCollection(
   const arraySubs: Record<string, FirestoreSubscription>[] = []
 
   const change = {
-    added: ({ newIndex, doc }: DocumentChange) => {
+    added: ({ newIndex, doc }: DocumentChange<T>) => {
       arraySubs.splice(newIndex, 0, Object.create(null))
       const subs = arraySubs[newIndex]
       const [data, refs] = extractRefs(options.serialize(doc), undefined, subs)
@@ -225,7 +225,7 @@ export function bindCollection(
         resolve.bind(null, doc)
       )
     },
-    modified: ({ oldIndex, newIndex, doc }: DocumentChange) => {
+    modified: ({ oldIndex, newIndex, doc }: DocumentChange<T>) => {
       const array = unref(arrayRef)
       const subs = arraySubs[oldIndex]
       const oldData = array[oldIndex]
@@ -246,7 +246,7 @@ export function bindCollection(
         resolve
       )
     },
-    removed: ({ oldIndex }: DocumentChange) => {
+    removed: ({ oldIndex }: DocumentChange<T>) => {
       const array = unref(arrayRef)
       ops.remove(array, oldIndex)
       unsubscribeAll(arraySubs.splice(oldIndex, 1)[0])
@@ -262,12 +262,7 @@ export function bindCollection(
       // from the query appearing as added
       // (https://firebase.google.com/docs/firestore/query-data/listen#view_changes_between_snapshots)
 
-      const docChanges =
-        /* istanbul ignore next */
-        typeof snapshot.docChanges === 'function'
-          ? snapshot.docChanges()
-          : /* istanbul ignore next to support firebase < 5*/
-            (snapshot.docChanges as unknown as DocumentChange[])
+      const docChanges = snapshot.docChanges()
 
       if (!isResolved && docChanges.length) {
         // isResolved is only meant to make sure we do the check only once
@@ -333,9 +328,9 @@ interface BindDocumentParameter extends CommonBindOptionsParameter {
  * @param param0
  * @param extraOptions
  */
-export function bindDocument(
+export function bindDocument<T>(
   target: BindDocumentParameter['target'],
-  document: BindDocumentParameter['document'],
+  document: DocumentReference<T>,
   ops: BindDocumentParameter['ops'],
   resolve: BindDocumentParameter['resolve'],
   reject: BindDocumentParameter['reject'],

Diff for: src/shared.ts

@@ -1,4 +1,8 @@
-import type { DocumentData, DocumentReference } from 'firebase/firestore'
+import type {
+  CollectionReference,
+  DocumentData,
+  DocumentReference,
+} from 'firebase/firestore'
 
 // FIXME: replace any with unknown or T generics
 
@@ -79,6 +83,14 @@ export function isDocumentRef(o: any): o is DocumentReference {
   return isObject(o) && o.type === 'document'
 }
 
+/**
+ * Checks if a variable is a Firestore Collection Reference
+ * @param o
+ */
+export function isCollectionRef(o: any): o is CollectionReference {
+  return isObject(o) && o.type === 'collection'
+}
+
 type ReferenceType = 'collection' | 'document' | 'query'
 
 /**

Diff for: src/vuefire/firestore.ts

@@ -16,12 +16,15 @@ import {
   App,
   ComponentPublicInstance,
   getCurrentInstance,
+  getCurrentScope,
   isVue3,
   onBeforeUnmount,
+  onScopeDispose,
   onUnmounted,
   ref,
   Ref,
   toRef,
+  InjectionKey,
 } from 'vue-demi'
 
 export const ops: OperationsType = {
@@ -234,7 +237,7 @@ export const firestorePlugin = function firestorePlugin(
       for (const key in refs) {
         this[bindName as '$bind'](
           key,
-          // @ts-ignore: FIXME: there is probably a wrong type in global properties
+          // @ts-expect-error: FIXME: there is probably a wrong type in global properties
           refs[key],
           globalOptions
         )
@@ -284,39 +287,43 @@ export function bind(
   return promise
 }
 
-export function useFirestore<T>(
-  docRef: DocumentReference<T>,
-  options?: FirestoreOptions
-): [Ref<T | null>, Promise<T | null>, UnbindType]
-export function useFirestore<T>(
-  collectionRef: Query<T> | CollectionReference<T>,
-  options?: FirestoreOptions
-): [Ref<T[]>, Promise<T[]>, UnbindType]
-export function useFirestore<T>(
-  docOrCollectionRef: CollectionReference<T> | Query<T> | DocumentReference<T>,
-  options?: FirestoreOptions
+const pendingPromises = new Set<Promise<any>>()
+
+// TODO: should be usable in different contexts, use inject, provide
+export function usePendingPromises() {
+  return Promise.all(pendingPromises)
+}
+
+export interface UseCollectionOptions {}
+
+/**
+ * Creates a reactive array of documents from a collection ref or a query from Firestore.
+ *
+ * @param collectionRef - query or collection
+ * @param options - optional options
+ * @returns
+ */
+export function useCollection<T>(
+  collectionRef: CollectionReference<T> | Query<T>,
+  options?: UseCollectionOptions
 ) {
-  const target =
-    'where' in docOrCollectionRef ? ref<T | null>(null) : ref<T[]>([])
+  const data = ref<T[]>()
 
-  let unbind: ReturnType<typeof bindCollection | typeof bindDocument>
+  let unbind!: ReturnType<typeof bindCollection>
   const promise = new Promise((resolve, reject) => {
-    unbind = ('where' in docOrCollectionRef ? bindCollection : bindDocument)(
-      target,
-      // the type is good because of the ternary
-      docOrCollectionRef as any,
-      ops,
-      resolve,
-      reject,
-      options
-    )
+    unbind = bindCollection(data, collectionRef, ops, resolve, reject, options)
   })
 
-  if (getCurrentInstance()) {
-    onUnmounted(() => unbind())
+  // TODO: warning
+  if (getCurrentScope()) {
+    pendingPromises.add(promise)
+    onScopeDispose(() => {
+      pendingPromises.delete(promise)
+      unbind()
+    })
   }
 
-  return [target, promise, unbind!]
+  return data
 }
 
 export const unbind = (target: Ref, reset?: FirestoreOptions['reset']) =>

Diff for: src/vuefire/index.ts

@@ -3,4 +3,7 @@ export {
   firestorePlugin,
   bind as firestoreBind,
   unbind as firestoreUnbind,
+  useCollection,
 } from './firestore'
+
+export type { UseCollectionOptions } from './firestore'

Diff for: tests/firestore.bind.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { useCollection } from '../../src'
+import { addDoc } from 'firebase/firestore'
+import { setupRefs } from '../utils'
+import { usePendingPromises } from '../../src/vuefire/firestore'
+
+describe('Firestore collections', () => {
+  const { itemRef, listRef, orderedListRef } = setupRefs()
+
+  it('binds a collection as an array', async () => {
+    const wrapper = mount(
+      {
+        template: 'no',
+        setup() {
+          const list = useCollection(orderedListRef)
+
+          return { list }
+        },
+      }
+      // should work without the plugin
+      // { global: { plugins: [firestorePlugin] } }
+    )
+
+    expect(wrapper.vm.list).toEqual([])
+    await usePendingPromises()
+
+    await addDoc(listRef, { name: 'a' })
+    await addDoc(listRef, { name: 'b' })
+    await addDoc(listRef, { name: 'c' })
+    expect(wrapper.vm.list).toHaveLength(3)
+    expect(wrapper.vm.list).toEqual([
+      { name: 'a' },
+      { name: 'b' },
+      { name: 'c' },
+    ])
+  })
+})

Diff for: tests/firestore/collection.spec.ts

@@ -0,0 +1,69 @@
+import { initializeApp } from 'firebase/app'
+import {
+  getFirestore,
+  connectFirestoreEmulator,
+  collection,
+  doc,
+  query,
+  orderBy,
+  CollectionReference,
+  getDocsFromServer,
+  QueryDocumentSnapshot,
+  deleteDoc,
+} from 'firebase/firestore'
+import { afterAll } from 'vitest'
+import { isCollectionRef, isDocumentRef } from '../src/shared'
+
+const firebaseApp = initializeApp({ projectId: 'vue-fire-store' })
+const firestore = getFirestore(firebaseApp)
+connectFirestoreEmulator(firestore, 'localhost', 8080)
+
+let _id = 0
+export function setupRefs() {
+  const testId = _id++
+  const testsCollection = collection(firestore, `__tests`)
+  const itemRef = doc(testsCollection, `item:${testId}`)
+  const forItemsRef = doc(testsCollection, `forItems:${testId}`)
+
+  const listRef = collection(forItemsRef, 'list')
+  const orderedListRef = query(listRef, orderBy('name'))
+
+  afterAll(async () => {
+    // clean up the tests data
+    await Promise.all([
+      deleteDoc(itemRef),
+      clearCollection(listRef),
+      clearCollection(testsCollection),
+    ])
+  })
+
+  return { itemRef, listRef, orderedListRef, testId, col: forItemsRef }
+}
+
+export async function clearCollection(collection: CollectionReference) {
+  const { docs } = await getDocsFromServer(collection)
+  await Promise.all(
+    docs.map(doc => {
+      return recursiveDeleteDoc(doc)
+    })
+  )
+}
+
+export async function recursiveDeleteDoc(doc: QueryDocumentSnapshot) {
+  const docData = doc.data()
+  const promises: Promise<any>[] = []
+  if (docData) {
+    for (const key in docData) {
+      if (isCollectionRef(docData[key])) {
+        promises.push(clearCollection(docData[key]))
+      } else if (isDocumentRef(docData[key])) {
+        promises.push(recursiveDeleteDoc(docData[key]))
+      }
+    }
+  }
+  promises.push(deleteDoc(doc.ref))
+  return Promise.all(promises)
+}
+
+export const sleep = (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms))