feat: add modules for options api

Author: posva

src/database/optionsApi.ts

@@ -1,3 +1,4 @@
+import { FirebaseApp } from 'firebase/app'
 import { DatabaseReference, DataSnapshot, Query } from 'firebase/database'
 import { App, ComponentPublicInstance, toRef } from 'vue'
 import { isVue3 } from 'vue-demi'
@@ -27,49 +28,6 @@ const databasePluginDefaults: Readonly<
   unbindName: '$rtdbUnbind',
 }
 
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
-    /**
-     * Binds a reference
-     *
-     * @param name
-     * @param reference
-     * @param options
-     */
-    $rtdbBind(
-      name: string,
-      reference: DatabaseReference | Query,
-      options?: _DatabaseRefOptions
-    ): Promise<DataSnapshot>
-
-    /**
-     * Unbinds a bound reference
-     */
-    $rtdbUnbind: (name: string, reset?: ResetOption) => void
-
-    /**
-     * Bound database references
-     */
-    $firebaseRefs: Readonly<Record<string, DatabaseReference>>
-    // _firebaseSources: Readonly<
-    //   Record<string, Reference | Query>
-    // >
-    /**
-     * Existing unbind functions that get automatically called when the component is unmounted
-     * @internal
-     */
-    // _firebaseUnbinds: Readonly<
-    //   Record<string, UnbindWithReset>
-    // >
-  }
-  export interface ComponentCustomOptions {
-    /**
-     * Calls `$rtdbBind` at created
-     */
-    firebase?: FirebaseOption
-  }
-}
-
 export type VueFirebaseObject = Record<string, Query | DatabaseReference>
 export type FirebaseOption = VueFirebaseObject | (() => VueFirebaseObject)
 
@@ -83,12 +41,15 @@ export const rtdbUnbinds = new WeakMap<
  * you use the Options API. If you **exclusively use the Composition API** (e.g. `useObject()` and `useList()`), you
  * should not add it.
  *
+ * @deprecated Use `VueFire` and `VueFireDatabaseOptionsAPI` with the `modules` option instead.
+ *
  * @param app
  * @param pluginOptions
  */
 export function databasePlugin(
   app: App,
-  pluginOptions?: DatabasePluginOptions
+  pluginOptions?: DatabasePluginOptions,
+  firebaseApp?: FirebaseApp,
 ) {
   // TODO: implement
   // const strategies = Vue.config.optionMergeStrategies
@@ -103,7 +64,7 @@ export function databasePlugin(
 
   GlobalTarget[unbindName] = function rtdbUnbind(
     key: string,
-    reset?: ResetOption
+    reset?: ResetOption,
   ) {
     internalUnbind(key, rtdbUnbinds.get(this), reset)
     delete this.$firebaseRefs[key]
@@ -114,7 +75,7 @@ export function databasePlugin(
     this: ComponentPublicInstance,
     key: string,
     source: DatabaseReference | Query,
-    userOptions?: _DatabaseRefOptions
+    userOptions?: _DatabaseRefOptions,
   ) {
     const options = Object.assign({}, globalOptions, userOptions)
     const target = toRef(this.$data as any, key)
@@ -156,7 +117,7 @@ export function databasePlugin(
           // ts
           key,
           bindings[key],
-          globalOptions
+          globalOptions,
         )
       }
     },
@@ -174,4 +135,70 @@ export function databasePlugin(
   })
 }
 
+/**
+ * VueFire Database Module to be added to the `VueFire` Vue plugin options.
+ *
+ * @example
+ *
+ * ```ts
+ * import { createApp } from 'vue'
+ * import { VueFire, VueFireDatabaseOptionsAPI } from 'vuefire'
+ *
+ * const app = createApp(App)
+ * app.use(VueFire, {
+ *   modules: [VueFireDatabaseOptionsAPI()],
+ * })
+ * ```
+ */
+export function VueFireDatabaseOptionsAPI(
+  pluginOptions?: DatabasePluginOptions,
+) {
+  return (firebaseApp: FirebaseApp, app: App) => {
+    return databasePlugin(app, pluginOptions, firebaseApp)
+  }
+}
+
 type Mutable<T> = { -readonly [P in keyof T]: T[P] }
+
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    /**
+     * Binds a reference
+     *
+     * @param name
+     * @param reference
+     * @param options
+     */
+    $rtdbBind(
+      name: string,
+      reference: DatabaseReference | Query,
+      options?: _DatabaseRefOptions,
+    ): Promise<DataSnapshot>
+
+    /**
+     * Unbinds a bound reference
+     */
+    $rtdbUnbind: (name: string, reset?: ResetOption) => void
+
+    /**
+     * Bound database references
+     */
+    $firebaseRefs: Readonly<Record<string, DatabaseReference>>
+    // _firebaseSources: Readonly<
+    //   Record<string, Reference | Query>
+    // >
+    /**
+     * Existing unbind functions that get automatically called when the component is unmounted
+     * @internal
+     */
+    // _firebaseUnbinds: Readonly<
+    //   Record<string, UnbindWithReset>
+    // >
+  }
+  export interface ComponentCustomOptions {
+    /**
+     * Calls `$rtdbBind` at created
+     */
+    firebase?: FirebaseOption
+  }
+}

src/firestore/optionsApi.ts

@@ -15,6 +15,8 @@ import {
 } from './subscribe'
 import { internalUnbind, _useFirestoreRef } from '.'
 import { ResetOption, UnbindWithReset } from '../shared'
+import { firebaseApp } from '../../tests/utils'
+import { FirebaseApp } from 'firebase/app'
 
 export type VueFirestoreObject = Record<
   string,
@@ -50,13 +52,15 @@ const firestorePluginDefaults: Readonly<
 /**
  * Install this plugin to add `$firestoreBind` and `$firestoreUnbind` functions. Note this plugin is not necessary if
  * you exclusively use the Composition API (`useDocument()` and `useCollection()`).
+ * @deprecated Use `VueFire` and `VueFireFirestoreOptionsAPI` with the `modules` option instead.b
  *
  * @param app
  * @param pluginOptions
  */
 export const firestorePlugin = function firestorePlugin(
   app: App,
-  pluginOptions?: FirestorePluginOptions
+  pluginOptions?: FirestorePluginOptions,
+  firebaseApp?: FirebaseApp,
 ) {
   // const strategies = app.config.optionMergeStrategies
   // TODO: implement
@@ -65,7 +69,7 @@ export const firestorePlugin = function firestorePlugin(
   const globalOptions = Object.assign(
     {},
     firestorePluginDefaults,
-    pluginOptions
+    pluginOptions,
   )
   const { bindName, unbindName } = globalOptions
 
@@ -75,7 +79,7 @@ export const firestorePlugin = function firestorePlugin(
 
   GlobalTarget[unbindName] = function firestoreUnbind(
     key: string,
-    reset?: FirestoreRefOptions['reset']
+    reset?: FirestoreRefOptions['reset'],
   ) {
     internalUnbind(key, firestoreUnbinds.get(this), reset)
     delete this.$firestoreRefs[key]
@@ -88,7 +92,7 @@ export const firestorePlugin = function firestorePlugin(
       | Query<unknown>
       | CollectionReference<unknown>
       | DocumentReference<unknown>,
-    userOptions?: FirestoreRefOptions
+    userOptions?: FirestoreRefOptions,
   ) {
     const options = Object.assign({}, globalOptions, userOptions)
     const target = toRef(this.$data as any, key)
@@ -127,7 +131,7 @@ export const firestorePlugin = function firestorePlugin(
           key,
           // @ts-expect-error: FIXME: there is probably a wrong type in global properties
           refs[key],
-          globalOptions
+          globalOptions,
         )
       }
     },
@@ -145,6 +149,29 @@ export const firestorePlugin = function firestorePlugin(
   })
 }
 
+/**
+ * VueFire Firestore Module to be added to the `VueFire` Vue plugin options.
+ *
+ * @example
+ *
+ * ```ts
+ * import { createApp } from 'vue'
+ * import { VueFire, VueFireFirestoreOptionsAPI } from 'vuefire'
+ *
+ * const app = createApp(App)
+ * app.use(VueFire, {
+ *   modules: [VueFireFirestoreOptionsAPI()],
+ * })
+ * ```
+ */
+export function VueFireFirestoreOptionsAPI(
+  pluginOptions?: FirestorePluginOptions,
+) {
+  return (firebaseApp: FirebaseApp, app: App) => {
+    return firestorePlugin(app, pluginOptions, firebaseApp)
+  }
+}
+
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     /**
@@ -158,15 +185,15 @@ declare module '@vue/runtime-core' {
       name: string,
       // TODO: create proper overloads with generics like in the composition API
       reference: Query<unknown> | CollectionReference<unknown>,
-      options?: FirestoreRefOptions
+      options?: FirestoreRefOptions,
       // TODO: match the promise with the type of internalBind
     ): Promise<DocumentData[]>
 
     $firestoreBind(
       name: string,
       // TODO: create proper overloads with generics like in the composition API
       reference: DocumentReference<unknown>,
-      options?: FirestoreRefOptions
+      options?: FirestoreRefOptions,
     ): Promise<DocumentData>
 
     /**