react-rx 2.1.2 → 3.0.0-0

package/dist/cjs/WithObservable.d.ts

@@ -4,7 +4,7 @@ interface Props<T> {
     observable: Observable<T>;
     children: (value: T) => ReactNode;
 }
-declare type ObservableComponent<T> = ComponentType<Props<T>>;
+type ObservableComponent<T> = ComponentType<Props<T>>;
 /**
  * @deprecated Use the useObservable hook instead
  */

package/dist/cjs/__tests__/strictmode.test.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -41,14 +41,15 @@ var useObservable_1 = require("../useObservable");
 var react_1 = require("react");
 var react_2 = require("@testing-library/react");
 var useAsObservable_1 = require("../useAsObservable");
+var vitest_1 = require("vitest");
 var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
-test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
+(0, vitest_1.test)('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent() {
+        var observedValue = (0, useObservable_1.useObservable)(observable, 0);
         (0, react_1.useEffect)(function () {
             mountCount++;
         }, []);
-        var observedValue = (0, useObservable_1.useObservable)(observable);
         returnedValues.push(observedValue);
         return (0, react_1.createElement)(react_1.Fragment, null, observedValue);
     }
@@ -61,26 +62,29 @@ test('Strict mode should trigger double mount effects and re-renders', function
                 returnedValues = [];
                 mountCount = 0;
                 rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
-                expect(mountCount).toEqual(2);
-                expect(returnedValues).toEqual([0, 0]);
+                (0, vitest_1.expect)(mountCount).toBe(2);
+                (0, vitest_1.expect)(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
             case 1:
                 _a.sent();
                 (0, react_2.act)(function () { return subject.next(1); });
-                expect(returnedValues).toEqual([0, 0, 1, 1]);
+                (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 1, 1]);
                 (0, react_2.act)(function () { return subject.next(2); });
-                expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
-                expect(mountCount).toEqual(2);
+                (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
+                (0, vitest_1.expect)(mountCount).toEqual(2);
                 return [2 /*return*/];
         }
     });
 }); });
-test('Strict mode should unsubscribe the source observable on unmount', function () {
-    var subscribed = false;
+(0, vitest_1.test)('Strict mode should unsubscribe the source observable on unmount', function () {
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
     var observable = new rxjs_1.Observable(function () {
-        subscribed = true;
+        var id = nextId++;
+        subscribed.push(id);
         return function () {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
@@ -88,14 +92,35 @@ test('Strict mode should unsubscribe the source observable on unmount', function
         return (0, react_1.createElement)(react_1.Fragment, null);
     }
     var rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
-    expect(subscribed).toBe(true);
+    (0, vitest_1.expect)(subscribed).toEqual([0, 1]);
     rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)('div')));
-    expect(subscribed).toBe(false);
+    (0, vitest_1.expect)(unsubscribed).toEqual([0, 1]);
 });
-test('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+(0, vitest_1.test)('useMemoObservable should unsubscribe the source observable on unmount', function () {
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
+    function ObservableComponent() {
+        (0, useObservable_1.useMemoObservable)(function () {
+            return new rxjs_1.Observable(function () {
+                var id = nextId++;
+                subscribed.push(id);
+                return function () {
+                    unsubscribed.push(id);
+                };
+            });
+        }, []);
+        return (0, react_1.createElement)(react_1.Fragment, null);
+    }
+    var rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
+    (0, vitest_1.expect)(subscribed).toEqual([0, 1]);
+    rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)('div')));
+    (0, vitest_1.expect)(unsubscribed).toEqual([0, 1]);
+});
+(0, vitest_1.test)('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent(props) {
         var count$ = (0, useAsObservable_1.useAsObservable)(props.count);
-        var count = (0, useObservable_1.useObservable)(count$);
+        var count = (0, useObservable_1.useObservable)(count$, props.count);
         returnedValues.push(count);
         return (0, react_1.createElement)(react_1.Fragment, null, 'ok');
     }
@@ -103,9 +128,9 @@ test('useAsObservable should work in strict mode', function () { return __awaite
     return __generator(this, function (_a) {
         returnedValues = [];
         rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent, { count: 0 }))).rerender;
-        expect(returnedValues).toEqual([0, 0]);
+        (0, vitest_1.expect)(returnedValues).toEqual([0, 0]);
         rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent, { count: 1 })));
-        expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
+        (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
         return [2 /*return*/];
     });
 }); });

package/dist/cjs/__tests__/useAsObservable.test.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var useAsObservable_1 = require("../useAsObservable");
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
-test('the returned observable should receive a new value when component is rendered with a new value', function () {
+var vitest_1 = require("vitest");
+(0, vitest_1.test)('the returned observable should receive a new value when component is rendered with a new value', function () {
     var receivedValues = [];
     var _a = (0, react_2.renderHook)(function (props) {
         var observable = (0, useAsObservable_1.useAsObservable)(props.value);
@@ -21,10 +22,10 @@ test('the returned observable should receive a new value when component is rende
     }, { initialProps: { value: 'initial' } }), unmount = _a.unmount, rerender = _a.rerender;
     rerender({ value: 'rerender' });
     rerender({ value: 'rerender again' });
-    expect(receivedValues).toEqual(['initial', 'rerender', 'rerender again']);
+    (0, vitest_1.expect)(receivedValues).toEqual(['initial', 'rerender', 'rerender again']);
     unmount();
 });
-test('the returned observable should *not* receive a new value when component is rendered with an unchanged value', function () {
+(0, vitest_1.test)('the returned observable should *not* receive a new value when component is rendered with an unchanged value', function () {
     var receivedValues = [];
     var _a = (0, react_2.renderHook)(function (props) {
         var observable = (0, useAsObservable_1.useAsObservable)(props.value);
@@ -39,10 +40,10 @@ test('the returned observable should *not* receive a new value when component is
     }, { initialProps: { value: 'some value' } }), unmount = _a.unmount, rerender = _a.rerender;
     rerender({ value: 'some value' });
     rerender({ value: 'some value' });
-    expect(receivedValues).toEqual(['some value']);
+    (0, vitest_1.expect)(receivedValues).toEqual(['some value']);
     unmount();
 });
-test('the returned observable should have the same identity across multiple re-renders/hook calls', function () {
+(0, vitest_1.test)('the returned observable should have the same identity across multiple re-renders/hook calls', function () {
     var returnValues = [];
     var _a = (0, react_2.renderHook)(function () {
         returnValues.push((0, useAsObservable_1.useAsObservable)('render'));
@@ -50,11 +51,11 @@ test('the returned observable should have the same identity across multiple re-r
     rerender();
     rerender();
     var initial = returnValues[0], firstRerender = returnValues[1], secondRerender = returnValues[2];
-    expect(initial).toBe(firstRerender);
-    expect(firstRerender).toBe(secondRerender);
+    (0, vitest_1.expect)(initial).toBe(firstRerender);
+    (0, vitest_1.expect)(firstRerender).toBe(secondRerender);
     unmount();
 });
-test('the returned observable should complete on unmount', function () {
+(0, vitest_1.test)('the returned observable should complete on unmount', function () {
     var didComplete = false;
     var _a = (0, react_2.renderHook)(function () {
         var observable = (0, useAsObservable_1.useAsObservable)('render');
@@ -69,9 +70,9 @@ test('the returned observable should complete on unmount', function () {
             };
         }, []);
     }), unmount = _a.unmount, rerender = _a.rerender;
-    expect(didComplete).toBe(false);
+    (0, vitest_1.expect)(didComplete).toBe(false);
     rerender();
-    expect(didComplete).toBe(false);
+    (0, vitest_1.expect)(didComplete).toBe(false);
     unmount();
-    expect(didComplete).toBe(true);
+    (0, vitest_1.expect)(didComplete).toBe(true);
 });

package/dist/cjs/__tests__/useObservable.test.js

@@ -5,7 +5,8 @@ var useObservable_1 = require("../useObservable");
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var react_2 = require("react");
-test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
+var vitest_1 = require("vitest");
+(0, vitest_1.test)('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
     var subscribed = false;
     var observable = new rxjs_1.Observable(function () {
         subscribed = true;
@@ -13,27 +14,27 @@ test('should subscribe immediately on component mount and unsubscribe on compone
             subscribed = false;
         };
     });
-    expect(subscribed).toBe(false);
+    (0, vitest_1.expect)(subscribed).toBe(false);
     var unmount = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).unmount;
-    expect(subscribed).toBe(true);
+    (0, vitest_1.expect)(subscribed).toBe(true);
     unmount();
-    expect(subscribed).toBe(false);
+    (0, vitest_1.expect)(subscribed).toBe(false);
 });
-test('should only subscribe once when given same observable on re-renders', function () {
+(0, vitest_1.test)('should only subscribe once when given same observable on re-renders', function () {
     var subscriptionCount = 0;
     var observable = new rxjs_1.Observable(function () {
         subscriptionCount++;
     });
-    expect(subscriptionCount).toBe(0);
+    (0, vitest_1.expect)(subscriptionCount).toBe(0);
     var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }), unmount = _a.unmount, rerender = _a.rerender;
-    expect(subscriptionCount).toBe(1);
+    (0, vitest_1.expect)(subscriptionCount).toBe(1);
     rerender();
-    expect(subscriptionCount).toBe(1);
+    (0, vitest_1.expect)(subscriptionCount).toBe(1);
     unmount();
     (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); });
-    expect(subscriptionCount).toBe(2);
+    (0, vitest_1.expect)(subscriptionCount).toBe(2);
 });
-test('should not return undefined during render if initial value is given', function () {
+(0, vitest_1.test)('should not return undefined during render if initial value is given', function () {
     var observable = (0, rxjs_1.timer)(100).pipe((0, operators_1.mapTo)('emitted value'));
     var returnedValues = [];
     function ObservableComponent() {
@@ -42,9 +43,9 @@ test('should not return undefined during render if initial value is given', func
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining(['initial value']));
 });
-test('should not return undefined during render if observable is sync', function () {
+(0, vitest_1.test)('should not return undefined during render if observable is sync', function () {
     var observable = (0, rxjs_1.of)('initial value');
     var returnedValues = [];
     function ObservableComponent() {
@@ -53,9 +54,9 @@ test('should not return undefined during render if observable is sync', function
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining(['initial value']));
 });
-test('should return undefined during first render if observable is async', function () {
+(0, vitest_1.test)('should return undefined during first render if observable is async', function () {
     var observable = (0, rxjs_1.scheduled)('async value', rxjs_1.asyncScheduler);
     var returnedValues = [];
     function ObservableComponent() {
@@ -64,53 +65,53 @@ test('should return undefined during first render if observable is async', funct
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining([undefined]));
+    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining([undefined]));
 });
-test('should have sync values from an observable as initial value', function () {
+(0, vitest_1.test)('should have sync values from an observable as initial value', function () {
     var observable = (0, rxjs_1.of)('something sync');
     var result = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).result;
-    expect(result.current).toBe('something sync');
+    (0, vitest_1.expect)(result.current).toBe('something sync');
 });
-test('should have undefined as initial value from delayed observables', function () {
+(0, vitest_1.test)('should have undefined as initial value from delayed observables', function () {
     var _a = (0, react_1.renderHook)(function () {
         return (0, useObservable_1.useObservable)((0, rxjs_1.scheduled)('something async', rxjs_1.asyncScheduler));
     }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBeUndefined();
+    (0, vitest_1.expect)(result.current).toBeUndefined();
     unmount();
 });
-test('should have passed initialValue as initial value from delayed observables', function () {
+(0, vitest_1.test)('should have passed initialValue as initial value from delayed observables', function () {
     var _a = (0, react_1.renderHook)(function () {
         return (0, useObservable_1.useObservable)((0, rxjs_1.scheduled)('something async', rxjs_1.asyncScheduler), 'initial');
     }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBe('initial');
+    (0, vitest_1.expect)(result.current).toBe('initial');
     unmount();
 });
-test('should update with values from observables', function () {
+(0, vitest_1.test)('should update with values from observables', function () {
     var values$ = new rxjs_1.Subject();
     var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(values$); }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBe(undefined);
+    (0, vitest_1.expect)(result.current).toBe(undefined);
     (0, react_1.act)(function () { return values$.next('something'); });
-    expect(result.current).toBe('something');
+    (0, vitest_1.expect)(result.current).toBe('something');
     (0, react_1.act)(function () { return values$.next('otherthing'); });
-    expect(result.current).toBe('otherthing');
+    (0, vitest_1.expect)(result.current).toBe('otherthing');
     unmount();
 });
-test('should re-subscribe when receiving a new observable', function () {
+(0, vitest_1.test)('should re-subscribe when receiving a new observable', function () {
     var first$ = new rxjs_1.Subject();
     var second$ = new rxjs_1.Subject();
     var current$ = first$;
     var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(current$, '!!initial!!'); }), result = _a.result, rerender = _a.rerender, unmount = _a.unmount;
     (0, react_1.act)(function () { return first$.next('first 1'); });
-    expect(result.current).toBe('first 1');
+    (0, vitest_1.expect)(result.current).toBe('first 1');
     current$ = second$;
     rerender();
     // since observable #2 hasn't emitted a value yet, we should use the initial value
-    expect(result.current).toBe('!!initial!!');
+    (0, vitest_1.expect)(result.current).toBe('!!initial!!');
     // Now we should be subscribed to second$ and it's emission should be returned
     (0, react_1.act)(function () { return second$.next('second 1'); });
-    expect(result.current).toBe('second 1');
+    (0, vitest_1.expect)(result.current).toBe('second 1');
     // we should no longer be subscribed to the first and ignore any emissions
     (0, react_1.act)(function () { return first$.next('first 2'); });
-    expect(result.current).toBe('second 1');
+    (0, vitest_1.expect)(result.current).toBe('second 1');
     unmount();
 });

package/dist/cjs/reactiveComponent.d.ts

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
-declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
 export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
-declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
+type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;
 export {};

package/dist/cjs/useAsObservable.d.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
  * Returns an observable representing updates to any React value (props, state or any other calculated value)
  * Note: the returned observable is the same instance throughout the component lifecycle
  * @param value
+ * @deprecated use an `of` operator and `useMemoObservable` instead for a faster, more robust and  siimpler solution
  */
 export declare function useAsObservable<T>(value: T): Observable<T>;
 export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/cjs/useObservable.js

@@ -2,62 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoObservable = exports.useObservable = void 0;
 var react_1 = require("react");
-var shim_1 = require("use-sync-external-store/shim");
 var operators_1 = require("rxjs/operators");
 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) {
-    var _a = (0, react_1.useMemo)(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
-        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) {
-                // @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);
+    var _a = (0, react_1.useState)(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+    var initialValueRef = (0, react_1.useRef)(initialValue);
+    initialValueRef.current = initialValue;
     (0, react_1.useEffect)(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
-        }
-        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();
-        };
-    }, [observable]);
-    return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot);
+        setValue(getValue(initialValueRef.current));
+        var subscription = observable.pipe((0, operators_1.tap)(function (next) { return setValue(next); })).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [initialValueRef, observable]);
+    return value;
 }
 exports.useObservable = useObservable;
 function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable((0, react_1.useMemo)(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    var _a = (0, react_1.useState)(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        var subscription = getValue(observableOrFactory)
+            .pipe((0, operators_1.tap)(function (next) { return setValue(next); }))
+            .subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, deps);
+    return value;
 }
 exports.useMemoObservable = useMemoObservable;

package/dist/es2015/WithObservable.d.ts

@@ -4,7 +4,7 @@ interface Props<T> {
     observable: Observable<T>;
     children: (value: T) => ReactNode;
 }
-declare type ObservableComponent<T> = ComponentType<Props<T>>;
+type ObservableComponent<T> = ComponentType<Props<T>>;
 /**
  * @deprecated Use the useObservable hook instead
  */

package/dist/es2015/__tests__/strictmode.test.js

@@ -8,10 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { BehaviorSubject, Observable } from 'rxjs';
-import { useObservable } from '../useObservable';
+import { useMemoObservable, useObservable } from '../useObservable';
 import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { act, render } from '@testing-library/react';
 import { useAsObservable } from '../useAsObservable';
+import { test, expect } from 'vitest';
 const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -20,15 +21,15 @@ test('Strict mode should trigger double mount effects and re-renders', () => __a
     const returnedValues = [];
     let mountCount = 0;
     function ObservableComponent() {
+        const observedValue = useObservable(observable, 0);
         useEffect(() => {
             mountCount++;
         }, []);
-        const observedValue = useObservable(observable);
         returnedValues.push(observedValue);
         return createElement(Fragment, null, observedValue);
     }
     const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
-    expect(mountCount).toEqual(2);
+    expect(mountCount).toBe(2);
     expect(returnedValues).toEqual([0, 0]);
     yield wait(10);
     act(() => subject.next(1));
@@ -38,11 +39,14 @@ test('Strict mode should trigger double mount effects and re-renders', () => __a
     expect(mountCount).toEqual(2);
 }));
 test('Strict mode should unsubscribe the source observable on unmount', () => {
-    let subscribed = false;
+    const subscribed = [];
+    const unsubscribed = [];
+    let nextId = 0;
     const observable = new Observable(() => {
-        subscribed = true;
+        const id = nextId++;
+        subscribed.push(id);
         return () => {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
@@ -50,15 +54,36 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
         return createElement(Fragment, null);
     }
     const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
-    expect(subscribed).toBe(true);
+    expect(subscribed).toEqual([0, 1]);
+    rerender(createElement(StrictMode, null, createElement('div')));
+    expect(unsubscribed).toEqual([0, 1]);
+});
+test('useMemoObservable should unsubscribe the source observable on unmount', () => {
+    const subscribed = [];
+    const unsubscribed = [];
+    let nextId = 0;
+    function ObservableComponent() {
+        useMemoObservable(() => {
+            return new Observable(() => {
+                const id = nextId++;
+                subscribed.push(id);
+                return () => {
+                    unsubscribed.push(id);
+                };
+            });
+        }, []);
+        return createElement(Fragment, null);
+    }
+    const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
+    expect(subscribed).toEqual([0, 1]);
     rerender(createElement(StrictMode, null, createElement('div')));
-    expect(subscribed).toBe(false);
+    expect(unsubscribed).toEqual([0, 1]);
 });
 test('useAsObservable should work in strict mode', () => __awaiter(void 0, void 0, void 0, function* () {
     const returnedValues = [];
     function ObservableComponent(props) {
         const count$ = useAsObservable(props.count);
-        const count = useObservable(count$);
+        const count = useObservable(count$, props.count);
         returnedValues.push(count);
         return createElement(Fragment, null, 'ok');
     }

package/dist/es2015/__tests__/useAsObservable.test.js

@@ -1,6 +1,7 @@
 import { useAsObservable } from '../useAsObservable';
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import { test, expect } from 'vitest';
 test('the returned observable should receive a new value when component is rendered with a new value', () => {
     const receivedValues = [];
     const { unmount, rerender } = renderHook((props) => {

package/dist/es2015/__tests__/useObservable.test.js

@@ -3,6 +3,7 @@ import { useObservable } from '../useObservable';
 import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
 import { createElement, Fragment } from 'react';
+import { test, expect } from 'vitest';
 test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
     let subscribed = false;
     const observable = new Observable(() => {

package/dist/es2015/reactiveComponent.d.ts

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
-declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
 export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
-declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
+type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;
 export {};

package/dist/es2015/useAsObservable.d.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
  * Returns an observable representing updates to any React value (props, state or any other calculated value)
  * Note: the returned observable is the same instance throughout the component lifecycle
  * @param value
+ * @deprecated use an `of` operator and `useMemoObservable` instead for a faster, more robust and  siimpler solution
  */
 export declare function useAsObservable<T>(value: T): Observable<T>;
 export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;