New preload API & larger column width (#219)

Author: jamesdaniels

.prettierrc

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "printWidth": 80
+  "printWidth": 160
 }

reactfire/auth/index.tsx

@@ -9,9 +9,11 @@ import {
   useObservable
 } from '..';
 import { from } from 'rxjs';
+import { useFirebaseApp } from '../firebaseApp';
 
-export function preloadUser(firebaseApp: firebase.app.App) {
-  return preloadAuth(firebaseApp).then(auth => {
+export function preloadUser(options?: {firebaseApp?: firebase.app.App}) {
+  const firebaseApp = options?.firebaseApp || useFirebaseApp();
+  return preloadAuth({firebaseApp}).then(auth => {
     const result = preloadObservable(
       user(auth()),
       `auth:user:${firebaseApp.name}`

reactfire/firebaseApp/sdk.tsx

@@ -34,34 +34,24 @@ function importSDK(sdk: ComponentName) {
     case 'messaging':
       return import(/* webpackChunkName: "messaging" */ 'firebase/messaging');
     case 'performance':
-      return import(
-        /* webpackChunkName: "performance" */ 'firebase/performance'
-      );
+      return import(/* webpackChunkName: "performance" */ 'firebase/performance');
     case 'remoteConfig':
-      return import(
-        /* webpackChunkName: "remoteConfig" */ 'firebase/remote-config'
-      );
+      return import(/* webpackChunkName: "remoteConfig" */ 'firebase/remote-config');
     case 'storage':
       return import(/* webpackChunkName: "storage" */ 'firebase/storage');
   }
 }
 
-function proxyComponent(componentName: 'auth'): typeof firebase.auth;
-function proxyComponent(componentName: 'analytics'): typeof firebase.analytics;
-function proxyComponent(componentName: 'database'): typeof firebase.database;
-function proxyComponent(componentName: 'firestore'): typeof firebase.firestore;
-function proxyComponent(componentName: 'functions'): typeof firebase.functions;
-function proxyComponent(componentName: 'messaging'): typeof firebase.messaging;
-function proxyComponent(
-  componentName: 'performance'
-): typeof firebase.performance;
-function proxyComponent(
-  componentName: 'remoteConfig'
-): typeof firebase.remoteConfig;
-function proxyComponent(componentName: 'storage'): typeof firebase.storage;
-function proxyComponent(
-  componentName: ComponentName
-): FirebaseNamespaceComponent {
+function proxyComponent(componentName: 'auth'        ): typeof firebase.auth;
+function proxyComponent(componentName: 'analytics'   ): typeof firebase.analytics;
+function proxyComponent(componentName: 'database'    ): typeof firebase.database;
+function proxyComponent(componentName: 'firestore'   ): typeof firebase.firestore;
+function proxyComponent(componentName: 'functions'   ): typeof firebase.functions;
+function proxyComponent(componentName: 'messaging'   ): typeof firebase.messaging;
+function proxyComponent(componentName: 'performance' ): typeof firebase.performance;
+function proxyComponent(componentName: 'remoteConfig'): typeof firebase.remoteConfig;
+function proxyComponent(componentName: 'storage'     ): typeof firebase.storage;
+function proxyComponent(componentName: ComponentName): FirebaseNamespaceComponent {
   let contextualApp: App | undefined;
   const useComponent = (app?: App) => {
     contextualApp = useFirebaseApp();
@@ -105,65 +95,23 @@ export const performance = usePerformance;
 export const remoteConfig = useRemoteConfig;
 export const storage = useStorage;
 
-function preloadFactory(
-  componentName: 'auth'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['auth']) => void | Promise<any>
-) => Promise<App['auth']>;
-function preloadFactory(
-  componentName: 'analytics'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['analytics']) => void | Promise<any>
-) => Promise<App['analytics']>;
-function preloadFactory(
-  componentName: 'database'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['database']) => void | Promise<any>
-) => Promise<App['database']>;
-function preloadFactory(
-  componentName: 'firestore'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['firestore']) => void | Promise<any>
-) => Promise<App['firestore']>;
-function preloadFactory(
-  componentName: 'functions'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['functions']) => void | Promise<any>
-) => Promise<App['functions']>;
-function preloadFactory(
-  componentName: 'messaging'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['messaging']) => void | Promise<any>
-) => Promise<App['messaging']>;
-function preloadFactory(
-  componentName: 'performance'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['performance']) => void | Promise<any>
-) => Promise<App['performance']>;
-function preloadFactory(
-  componentName: 'remoteConfig'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['remoteConfig']) => void | Promise<any>
-) => Promise<App['remoteConfig']>;
-function preloadFactory(
-  componentName: 'storage'
-): (
-  firebaseApp?: App,
-  settingsCallback?: (instanceFactory: App['storage']) => void | Promise<any>
-) => Promise<App['storage']>;
+export type PreloadOptions<T> = {
+  firebaseApp?: App;
+  setup?: (instanceFactory: T) => void | Promise<any>
+};
+
+function preloadFactory(componentName: 'auth'        ): (options?: PreloadOptions<App['auth']>        ) => Promise<App['auth']>;
+function preloadFactory(componentName: 'analytics'   ): (options?: PreloadOptions<App['analytics']>   ) => Promise<App['analytics']>;
+function preloadFactory(componentName: 'database'    ): (options?: PreloadOptions<App['database']>    ) => Promise<App['database']>;
+function preloadFactory(componentName: 'firestore',  ): (options?: PreloadOptions<App['firestore']>   ) => Promise<App['firestore']>;
+function preloadFactory(componentName: 'functions'   ): (options?: PreloadOptions<App['functions']>   ) => Promise<App['functions']>;
+function preloadFactory(componentName: 'messaging'   ): (options?: PreloadOptions<App['messaging']>   ) => Promise<App['messaging']>;
+function preloadFactory(componentName: 'performance' ): (options?: PreloadOptions<App['performance']> ) => Promise<App['performance']>;
+function preloadFactory(componentName: 'remoteConfig'): (options?: PreloadOptions<App['remoteConfig']>) => Promise<App['remoteConfig']>;
+function preloadFactory(componentName: 'storage'     ): (options?: PreloadOptions<App['storage']>     ) => Promise<App['storage']>;
 function preloadFactory(componentName: ComponentName) {
-  return (
-    firebaseApp?: App,
-    settingsCallback?: (instanceFactory: FirebaseInstanceFactory) => any
-  ) => preload(componentName, firebaseApp, settingsCallback).toPromise();
+  return (options?: PreloadOptions<FirebaseInstanceFactory>) =>
+    preload(componentName, options?.firebaseApp, options?.setup).toPromise();
 }
 
 function preload(
@@ -176,9 +124,7 @@ function preload(
     new Observable(emitter => {
       importSDK(componentName)
         .then(() => {
-          const instanceFactory = app[componentName].bind(
-            app
-          ) as FirebaseInstanceFactory;
+          const instanceFactory: FirebaseInstanceFactory = app[componentName].bind(app);
           Promise.resolve(settingsCallback(instanceFactory)).then(() => {
             emitter.next(instanceFactory);
             emitter.complete();

reactfire/firestore/firestore.test.tsx

@@ -46,7 +46,7 @@ describe('Firestore', () => {
   describe('useFirestore', () => {
 
     it('awaits the preloadFirestore setup', async () => {
-      const app2 = firebase.initializeTestApp({
+      const firebaseApp = firebase.initializeTestApp({
         projectId: '123456',
         databaseName: 'my-database',
         auth: { uid: 'alice' }
@@ -55,16 +55,21 @@ describe('Firestore', () => {
       let firestore: firebase.firestore.Firestore;
       let preloadResolved = false;
       let preloadResolve: (v?: unknown) => void;
-      preloadFirestore(app2, () => new Promise(resolve => preloadResolve = resolve)).then(() => preloadResolved = true);
+
+      preloadFirestore({
+        firebaseApp,
+        setup: () => new Promise(resolve => preloadResolve = resolve)
+      }).then(() => preloadResolved = true);
 
       const Firestore = () => {
-        const firestore = useFirestore(app2);
+        const firestore = useFirestore(firebaseApp);
         return (
           <div data-testid="success"></div>
         );
       };
+
       const { getByTestId } = render(
-        <FirebaseAppProvider firebase={app2}>
+        <FirebaseAppProvider firebase={firebaseApp}>
           <React.Suspense fallback={<h1 data-testid="fallback">Fallback</h1>}>
             <Firestore />
           </React.Suspense>

reactfire/firestore/index.tsx

@@ -14,6 +14,7 @@ import {
 } from '..';
 import { preloadObservable } from '../useObservable';
 import { first } from 'rxjs/operators';
+import { useFirebaseApp } from '../firebaseApp';
 
 // starts a request for a firestore doc.
 // imports the firestore SDK automatically
@@ -25,13 +26,14 @@ export function preloadFirestoreDoc(
   refProvider: (
     firestore: firebase.firestore.Firestore
   ) => firestore.DocumentReference,
-  firebaseApp: firebase.app.App
+  options?: { firebaseApp?: firebase.app.App }
 ) {
-  return preloadFirestore(firebaseApp).then(firestore => {
+  const firebaseApp = options?.firebaseApp || useFirebaseApp();
+  return preloadFirestore({firebaseApp}).then(firestore => {
     const ref = refProvider(firestore());
     return preloadObservable(
       doc(ref),
-      `firestore:doc:${ref.firestore.app.name}:${ref.path}`
+      `firestore:doc:${firebaseApp.name}:${ref.path}`
     );
   });
 }