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

package/src/{remote-config/index.tsx → remote-config.tsx}

@@ -1,17 +1,12 @@
-import { useRemoteConfig } from '../';
-import { useObservable, ObservableStatus } from '../useObservable';
-import { getValue, getString, getBoolean, getNumber, getAll, AllParameters } from './getValue';
+import { useRemoteConfig } from './';
+import { useObservable, ObservableStatus } from './useObservable';
+import { getValue, getString, getBoolean, getNumber, getAll, AllParameters } from 'rxfire/remote-config';
 import { Observable } from 'rxjs';
 
 import type { RemoteConfig, Value as RemoteConfigValue } from 'firebase/remote-config';
 
 type Getter$<T> = (remoteConfig: RemoteConfig, key: string) => Observable<T>;
 
-interface RemoteConfigWithPrivate extends RemoteConfig {
-  // This is a private API, assume optional
-  _storage?: { appName: string };
-}
-
 /**
  * Helper function to construct type safe functions. Since Remote Config has
  * methods that return different types for values, we need to be extra safe
@@ -23,9 +18,7 @@ interface RemoteConfigWithPrivate extends RemoteConfig {
 function useRemoteConfigValue_INTERNAL<T>(key: string, getter: Getter$<T>): ObservableStatus<T> {
   const remoteConfig = useRemoteConfig();
 
-  // INVESTIGATE need to use a public API to get at the app name, one doesn't appear to exist...
-  // we might need to iterate over the Firebase apps and check for remoteConfig equality? this works for now
-  const appName = (remoteConfig as RemoteConfigWithPrivate)._storage?.appName;
+  const appName = remoteConfig.app.name;
   const $value = getter(remoteConfig, key);
 
   const observableId = `remoteConfig:${key}:${getter.name}:${appName}`;
@@ -37,7 +30,6 @@ function useRemoteConfigValue_INTERNAL<T>(key: string, getter: Getter$<T>): Obse
  * Remote Config Value.
  *
  * @param key The parameter key in Remote Config
- * @param remoteConfig Optional instance. If not provided ReactFire will either grab the default instance or lazy load.
  */
 export function useRemoteConfigValue(key: string): ObservableStatus<RemoteConfigValue> {
   return useRemoteConfigValue_INTERNAL<RemoteConfigValue>(key, getValue);
@@ -46,7 +38,6 @@ export function useRemoteConfigValue(key: string): ObservableStatus<RemoteConfig
 /**
  * Convience method similar to useRemoteConfigValue. Returns a `string` from a Remote Config parameter.
  * @param key The parameter key in Remote Config
- * @param remoteConfig Optional instance. If not provided ReactFire will either grab the default instance or lazy load.
  */
 export function useRemoteConfigString(key: string): ObservableStatus<string> {
   return useRemoteConfigValue_INTERNAL<string>(key, getString);
@@ -55,7 +46,6 @@ export function useRemoteConfigString(key: string): ObservableStatus<string> {
 /**
  * Convience method similar to useRemoteConfigValue. Returns a `number` from a Remote Config parameter.
  * @param key The parameter key in Remote Config
- * @param remoteConfig Optional instance. If not provided ReactFire will either grab the default instance or lazy load.
  */
 export function useRemoteConfigNumber(key: string): ObservableStatus<number> {
   return useRemoteConfigValue_INTERNAL<number>(key, getNumber);
@@ -64,7 +54,6 @@ export function useRemoteConfigNumber(key: string): ObservableStatus<number> {
 /**
  * Convience method similar to useRemoteConfigValue. Returns a `boolean` from a Remote Config parameter.
  * @param key The parameter key in Remote Config
- * @param remoteConfig Optional instance. If not provided ReactFire will either grab the default instance or lazy load.
  */
 export function useRemoteConfigBoolean(key: string): ObservableStatus<boolean> {
   return useRemoteConfigValue_INTERNAL<boolean>(key, getBoolean);
@@ -73,7 +62,6 @@ export function useRemoteConfigBoolean(key: string): ObservableStatus<boolean> {
 /**
  * Convience method similar to useRemoteConfigValue. Returns allRemote Config parameters.
  * @param key The parameter key in Remote Config
- * @param remoteConfig Optional instance. If not provided ReactFire will either grab the default instance or lazy load.
  */
 export function useRemoteConfigAll(key: string): ObservableStatus<AllParameters> {
   return useRemoteConfigValue_INTERNAL<AllParameters>(key, getAll);

package/src/sdk.tsx

@@ -1,8 +1,11 @@
 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';
@@ -12,38 +15,25 @@ import { ObservableStatus, useObservable } from './useObservable';
 import { from } from 'rxjs';
 import { ReactFireOptions } from '.';
 
-const AuthSdkContext = React.createContext<Auth | 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 = 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 }>) {
-    const contextualAppName = useFirebaseApp().name;
-    let sdkAppName;
-
-    // @ts-ignore Auth doesn't have field 'app'
-    if (props.sdk.app) {
-      // @ts-ignore Auth doesn't have field 'app'
-      sdkAppName = props.sdk.app.name;
-
-      // @ts-ignore only Auth has field 'name'
-    } else if (props.sdk.name) {
-      // @ts-ignore only Auth has field 'name'
-      sdkAppName = props.sdk.name;
-    }
+    if (!props.sdk) throw new Error('no sdk provided');
 
-    if (sdkAppName !== contextualAppName) {
-      throw new Error('sdk was initialized with a different firebase app');
-    }
-
-    if (!props.sdk) {
-      throw new Error('no sdk provided');
-    }
+    const contextualAppName = useFirebaseApp().name;
+    const sdkAppName = props?.sdk?.app?.name;
+    if (sdkAppName !== contextualAppName) throw new Error('sdk was initialized with a different firebase app');
 
     return <SdkContext.Provider value={props.sdk} {...props} />;
   };
@@ -79,16 +69,22 @@ function useInitSdk<Sdk extends FirebaseSdks>(
   return useObservable<Sdk>(`firebase-sdk:${sdkName}:${firebaseApp.name}`, from(initializeSdk), options);
 }
 
+export const AppCheckProvider = getSdkProvider<AppCheck>(AppCheckSdkContext);
 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);
 
+export const useAppCheck = () => useSdk<AppCheck>(AppCheckSdkContext);
 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);
@@ -98,9 +94,12 @@ type InitSdkHook<Sdk extends FirebaseSdks> = (
   options?: ReactFireOptions<Sdk>
 ) => ObservableStatus<Sdk>;
 
+export const useInitAppCheck: InitSdkHook<AppCheck> = (initializer, options) => useInitSdk<AppCheck>('appcheck', AppCheckSdkContext, initializer, options);
 export const useInitAuth: InitSdkHook<Auth> = (initializer, options) => useInitSdk<Auth>('auth', AuthSdkContext, initializer, options);
+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);
 }

package/src/useObservable.ts

@@ -63,55 +63,75 @@ export interface ObservableStatus<T> {
   firstValuePromise: Promise<void>;
 }
 
+function reducerFactory<T>(observable: SuspenseSubject<T>) {
+  return function reducer(state: ObservableStatus<T>, action: 'value' | 'error' | 'complete'): ObservableStatus<T> {
+    // always make sure these values are in sync with the observable
+    const newState = {
+      ...state,
+      hasEmitted: state.hasEmitted || observable.hasValue,
+      error: observable.ourError,
+      firstValuePromise: observable.firstEmission,
+    };
+    if (observable.hasValue) {
+      newState.data = observable.value;
+    }
+
+    switch (action) {
+      case 'value':
+        newState.status = 'success';
+        return newState;
+      case 'error':
+        newState.status = 'error';
+        return newState;
+      case 'complete':
+        newState.isComplete = true;
+        return newState;
+      default:
+        throw new Error(`invalid action "${action}"`);
+    }
+  };
+}
+
 export function useObservable<T = unknown>(observableId: string, source: Observable<T>, config: ReactFireOptions = {}): ObservableStatus<T> {
+  // Register the observable with the cache
   if (!observableId) {
     throw new Error('cannot call useObservable without an observableId');
   }
   const observable = preloadObservable(source, observableId);
 
+  // Suspend if suspense is enabled and no initial data exists
   const hasInitialData = config.hasOwnProperty('initialData') || config.hasOwnProperty('startWithValue');
-
+  const hasData = observable.hasValue || hasInitialData;
   const suspenseEnabled = useSuspenseEnabledFromConfigAndContext(config.suspense);
-
-  if (suspenseEnabled === true && !observable.hasValue && (!config?.initialData ?? !config?.startWithValue)) {
+  if (suspenseEnabled === true && !hasData) {
     throw observable.firstEmission;
   }
 
-  const [latest, setValue] = React.useState(() => (observable.hasValue ? observable.value : config.initialData ?? config.startWithValue));
-  const [isComplete, setIsComplete] = React.useState(false);
-  const [hasError, setHasError] = React.useState(false);
+  const initialState: ObservableStatus<T> = {
+    status: hasData ? 'success' : 'loading',
+    hasEmitted: hasData,
+    isComplete: false,
+    data: observable.hasValue ? observable.value : config?.initialData ?? config?.startWithValue,
+    error: observable.ourError,
+    firstValuePromise: observable.firstEmission,
+  };
+  const [status, dispatch] = React.useReducer<React.Reducer<ObservableStatus<T>, 'value' | 'error' | 'complete'>>(reducerFactory<T>(observable), initialState);
+
   React.useEffect(() => {
     const subscription = observable.subscribe({
-      next: (v) => {
-        setValue(() => v);
+      next: () => {
+        dispatch('value');
       },
       error: (e) => {
-        setHasError(true);
+        dispatch('error');
         throw e;
       },
       complete: () => {
-        setIsComplete(true);
+        dispatch('complete');
       },
     });
     return () => subscription.unsubscribe();
   }, [observable]);
 
-  let status: ObservableStatus<T>['status'];
-
-  if (hasError) {
-    status = 'error';
-  } else if (observable.hasValue || hasInitialData) {
-    status = 'success';
-  } else {
-    status = 'loading';
-  }
-
-  return {
-    status,
-    hasEmitted: observable.hasValue || hasInitialData,
-    isComplete: isComplete,
-    data: latest,
-    error: observable.ourError,
-    firstValuePromise: observable.firstEmission,
-  };
+  return status;
 }