Migrate to firebase v9 modular sdk (#243)

* [WIP] Update to modular SDK

* Lint

* Version 9.0.0-beta.1

* Package lock

* test

* replace uglify with terser

* use stable version of firebase v9

* bump ci to node 10

* Reference --> DatabaseReference in tests

* unsubscribe from listeners instead of calling off()

* callback --> unsubscribe

* add migration guide

* update reference docs

* update example fish1

* update remaining examples

* update common/package-lock

* update package-lock.json files

* Update migration.md

* Update packages/geofire/src/GeoQuery.ts

* add changelog entry

Co-authored-by: Sam <[email protected]>

Author: thatfiredev

.github/workflows/test.yaml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         node-version:
-          - 8.x
+          - 10.x
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1

CHANGELOG.md

@@ -1 +1,3 @@
-
+- [Breaking change] Upgraded GeoFire to use the Firebase JS SDK v9. GeoFire no longer supports Firebase SDK below version 9.0.0
+- [Internal] Replace the `uglify` plugin with `terser`
+- See the migration guide (https://github.com/firebase/geofire-js/tree/master/migration#upgrading-from-geofire-3xx-to-4xx) for upgrade instructions

docs/migration.md

@@ -3,6 +3,45 @@
 Below are instructions for migrating from one version of GeoFire to another. If you are upgrading
 several versions at once, make sure you follow the migration instructions for all upgrades.
 
+## `5.x.x` to `6.x.x`
+
+With the release of GeoFire `6.0.0`, GeoFire now uses the new
+[Firebase Modular SDK](https://firebase.blog/posts/2021/07/introducing-the-new-firebase-js-sdk#introducing-firestore-lite). This new SDK is incompatible with previous versions, so if you're still using an older version of the Firebase SDK or our [compat module](https://firebase.google.com/docs/web/modular-upgrade#update_imports_to_v9_compat), please stick to version `5.x.x` of GeoFire.
+
+This change only affects the way you interact with the Firebase SDK, but not how you interact with GeoFire.
+
+For example, this:
+```js
+// Initialize the Firebase SDK
+firebase.initializeApp({
+  // ...
+});
+
+// Create a Firebase reference where GeoFire will store its information
+var firebaseRef = firebase.database().ref();
+
+// Create a GeoFire index
+var geoFire = new GeoFire(firebaseRef);
+```
+
+Becomes:
+```js
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref } from "firebase/database";
+
+// Initialize the Firebase SDK
+initializeApp({
+  // ...
+});
+
+// Create a Firebase reference where GeoFire will store its information
+var firebaseRef = ref(getDatabase());
+
+// Create a GeoFire index
+var geoFire = new GeoFire(firebaseRef);
+```
+
+See [Firebase's upgrade guide](https://firebase.google.com/docs/web/modular-upgrade) for more details.
 
 ## `3.x.x` to `4.x.x`
 

docs/reference.md

@@ -32,13 +32,16 @@ Creates and returns a new `GeoFire` instance to manage your location data. Data
 the location pointed to by `firebaseRef`. Note that this `firebaseRef` can point to anywhere in your Firebase database.
 
 ```JavaScript
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref } from "firebase/database";
+
 // Initialize the Firebase SDK
-firebase.initializeApp({
+initializeApp({
   // ...
 });
 
 // Create a Firebase reference where GeoFire will store its information
-var firebaseRef = firebase.database().ref();
+var firebaseRef = ref(getDatabase());
 
 // Create a GeoFire index
 var geoFire = new GeoFire(firebaseRef);
@@ -49,7 +52,9 @@ var geoFire = new GeoFire(firebaseRef);
 Returns the `Firebase` reference used to create this `GeoFire` instance.
 
 ```JavaScript
-var firebaseRef = firebase.database().ref();
+import { getDatabase, ref } from "firebase/database";
+
+var firebaseRef = ref(getDatabase());
 var geoFire = new GeoFire(firebaseRef);
 
 var ref = geoFire.ref();  // ref === firebaseRef

examples/fish1/index.html

@@ -4,14 +4,16 @@
     <title>GeoFire fish1 Example</title>
 
     <!-- Firebase -->
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></script>
+    <script type="module">
+      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
+    </script>
 
     <!-- RSVP -->
     <script src="https://unpkg.com/[email protected]/dist/rsvp.min.js"></script>
 
     <!-- GeoFire -->
-    <script src="https://cdn.firebase.com/libs/geofire/5.0.1/geofire.min.js"></script>
+    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>
 
     <!-- Custom JS -->
     <script src="js/fish1.js" defer></script>

examples/fish1/js/fish1.js

@@ -1,13 +1,13 @@
 (function() {
   // Initialize the Firebase SDK
-  firebase.initializeApp({
+  initializeApp({
     apiKey: "AIzaSyCR4ND2xwX3kU1IxTn0youF5OlI3x6MFZs",
     databaseURL: "https://geofire-gh-tests.firebaseio.com",
     projectId: "geofire-gh-tests"
   });
 
   // Generate a random Firebase location
-  var firebaseRef = firebase.database().ref().push();
+  var firebaseRef = push(ref(getDatabase()));
 
   // Create a new GeoFire instance at the random Firebase location
   var geoFireInstance = new geofire.GeoFire(firebaseRef);

examples/fish2/index.html

@@ -4,14 +4,16 @@
     <title>GeoFire fish2 Example</title>
 
     <!-- Firebase -->
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></script>
+    <script type="module">
+      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
+    </script>
 
     <!-- RSVP -->
     <script src="https://unpkg.com/[email protected]/dist/rsvp.min.js"></script>
 
     <!-- GeoFire -->
-    <script src="https://cdn.firebase.com/libs/geofire/5.0.1/geofire.min.js"></script>
+    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>
 
     <!-- Custom JS -->
     <script src="js/fish2.js" defer></script>

examples/fish2/js/fish2.js

@@ -1,13 +1,13 @@
 (function() {
   // Initialize the Firebase SDK
-  firebase.initializeApp({
+  initializeApp({
     apiKey: "sAIzaSyCR4ND2xwX3kU1IxTn0youF5OlI3x6MFZs",
     databaseURL: "https://geofire-gh-tests.firebaseio.com",
     projectId: "geofire-gh-tests"
   });
 
   // Generate a random Firebase location
-  var firebaseRef = firebase.database().ref().push();
+  var firebaseRef = push(ref(getDatabase()));
 
   // Create a new GeoFire instance at the random Firebase location
   var geoFireInstance = new geofire.GeoFire(firebaseRef);

examples/fish3/index.html

@@ -4,14 +4,16 @@
     <title>GeoFire fish3 Example</title>
 
     <!-- Firebase -->
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></script>
+    <script type="module">
+      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
+    </script>
 
     <!-- RSVP -->
     <script src="https://unpkg.com/[email protected]/dist/rsvp.min.js"></script>
 
     <!-- GeoFire -->
-    <script src="https://cdn.firebase.com/libs/geofire/5.0.1/geofire.min.js"></script>
+    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>
 
     <!-- Custom JS -->
     <script src="js/fish3.js" defer></script>

examples/fish3/js/fish3.js

@@ -1,13 +1,13 @@
 (function() {
   // Initialize the Firebase SDK
-  firebase.initializeApp({
+  initializeApp({
     apiKey: "AIzaSyCR4ND2xwX3kU1IxTn0youF5OlI3x6MFZs",
     databaseURL: "https://geofire-gh-tests.firebaseio.com",
     projectId: "geofire-gh-tests"
   });
 
   // Generate a random Firebase location
-  var firebaseRef = firebase.database().ref().push();
+  var firebaseRef = push(ref(getDatabase()));
 
   // Create a new GeoFire instance at the random Firebase location
   var geoFireInstance = new geofire.GeoFire(firebaseRef);

examples/html5Geolocation/index.html

@@ -4,11 +4,13 @@
     <title>GeoFire HTML5 Geolocation API Example</title>
 
     <!-- Firebase -->
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></script>
+    <script type="module">
+      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
+    </script>
 
     <!-- GeoFire -->
-    <script src="https://cdn.firebase.com/libs/geofire/5.0.1/geofire.min.js"></script>
+    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>
 
     <!-- Custom JS -->
     <script src="js/html5Geolocation.js" defer></script>

examples/html5Geolocation/js/html5Geolocation.js

@@ -1,13 +1,13 @@
 (function() {
   // Initialize the Firebase SDK
-  firebase.initializeApp({
+  initializeApp({
     apiKey: "AIzaSyCR4ND2xwX3kU1IxTn0youF5OlI3x6MFZs",
     databaseURL: "https://geofire-gh-tests.firebaseio.com",
     projectId: "geofire-gh-tests"
   });
 
   // Generate a random Firebase location
-  var firebaseRef = firebase.database().ref().push();
+  var firebaseRef = push(ref(getDatabase()));
 
   // Create a new GeoFire instance at the random Firebase location
   var geoFireInstance = new geofire.GeoFire(firebaseRef);

examples/queryBuilder/index.html

@@ -7,11 +7,13 @@
     <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
 
     <!-- Firebase -->
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-database.js"></script>
+    <script type="module">
+      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
+      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
+    </script>
 
     <!-- GeoFire -->
-    <script src="https://cdn.firebase.com/libs/geofire/5.0.1/geofire.min.js"></script>
+    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>
 
     <!-- Custom JS -->
     <script src="js/queryBuilder.js" defer></script>

examples/queryBuilder/js/queryBuilder.js

@@ -1,13 +1,13 @@
 (function() {
   // Initialize the Firebase SDK
-  firebase.initializeApp({
+  initializeApp({
     apiKey: "AIzaSyCR4ND2xwX3kU1IxTn0youF5OlI3x6MFZs",
     databaseURL: "https://geofire-gh-tests.firebaseio.com",
     projectId: "geofire-gh-tests"
   });
 
   // Generate a random Firebase location
-  var firebaseRef = firebase.database().ref().push();
+  var firebaseRef = push(ref(getDatabase()));
 
   // Create a new GeoFire instance at the random Firebase location
   var geoFireInstance = new geofire.GeoFire(firebaseRef);