Firebase v6 & dynamic imports (FirebaseExtended#577)

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
       ecmaVersion: 2017,
       sourceType: 'module'
     },
+    parser: 'babel-eslint',
     plugins: [
       'ember'
     ],

.nvmrc

@@ -1 +1 @@
-8.12.0
+lts/*

README.md

@@ -35,7 +35,7 @@ import FirestoreAdapter from 'emberfire/adapters/firestore';
 
 export default FirestoreAdapter.extend({
     enablePersistence: true,
-    persistenceSettings: { experimentalTabSynchronization: true }
+    persistenceSettings: { synchronizeTabs: true }
 });
 ```
 

addon/adapters/firestore.ts

@@ -92,7 +92,7 @@ export default class FirestoreAdapter extends DS.Adapter.extend({
      *
      * export default FirestoreAdapter.extend({
      *   enablePersistence: true,
-     *   persistenceSettings: { experimentalTabSynchronization: true }
+     *   persistenceSettings: { synchronizeTabs: true }
      * });
      * ```
      * 
@@ -299,7 +299,7 @@ const getFirestore = (adapter: FirestoreAdapter) => {
         });
         set(adapter, 'firestore', cachedFirestoreInstance);
     }
-    return cachedFirestoreInstance;
+    return cachedFirestoreInstance!;
 };
 
 declare module 'ember-data' {

addon/adapters/realtime-database.ts

@@ -238,7 +238,7 @@ const databaseInstance = (adapter: RealtimeDatabaseAdapter) => {
         database = app.database(databaseURL);
         set(adapter, 'database', database);
     }
-    return database;
+    return database!;
 }
 
 declare module 'ember-data' {

addon/initializers/emberfire.ts

@@ -1,11 +1,14 @@
-import * as firebase from 'firebase/app';
+// @ts-ignore export for Node problem
+import _firebase from 'firebase/app';
 import FirebaseAppService from '../services/firebase-app';
 import RealtimeListenerService from '../services/realtime-listener';
 import FirestoreAdapter from '../adapters/firestore';
 import FirestoreSerializer from '../serializers/firestore';
 import RealtimeDatabaseAdapater from '../adapters/realtime-database';
 import RealtimeDatabaseSerializer from '../serializers/realtime-database';
 
+const firebase = _firebase as typeof import('firebase/app');
+
 const initialize = (application: any) => {
     const environment = application.resolveRegistration('config:environment');
     if (!environment || typeof environment.firebase !== 'object') {

addon/serializers/firestore.ts

@@ -1,5 +1,5 @@
 import DS from 'ember-data';
-import { firestore } from 'firebase';
+import { firestore } from 'firebase/app';
 
 export type DocumentSnapshot = firestore.DocumentSnapshot | firestore.QueryDocumentSnapshot;
 export type Snapshot = firestore.DocumentSnapshot | firestore.QuerySnapshot;

addon/serializers/realtime-database.ts

@@ -1,6 +1,6 @@
 import DS from 'ember-data';
 
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 export default class RealtimeDatabaseSerializer extends DS.JSONSerializer {
 

addon/services/firebase-app.ts

@@ -7,18 +7,7 @@ import FirebaseService from './firebase';
 import RSVP from 'rsvp';
 const { resolve } = RSVP;
 
-// TODO move these over to dynamic imports
-import 'firebase/auth';
-import 'firebase/database';
-import 'firebase/firestore';
-import 'firebase/functions';
-import 'firebase/messaging';
-import 'firebase/storage';
-
-// @ts-ignore
-import { app, auth, database, firestore, functions, messaging, storage } from 'firebase/app';
-
-const getApp = (service: FirebaseAppService): app.App => {
+const getApp = (service: FirebaseAppService) => {
     const firebase = get(service, 'firebase');
     const name = get(service, 'name');
     return firebase.app(name);
@@ -37,12 +26,16 @@ export default class FirebaseAppService extends Service.extend({
     options?: object;
 
     delete = () => getApp(this).delete();
-    auth = () => resolve(getApp(this).auth());
-    database = (databaseURL?: string) => resolve(getApp(this).database(databaseURL));
-    firestore = () => resolve(getApp(this).firestore());
-    functions = (region?: string) => resolve(getApp(this).functions(region));
-    messaging = () => resolve(getApp(this).messaging());
-    storage = (storageBucket?: string) => resolve(getApp(this).storage(storageBucket));
+
+    auth        = () => resolve(import('firebase/auth')     ).then(() => getApp(this).auth());
+    firestore   = () => resolve(import('firebase/firestore')).then(() => getApp(this).firestore());
+    messaging   = () => resolve(import('firebase/messaging')).then(() => getApp(this).messaging());
+    database    = (url?: string)    => resolve(import('firebase/database') ).then(() => getApp(this).database(url));
+    functions   = (region?: string) => resolve(import('firebase/functions')).then(() => getApp(this).functions(region));
+
+    // TODO: drop the <any> once firebase-js-sdk #1792 and #1812 and patched in, they were missing typings
+    performance = ()                => resolve(import(<any>'firebase/performance')).then(() => getApp(this).performance());
+    storage     = (url?: string)    => resolve(import(<any>'firebase/storage')    ).then(() => getApp(this).storage(url));
 
     init() {
         this._super(...arguments);
@@ -56,4 +49,4 @@ declare module '@ember/service' {
   interface Registry {
     "firebase-app": FirebaseAppService;
   }
-}
+}

addon/services/firebase.ts

@@ -1,16 +1,19 @@
-import * as firebase from 'firebase/app';
+// @ts-ignore Node.js issues
+import _firebase from 'firebase/app';
 import Service from '@ember/service';
 
+const firebase = _firebase as typeof import('firebase/app');
+
 export default class FirebaseService extends Service {
 
   app = (name?: string) => firebase.app(name);
   apps = firebase.apps;
-  initializeApp = (options: Object, nameOrConfig?: string|Object) => firebase.initializeApp(options, nameOrConfig as string|undefined);
+  initializeApp = (options: Object, nameOrConfig?: string|Object) => firebase.initializeApp(options, nameOrConfig as string | undefined);
 
 }
 
 declare module '@ember/service' {
   interface Registry {
     firebase: FirebaseService;
   }
-}
+}

blueprints/emberfire/files/app/adapters/application.js

@@ -3,5 +3,5 @@ import FirestoreAdapter from 'emberfire/adapters/firestore';
 export default FirestoreAdapter.extend({
     // Uncomment the following lines to enable offline persistence and multi-tab support
     // enablePersistence: true,
-    // persistenceSettings: { experimentalTabSynchronization: true }
+    // persistenceSettings: { synchronizeTabs: true }
 });

docs/guide/installation.md

@@ -28,7 +28,7 @@ import FirestoreAdapter from 'emberfire/adapters/firestore';
 export default FirestoreAdapter.extend({
   // Uncomment the following lines to enable offline persistence and multi-tab support
   // enablePersistence: true,
-  // persistenceSettings: { experimentalTabSynchronization: true }
+  // persistenceSettings: { synchronizeTabs: true }
 });
 ```
 

docs/quickstart.md

@@ -28,7 +28,7 @@ import FirestoreAdapter from 'emberfire/adapters/firestore';
 export default FirestoreAdapter.extend({
   // Uncomment the following lines to enable offline persistence and multi-tab support
   // enablePersistence: true,
-  // persistenceSettings: { experimentalTabSynchronization: true }
+  // persistenceSettings: { synchronizeTabs: true }
 });
 ```
 

docs/reference/classes/firestoreadapter.md

@@ -123,7 +123,7 @@ import FirestoreAdapter from 'emberfire/adapters/firestore';
 
 export default FirestoreAdapter.extend({
   enablePersistence: true,
-  persistenceSettings: { experimentalTabSynchronization: true }
+  persistenceSettings: { synchronizeTabs: true }
 });
 ```
 

ember-cli-build.js

@@ -6,6 +6,7 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
     babel: {
+      plugins: [ require.resolve('ember-auto-import/babel-plugin') ],
       sourceMaps: 'inline'
     }
   });

index.js

@@ -14,6 +14,9 @@ module.exports = {
     autoImport:{
       exclude: [],
       webpack: {}
+    },
+    babel: {
+      plugins: [ require.resolve('ember-auto-import/babel-plugin') ]
     }
   },