refactor: one scope per app

Author: posva

src/app-check/index.ts

@@ -5,7 +5,7 @@ import {
   onTokenChanged,
 } from 'firebase/app-check'
 import { App, inject, InjectionKey, Ref, ref } from 'vue'
-import { scope } from '../globals'
+import { getGlobalScope } from '../globals'
 
 export const AppCheckTokenInjectSymbol: InjectionKey<Ref<string | undefined>> =
   Symbol('app-check-token')
@@ -15,9 +15,9 @@ export function useAppCheckToken() {
 }
 
 export function VueFireAppCheck(options: AppCheckOptions) {
-  return (firebaseApp: FirebaseApp | undefined, app: App) => {
+  return (firebaseApp: FirebaseApp, app: App) => {
     const appCheck = initializeAppCheck(firebaseApp, options)
-    const token = scope.run(() => ref<string>())!
+    const token = getGlobalScope(app, firebaseApp).run(() => ref<string>())!
     onTokenChanged(appCheck, (newToken) => {
       token.value = newToken.token
     })

src/auth/index.ts

@@ -2,7 +2,7 @@ import { FirebaseApp } from 'firebase/app'
 import { getAuth, User } from 'firebase/auth'
 import { App, shallowRef } from 'vue'
 import { useFirebaseApp } from '../app'
-import { scope } from '../globals'
+import { getGlobalScope } from '../globals'
 import { AuthUserInjectSymbol, setupOnAuthStateChanged } from './user'
 
 export { setupOnAuthStateChanged, useCurrentUser } from './user'
@@ -16,8 +16,10 @@ modules: [VueFireAuth()]`)
     }
   }
 
-  return (firebaseApp: FirebaseApp | undefined, app: App) => {
-    const user = scope.run(() => shallowRef<User | null | undefined>())!
+  return (firebaseApp: FirebaseApp, app: App) => {
+    const user = getGlobalScope(app, firebaseApp).run(() =>
+      shallowRef<User | null | undefined>()
+    )!
     // userMap.set(app, user)
     app.provide(AuthUserInjectSymbol, user)
     setupOnAuthStateChanged(user, firebaseApp)

src/globals.ts

@@ -1,7 +1,37 @@
-import { effectScope } from 'vue'
+import { FirebaseApp } from 'firebase/app'
+import { App, EffectScope, effectScope } from 'vue'
 
 /**
  * Internal scope for globals
  * @internal
  */
-export const scope = effectScope(true)
+const scope = effectScope(true)
+
+// @internal
+const scopeMap = new WeakMap<FirebaseApp, EffectScope>()
+
+/**
+ * Gets the VueFire global scope for the current app. Creates one if it doesn't exist.
+ * @internal
+ *
+ * @param app - Vue App
+ * @returns
+ */
+export function getGlobalScope(app: App, firebaseApp: FirebaseApp) {
+  let scope: EffectScope | undefined
+  // we use the firebaseApp as a key because we are more likely to have access to it and it's supposed to be also unique
+  // per app since it contains user data.
+  if (!scopeMap.has(firebaseApp)) {
+    scope = effectScope(true)
+    scopeMap.set(firebaseApp, scope)
+    const { unmount } = app
+    // dispose up the scope when the app is unmounted
+    app.unmount = () => {
+      unmount.call(app)
+      scope!.stop()
+      scopeMap.delete(firebaseApp)
+    }
+  }
+
+  return scopeMap.get(firebaseApp)!
+}

src/index.ts

@@ -73,7 +73,7 @@ export interface VueFireOptions {
    * Array of VueFire modules that should be added to the application. e.g. `[VueFireAuth, VueFireDatabase]`. Remember
    * to import them from `vuefire`.
    */
-  modules?: Array<(firebaseApp: FirebaseApp | undefined, app: App) => void>
+  modules?: Array<(firebaseApp: FirebaseApp, app: App) => void>
 }
 
 /**