Update to [email protected] and [email protected].

I initially tried to go to [email protected], the current
release, but it redoes the way that module imports work. It
seems straightforward to update our code to use the 'compat'
versions of the modules per the instructions at
https://firebase.google.com/docs/web/modular-upgrade, but
the third-party vuefire package doesn't seem to have been
updated yet (vuejs/vuefire#1128)
so we're stuck at version 8 for now.

Also switch from the deprecated @firebase/testing package to
@firebase/rules-unit-testing. Luckily, it seems to be a
drop-in replacement.

To get all of this working, I also ripped out all of the
code I'd written before to asynchronously import Firebase
modules. It made the code way more complicated for what was
probably only a little bit of improvement in loading time,
and I spent a lot of time trying to figure out how to update
it to work with version 8 of the Firebase API before giving
up. Version 9 finally supports tree-shaking, so hopefully
things will get faster again when we're able to upgrade to
it.

Author: derat

firestore.test.ts

@@ -14,7 +14,7 @@
 //   https://firebase.google.com/docs/firestore/security/test-rules-emulator
 //   https://github.com/firebase/quickstart-nodejs/tree/master/firestore-emulator/typescript-quickstart
 
-import * as firebase from '@firebase/testing';
+import * as firebase from '@firebase/rules-unit-testing';
 
 const projectId = `firestore-test-${Date.now()}`;
 

package-lock.json

@@ -23,7 +23,7 @@
     "acorn": "^7.1.1",
     "browserslist": "^4.17.2",
     "core-js": "^3.4.4",
-    "firebase": "^7.14.5",
+    "firebase": "^8.10.0",
     "firebaseui": "^4.0.0",
     "humanize-duration": "^3.20.1",
     "register-service-worker": "^1.6.2",
@@ -34,11 +34,11 @@
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.7",
     "vue-the-mask": "^0.11.1",
-    "vuefire": "^2.1.0",
+    "vuefire": "^2.2.5",
     "vuetify": "^2.2.18"
   },
   "devDependencies": {
-    "@firebase/testing": "^0.15.1",
+    "@firebase/rules-unit-testing": "^1.3.15",
     "@mdi/font": "^4.4.95",
     "@types/humanize-duration": "^3.18.0",
     "@types/jest": "^24.0.17",
@@ -58,7 +58,7 @@
     "eslint": "^6.6.0",
     "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vuetify": "^1.0.0-beta.6",
-    "firebase-tools": "^7.2.4",
+    "firebase-tools": "^9.21.0",
     "flush-promises": "^1.0.2",
     "jest": "^24.9.0",
     "nightwatch": "^1.7.11",

package.json

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
 
-import { getAuth } from '@/firebase';
+import { app } from '@/firebase';
 import Perf from '@/mixins/Perf';
 import Toolbar from '@/components/Toolbar.vue';
 
@@ -77,10 +77,8 @@ export default class App extends Mixins(Perf) {
   }
 
   mounted() {
-    getAuth().then(auth => {
-      auth.onAuthStateChanged(user => {
-        this.signedIn = !!user;
-      });
+    app.auth().onAuthStateChanged((user: any) => {
+      this.signedIn = !!user;
     });
 
     this.$nextTick(() => {

src/App.vue

@@ -92,7 +92,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { getAuth } from '@/firebase';
+import { app } from '@/firebase';
 import DialogCard from '@/components/DialogCard.vue';
 import LocalePicker from '@/components/LocalePicker.vue';
 
@@ -195,11 +195,12 @@ export default class Toolbar extends Vue {
 
   // Handles the "Sign out" button being clicked in the "Sign out" dialog.
   signOut() {
-    getAuth().then(auth => {
-      auth.signOut().then(() => {
+    app
+      .auth()
+      .signOut()
+      .then(() => {
         this.$router.replace('login');
       });
-    });
   }
 }
 </script>

src/components/Toolbar.vue

@@ -2,24 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// This file exports methods that can be used to load different parts of
-// Firebase asynchronously.
-
-// Loads the core Firebase library asynchronously.
-// Outside code should only call this if it needs access to Firebase's weird
-// constant values, e.g. firebase.auth.GoogleAuthProvider or
-// firebase.firestore.FieldValue.delete().
-export function getFirebase() {
-  return import(/* webpackChunkName: "firebase-app" */ 'firebase/app');
-}
-
-// Loads Firebase auth asynchronously.
-export function getAuth(): Promise<firebase.auth.Auth> {
-  return Promise.all([
-    import(/* webpackChunkName: "firebase-init" */ './init'),
-    import(/* webpackChunkName: "firebase-auth" */ 'firebase/auth'),
-  ]).then(([init, _]) => init.app.auth());
-}
+import firebase from 'firebase/app';
+
+import 'firebase/auth';
+import 'firebase/firestore';
+import 'firebase/functions';
+
+export const app = firebase.initializeApp({
+  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
+  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
+  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.VUE_APP_FIREBASE_APP_ID,
+});
 
 // Firestore persistence state.
 export enum FirestorePersistence {
@@ -36,44 +33,20 @@ export function getFirestorePersistence() {
   return persistence;
 }
 
-// Loads Cloud Firestore asynchronously.
-export function getFirestore(): Promise<firebase.firestore.Firestore> {
-  return Promise.all([
-    import(/* webpackChunkName: "firebase-init" */ './init'),
-    import(/* webpackChunkName: "firebase-firestore" */ 'firebase/firestore'),
-  ]).then(([init, _]) => {
-    // Enable persistence the first time the module is loaded:
-    // https://firebase.google.com/docs/firestore/manage-data/enable-offline
-    if (persistence == FirestorePersistence.UNINITIALIZED) {
-      persistence = FirestorePersistence.INITIALIZING;
-      init.app
-        .firestore()
-        .enablePersistence({ synchronizeTabs: true })
-        .then(() => {
-          persistence = FirestorePersistence.ENABLED;
-        })
-        .catch(err => {
-          persistence = FirestorePersistence.DISABLED;
-          import('@/log').then(log => {
-            log.logError('firestore_persistence_failed', err);
-          });
-        });
-    }
-
-    return init.app.firestore();
-  });
-}
-
-// Loads Cloud Functions asynchronously.
-export function getFunctions(): Promise<firebase.functions.Functions> {
-  return Promise.all([
-    import(/* webpackChunkName: "firebase-init" */ './init'),
-    import(/* webpackChunkName: "firebase-functions" */ 'firebase/functions'),
-  ]).then(([init, _]) => init.app.functions());
-}
-
-// Loads FirebaseUI asynchronously. Note that this isn't part of the core
-// Firebase library.
-export function getFirebaseUI() {
-  return import(/* webpackChunkName: "firebaseui" */ 'firebaseui');
+// Enable persistence the first time the module is loaded:
+// https://firebase.google.com/docs/firestore/manage-data/enable-offline
+if (persistence == FirestorePersistence.UNINITIALIZED) {
+  persistence = FirestorePersistence.INITIALIZING;
+  app
+    .firestore()
+    .enablePersistence({ synchronizeTabs: true })
+    .then(() => {
+      persistence = FirestorePersistence.ENABLED;
+    })
+    .catch((err) => {
+      persistence = FirestorePersistence.DISABLED;
+      import('@/log').then((log) => {
+        log.logError('firestore_persistence_failed', err);
+      });
+    });
 }

src/firebase/index.ts

@@ -5,6 +5,8 @@
 import Vue from 'vue';
 import { deepCopy } from '@/testutil';
 
+import type firebase from 'firebase';
+
 type DocumentReference = firebase.firestore.DocumentReference;
 
 // Firestore document data as property names to values.
@@ -144,7 +146,7 @@ class MockWriteBatch {
     this._ops.push(new BatchUpdate(ref.path, props));
   }
   commit() {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       for (const op of this._ops) {
         if (op instanceof BatchSet) {
           MockFirebase.setDoc(op.path, op.data);
@@ -250,7 +252,7 @@ export const MockFirebase = new (class {
   // Map of global mocks that should be passed to vue-test-utils's mount() or
   // shallowMount().
   mountMocks: Record<string, any> = {
-    $bind: function(name: string, ref: DocumentReference) {
+    $bind: function (name: string, ref: DocumentReference) {
       if (!Object.prototype.hasOwnProperty.call(MockFirebase._docs, ref.path)) {
         return Promise.reject(`No document at ${ref.path}`);
       }
@@ -268,21 +270,21 @@ export const MockFirebase = new (class {
       return Promise.resolve(data);
     },
 
-    $unbind: function(name: string) {
+    $unbind: function (name: string) {
       // Unregister the binding so the Vue's data property won't be updated.
       const vm = this as Vue;
       for (const path of Object.keys(MockFirebase._bindings)) {
         MockFirebase._bindings[path] = MockFirebase._bindings[path].filter(
-          b => !(b.vm == vm && b.name == name)
+          (b) => !(b.vm == vm && b.name == name)
         );
       }
       vm.$data[name] = null;
     },
   };
 })();
 
-export const MockEmailAuthProviderID = 'email';
-export const MockGoogleAuthProviderID = 'google';
+export const MockEmailAuthProviderID = 'password';
+export const MockGoogleAuthProviderID = 'google.com';
 
 jest.mock('firebase');
 jest.mock('firebase/app', () => {
@@ -296,7 +298,7 @@ jest.mock('firebase/app', () => {
         return MockFirebase.currentUser;
       },
       onAuthStateChanged: (observer: any) => {
-        new Promise(resolve => {
+        new Promise((resolve) => {
           observer(MockFirebase.currentUser);
           resolve();
         });
@@ -315,8 +317,18 @@ jest.mock('firebase/app', () => {
     }),
   };
 
-  // Also set sentinel value for deleting fields and static Timestamp.fromMillis
-  // function, both of which live on the firestore method.
+  // Various Firebase constants and sentinels are implemented via static
+  // variables or methods on classes in the firebase.auth and firebase.firestore
+  // namespaces. I've wasted hours trying to find the right way to mock this
+  // without any luck, so I'm just simulating these by setting properties on the
+  // corresponding methods instead. This is totally wrong and would fall apart
+  // if these code were type-checked.
+  (app.auth as any).EmailAuthProvider = {
+    PROVIDER_ID: MockEmailAuthProviderID,
+  };
+  (app.auth as any).GoogleAuthProvider = {
+    PROVIDER_ID: MockGoogleAuthProviderID,
+  };
   (app.firestore as any).FieldValue = {
     delete: () => mockDeleteSentinel,
   };
@@ -328,16 +340,9 @@ jest.mock('firebase/app', () => {
     }),
   };
 
-  // Set some random const properties on the auth method.
-  const authAny = app.auth as any;
-  authAny.EmailAuthProvider = { PROVIDER_ID: MockEmailAuthProviderID };
-  authAny.GoogleAuthProvider = { PROVIDER_ID: MockGoogleAuthProviderID };
-
   return app;
 });
 
-// TODO: Is this actually necessary? These modules are imported for their side
-// effects in the code that's being tested.
 jest.mock('firebase/auth');
 jest.mock('firebase/firestore');
 jest.mock('firebase/functions');

src/firebase/init.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import { Logger, LogFunc } from './logger';
-import { getAuth, getFunctions } from '@/firebase';
+import { app } from '@/firebase';
 
 enum LogDest {
   STACKDRIVER,
@@ -24,12 +24,10 @@ const devLogDest = process.env.VUE_APP_LOG_TO_CONSOLE
 function getLogFunc(): LogFunc | Promise<LogFunc> {
   // @ts-ignore: Make it easy to manually change |devLogDest|.
   if (isProd || (isDev && devLogDest == LogDest.STACKDRIVER)) {
-    // Return a promise so that importing this module doesn't require
-    // synchronously loading bulky Firebase code.
-    return getFunctions().then(functions => functions.httpsCallable('Log'));
+    return app.functions().httpsCallable('Log');
   }
   if (isDev && devLogDest == LogDest.CONSOLE) {
-    return data => {
+    return (data) => {
       for (const rec of data.records) {
         console.log(
           `${rec.severity} ${rec.code}: ${JSON.stringify(rec.payload)}`
@@ -51,21 +49,15 @@ const defaultLogger = new Logger(
 // Helper function that sends a log message to Stackdriver.
 // See the Logger class's log method for more details.
 function log(severity: string, code: string, payload: Record<string, any>) {
-  getAuth()
-    .then(auth => {
-      const user = auth.currentUser;
-      if (!user) {
-        defaultLogger.log(severity, code, payload);
-        return;
-      }
-      user.getIdToken().then(
-        token => defaultLogger.log(severity, code, payload, token),
-        err => console.log('Failed to get ID token:', err)
-      );
-    })
-    .catch(err => {
-      console.error(`Failed to import Firebase auth code: ${err}`);
-    });
+  const user = app.auth().currentUser;
+  if (!user) {
+    defaultLogger.log(severity, code, payload);
+    return;
+  }
+  user.getIdToken().then(
+    (token) => defaultLogger.log(severity, code, payload, token),
+    (err) => console.log('Failed to get ID token:', err)
+  );
 }
 
 // Sends a record to Stackdriver with DEBUG severity.