Fix the reexport types and cleanup

Author: jamesdaniels

docs/version-7-upgrade.md

@@ -4,6 +4,13 @@ Intended to be run with Angular 12, AngularFire 7.0 allows you to take full advt
 
 `ng update @angular/fire --next`
 
+## Breaking changes
+
+* Angular 12 is required
+* AngularFire now only works in Ivy applications
+* Firebase JS SDK v9 is required
+* The AngularFire v6 API surface has moved from `@angular/fire/*` to `@angular/fire/compat/*` (see compatibility mode)
+
 ## 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/*`.

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-alpha.3",
+    "@angular/fire": "../dist/packages-dist",
     "@angular/forms": "^12.0.0",
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
@@ -56,4 +56,4 @@
   "resolutions": {
     "webpack": "^5.35.0"
   }
-}
+}

sample/src/app/app.component.ts

@@ -1,56 +1,36 @@
-import { ApplicationRef, Component, NgZone, Optional } from '@angular/core';
+import { ApplicationRef, Component, NgZone } from '@angular/core';
 import { FirebaseApp, FirebaseApps } from '@angular/fire/app';
 import { Auth, AuthInstances, authState } from '@angular/fire/auth';
-import { Firestore, FirestoreInstances } from '@angular/fire/firestore';
-import { firestoreInstance$ } from '@angular/fire/firestore';
-import { debounceTime } from 'rxjs/operators';
-import { initializeFirestore$ } from './firestore';
+import { Firestore, FirestoreInstances, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore/lite';
+import { DocumentData } from 'rxfire/firestore/lite/interfaces';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center" class="content">
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <span style="display: block">{{ app.name }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <ul>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
+    <pre>{{ (myDocData | async)?.data() | json }}</pre>
     <router-outlet></router-outlet>
   `,
   styles: []
 })
 export class AppComponent {
+  myDocData: Promise<DocumentSnapshot<DocumentData>>;
   title = 'sample';
   constructor(
     public app: FirebaseApp, // default Firebase App
     public auth: Auth, // default Firbase Auth
     public apps: FirebaseApps, // all initialized App instances
     public authInstances: AuthInstances, // all initialized Auth instances
-    @Optional() public firestore: Firestore,
-    @Optional() public firestoreInstances: FirestoreInstances,
+    public firestore: Firestore,
+    public firestoreInstances: FirestoreInstances,
     appRef: ApplicationRef,
     zone: NgZone,
   ) {
     console.log({app, auth, apps, authInstances, firestore, firestoreInstances });
-    // onAuthStateChanged should destablize the zone
-    // onAuthStateChanged(auth, it => console.log('onAuthStateChanged', it));
     authState(auth).subscribe(it => console.log('authState', it));
-    appRef.isStable.pipe(debounceTime(200)).subscribe(it => console.log('isStable', it));
-    firestoreInstance$.subscribe(it => console.log('$', it));
-    initializeFirestore$.subscribe(it => console.log('init', it));
+    appRef.isStable.pipe(distinctUntilChanged()).subscribe(it => console.log('isStable', it));
+    this.myDocData = getDoc(doc(firestore, 'animals/NJdGQCv1P92SWsp4nSE7'));
+    // firestoreInstance$.subscribe(it => console.log('$', it));
+    // initializeFirestore$.subscribe(it => console.log('init', it));
   }
 }

sample/src/app/app.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideFirebaseApp, getApp } from '@angular/fire/app';
+import { provideFirebaseApp, getApp, initializeApp } 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';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore/lite';
 
 @NgModule({
   declarations: [
@@ -21,6 +21,7 @@ import { environment } from '../environments/environment';
       return app;
     }),
     provideAuth(() => initializeAuth(getApp())),
+    provideFirestore(() => getFirestore()),
   ],
   providers: [ ],
   bootstrap: [AppComponent]

sample/src/app/firestore/getFirestore.ts

@@ -1 +1 @@
-export { getFirestore } from 'firebase/firestore';
+export { getFirestore } from '@angular/fire/firestore';

sample/yarn.lock

@@ -216,10 +216,8 @@
   dependencies:
     tslib "^2.2.0"
 
-"@angular/fire@7.0.0-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==
+"@angular/fire@../dist/packages-dist":
+  version "7.0.0"
   dependencies:
     tslib "^2.0.0"
 

src/zones.ts

@@ -130,16 +130,18 @@ const zoneWrapFn = (it: (...args: any[]) => any) => {
   };
 };
 
-export const ɵzoneWrap = <T= Observable<any>|number>(it: (..._: any[]) => T, args: IArguments): T => {
-  for (let i = 0; i < args.length; i++) {
-    if (typeof args[i] === 'function') {
-      args[i] = zoneWrapFn(args[i]);
+export const ɵzoneWrap = <T= unknown>(it: T): T => {
+  return function() {
+    for (let i = 0; i < arguments.length; i++) {
+      if (typeof arguments[i] === 'function') {
+        arguments[i] = zoneWrapFn(arguments[i]);
+      }
     }
-  }
-  const ret = runOutsideAngular(() => it.apply(this, args));
-  if (ret instanceof Observable) {
-    return ret.pipe(keepUnstableUntilFirst) as any;
-  } else {
-    return run(() => ret);
-  }
+    const ret = runOutsideAngular(() => (it as any).apply(this, arguments));
+    if (ret instanceof Observable) {
+      return ret.pipe(keepUnstableUntilFirst) as any;
+    } else {
+      return run(() => ret);
+    }
+  } as any;
 };

tools/build.ts

@@ -32,25 +32,25 @@ function zoneWrapExports() {
     overrides: Record<string, OverrideOptions|null> = {}
   ) => {
     const imported = await import(path);
-    await writeFile(`./src/${module}/${name}.ts`, `// DO NOT MODIFY, this file is autogenerated by tools/build.ts
-// Zone wrap and reexport all of ${path}
-
+    const toBeExported = exports.filter(it => overrides[it] !== null).map(importName => {
+      const zoneWrap = overrides[importName]?.zoneWrap ?? importName[0] !== importName[0].toUpperCase();
+      const exportName = overrides[importName]?.exportName ?? importName;
+      return [importName, exportName, zoneWrap];
+    });
+    const zoneWrapped = toBeExported.filter(([, , zoneWrap]) => zoneWrap);
+    const rawExport = toBeExported.filter(([, , zoneWrap]) => !zoneWrap);
+    await writeFile(`./src/${module}/${name}.ts`, `// DO NOT MODIFY, this file is autogenerated by tools/build.ts${zoneWrapped.length > 0 ? `
 import { ɵzoneWrap } from '@angular/fire';
-
-type Before = typeof import('${path}');
-
-${exports.filter(it => overrides[it] !== null).map(importName => {
-  const zoneWrap = overrides[importName]?.zoneWrap ?? importName[0] !== importName[0].toUpperCase();
-  const exportName = overrides[importName]?.exportName ?? importName;
-  return zoneWrap ?
-    `import { ${importName} as _${exportName} } from '${path}';
-
-export function ${exportName}(..._: Parameters<Before['${importName}']>) {
-  return ɵzoneWrap(_${exportName}, arguments);
-}\n` :
-    `export { ${importName}${exportName === importName ? '' : `as ${exportName}`} } from '${path}';\n`;
-}).flat().join(`\n`)}`);
-  };
+import {
+  ${zoneWrapped.map(([importName]) => `${importName} as _${importName}`).join(',\n  ')}
+} from '${path}';
+` : ''}${rawExport.length > 0 ? `
+export {
+  ${rawExport.map(([importName, exportName]) => `${importName}${exportName === importName ? '' : `as ${exportName}`}`).join(',\n  ')}
+} from '${path}';
+` : ''}
+${zoneWrapped.map(([importName, exportName]) => `export const ${exportName} = ɵzoneWrap(_${importName});`).join('\n')}
+`); };
   return Promise.all([
     reexport('analytics', 'firebase', 'firebase/analytics', tsKeys<typeof import('firebase/analytics')>()),
     reexport('app', 'firebase', 'firebase/app', tsKeys<typeof import('firebase/app')>()),