feat(firestore): Add Firestore

Author: davideast

src/firestore/collection-group/collection-group.spec.ts

@@ -4,7 +4,6 @@ import { BehaviorSubject } from 'rxjs';
 import { skip, switchMap, take } from 'rxjs/operators';
 import { TestBed } from '@angular/core/testing';
 import { COMMON_CONFIG } from '../../test-config';
-import 'firebase/firestore';
 
 import {
   createRandomStocks,

src/firestore/collection-group/collection-group.ts

@@ -1,12 +1,12 @@
 import { from, Observable } from 'rxjs';
 import { fromCollectionRef } from '../observable/fromRef';
 import { filter, map, observeOn, scan } from 'rxjs/operators';
-import firebase from 'firebase/app';
 
 import { DocumentChangeAction, DocumentChangeType, DocumentData, Query } from '../interfaces';
 import { validateEventsArray } from '../collection/collection';
 import { docChanges, sortedChanges } from '../collection/changes';
 import { AngularFirestore } from '../firestore';
+import { getDocs } from 'firebase/firestore';
 
 /**
  * AngularFirestoreCollectionGroup service
@@ -19,7 +19,7 @@ import { AngularFirestore } from '../firestore';
  *
  * Example:
  *
- * const collectionGroup = firebase.firestore.collectionGroup('stocks');
+ * const collectionGroup = collectionGroup('stocks');
  * const query = collectionRef.where('price', '>', '0.01');
  * const fakeStock = new AngularFirestoreCollectionGroup<Stock>(query, afs);
  *
@@ -105,8 +105,10 @@ export class AngularFirestoreCollectionGroup<T = DocumentData> {
   /**
    * Retrieve the results of the query once.
    */
-  get(options?: firebase.firestore.GetOptions) {
-    return from(this.query.get(options)).pipe(
+  // MARK: Breaking change
+  // previous: get(options?: firebase.firestore.GetOptions)
+  get() {
+    return from(getDocs(this.query)).pipe(
       observeOn(this.afs.schedulers.insideAngular)
     );
   }

src/firestore/collection/changes.ts

@@ -2,6 +2,7 @@ import { fromCollectionRef } from '../observable/fromRef';
 import { Observable, SchedulerLike } from 'rxjs';
 import { distinctUntilChanged, map, pairwise, scan, startWith } from 'rxjs/operators';
 import { DocumentChange, DocumentChangeAction, DocumentChangeType, Query } from '../interfaces';
+import { refEqual } from 'firebase/firestore';
 
 /**
  * Return a stream of document changes on a query. These results are not in sort order but in
@@ -19,8 +20,8 @@ export function docChanges<T>(query: Query, scheduler?: SchedulerLike): Observab
         if (priorAction && JSON.stringify(priorAction.payload.metadata) !== JSON.stringify(action.payload.metadata)) {
           // go through all the docs in payload and figure out which ones changed
           action.payload.docs.forEach((currentDoc, currentIndex) => {
-            const docChange = docChanges.find(d => d.doc.ref.isEqual(currentDoc.ref));
-            const priorDoc = priorAction?.payload.docs.find(d => d.ref.isEqual(currentDoc.ref));
+            const docChange = docChanges.find(d => refEqual(d.doc.ref, currentDoc.ref));
+            const priorDoc = priorAction?.payload.docs.find(d => refEqual(d.ref, currentDoc.ref));
             if (docChange && JSON.stringify(docChange.doc.metadata) === JSON.stringify(currentDoc.metadata) ||
               !docChange && priorDoc && JSON.stringify(priorDoc.metadata) === JSON.stringify(currentDoc.metadata)) {
               // document doesn't appear to have changed, don't log another action
@@ -94,14 +95,14 @@ function sliceAndSplice<T>(
 export function combineChange<T>(combined: DocumentChange<T>[], change: DocumentChange<T>): DocumentChange<T>[] {
   switch (change.type) {
     case 'added':
-      if (combined[change.newIndex] && combined[change.newIndex].doc.ref.isEqual(change.doc.ref)) {
+      if (combined[change.newIndex] && refEqual(combined[change.newIndex].doc.ref, change.doc.ref)) {
         // Not sure why the duplicates are getting fired
       } else {
         return sliceAndSplice(combined, change.newIndex, 0, change);
       }
       break;
     case 'modified':
-      if (combined[change.oldIndex] == null || combined[change.oldIndex].doc.ref.isEqual(change.doc.ref)) {
+      if (combined[change.oldIndex] == null || refEqual(combined[change.oldIndex].doc.ref, change.doc.ref)) {
         // When an item changes position we first remove it
         // and then add it's new position
         if (change.oldIndex !== change.newIndex) {
@@ -115,7 +116,7 @@ export function combineChange<T>(combined: DocumentChange<T>[], change: Document
       }
       break;
     case 'removed':
-      if (combined[change.oldIndex] && combined[change.oldIndex].doc.ref.isEqual(change.doc.ref)) {
+      if (combined[change.oldIndex] && refEqual(combined[change.oldIndex].doc.ref, change.doc.ref)) {
         return sliceAndSplice(combined, change.oldIndex, 1);
       }
       break;

src/firestore/collection/collection.spec.ts

@@ -2,7 +2,6 @@ import { AngularFireModule, FirebaseApp } from '@angular/fire';
 import { AngularFirestore, SETTINGS, AngularFirestoreModule, AngularFirestoreCollection, QueryFn, CollectionReference } from '@angular/fire/firestore';
 import { BehaviorSubject } from 'rxjs';
 import { skip, switchMap, take } from 'rxjs/operators';
-import 'firebase/firestore';
 
 import { TestBed } from '@angular/core/testing';
 import { COMMON_CONFIG } from '../../test-config';

src/firestore/collection/collection.ts

@@ -1,7 +1,7 @@
 import { from, Observable } from 'rxjs';
 import { fromCollectionRef } from '../observable/fromRef';
 import { filter, map, observeOn, pairwise, scan, startWith } from 'rxjs/operators';
-import firebase from 'firebase/app';
+import { addDoc, doc, getDocs } from 'firebase/firestore';
 
 import { CollectionReference, DocumentChangeAction, DocumentChangeType, DocumentData, DocumentReference, Query } from '../interfaces';
 import { docChanges, sortedChanges } from './changes';
@@ -126,8 +126,10 @@ export class AngularFirestoreCollection<T = DocumentData> {
   /**
    * Retrieve the results of the query once.
    */
-  get(options?: firebase.firestore.GetOptions) {
-    return from(this.query.get(options)).pipe(
+  // MARK: Breaking change
+  // previous: get(options?: firebase.firestore.GetOptions)
+  get() {
+    return from(getDocs(this.query)).pipe(
       observeOn(this.afs.schedulers.insideAngular),
     );
   }
@@ -140,14 +142,14 @@ export class AngularFirestoreCollection<T = DocumentData> {
    * the data fits the criteria of the query.
    */
   add(data: T): Promise<DocumentReference<T>> {
-    return this.ref.add(data);
+    return addDoc(this.ref, data);
   }
 
   /**
    * Create a reference to a single document in a collection.
    */
   doc<T2 = T>(path?: string): AngularFirestoreDocument<T2> {
     // TODO is there a better way to solve this type issue
-    return new AngularFirestoreDocument(this.ref.doc(path) as any, this.afs);
+    return new AngularFirestoreDocument(doc(this.ref, path) as any, this.afs);
   }
 }

src/firestore/document/document.spec.ts

@@ -6,8 +6,6 @@ import { TestBed } from '@angular/core/testing';
 import { COMMON_CONFIG } from '../../test-config';
 
 import { FAKE_STOCK_DATA, rando, randomName, Stock } from '../utils.spec';
-import firebase from 'firebase/app';
-import 'firebase/firestore';
 
 describe('AngularFirestoreDocument', () => {
   let app: FirebaseApp;
@@ -36,7 +34,7 @@ describe('AngularFirestoreDocument', () => {
 
     it('should get unwrapped snapshot', async (done: any) => {
       const randomCollectionName = afs.firestore.collection('a').doc().id;
-      const ref = afs.firestore.doc(`${randomCollectionName}/FAKE`) as firebase.firestore.DocumentReference<Stock>;
+      const ref = afs.firestore.doc(`${randomCollectionName}/FAKE`) as DocumentReference<Stock>;
       const stock = new AngularFirestoreDocument(ref, afs);
       await stock.set(FAKE_STOCK_DATA);
       const obs$ = stock.valueChanges();

src/firestore/document/document.ts

@@ -1,10 +1,10 @@
 import { from, Observable } from 'rxjs';
-import { Action, DocumentData, DocumentReference, DocumentSnapshot, QueryFn, SetOptions } from '../interfaces';
+import { Action, DocumentData, DocumentReference, DocumentSnapshot, QueryFn, SetOptions, CollectionReference } from '../interfaces';
 import { fromDocRef } from '../observable/fromRef';
 import { map, observeOn } from 'rxjs/operators';
 import { AngularFirestore, associateQuery } from '../firestore';
 import { AngularFirestoreCollection } from '../collection/collection';
-import firebase from 'firebase/app';
+import { setDoc, updateDoc, deleteDoc, getDoc, collection } from 'firebase/firestore';
 
 /**
  * AngularFirestoreDocument service
@@ -40,29 +40,29 @@ export class AngularFirestoreDocument<T = DocumentData> {
    * Create or overwrite a single document.
    */
   set(data: T, options?: SetOptions): Promise<void> {
-    return this.ref.set(data, options);
+    return setDoc(this.ref, data, options);
   }
 
   /**
    * Update some fields of a document without overwriting the entire document.
    */
   update(data: Partial<T>): Promise<void> {
-    return this.ref.update(data);
+    return updateDoc(this.ref, data);
   }
 
   /**
    * Delete a document.
    */
   delete(): Promise<void> {
-    return this.ref.delete();
+    return deleteDoc(this.ref);
   }
 
   /**
    * Create a reference to a sub-collection given a path and an optional query
    * function.
    */
   collection<R = DocumentData>(path: string, queryFn?: QueryFn): AngularFirestoreCollection<R> {
-    const collectionRef = this.ref.collection(path) as firebase.firestore.CollectionReference<R>;
+    const collectionRef = collection(this.ref, path) as CollectionReference<R>;
     const { ref, query } = associateQuery(collectionRef, queryFn);
     return new AngularFirestoreCollection(ref, query, this.afs);
   }
@@ -99,8 +99,10 @@ export class AngularFirestoreDocument<T = DocumentData> {
   /**
    * Retrieve the document once.
    */
-  get(options?: firebase.firestore.GetOptions) {
-    return from(this.ref.get(options)).pipe(
+  // MARK: Breaking change
+  // previous: get(options?: firebase.firestore.GetOptions)
+  get() {
+    return from(getDoc(this.ref)).pipe(
       observeOn(this.afs.schedulers.insideAngular),
     );
   }

src/firestore/firestore.spec.ts

@@ -3,7 +3,6 @@ import { AngularFirestore, SETTINGS, AngularFirestoreModule, AngularFirestoreDoc
 
 import { TestBed } from '@angular/core/testing';
 import { COMMON_CONFIG } from '../test-config';
-import 'firebase/firestore';
 import { rando } from './utils.spec';
 
 describe('AngularFirestore', () => {

src/firestore/firestore.ts

@@ -24,8 +24,7 @@ import {
   FirebaseApp
 } from '@angular/fire';
 import { isPlatformServer } from '@angular/common';
-import firebase from 'firebase/app';
-import 'firebase/firestore';
+import { FirebaseFirestore, useFirestoreEmulator, enableIndexedDbPersistence, collection, collectionGroup, doc } from 'firebase/firestore';
 import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
 import { ɵfetchInstance, ɵlogAuthEmulatorError } from '@angular/fire';
 
@@ -36,8 +35,8 @@ export const ENABLE_PERSISTENCE = new InjectionToken<boolean>('angularfire2.enab
 export const PERSISTENCE_SETTINGS = new InjectionToken<PersistenceSettings | undefined>('angularfire2.firestore.persistenceSettings');
 export const SETTINGS = new InjectionToken<Settings>('angularfire2.firestore.settings');
 
-// SEMVER(7): use Parameters to detirmine the useEmulator arguments
-// type UseEmulatorArguments = Parameters<typeof firebase.firestore.Firestore.prototype.useEmulator>;
+// SEMVER(7): use Parameters to determine the useEmulator arguments
+// type UseEmulatorArguments = Parameters<typeof Firestore.prototype.useEmulator>;
 type UseEmulatorArguments = [string, number];
 export const USE_EMULATOR = new InjectionToken<UseEmulatorArguments>('angularfire2.firestore.use-emulator');
 
@@ -60,8 +59,8 @@ export function associateQuery<T>(collectionRef: CollectionReference<T>, queryFn
 }
 
 type InstanceCache = Map<FirebaseApp, [
-  firebase.firestore.Firestore,
-  firebase.firestore.Settings | null,
+  FirebaseFirestore,
+  Settings | null,
   UseEmulatorArguments | null,
   boolean | null]
 >;
@@ -125,7 +124,7 @@ type InstanceCache = Map<FirebaseApp, [
   providedIn: 'any'
 })
 export class AngularFirestore {
-  public readonly firestore: firebase.firestore.Firestore;
+  public readonly firestore: FirebaseFirestore;
   public readonly persistenceEnabled$: Observable<boolean>;
   public readonly schedulers: ɵAngularFireSchedulers;
   public readonly keepUnstableUntilFirst: <T>(obs: Observable<T>) => Observable<T>;
@@ -151,26 +150,30 @@ export class AngularFirestore {
     this.keepUnstableUntilFirst = ɵkeepUnstableUntilFirstFactory(this.schedulers);
 
     const app = ɵfirebaseAppFactory(options, zone, nameOrConfig);
-    if (!firebase.auth && useAuthEmulator) {
-      ɵlogAuthEmulatorError();
-    }
+    // if (!firebase.auth && useAuthEmulator) {
+    //   ɵlogAuthEmulatorError();
+    // }
     const useEmulator: UseEmulatorArguments | null = _useEmulator;
 
     [this.firestore, this.persistenceEnabled$] = ɵfetchInstance(`${app.name}.firestore`, 'AngularFirestore', app, () => {
       const firestore = zone.runOutsideAngular(() => app.firestore());
-      if (settings) {
-        firestore.settings(settings);
-      }
+
+      // TODO(team): Initialize settings in NgModule for initializeFirestore()
+      // if (settings) {
+      //   firestore.settings(settings);
+      // }
+
       if (useEmulator) {
-        firestore.useEmulator(...useEmulator);
+        const [host, port] = useEmulator;
+        useFirestoreEmulator(firestore, host, port);
       }
 
       if (shouldEnablePersistence && !isPlatformServer(platformId)) {
         // We need to try/catch here because not all enablePersistence() failures are caught
         // https://github.com/firebase/firebase-js-sdk/issues/608
         const enablePersistence = () => {
           try {
-            return from(firestore.enablePersistence(persistenceSettings || undefined).then(() => true, () => false));
+            return from(enableIndexedDbPersistence(firestore, persistenceSettings || undefined).then(() => true, () => false));
           } catch (e) {
             if (typeof console !== 'undefined') { console.warn(e); }
             return of(false);
@@ -195,7 +198,7 @@ export class AngularFirestore {
   collection<T>(pathOrRef: string | CollectionReference<T>, queryFn?: QueryFn): AngularFirestoreCollection<T> {
     let collectionRef: CollectionReference<T>;
     if (typeof pathOrRef === 'string') {
-      collectionRef = this.firestore.collection(pathOrRef) as firebase.firestore.CollectionReference<T>;
+      collectionRef = collection(this.firestore, pathOrRef) as CollectionReference<T>;
     } else {
       collectionRef = pathOrRef;
     }
@@ -211,8 +214,8 @@ export class AngularFirestore {
    */
   collectionGroup<T>(collectionId: string, queryGroupFn?: QueryGroupFn<T>): AngularFirestoreCollectionGroup<T> {
     const queryFn = queryGroupFn || (ref => ref);
-    const collectionGroup: Query<T> = this.firestore.collectionGroup(collectionId) as firebase.firestore.Query<T>;
-    return new AngularFirestoreCollectionGroup<T>(queryFn(collectionGroup), this);
+    const colGroup: Query<T> = collectionGroup(this.firestore, collectionId) as Query<T>;
+    return new AngularFirestoreCollectionGroup<T>(queryFn(colGroup), this);
   }
 
   /**
@@ -227,7 +230,7 @@ export class AngularFirestore {
   doc<T>(pathOrRef: string | DocumentReference<T>): AngularFirestoreDocument<T> {
     let ref: DocumentReference<T>;
     if (typeof pathOrRef === 'string') {
-      ref = this.firestore.doc(pathOrRef) as firebase.firestore.DocumentReference<T>;
+      ref = doc(this.firestore, pathOrRef) as DocumentReference<T>;
     } else {
       ref = pathOrRef;
     }
@@ -239,6 +242,7 @@ export class AngularFirestore {
    * Returns a generated Firestore Document Id.
    */
   createId() {
-    return this.firestore.collection('_').doc().id;
+    const col = collection(this.firestore, '_');
+    return doc(col).id;
   }
 }