reactfire 4.0.0-rc.1 → 4.0.1-exp.f6d2351

package/dist/sdk.d.ts

@@ -1,43 +1,70 @@
-import * as React from 'react';
-import type { Auth } from 'firebase/auth';
-import type { Database } from 'firebase/database';
-import type { Firestore } from 'firebase/firestore';
-import type { FirebasePerformance } from 'firebase/performance';
-import type { FirebaseStorage } from 'firebase/storage';
-import type { RemoteConfig } from 'firebase/remote-config';
-import { FirebaseApp } from 'firebase/app';
-import { ObservableStatus } from './useObservable';
-import { ReactFireOptions } from '.';
-declare type FirebaseSdks = Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
-export declare const AuthProvider: (props: React.PropsWithChildren<{
-    sdk: Auth;
-}>) => JSX.Element;
-export declare const DatabaseProvider: (props: React.PropsWithChildren<{
-    sdk: Database;
-}>) => JSX.Element;
-export declare const FirestoreProvider: (props: React.PropsWithChildren<{
-    sdk: Firestore;
-}>) => JSX.Element;
-export declare const PerformanceProvider: (props: React.PropsWithChildren<{
-    sdk: FirebasePerformance;
-}>) => JSX.Element;
-export declare const StorageProvider: (props: React.PropsWithChildren<{
-    sdk: FirebaseStorage;
-}>) => JSX.Element;
-export declare const RemoteConfigProvider: (props: React.PropsWithChildren<{
-    sdk: RemoteConfig;
-}>) => JSX.Element;
-export declare const useAuth: () => Auth;
-export declare const useDatabase: () => Database;
-export declare const useFirestore: () => Firestore;
-export declare const usePerformance: () => FirebasePerformance;
-export declare const useStorage: () => FirebaseStorage;
-export declare const useRemoteConfig: () => RemoteConfig;
-declare type InitSdkHook<Sdk extends FirebaseSdks> = (initializer: (firebaseApp: FirebaseApp) => Promise<Sdk>, options?: ReactFireOptions<Sdk>) => ObservableStatus<Sdk>;
-export declare const useInitAuth: InitSdkHook<Auth>;
-export declare const useInitDatabase: InitSdkHook<Database>;
-export declare const useInitFirestore: InitSdkHook<Firestore>;
-export declare const useInitPerformance: InitSdkHook<FirebasePerformance>;
-export declare const useInitRemoteConfig: InitSdkHook<RemoteConfig>;
-export declare const useInitStorage: InitSdkHook<FirebaseStorage>;
-export {};
+import * as React from 'react';
+import type { AppCheck } from 'firebase/app-check';
+import type { Auth } from 'firebase/auth';
+import type { Analytics } from 'firebase/analytics';
+import type { Database } from 'firebase/database';
+import type { Firestore } from 'firebase/firestore';
+import type { Functions } from 'firebase/functions';
+import type { FirebasePerformance } from 'firebase/performance';
+import type { FirebaseStorage } from 'firebase/storage';
+import type { RemoteConfig } from 'firebase/remote-config';
+import { FirebaseApp } from 'firebase/app';
+import { ObservableStatus } from './useObservable';
+import { ReactFireOptions } from '.';
+export declare const AppCheckSdkContext: React.Context<AppCheck | undefined>;
+export declare const AuthSdkContext: React.Context<Auth | undefined>;
+export declare const AnalyticsSdkContext: React.Context<Analytics | undefined>;
+export declare const DatabaseSdkContext: React.Context<Database | undefined>;
+export declare const FirestoreSdkContext: React.Context<Firestore | undefined>;
+export declare const FunctionsSdkContext: React.Context<Functions | undefined>;
+export declare const StorageSdkContext: React.Context<FirebaseStorage | undefined>;
+export declare const PerformanceSdkContext: React.Context<FirebasePerformance | undefined>;
+export declare const RemoteConfigSdkContext: React.Context<RemoteConfig | undefined>;
+declare type FirebaseSdks = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | Functions | RemoteConfig;
+export declare const AppCheckProvider: (props: React.PropsWithChildren<{
+    sdk: AppCheck;
+}>) => JSX.Element;
+export declare const AuthProvider: (props: React.PropsWithChildren<{
+    sdk: Auth;
+}>) => JSX.Element;
+export declare const AnalyticsProvider: (props: React.PropsWithChildren<{
+    sdk: Analytics;
+}>) => JSX.Element;
+export declare const DatabaseProvider: (props: React.PropsWithChildren<{
+    sdk: Database;
+}>) => JSX.Element;
+export declare const FirestoreProvider: (props: React.PropsWithChildren<{
+    sdk: Firestore;
+}>) => JSX.Element;
+export declare const FunctionsProvider: (props: React.PropsWithChildren<{
+    sdk: Functions;
+}>) => JSX.Element;
+export declare const PerformanceProvider: (props: React.PropsWithChildren<{
+    sdk: FirebasePerformance;
+}>) => JSX.Element;
+export declare const StorageProvider: (props: React.PropsWithChildren<{
+    sdk: FirebaseStorage;
+}>) => JSX.Element;
+export declare const RemoteConfigProvider: (props: React.PropsWithChildren<{
+    sdk: RemoteConfig;
+}>) => JSX.Element;
+export declare const useAppCheck: () => AppCheck;
+export declare const useAuth: () => Auth;
+export declare const useAnalytics: () => Analytics;
+export declare const useDatabase: () => Database;
+export declare const useFirestore: () => Firestore;
+export declare const useFunctions: () => Functions;
+export declare const usePerformance: () => FirebasePerformance;
+export declare const useStorage: () => FirebaseStorage;
+export declare const useRemoteConfig: () => RemoteConfig;
+declare type InitSdkHook<Sdk extends FirebaseSdks> = (initializer: (firebaseApp: FirebaseApp) => Promise<Sdk>, options?: ReactFireOptions<Sdk>) => ObservableStatus<Sdk>;
+export declare const useInitAppCheck: InitSdkHook<AppCheck>;
+export declare const useInitAuth: InitSdkHook<Auth>;
+export declare const useInitAnalytics: InitSdkHook<Analytics>;
+export declare const useInitDatabase: InitSdkHook<Database>;
+export declare const useInitFirestore: InitSdkHook<Firestore>;
+export declare const useInitFunctions: InitSdkHook<Functions>;
+export declare const useInitPerformance: InitSdkHook<FirebasePerformance>;
+export declare const useInitRemoteConfig: InitSdkHook<RemoteConfig>;
+export declare const useInitStorage: InitSdkHook<FirebaseStorage>;
+export {};

package/dist/storage.d.ts

@@ -1,26 +1,26 @@
-import * as React from 'react';
-import { ReactFireOptions, ObservableStatus } from './';
-import type { UploadTask, UploadTaskSnapshot, StorageReference, FirebaseStorage } from 'firebase/storage';
-/**
- * Subscribe to the progress of a storage task
- *
- * @param task - the task you want to listen to
- * @param ref - reference to the blob the task is acting on
- * @param options
- */
-export declare function useStorageTask<T = unknown>(task: UploadTask, ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<UploadTaskSnapshot | T>;
-/**
- * Subscribe to a storage ref's download URL
- *
- * @param ref - reference to the blob you want to download
- * @param options
- */
-export declare function useStorageDownloadURL<T = string>(ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<string | T>;
-declare type StorageImageProps = {
-    storagePath: string;
-    storage?: FirebaseStorage;
-    suspense?: boolean;
-    placeHolder?: JSX.Element;
-};
-export declare function StorageImage(props: StorageImageProps & React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>): JSX.Element;
-export {};
+import * as React from 'react';
+import { ReactFireOptions, ObservableStatus } from './';
+import type { UploadTask, UploadTaskSnapshot, StorageReference, FirebaseStorage } from 'firebase/storage';
+/**
+ * Subscribe to the progress of a storage task
+ *
+ * @param task - the task you want to listen to
+ * @param ref - reference to the blob the task is acting on
+ * @param options
+ */
+export declare function useStorageTask<T = unknown>(task: UploadTask, ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<UploadTaskSnapshot | T>;
+/**
+ * Subscribe to a storage ref's download URL
+ *
+ * @param ref - reference to the blob you want to download
+ * @param options
+ */
+export declare function useStorageDownloadURL<T = string>(ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<string | T>;
+declare type StorageImageProps = {
+    storagePath: string;
+    storage?: FirebaseStorage;
+    suspense?: boolean;
+    placeHolder?: JSX.Element;
+};
+export declare function StorageImage(props: StorageImageProps & React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>): JSX.Element;
+export {};

package/dist/useObservable.d.ts

@@ -1,41 +1,41 @@
-import { Observable } from 'rxjs';
-import { SuspenseSubject } from './SuspenseSubject';
-import { ReactFireOptions } from './';
-export declare function preloadObservable<T>(source: Observable<T>, id: string): SuspenseSubject<T>;
-export interface ObservableStatus<T> {
-    /**
-     * The loading status.
-     *
-     * - `loading`: Waiting for the first value from an observable
-     * - `error`: Something went wrong. Check `ObservableStatus.error` for more details
-     * - `success`: The hook has emitted at least one value
-     *
-     * If `initialData` is passed in, this will skip `loading` and go straight to `success`.
-     */
-    status: 'loading' | 'error' | 'success';
-    /**
-     * Indicates whether the hook has emitted a value at some point
-     *
-     * If `initialData` is passed in, this will be `true`.
-     */
-    hasEmitted: boolean;
-    /**
-     * If this is `true`, the hook will be emitting no further items.
-     */
-    isComplete: boolean;
-    /**
-     * The most recent value.
-     *
-     * If `initialData` is passed in, the first value of `data` will be the valuea provided in `initialData` **UNLESS** the underlying observable is ready, in which case it will skip `initialData`.
-     */
-    data: T;
-    /**
-     * Any error that may have occurred in the underlying observable
-     */
-    error: Error | undefined;
-    /**
-     * Promise that resolves after first emit from observable
-     */
-    firstValuePromise: Promise<void>;
-}
-export declare function useObservable<T = unknown>(observableId: string, source: Observable<T>, config?: ReactFireOptions): ObservableStatus<T>;
+import { Observable } from 'rxjs';
+import { SuspenseSubject } from './SuspenseSubject';
+import { ReactFireOptions } from './';
+export declare function preloadObservable<T>(source: Observable<T>, id: string): SuspenseSubject<T>;
+export interface ObservableStatus<T> {
+    /**
+     * The loading status.
+     *
+     * - `loading`: Waiting for the first value from an observable
+     * - `error`: Something went wrong. Check `ObservableStatus.error` for more details
+     * - `success`: The hook has emitted at least one value
+     *
+     * If `initialData` is passed in, this will skip `loading` and go straight to `success`.
+     */
+    status: 'loading' | 'error' | 'success';
+    /**
+     * Indicates whether the hook has emitted a value at some point
+     *
+     * If `initialData` is passed in, this will be `true`.
+     */
+    hasEmitted: boolean;
+    /**
+     * If this is `true`, the hook will be emitting no further items.
+     */
+    isComplete: boolean;
+    /**
+     * The most recent value.
+     *
+     * If `initialData` is passed in, the first value of `data` will be the valuea provided in `initialData` **UNLESS** the underlying observable is ready, in which case it will skip `initialData`.
+     */
+    data: T;
+    /**
+     * Any error that may have occurred in the underlying observable
+     */
+    error: Error | undefined;
+    /**
+     * Promise that resolves after first emit from observable
+     */
+    firstValuePromise: Promise<void>;
+}
+export declare function useObservable<T = unknown>(observableId: string, source: Observable<T>, config?: ReactFireOptions): ObservableStatus<T>;

package/package.json

@@ -1,48 +1,49 @@
 {
-  "version": "4.0.0-rc.1",
+  "version": "4.0.1-exp.f6d2351",
   "license": "MIT",
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "dist/index.umd.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test:tsdx": "tsdx test",
-    "test": "firebase emulators:exec --only firestore,database,auth,storage --project=rxfire-525a3 \"tsdx test\"",
-    "test:firestore": "firebase emulators:exec --only firestore --project=rxfire-525a3 \"tsdx test firestore --verbose\"",
-    "test:database": "firebase emulators:exec --only database --project=rxfire-525a3 \"tsdx test database --verbose\"",
-    "test:auth": "firebase emulators:exec --only auth --project=rxfire-525a3 \"tsdx test auth --verbose\"",
-    "test:storage": "firebase emulators:exec --only storage --project=rxfire-525a3 \"tsdx test storage --verbose\"",
-    "test:useObservable": "tsdx test useObservable --verbose",
-    "lint": "tsdx lint src test",
+    "start": "firebase emulators:exec --project=rxfire-525a3 \"vitest --ui\"",
+    "build": "tsc && vite build && npm run docs",
+    "test": "firebase emulators:exec --project=rxfire-525a3 \"vitest\"",
+    "test:firestore": "firebase emulators:exec --only firestore --ui --project=rxfire-525a3 \"vitest firestore\"",
+    "test:database": "firebase emulators:exec --only database --project=rxfire-525a3 \"vitest database\"",
+    "test:auth": "firebase emulators:exec --only auth --project=rxfire-525a3 \"vitest auth\"",
+    "test:functions": "firebase emulators:exec --only functions --project=rxfire-525a3 \"vitest functions\"",
+    "test:storage": "firebase emulators:exec --only storage --project=rxfire-525a3 \"vitest storage\"",
+    "test:useObservable": "vitest useObservable",
+    "test:firebaseApp": "vitest firebaseApp",
+    "format": "prettier src test vite.config.ts -w",
+    "lint": "eslint src/* test/* vite.config.ts",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "docs": "typedoc --options typedoc.json && markdown-toc -i docs/use.md"
+    "docs": "typedoc --options typedoc.json && markdown-toc -i docs/use.md",
+    "docs:fork": "typedoc --options typedoc.json --gitRemote upstream && markdown-toc -i docs/use.md"
   },
   "peerDependencies": {
-    "firebase": "9.0.0-202171919375",
+    "firebase": "^9.0.0",
     "react": ">=16 || experimental"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint"
+      "pre-commit": "npm run lint"
     }
   },
-  "eslint": {
-    "rules": {
-      "react-hooks/rules-of-hooks": "error",
-      "no-only-tests/no-only-tests": "error"
-    },
-    "plugins": [
-      "no-only-tests"
-    ]
-  },
   "prettier": {
     "singleQuote": true,
     "printWidth": 160
@@ -58,7 +59,7 @@
     "url": "https://github.com/Firebase/reactfire/issues"
   },
   "homepage": "https://firebaseopensource.com/projects/firebaseextended/reactfire/",
-  "module": "dist/reactfire.esm.js",
+  "module": "./dist/index.js",
   "size-limit": [
     {
       "path": "dist/reactfire.cjs.production.min.js",
@@ -70,42 +71,43 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@size-limit/preset-small-lib": "^4.6.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
-    "@types/node-fetch": "^2.5.7",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-minify-replace": "^0.5.0",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "@vitejs/plugin-react": "^2.0.0",
+    "@vitest/ui": "^0.20.3",
+    "cross-fetch": "^3.1.5",
+    "eslint": "^8.20.0",
     "eslint-plugin-no-only-tests": "^2.6.0",
-    "firebase": "9.0.0-202171919375",
-    "firebase-tools": "^9.16.0",
-    "globalthis": "^1.0.1",
-    "husky": "^4.3.0",
-    "jest-environment-jsdom": "^26.6.2",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "firebase": "^9.9.0",
+    "firebase-tools": "^11.3.0",
+    "globalthis": "^1.0.3",
+    "husky": "^8.0.1",
+    "jest-environment-jsdom": "^28.1.3",
+    "jsdom": "^20.0.0",
     "markdown-toc": "^1.2.0",
-    "node-fetch": "^2.6.1",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "size-limit": "^4.6.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.2.0",
-    "typedoc": "^0.21.2",
-    "typedoc-plugin-markdown": "^3.6.1",
-    "typescript": "^4.2.4"
+    "rollup-plugin-visualizer": "^5.7.1",
+    "size-limit": "^7.0.8",
+    "typedoc": "^0.23.8",
+    "typedoc-plugin-markdown": "^3.13.3",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.2",
+    "vitest": "^0.18.1"
   },
   "dependencies": {
-    "rxfire": "6.0.0-rc.0",
+    "rxfire": "^6.0.3",
     "rxjs": "^6.6.3 || ^7.0.1"
-  },
-  "resolutions": {
-    "tsdx/**/jest": "^26.6.3",
-    "tsdx/**/ts-jest": "^26.5.5",
-    "tsdx/**/prettier": "^2.2.1",
-    "tsdx/**/typescript": "^4.2.4"
   }
 }

package/src/SuspenseSubject.ts

@@ -10,9 +10,9 @@ export class SuspenseSubject<T> extends Subject<T> {
   private _innerObservable: Observable<T>;
   private _warmupSubscription: Subscription;
 
-  // @ts-ignore: TODO: double check to see if this is an RXJS thing or if we should listen to TS
+  // @ts-expect-error: TODO: double check to see if this is an RXJS thing or if we should listen to TS
   private _innerSubscriber: Subscription;
-  // @ts-ignore: TODO: double check to see if this is an RXJS thing or if we should listen to TS
+  // @ts-expect-error: TODO: double check to see if this is an RXJS thing or if we should listen to TS
   private _resolveFirstEmission: () => void;
 
   constructor(innerObservable: Observable<T>, private _timeoutWindow: number) {
@@ -48,14 +48,16 @@ export class SuspenseSubject<T> extends Subject<T> {
     return this._hasValue || !!this._error;
   }
 
-  get value(): T | undefined {
+  get value(): T {
     // TODO figure out how to reset the cache here, if I _reset() here before throwing
     // it doesn't seem to work.
     // As it is now, this will burn the cache entry until the timeout fires.
     if (this._error) {
       throw this._error;
+    } else if (!this.hasValue) {
+      throw Error('Can only get value if SuspenseSubject has a value');
     }
-    return this._value;
+    return this._value as T;
   }
 
   get firstEmission(): Promise<void> {

package/src/auth.tsx

@@ -24,15 +24,15 @@ export function useUser<T = unknown>(options?: ReactFireOptions<T>): ObservableS
 
   const observableId = `auth:user:${auth.name}`;
   const observable$ = user(auth);
+  const _options: ReactFireOptions<T> = { ...options } ?? {};
 
-  let currentUser = auth.currentUser;
-
-  // Only use options.initialData if auth.currentUser is unavailable
-  if (!currentUser && (options?.initialData ?? options?.startWithValue)) {
-    currentUser = options.initialData ?? options.startWithValue;
+  // only set/override initialData if auth has finished loading
+  if (auth.currentUser !== undefined) {
+    _options.initialData = auth.currentUser;
+    _options.startWithValue = auth.currentUser;
   }
 
-  return useObservable(observableId, observable$, { ...options, initialData: currentUser });
+  return useObservable(observableId, observable$, _options);
 }
 
 export function useIdTokenResult(user: User, forceRefresh: boolean = false, options?: ReactFireOptions<IdTokenResult>): ObservableStatus<IdTokenResult> {

package/src/database.tsx

@@ -1,9 +1,6 @@
-import { list, object, QueryChange, listVal } from 'rxfire/database';
+import { list, object, QueryChange, listVal, objectVal } from 'rxfire/database';
 import { ReactFireOptions, useObservable, checkIdField, ObservableStatus, ReactFireGlobals } from './';
 
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
 import type { Query as DatabaseQuery, DatabaseReference } from 'firebase/database';
 
 // Since we're side-effect free, we need to ensure our observableId cache is global
@@ -34,33 +31,10 @@ export function useDatabaseObject<T = unknown>(ref: DatabaseReference, options?:
   return useObservable(observableId, observable$, options);
 }
 
-// ============================================================================
-// TODO: switch to rxfire's objectVal once this PR is merged:
-// https://github.com/firebase/firebase-js-sdk/pull/2352
-
-function objectVal<T>(query: DatabaseQuery, keyField?: string): Observable<T> {
-  return object(query).pipe(map((change) => changeToData(change, keyField) as T));
-}
-
-function changeToData(change: QueryChange, keyField?: string): {} {
-  const val = change.snapshot.val();
-
-  // don't worry about setting IDs if the value is a primitive type
-  if (typeof val !== 'object') {
-    return val;
-  }
-
-  return {
-    ...change.snapshot.val(),
-    ...(keyField ? { [keyField]: change.snapshot.key } : null),
-  };
-}
-// ============================================================================
-
 export function useDatabaseObjectData<T>(ref: DatabaseReference, options?: ReactFireOptions<T>): ObservableStatus<T> {
   const idField = options ? checkIdField(options) : 'NO_ID_FIELD';
   const observableId = `database:objectVal:${ref.toString()}:idField=${idField}`;
-  const observable$ = objectVal<T>(ref, idField);
+  const observable$ = objectVal<T>(ref, { keyField: idField });
 
   return useObservable(observableId, observable$, options);
 }
@@ -87,6 +61,6 @@ export function useDatabaseListData<T = { [key: string]: unknown }>(
 ): ObservableStatus<T[] | null> {
   const idField = options ? checkIdField(options) : 'NO_ID_FIELD';
   const observableId = `database:listVal:${getUniqueIdForDatabaseQuery(ref)}:idField=${idField}`;
-  const observable$ = listVal<T>(ref, idField);
+  const observable$ = listVal<T>(ref, { keyField: idField });
   return useObservable(observableId, observable$, options);
 }

package/src/firebaseApp.tsx

@@ -16,8 +16,8 @@ interface FirebaseAppProviderProps {
   suspense?: boolean;
 }
 
-// @ts-ignore: "__REACTFIRE_VERSION__" is replaced with actual ReactFire version (see babel.config.js)
-export const version = __REACTFIRE_VERSION__;
+// REACTFIRE_VERSION is automatically pulled in from `package.json` by Vite
+export const version = process.env.REACTFIRE_VERSION as string;
 
 const shallowEq = (a: { [key: string]: any }, b: { [key: string]: any }) => a === b || [...Object.keys(a), ...Object.keys(b)].every((key) => a[key] === b[key]);
 

package/src/firestore.tsx

@@ -63,7 +63,7 @@ export function useFirestoreDocData<T = unknown>(ref: DocumentReference<T>, opti
   const idField = options ? checkIdField(options) : 'NO_ID_FIELD';
 
   const observableId = `firestore:docData:${ref.firestore.app.name}:${ref.path}:idField=${idField}`;
-  const observable = docData(ref, idField);
+  const observable = docData(ref, { idField });
 
   return useObservable(observableId, observable, options);
 }
@@ -75,7 +75,7 @@ export function useFirestoreDocDataOnce<T = unknown>(ref: DocumentReference<T>,
   const idField = options ? checkIdField(options) : 'NO_ID_FIELD';
 
   const observableId = `firestore:docDataOnce:${ref.firestore.app.name}:${ref.path}:idField=${idField}`;
-  const observable$ = docData(ref, idField).pipe(first());
+  const observable$ = docData(ref, { idField }).pipe(first());
 
   return useObservable(observableId, observable$, options);
 }
@@ -96,7 +96,7 @@ export function useFirestoreCollection<T = DocumentData>(query: FirestoreQuery<T
 export function useFirestoreCollectionData<T = DocumentData>(query: FirestoreQuery<T>, options?: ReactFireOptions<T[]>): ObservableStatus<T[]> {
   const idField = options ? checkIdField(options) : 'NO_ID_FIELD';
   const observableId = `firestore:collectionData:${getUniqueIdForFirestoreQuery(query)}:idField=${idField}`;
-  const observable$ = collectionData(query, idField);
+  const observable$ = collectionData(query, { idField });
 
   return useObservable(observableId, observable$, options);
 }

package/src/functions.tsx

@@ -0,0 +1,26 @@
+import { httpsCallable as rxHttpsCallable } from 'rxfire/functions';
+import { ReactFireOptions, useObservable, ObservableStatus } from './';
+import { useFunctions } from '.';
+
+import type { HttpsCallableOptions } from 'firebase/functions';
+
+/**
+ * Calls a callable function.
+ *
+ * @param functionName - The name of the function to call
+ * @param options
+ */
+export function useCallableFunctionResponse<RequestData, ResponseData>(
+  functionName: string,
+  options?: ReactFireOptions<ResponseData> & {
+    httpsCallableOptions?: HttpsCallableOptions;
+    data?: RequestData;
+  }
+): ObservableStatus<ResponseData> {
+  const functions = useFunctions();
+  const observableId = `functions:callableResponse:${functionName}:${JSON.stringify(options?.data)}:${JSON.stringify(options?.httpsCallableOptions)}`;
+  const obsFactory = rxHttpsCallable<RequestData, ResponseData>(functions, functionName, options?.httpsCallableOptions);
+  const observable$ = obsFactory(options?.data);
+
+  return useObservable(observableId, observable$, options);
+}

package/src/index.ts

@@ -52,6 +52,7 @@ export * from './auth';
 export * from './database';
 export * from './firebaseApp';
 export * from './firestore';
+export * from './functions';
 export * from './performance';
 export * from './remote-config';
 export * from './storage';