react-rx 3.0.0-1 → 3.0.0-3

package/dist/cjs/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
-export declare function useObservable<T>(observable: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+import type { Observable } from 'rxjs';
+export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
+declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+export {};

package/dist/cjs/useObservable.js

@@ -7,16 +7,6 @@ function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 var cache = new WeakMap();
-function getOrCreateStore(inputObservable, initialValue) {
-    if (!cache.has(inputObservable)) {
-        var entry_1 = { currentValue: initialValue };
-        entry_1.observable = inputObservable.pipe((0, operators_1.shareReplay)({ refCount: true, bufferSize: 1 }), (0, operators_1.tap)(function (value) { return (entry_1.currentValue = value); }));
-        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-        entry_1.subscription = entry_1.observable.subscribe();
-        cache.set(inputObservable, entry_1);
-    }
-    return cache.get(inputObservable);
-}
 function useObservable(observable, initialValue) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -29,41 +19,30 @@ function useObservable(observable, initialValue) {
     (0, react_1.useEffect)(function () {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    var _a = (0, react_1.useMemo)(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    var store = (0, react_1.useMemo)(function () {
+        if (!cache.has(observable)) {
+            var entry_1 = {
+                snapshot: initialValueRef.current,
+            };
+            entry_1.observable = observable.pipe((0, operators_1.shareReplay)({ refCount: true, bufferSize: 1 }), (0, operators_1.tap)(function (value) { return (entry_1.snapshot = value); }));
+            // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+            entry_1.subscription = entry_1.observable.subscribe();
+            cache.set(observable, entry_1);
         }
-        return [
-            function getSnapshot() {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-                return store.currentValue;
-            },
-            function subscribe(callback) {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-                var sub = store.observable.subscribe(callback);
-                return function () {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    var shouldRestoreSubscriptionRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        var instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        return function () {
-            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
-            store.subscription.unsubscribe();
+        return {
+            subscribe: function (onStoreChange) {
+                var subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return function () { return subscription.unsubscribe(); };
+            },
+            getSnapshot: function () { return instance.snapshot; },
         };
     }, [observable]);
-    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot);
+    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot);
 }
 exports.useObservable = useObservable;

package/dist/es2015/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
-export declare function useObservable<T>(observable: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+import type { Observable } from 'rxjs';
+export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
+declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+export {};

package/dist/es2015/useObservable.js

@@ -4,16 +4,6 @@ function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 const cache = new WeakMap();
-function getOrCreateStore(inputObservable, initialValue) {
-    if (!cache.has(inputObservable)) {
-        const entry = { currentValue: initialValue };
-        entry.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.currentValue = value)));
-        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-        entry.subscription = entry.observable.subscribe();
-        cache.set(inputObservable, entry);
-    }
-    return cache.get(inputObservable);
-}
 export function useObservable(observable, initialValue) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -26,40 +16,29 @@ export function useObservable(observable, initialValue) {
     useEffect(() => {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    const [getSnapshot, subscribe] = useMemo(() => {
-        const store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    const store = useMemo(() => {
+        if (!cache.has(observable)) {
+            const entry = {
+                snapshot: initialValueRef.current,
+            };
+            entry.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.snapshot = value)));
+            // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+            entry.subscription = entry.observable.subscribe();
+            cache.set(observable, entry);
         }
-        return [
-            function getSnapshot() {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-                return store.currentValue;
-            },
-            function subscribe(callback) {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-                const sub = store.observable.subscribe(callback);
-                return () => {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]);
-    const shouldRestoreSubscriptionRef = useRef(false);
-    useEffect(() => {
-        const store = getOrCreateStore(observable, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        return () => {
-            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
-            store.subscription.unsubscribe();
+        return {
+            subscribe: (onStoreChange) => {
+                const subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return () => subscription.unsubscribe();
+            },
+            getSnapshot: () => instance.snapshot,
         };
     }, [observable]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
 }

package/dist/esm/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
-export declare function useObservable<T>(observable: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+import type { Observable } from 'rxjs';
+export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
+declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+export {};

package/dist/esm/useObservable.js

@@ -4,16 +4,6 @@ function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 var cache = new WeakMap();
-function getOrCreateStore(inputObservable, initialValue) {
-    if (!cache.has(inputObservable)) {
-        var entry_1 = { currentValue: initialValue };
-        entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
-        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-        entry_1.subscription = entry_1.observable.subscribe();
-        cache.set(inputObservable, entry_1);
-    }
-    return cache.get(inputObservable);
-}
 export function useObservable(observable, initialValue) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -26,40 +16,29 @@ export function useObservable(observable, initialValue) {
     useEffect(function () {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    var _a = useMemo(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    var store = useMemo(function () {
+        if (!cache.has(observable)) {
+            var entry_1 = {
+                snapshot: initialValueRef.current,
+            };
+            entry_1.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.snapshot = value); }));
+            // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+            entry_1.subscription = entry_1.observable.subscribe();
+            cache.set(observable, entry_1);
         }
-        return [
-            function getSnapshot() {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-                return store.currentValue;
-            },
-            function subscribe(callback) {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-                var sub = store.observable.subscribe(callback);
-                return function () {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    var shouldRestoreSubscriptionRef = useRef(false);
-    useEffect(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        var instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        return function () {
-            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
-            store.subscription.unsubscribe();
+        return {
+            subscribe: function (onStoreChange) {
+                var subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return function () { return subscription.unsubscribe(); };
+            },
+            getSnapshot: function () { return instance.snapshot; },
         };
     }, [observable]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-1",
+  "version": "3.0.0-3",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -74,8 +74,8 @@
   },
   "devDependencies": {
     "@sanity/semantic-release-preset": "^2.0.5",
-    "@testing-library/dom": "^8.20.1",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.17.5",
     "@types/react": "^18.3.3",

package/src/useObservable.ts

@@ -1,90 +1,67 @@
 import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
-import {Observable, Subscription} from 'rxjs'
+import type {Observable, Subscription} from 'rxjs'
 import {shareReplay, tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
-
 interface CacheRecord<T> {
   subscription: Subscription
   observable: Observable<T>
-  currentValue: T
+  snapshot: T
 }
 
 const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
-function getOrCreateStore<T>(inputObservable: Observable<T>, initialValue: T) {
-  if (!cache.has(inputObservable)) {
-    const entry: Partial<CacheRecord<T>> = {currentValue: initialValue}
-    entry.observable = inputObservable.pipe(
-      shareReplay({refCount: true, bufferSize: 1}),
-      tap(value => (entry.currentValue = value)),
-    )
-
-    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-    entry.subscription = entry.observable.subscribe()
-
-    cache.set(inputObservable, entry as CacheRecord<T>)
-  }
-  return cache.get(inputObservable)!
-}
 
-export function useObservable<T>(observable: Observable<T>): T | undefined
-export function useObservable<T>(observable: Observable<T>, initialValue: T): T
-export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
-export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
+export function useObservable<ObservableType extends Observable<any>>(
+  observable: ObservableType,
+  initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>),
+): UnboxObservable<ObservableType> {
   /**
    * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
    * But we also don't want the initialValue to be stale if the observable changes.
    */
-  const initialValueRef = useRef(getValue(initialValue))
+  const initialValueRef = useRef(getValue(initialValue) as UnboxObservable<ObservableType>)
 
   /**
    * Ensures that the initialValue is always up-to-date in case the observable changes.
    */
   useEffect(() => {
-    initialValueRef.current = getValue(initialValue)
+    initialValueRef.current = getValue(initialValue) as UnboxObservable<ObservableType>
   }, [initialValue])
 
-  const [getSnapshot, subscribe] = useMemo<
-    [() => T, Parameters<typeof useSyncExternalStore>[0]]
-  >(() => {
-    const store = getOrCreateStore(observable, initialValueRef.current)
-    if (store.subscription.closed) {
-      store.subscription = store.observable.subscribe()
-    }
-    return [
-      function getSnapshot() {
-        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-        return store.currentValue
-      },
-      function subscribe(callback: () => void) {
-        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-        const sub = store.observable.subscribe(callback)
-        return () => {
-          sub.unsubscribe()
-        }
-      },
-    ]
-  }, [observable])
-
-  const shouldRestoreSubscriptionRef = useRef(false)
-  useEffect(() => {
-    const store = getOrCreateStore(observable, initialValueRef.current)
-    if (shouldRestoreSubscriptionRef.current) {
-      if (store.subscription.closed) {
-        store.subscription = store.observable.subscribe()
+  const store = useMemo(() => {
+    if (!cache.has(observable)) {
+      const entry: Partial<CacheRecord<UnboxObservable<ObservableType>>> = {
+        snapshot: initialValueRef.current,
       }
-      shouldRestoreSubscriptionRef.current = false
+      entry.observable = observable.pipe(
+        shareReplay({refCount: true, bufferSize: 1}),
+        tap(value => (entry.snapshot = value)),
+      )
+
+      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+      entry.subscription = entry.observable.subscribe()
+
+      cache.set(observable, entry as CacheRecord<UnboxObservable<ObservableType>>)
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const instance = cache.get(observable)!
+    if (instance.subscription.closed) {
+      instance.subscription = instance.observable.subscribe()
     }
 
-    return () => {
-      // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-      // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-      shouldRestoreSubscriptionRef.current = !store.subscription.closed
-      store.subscription.unsubscribe()
+    return {
+      subscribe: (onStoreChange: () => void) => {
+        const subscription = instance.observable.subscribe(onStoreChange)
+        instance.subscription.unsubscribe()
+        return () => subscription.unsubscribe()
+      },
+      getSnapshot: () => instance.snapshot,
     }
   }, [observable])
 
-  return useSyncExternalStore(subscribe, getSnapshot)
+  return useSyncExternalStore<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)
 }
+
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never