reactfire 4.1.1 → 4.2.2

package/dist/sdk.d.ts

@@ -1,55 +1,70 @@
-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 { 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 = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | 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 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 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 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,26 +1,35 @@
 {
-  "version": "4.1.1",
+  "version": "4.2.2",
   "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",
@@ -32,18 +41,9 @@
   },
   "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
@@ -59,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",
@@ -71,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.1",
-    "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",
+    "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/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/firebaseApp.tsx

@@ -16,8 +16,8 @@ interface FirebaseAppProviderProps {
   suspense?: boolean;
 }
 
-// @ts-expect-error: "__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/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';

package/src/sdk.tsx

@@ -5,6 +5,7 @@ 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';
@@ -14,16 +15,17 @@ import { ObservableStatus, useObservable } from './useObservable';
 import { from } from 'rxjs';
 import { ReactFireOptions } from '.';
 
-const AppCheckSdkContext = React.createContext<AppCheck | undefined>(undefined);
-const AuthSdkContext = React.createContext<Auth | undefined>(undefined);
-const AnalyticsSdkContext = React.createContext<Analytics | undefined>(undefined);
-const DatabaseSdkContext = React.createContext<Database | undefined>(undefined);
-const FirestoreSdkContext = React.createContext<Firestore | undefined>(undefined);
-const StorageSdkContext = React.createContext<FirebaseStorage | undefined>(undefined);
-const PerformanceSdkContext = React.createContext<FirebasePerformance | undefined>(undefined);
-const RemoteConfigSdkContext = React.createContext<RemoteConfig | undefined>(undefined);
+export const AppCheckSdkContext = React.createContext<AppCheck | undefined>(undefined);
+export const AuthSdkContext = React.createContext<Auth | undefined>(undefined);
+export const AnalyticsSdkContext = React.createContext<Analytics | undefined>(undefined);
+export const DatabaseSdkContext = React.createContext<Database | undefined>(undefined);
+export const FirestoreSdkContext = React.createContext<Firestore | undefined>(undefined);
+export const FunctionsSdkContext = React.createContext<Functions | undefined>(undefined);
+export const StorageSdkContext = React.createContext<FirebaseStorage | undefined>(undefined);
+export const PerformanceSdkContext = React.createContext<FirebasePerformance | undefined>(undefined);
+export const RemoteConfigSdkContext = React.createContext<RemoteConfig | undefined>(undefined);
 
-type FirebaseSdks = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
+type FirebaseSdks = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | Functions | RemoteConfig;
 
 function getSdkProvider<Sdk extends FirebaseSdks>(SdkContext: React.Context<Sdk | undefined>) {
   return function SdkProvider(props: React.PropsWithChildren<{ sdk: Sdk }>) {
@@ -72,6 +74,7 @@ export const AuthProvider = getSdkProvider<Auth>(AuthSdkContext);
 export const AnalyticsProvider = getSdkProvider<Analytics>(AnalyticsSdkContext);
 export const DatabaseProvider = getSdkProvider<Database>(DatabaseSdkContext);
 export const FirestoreProvider = getSdkProvider<Firestore>(FirestoreSdkContext);
+export const FunctionsProvider = getSdkProvider<Functions>(FunctionsSdkContext);
 export const PerformanceProvider = getSdkProvider<FirebasePerformance>(PerformanceSdkContext);
 export const StorageProvider = getSdkProvider<FirebaseStorage>(StorageSdkContext);
 export const RemoteConfigProvider = getSdkProvider<RemoteConfig>(RemoteConfigSdkContext);
@@ -81,6 +84,7 @@ export const useAuth = () => useSdk<Auth>(AuthSdkContext);
 export const useAnalytics = () => useSdk<Analytics>(AnalyticsSdkContext);
 export const useDatabase = () => useSdk<Database>(DatabaseSdkContext);
 export const useFirestore = () => useSdk<Firestore>(FirestoreSdkContext);
+export const useFunctions = () => useSdk<Functions>(FunctionsSdkContext);
 export const usePerformance = () => useSdk<FirebasePerformance>(PerformanceSdkContext);
 export const useStorage = () => useSdk<FirebaseStorage>(StorageSdkContext);
 export const useRemoteConfig = () => useSdk<RemoteConfig>(RemoteConfigSdkContext);
@@ -95,6 +99,7 @@ export const useInitAuth: InitSdkHook<Auth> = (initializer, options) => useInitS
 export const useInitAnalytics: InitSdkHook<Analytics> = (initializer, options) => useInitSdk<Analytics>('analytics', AnalyticsSdkContext, initializer, options);
 export const useInitDatabase: InitSdkHook<Database> = (initializer, options) => useInitSdk<Database>('database', DatabaseSdkContext, initializer, options);
 export const useInitFirestore: InitSdkHook<Firestore> = (initializer, options) => useInitSdk<Firestore>('firestore', FirestoreSdkContext, initializer, options);
+export const useInitFunctions: InitSdkHook<Functions> = (initializer, options) => useInitSdk<Functions>('functions', FunctionsSdkContext, initializer, options);
 export const useInitPerformance: InitSdkHook<FirebasePerformance> = (initializer, options) =>
   useInitSdk<FirebasePerformance>('performance', PerformanceSdkContext, initializer, options);
 export const useInitRemoteConfig: InitSdkHook<RemoteConfig> = (initializer, options) =>

package/src/storage.tsx

@@ -1,33 +1,11 @@
 import * as React from 'react';
-import { getDownloadURL } from 'rxfire/storage';
-import { Observable } from 'rxjs';
+import { getDownloadURL, fromTask } from 'rxfire/storage';
 import { ReactFireOptions, useObservable, ObservableStatus, useStorage } from './';
 import { useSuspenseEnabledFromConfigAndContext } from './firebaseApp';
 import { ref } from 'firebase/storage';
 
 import type { UploadTask, UploadTaskSnapshot, StorageReference, FirebaseStorage } from 'firebase/storage';
 
-/**
- * modified version of rxFire's _fromTask
- *
- * @param task
- */
-function _fromTask(task: UploadTask) {
-  return new Observable<UploadTaskSnapshot>((subscriber) => {
-    const progress = (snap: UploadTaskSnapshot) => {
-      return subscriber.next(snap);
-    };
-    const error = (e: any) => subscriber.error(e);
-    const complete = () => {
-      return subscriber.complete();
-    };
-    task.on('state_changed', progress, error, complete);
-
-    // I REMOVED THE UNSUBSCRIBE RETURN BECAUSE IT CANCELS THE UPLOAD
-    // https://github.com/firebase/firebase-js-sdk/issues/1659
-  });
-}
-
 /**
  * Subscribe to the progress of a storage task
  *
@@ -37,7 +15,7 @@ function _fromTask(task: UploadTask) {
  */
 export function useStorageTask<T = unknown>(task: UploadTask, ref: StorageReference, options?: ReactFireOptions<T>): ObservableStatus<UploadTaskSnapshot | T> {
   const observableId = `storage:task:${ref.toString()}`;
-  const observable$ = _fromTask(task);
+  const observable$ = fromTask(task);
 
   return useObservable(observableId, observable$, options);
 }