feat(firebase)!: support firebase 9

.tazerc.json

@@ -3,7 +3,6 @@
     "eslint-plugin-markdown",
     "rxjs",
     "electron",
-    "firebase",
     "vue-demi"
   ]
 }

package.json

@@ -63,7 +63,7 @@
     "esno": "^0.16.3",
     "export-size": "^0.5.2",
     "fast-glob": "^3.2.11",
-    "firebase": "^8.10.0",
+    "firebase": "^9.9.0",
     "fs-extra": "^10.1.0",
     "fuse.js": "^6.6.2",
     "google-font-installer": "^1.2.0",

packages/firebase/README.md

@@ -2,7 +2,9 @@
 
 [![NPM version](https://img.shields.io/npm/v/@vueuse/firebase?color=a1b858)](https://www.npmjs.com/package/@vueuse/firebase)
 
-> This is an add-on of [VueUse](https://github.com/vueuse/vueuse), enables the real-time bindings for Firebase.
+Add-on of [VueUse](https://github.com/vueuse/vueuse), enables the real-time bindings for Firebase.
+
+> ⚠️ This package only work with [Firebase 9 or above with the modular style](https://firebase.google.com/docs/web/modular-upgrade). For legacy versions, use `@vueuse/firebase@8` instead.
 
 ## Install
 

packages/firebase/package.json

@@ -51,7 +51,7 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "peerDependencies": {
-    "firebase": ">=4.0.0"
+    "firebase": ">=9.0.0"
   },
   "dependencies": {
     "@vueuse/shared": "workspace:*",

packages/firebase/useAuth/index.md

@@ -11,14 +11,14 @@ can easily react to changes in the users' authentication status.
 
 ```html
 <script setup lang="ts">
-import firebase from 'firebase'
+import { initializeApp } from 'firebase/app'
+import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'
 import { useAuth } from '@vueuse/firebase/useAuth'
 
-const { GoogleAuthProvider } = firebase.auth
+const app = initializeApp({ /* config */ })
+const { isAuthenticated, user } = useAuth(getAuth(app))
 
-const { isAuthenticated, user } = useAuth(firebase.auth)
-
-const signIn = () => firebase.auth().signInWithPopup(new GoogleAuthProvider())
+const signIn = () => signInWithPopup(new GoogleAuthProvider())
 </script>
 
 <template>

packages/firebase/useAuth/index.ts

@@ -1,21 +1,14 @@
 import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
-import type firebase from 'firebase/app'
+import type { Auth, User } from 'firebase/auth'
 
-export interface FirebaseAuthOptions {
+export interface UseFirebaseAuthOptions {
   isAuthenticated: ComputedRef<boolean>
-  user: Ref<firebase.User | null>
+  user: Ref<User | null>
 }
 
-export function useAuth(authInstance: typeof firebase.auth | firebase.auth.Auth) {
-  let auth: firebase.auth.Auth
-
-  if (authInstance instanceof Function)
-    auth = authInstance()
-  else
-    auth = authInstance
-
-  const user = ref<firebase.User | null>(auth.currentUser)
+export function useAuth(auth: Auth) {
+  const user = ref<User | null>(auth.currentUser)
   const isAuthenticated = computed(() => !!user.value)
 
   auth.onIdTokenChanged(authUser => user.value = authUser)

packages/firebase/useFirestore/index.md

@@ -9,11 +9,12 @@ Reactive [Firestore](https://firebase.google.com/docs/firestore) binding. Making
 ## Usage
 
 ```js {7,9}
-import firebase from 'firebase/app'
-import 'firebase/firestore'
+import { initializeApp } from 'firebase/app'
+import { getFirestore } from 'firebase/firestore'
 import { useFirestore } from '@vueuse/firebase/useFirestore'
 
-const db = firebase.initializeApp({ projectId: 'MY PROJECT ID' }).firestore()
+const app = initializeApp({ projectId: 'MY PROJECT ID' })
+const db = getFirestore(app)
 
 const todos = useFirestore(db.collection('todos'))
 

packages/firebase/useFirestore/index.ts

@@ -1,19 +1,20 @@
-import type firebase from 'firebase'
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
+import type { DocumentData, DocumentReference, DocumentSnapshot, Query, QueryDocumentSnapshot } from 'firebase/firestore'
 import { isDef, tryOnScopeDispose } from '@vueuse/shared'
+import { onSnapshot } from 'firebase/firestore'
 
-export interface FirestoreOptions {
+export interface UseFirestoreOptions {
   errorHandler?: (err: Error) => void
   autoDispose?: boolean
 }
 
 export type FirebaseDocRef<T> =
-  firebase.firestore.Query<T> |
-  firebase.firestore.DocumentReference<T>
+  Query<T> |
+  DocumentReference<T>
 
 function getData<T>(
-  docRef: firebase.firestore.DocumentSnapshot<T> | firebase.firestore.QueryDocumentSnapshot<T>,
+  docRef: DocumentSnapshot<T> | QueryDocumentSnapshot<T>,
 ) {
   const data = docRef.data()
 
@@ -27,31 +28,31 @@ function getData<T>(
   return data
 }
 
-function isDocumentReference<T>(docRef: any): docRef is firebase.firestore.DocumentReference<T> {
+function isDocumentReference<T>(docRef: any): docRef is DocumentReference<T> {
   return (docRef.path?.match(/\//g) || []).length % 2 !== 0
 }
 
-export function useFirestore<T extends firebase.firestore.DocumentData>(
-  docRef: firebase.firestore.DocumentReference<T>,
+export function useFirestore<T extends DocumentData>(
+  docRef: DocumentReference<T>,
   initialValue: T,
-  options?: FirestoreOptions
+  options?: UseFirestoreOptions
 ): Ref<T | null>
-export function useFirestore<T extends firebase.firestore.DocumentData>(
-  docRef: firebase.firestore.Query<T>,
+export function useFirestore<T extends DocumentData>(
+  docRef: Query<T>,
   initialValue: T[],
-  options?: FirestoreOptions
+  options?: UseFirestoreOptions
 ): Ref<T[]>
 
 // nullable initial values
-export function useFirestore<T extends firebase.firestore.DocumentData>(
-  docRef: firebase.firestore.DocumentReference<T>,
+export function useFirestore<T extends DocumentData>(
+  docRef: DocumentReference<T>,
   initialValue?: T | undefined,
-  options?: FirestoreOptions,
+  options?: UseFirestoreOptions,
 ): Ref<T | undefined | null>
-export function useFirestore<T extends firebase.firestore.DocumentData>(
-  docRef: firebase.firestore.Query<T>,
+export function useFirestore<T extends DocumentData>(
+  docRef: Query<T>,
   initialValue?: T[],
-  options?: FirestoreOptions
+  options?: UseFirestoreOptions
 ): Ref<T[] | undefined>
 
 /**
@@ -63,10 +64,10 @@ export function useFirestore<T extends firebase.firestore.DocumentData>(
  * @param initialValue
  * @param options
  */
-export function useFirestore<T extends firebase.firestore.DocumentData>(
+export function useFirestore<T extends DocumentData>(
   docRef: FirebaseDocRef<T>,
   initialValue: any = undefined,
-  options: FirestoreOptions = {},
+  options: UseFirestoreOptions = {},
 ) {
   const {
 
@@ -77,7 +78,7 @@ export function useFirestore<T extends firebase.firestore.DocumentData>(
   if (isDocumentReference<T>(docRef)) {
     const data = ref(initialValue) as Ref<T | null | undefined>
 
-    const close = docRef.onSnapshot((snapshot) => {
+    const close = onSnapshot(docRef, (snapshot) => {
       data.value = getData(snapshot) || null
     }, errorHandler)
 
@@ -90,7 +91,7 @@ export function useFirestore<T extends firebase.firestore.DocumentData>(
   else {
     const data = ref(initialValue) as Ref<T[] | undefined>
 
-    const close = docRef.onSnapshot((snapshot) => {
+    const close = onSnapshot(docRef, (snapshot) => {
       data.value = snapshot.docs.map(getData).filter(isDef)
     }, errorHandler)
 

packages/firebase/useRTDB/index.md

@@ -9,13 +9,12 @@ Reactive [Firebase Realtime Database](https://firebase.google.com/docs/database)
 ## Usage
 
 ```js
-import firebase from 'firebase/app'
-import 'firebase/database'
+import { initializeApp } from 'firebase/app'
+import { getDatabase } from 'firebase/database'
 import { useRTDB } from '@vueuse/firebase/useRTDB'
 
-const db = firebase
-  .initializeApp({ databaseURL: 'https://MY-DATABASE.firebaseio.com' })
-  .database()
+const app = initializeApp({ /* config */ })
+const db = getDatabase(app)
 
 // in setup()
 const todos = useRTDB(db.ref('todos'))

packages/firebase/useRTDB/index.ts

@@ -1,4 +1,5 @@
-import type firebase from 'firebase'
+import { onValue } from 'firebase/database'
+import type { DataSnapshot, DatabaseReference } from 'firebase/database'
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
 import { tryOnScopeDispose } from '@vueuse/shared'
@@ -14,24 +15,22 @@ export interface UseRTDBOptions {
  * @param options
  */
 export function useRTDB<T = any>(
-  docRef: firebase.database.Reference,
+  docRef: DatabaseReference,
   options: UseRTDBOptions = {},
 ) {
   const {
     autoDispose = true,
   } = options
   const data = ref(undefined) as Ref<T | undefined>
 
-  function update(snapshot: firebase.database.DataSnapshot) {
+  function update(snapshot: DataSnapshot) {
     data.value = snapshot.val()
   }
 
-  docRef.on('value', update)
+  const off = onValue(docRef, update)
+
+  if (autoDispose)
+    tryOnScopeDispose(() => off())
 
-  if (autoDispose) {
-    tryOnScopeDispose(() => {
-      docRef.off('value', update)
-    })
-  }
   return data
 }