Doc changes

Author: jamesdaniels

docs/version-7-upgrade.md

@@ -2,6 +2,8 @@
 
 Intended to be run with Angular 12, AngularFire 7.0 allows you to take full advtange of the new tree-shakable Firebase JS SDK (v9) while also providing a compatible expirience with the prior API.
 
+`ng update @angular/fire --next`
+
 ## Compatibility mode
 
 AngularFire v7.0 has a compatibility layer that supports the AngularFire v6.0 API. Just change your imports from `@angular/fire/*` to `@angular/fire/compat/*` and `firebase/*` to `firebase/compat/*`.
@@ -19,11 +21,10 @@ In order to better support the tree-shakability introduced in Firebase v9 & to r
 @NgModule({
     imports: [
         AngularFire.initalizeApp(config),
-        AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
+        AngularFirestoreModule.enablePersistence(),
         AngularFireStorageModule,
     ],
     providers: [
-        { provide: SETTINGS, useValue: { ignoreUndefinedProperties: true } },
         { provide: USE_EMULATOR, useValue: ['localhost', 8080] },
     ],
 })
@@ -42,9 +43,6 @@ In order to better support the tree-shakability introduced in Firebase v9 & to r
         }),
         provideStorage(() => getStorage()),
     ],
-    providers: [
-        { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
-    ],
 })
 ```
 
@@ -54,17 +52,16 @@ Before when you injected Firebase JS SDK services into AngularFire they would be
 
 ```ts
 import { FirebaseApp } from '@angular/fire';
-import { Firestore } from '@angular/fire/firestore';
-import { doc, onSnapshot } from 'firebase/firestore';
+import { Firestore, doc, onSnapshot } from '@angular/fire/firestore';
 
 @Component({})
 export class Foo {
     constructor(
         app: FirebaseApp,
         firestore: Firestore, // Injects the instantiated Firestore instance
     ) {
-        // You can directly operate on the instance with the JS SDK
-        // NOTE: you will have to handle change-detection yourself
+        // You can directly operate on the instance with the JS SDK or use our "reexported"
+        // API calls for Zone.js wrapping
         onSnapshot(doc(firestore, 'foo/1'), snap => {
             // ...
         });
@@ -80,79 +77,103 @@ AngularFire no longer provides observables and functions as class methods, evert
     <thead>
         <tr>
             <th colspan="2">v6 / Compat</th>
-            <th >v7 Modular</th>
+            <th>v7 Modular</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <th rowspan="3">AngularFirestore</th>
             <td>doc</td>
-            <td rowspan="3">
-                <p><small>Since we no longer inject our own class (and to better support tree-shaking) use the JS SDK methods to get docs/collections.</small></p>
+            <td>
 
 ```ts
-import {
-    doc,
-    collection,
-    collectionGroup,
-} from 'firebase/firestore'
+import { doc } from '@angular/fire/firestore'
 ```
-
 </td>
         </tr>
         <tr>
             <td>collection</td>
+            <td>
+
+```ts
+import { collection } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <td>collectionGroup</td>
+            <td>
+
+```ts
+import { collectionGroup } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <th rowspan="7">AngularFirestoreDocument</th>
             <td>set</td>
-            <td rowspan="4">
+            <td>
 
 ```ts
-import {
-    setDoc,
-    updateDoc,
-    deleteDoc,
-    collection,
-} from 'firebase/firestore'
+import { setDoc } from '@angular/fire/firestore'
 ```
+</td>
 
 </td>
         </tr>
         <tr>
             <td>update</td>
+            <td>
+
+```ts
+import { updateDoc } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <td>delete</td>
+            <td>
+
+```ts
+import { deleteDoc } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <td>collection</td>
+            <td>
+
+```ts
+import { collection } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <td>snapshotChanges</td>
-            <td rowspan="2">
+            <td>
 
 ```ts
-import {
-    snapshotChanges,
-    valueChanges,
-} from '@angular/fire/firestore'
+import { docSnapshots } from '@angular/fire/firestore'
 ```
+</td>
 
 </td>
         </tr>
         <tr>
             <td>valueChanges</td>
+            <td>
+
+```ts
+import { docData } from '@angular/fire/firestore'
+```
+</td>
         </tr>
         <tr>
             <td>get</td>
             <td>
 
 ```ts
-import { doc } from '@angular/fire/firestore'
+import { get } from '@angular/fire/firestore'
 ```
 
 </td>
@@ -233,8 +254,12 @@ AngularFire does not lazy-load services any longer. We have provided a helper ob
 
 ```ts
 // firestore_operations.ts
-import { collection, getFirestore } from 'firebase/firestore';
-import { collectionData, firestoreInstance$ } from '@angular/fire/firestore';
+import {
+    collectionData,
+    firestoreInstance$,
+    collection,
+    getFirestore
+} from '@angular/fire/firestore';
 import { first } from 'rxjs/operators';
 
 export { getFirestore };
@@ -285,9 +310,6 @@ In AngularFire v7 working with multiple instances was difficult, in the new SDK
         provideStorage(() => getStorage(getApp(), 'another bucket')),
         provideStorage(() => getStorage(getApp('anotherApp'))),
     ],
-    providers: [
-        { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
-    ],
 })
 ```
 

sample/package.json

@@ -17,7 +17,7 @@
     "@angular/common": "^12.0.0",
     "@angular/compiler": "^12.0.0",
     "@angular/core": "^12.0.0",
-    "@angular/fire": "7.0.0-canary.d3a9af2",
+    "@angular/fire": "7.0.0-alpha.3",
     "@angular/forms": "^12.0.0",
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",

sample/src/app/app.module.ts

@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideFirebaseApp } from '@angular/fire/app';
-import { provideAuth } from '@angular/fire/auth';
-import { initializeApp, getApp } from 'firebase/app';
-import { initializeAuth } from 'firebase/auth';
+import { provideFirebaseApp, getApp } from '@angular/fire/app';
+import { provideAuth, initializeAuth } from '@angular/fire/auth';
+import { initializeApp } from 'firebase/app';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';

sample/yarn.lock

@@ -216,10 +216,10 @@
   dependencies:
     tslib "^2.2.0"
 
-"@angular/[email protected]canary.d3a9af2":
-  version "7.0.0-canary.d3a9af2"
-  resolved "https://registry.yarnpkg.com/@angular/fire/-/fire-7.0.0-canary.d3a9af2.tgz#28050f12da5e9310d209ca0a4e2bc3e0a20ab0d4"
-  integrity sha512-Jrnen55L0xuhGLEGlbtB7kbzN1ZKE/LQN0aASAxlZ/FnD1CRDmlZlYr4Clz1/ZJH6yMu7sMw72NlI7vk/dJoBA==
+"@angular/[email protected]alpha.3":
+  version "7.0.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/@angular/fire/-/fire-7.0.0-alpha.3.tgz#d3b7c2414ffbc2ffbda6bb7c4f2bdf0779a40ce2"
+  integrity sha512-5S8olqo33OGNOn9/3fKQixHQBFUjNU3FelkC0ScBbMCjHC/nYoUukYLBWDhu/MwNX2RnfujFuMGUb41NPN9OFw==
   dependencies:
     tslib "^2.0.0"
 

src/schematics/update/v7/index.ts

@@ -45,7 +45,7 @@ export const ngUpdate = (): Rule => (
         if (!content) {
             return;
         }
-        // TODO clean this up
+        // TODO clean this up, skip overwrite if uneeded
         content.replace(/(?<key>import|export)\s+(?:(?<alias>[\w,{}\s\*]+)\s+from)?\s*(?:(["'])?firebase\/(?<ref>[@\w\s\\\/.-]+)\3?)\s*;/, '$1 $2 from $3firebase/compat/$4$3;');
         content.replace(/(?<key>import|export)\s+(?:(?<alias>[\w,{}\s\*]+)\s+from)?\s*(?:(["'])?@firebase\/(?<ref>[@\w\s\\\/.-]+)\3?)\s*;/, '$1 $2 from $3@firebase/compat/$4$3;');
         content.replace(/(?<key>import|export)\s+(?:(?<alias>[\w,{}\s\*]+)\s+from)?\s*(?:(["'])?@angular\/fire\/(?<ref>[@\w\s\\\/.-]+)\3?)\s*;/, '$1 $2 from $3@angular/fire/compat/$4$3;');