First pass on the new RC API and the start of the AngularFireLazy effort

* Add all, numbers, strings, and booleans Observables to AngularFireRemoteConfig
* Proxy all of firebase.remoteConfig() in AngularFireRemoteConfig dealing with lazy loading of the SDK
* Same effort with AngularFireAnalytics

src/analytics/analytics.ts

@@ -1,9 +1,9 @@
 import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
 import { Observable, from } from 'rxjs';
-import { map, tap, filter, withLatestFrom } from 'rxjs/operators';
-import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular } from '@angular/fire';
+import { map, tap, filter, withLatestFrom, shareReplay } from 'rxjs/operators';
 import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
-import { FirebaseAnalytics, FIREBASE_OPTIONS, FIREBASE_APP_NAME, _firebaseAppFactory } from '@angular/fire';
+import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular, _lazySDKProxy, FirebaseAnalytics, FIREBASE_OPTIONS, FIREBASE_APP_NAME, _firebaseAppFactory } from '@angular/fire';
+import { analytics, app } from 'firebase';
 
 export const AUTOMATICALLY_SET_CURRENT_SCREEN = new InjectionToken<boolean>('angularfire2.analytics.setCurrentScreen');
 export const AUTOMATICALLY_LOG_SCREEN_VIEWS = new InjectionToken<boolean>('angularfire2.analytics.logScreenViews');
@@ -15,13 +15,28 @@ export const APP_NAME = new InjectionToken<string>('angularfire2.analytics.appNa
 export const DEFAULT_APP_VERSION = '?';
 export const DEFAULT_APP_NAME = 'Angular App';
 
+// SEMVER: once we move to Typescript 3.6 use `PromiseProxy<analytics.Analytics>`
+type AnalyticsProxy = {
+  // TODO can we pull the richer types from the Firebase SDK .d.ts? ReturnType<T[K]> is infering
+  //      I could even do this in a manual build-step
+  logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promise<void>,
+  setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promise<void>,
+  setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promise<void>,
+  setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promise<void>,
+  setAnalyticsCollectionEnabled(enabled: boolean): Promise<void>,
+  app: Promise<app.App>
+};
+
+export interface AngularFireAnalytics extends AnalyticsProxy {};
+
 @Injectable()
 export class AngularFireAnalytics {
 
   /**
    * Firebase Analytics instance
    */
-  public readonly analytics: Observable<FirebaseAnalytics>;
+  private readonly analytics$: Observable<FirebaseAnalytics>;
+  private get analytics() { return this.analytics$.toPromise(); }
 
   constructor(
     @Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
@@ -39,12 +54,13 @@ export class AngularFireAnalytics {
     const requireAnalytics = from(import('firebase/analytics'));
     const app = _firebaseAppFactory(options, zone, nameOrConfig);
 
-    this.analytics = requireAnalytics.pipe(
+    this.analytics$ = requireAnalytics.pipe(
       map(() => app.analytics()),
       tap(analytics => {
         if (analyticsCollectionEnabled === false) { analytics.setAnalyticsCollectionEnabled(false) }
       }),
-      runOutsideAngular(zone)
+      runOutsideAngular(zone),
+      shareReplay(1)
     );
 
     if (router && (automaticallySetCurrentScreen !== false || automaticallyLogScreenViews !== false)) {
@@ -53,7 +69,7 @@ export class AngularFireAnalytics {
       const activationEndEvents = router.events.pipe(filter<ActivationEnd>(e => e instanceof ActivationEnd));
       const navigationEndEvents = router.events.pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd));
       navigationEndEvents.pipe(
-        withLatestFrom(activationEndEvents, this.analytics),
+        withLatestFrom(activationEndEvents, this.analytics$),
         tap(([navigationEnd, activationEnd, analytics]) => {
           const url = navigationEnd.url;
           const screen_name = activationEnd.snapshot.routeConfig && activationEnd.snapshot.routeConfig.path || undefined;
@@ -73,12 +89,14 @@ export class AngularFireAnalytics {
     // TODO do something other than just check auth presence, what if it's lazy loaded?
     if (app.auth && automaticallyTrackUserIdentifier !== false) {
       new Observable<firebase.User|null>(app.auth().onAuthStateChanged.bind(app.auth())).pipe(
-        withLatestFrom(this.analytics),
+        withLatestFrom(this.analytics$),
         tap(([user, analytics]) => analytics.setUserId(user ? user.uid : null!, { global: true })),
         runOutsideAngular(zone)
       ).subscribe()
     }
 
+    return _lazySDKProxy(this, this.analytics, zone);
+
   }
 
 }

src/core/angularfire2.ts

@@ -66,3 +66,36 @@ export const runInZone = (zone: NgZone) => <T>(obs$: Observable<T>): Observable<
     );
   });
 }
+
+//SEMVER: once we move to TypeScript 3.6, we can use these to build lazy interfaces
+/*
+  type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T];
+  type PromiseReturningFunctionPropertyNames<T> = { [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never }[FunctionPropertyNames<T>];
+  type NonPromiseReturningFunctionPropertyNames<T> = { [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? never : K }[FunctionPropertyNames<T>];
+  type NonFunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : K }[keyof T];
+
+  export type PromiseProxy<T> = { [K in NonFunctionPropertyNames<T>]: Promise<T[K]> } &
+    { [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>> } &
+    { [K in PromiseReturningFunctionPropertyNames<T>   ]: (...args: Parameters<T[K]>) => ReturnType<T[K]> };
+*/
+
+export const _lazySDKProxy = (klass: any, promise: Promise<any>, zone: NgZone) => new Proxy(klass, {
+  get: (_, name) => zone.runOutsideAngular(() =>
+    klass[name] || new Proxy(() => 
+      promise.then(mod => {
+        const ret = mod[name];
+        // TODO move to proper type guards
+        if (typeof ret == 'function') {
+          return ret.bind(mod);
+        } else if (ret && ret.then) {
+          return ret.then((res:any) => zone.run(() => res));
+        } else {
+          return zone.run(() => ret);
+        }
+      }), {
+        get: (self, name) => self()[name],
+        // TODO handle callbacks
+        apply: (self, _, args) => self().then(it => it(...args))
+      })
+  )
+});

src/remote-config/remote-config.ts

@@ -1,7 +1,7 @@
 import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
 import { Observable, from, concat } from 'rxjs';
-import { map, switchMap, tap, take } from 'rxjs/operators';
-import { FirebaseAppConfig, FirebaseOptions, FIREBASE_OPTIONS, FIREBASE_APP_NAME } from '@angular/fire';
+import { map, switchMap, tap, shareReplay, distinctUntilChanged } from 'rxjs/operators';
+import { FirebaseAppConfig, FirebaseOptions, _lazySDKProxy, FIREBASE_OPTIONS, FIREBASE_APP_NAME } from '@angular/fire';
 import { remoteConfig } from 'firebase/app';
 
 // @ts-ignore
@@ -14,19 +14,38 @@ export const DEFAULT_CONFIG = new InjectionToken<DefaultConfig>('angularfire2.re
 
 import { FirebaseRemoteConfig, _firebaseAppFactory, runOutsideAngular } from '@angular/fire';
 
-@Injectable()
-export class AngularFireRemoteConfig {
+// SEMVER: once we move to Typescript 3.6 use `PromiseProxy<remoteConfig.RemoteConfig>` rather than hardcoding
+type RemoteConfigProxy = {
+  activate: () => Promise<void>;
+  ensureInitialized: () => Promise<void>;
+  fetch: () => Promise<void>;
+  fetchAndActivate: () => Promise<void>;
+  getAll: () => Promise<{[key:string]: remoteConfig.Value}>;
+  getBoolean: (key:string) => Promise<boolean>;
+  getNumber: (key:string) => Promise<number>;
+  getString: (key:string) => Promise<string>;
+  getValue: (key:string) => Promise<remoteConfig.Value>;
+  setLogLevel: (logLevel: remoteConfig.LogLevel) => Promise<void>;
+  settings: Promise<remoteConfig.Settings>;
+  defaultConfig: Promise<{
+      [key: string]: string | number | boolean;
+  }>;
+  fetchTimeMillis: Promise<number>;
+  lastFetchStatus: Promise<remoteConfig.FetchStatus>;
+};
 
-  /**
-   * Firebase RemoteConfig instance
-   */
-  public readonly remoteConfig: Observable<FirebaseRemoteConfig>;
+export interface AngularFireRemoteConfig extends RemoteConfigProxy {};
 
-  public readonly freshConfiguration: Observable<{[key:string]: remoteConfig.Value}>;
+@Injectable()
+export class AngularFireRemoteConfig {
 
-  public readonly configuration: Observable<{[key:string]: remoteConfig.Value}>;
+  private readonly remoteConfig$: Observable<remoteConfig.RemoteConfig>;
+  private get remoteConfig() { return this.remoteConfig$.toPromise(); }
 
-  public readonly activate: Observable<{[key:string]: remoteConfig.Value}>;
+  readonly all: Observable<{[key:string]: remoteConfig.Value}>;
+  readonly numbers: Observable<{[key:string]: number}> & {[key:string]: Observable<number>};
+  readonly booleans: Observable<{[key:string]: boolean}> & {[key:string]: Observable<boolean>};
+  readonly strings: Observable<{[key:string]: string}> & {[key:string]: Observable<string>};
 
   constructor(
     @Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
@@ -41,38 +60,58 @@ export class AngularFireRemoteConfig {
     // @ts-ignore zapping in the UMD in the build script
     const requireRemoteConfig = from(import('@firebase/remote-config'));
 
-    this.remoteConfig = requireRemoteConfig.pipe(
+    this.remoteConfig$ = requireRemoteConfig.pipe(
       map(rc => rc.registerRemoteConfig(firebase)),
       map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
       map(app => app.remoteConfig()),
       tap(rc => {
         if (settings) { rc.settings = settings }
         if (defaultConfig) { rc.defaultConfig = defaultConfig }
       }),
-      runOutsideAngular(zone)
-    );
-
-    this.activate = this.remoteConfig.pipe(
-      switchMap(rc => rc.activate().then(() => rc)),
-      tap(rc => rc.fetch()),
-      map(rc => rc.getAll()),
-      runOutsideAngular(zone),
-      take(1)
-    )
-
-    this.freshConfiguration = this.remoteConfig.pipe(
-      switchMap(rc => rc.fetchAndActivate().then(() => rc.getAll())),
       runOutsideAngular(zone),
-      take(1)
-    )
+      shareReplay(1)
+    );
 
-    this.configuration = this.remoteConfig.pipe(
+    this.all = this.remoteConfig$.pipe(
       switchMap(rc => concat(
         rc.activate().then(() => rc.getAll()),
         rc.fetchAndActivate().then(() => rc.getAll())
       )),
-      runOutsideAngular(zone)
-    )
+      runOutsideAngular(zone),
+      // TODO startWith(rehydrate(deafultConfig)),
+      shareReplay(1)
+      // TODO distinctUntilChanged(compareFn)
+    );
+
+    const allAs = (type: 'String'|'Boolean'|'Number') => this.all.pipe(
+      map(all => Object.keys(all).reduce((c, k) => {
+        c[k] = all[k][`as${type}`]();
+        return c;
+      }, {}))
+    ) as any;
+
+    this.strings = new Proxy(allAs('String'), {
+      get: (self, name:string) => self[name] || this.all.pipe(
+        map(rc => rc[name].asString()),
+        distinctUntilChanged()
+      )
+    });
+
+    this.booleans = new Proxy(allAs('Boolean'), {
+      get: (self, name:string) => self[name] || this.all.pipe(
+        map(rc => rc[name].asBoolean()),
+        distinctUntilChanged()
+      )
+    });
+
+    this.numbers = new Proxy(allAs('Number'), {
+      get: (self, name:string) => self[name] || this.all.pipe(
+        map(rc => rc[name].asNumber()),
+        distinctUntilChanged()
+      )
+    });
+
+    return _lazySDKProxy(this, this.remoteConfig, zone);
   }
 
 }