react-rx 3.0.0-0 → 3.0.0-1

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 (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) 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]) {
@@ -36,24 +36,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var react_2 = require("react");
 var rxjs_1 = require("rxjs");
 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
-(0, vitest_1.test)('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
+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 () {
+        (0, react_2.useEffect)(function () {
             mountCount++;
         }, []);
+        var observedValue = (0, useObservable_1.useObservable)(observable);
         returnedValues.push(observedValue);
-        return (0, react_1.createElement)(react_1.Fragment, null, observedValue);
+        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
-    var subject, observable, returnedValues, mountCount, rerender;
+    var subject, observable, returnedValues, mountCount;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -61,22 +59,22 @@ var wait = function (ms) { return new Promise(function (resolve) { return setTim
                 observable = subject.asObservable();
                 returnedValues = [];
                 mountCount = 0;
-                rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
-                (0, vitest_1.expect)(mountCount).toBe(2);
-                (0, vitest_1.expect)(returnedValues).toEqual([0, 0]);
+                (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent)));
+                expect(mountCount).toEqual(2);
+                expect(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
             case 1:
                 _a.sent();
-                (0, react_2.act)(function () { return subject.next(1); });
-                (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 1, 1]);
-                (0, react_2.act)(function () { return subject.next(2); });
-                (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
-                (0, vitest_1.expect)(mountCount).toEqual(2);
+                (0, react_1.act)(function () { return subject.next(1); });
+                expect(returnedValues).toEqual([0, 0, 1, 1]);
+                (0, react_1.act)(function () { return subject.next(2); });
+                expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
+                expect(mountCount).toEqual(2);
                 return [2 /*return*/];
         }
     });
 }); });
-(0, vitest_1.test)('Strict mode should unsubscribe the source observable on unmount', function () {
+test('Strict mode should unsubscribe the source observable on unmount', function () {
     var subscribed = [];
     var unsubscribed = [];
     var nextId = 0;
@@ -89,48 +87,10 @@ var wait = function (ms) { return new Promise(function (resolve) { return setTim
     });
     function ObservableComponent() {
         (0, useObservable_1.useObservable)(observable);
-        return (0, react_1.createElement)(react_1.Fragment, null);
+        return (0, react_2.createElement)(react_2.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]);
+    var rerender = (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent))).rerender;
+    expect(subscribed).toEqual([0, 1]);
+    rerender((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)('div')));
+    expect(unsubscribed).toEqual([0, 1]);
 });
-(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$, props.count);
-        returnedValues.push(count);
-        return (0, react_1.createElement)(react_1.Fragment, null, 'ok');
-    }
-    var returnedValues, rerender;
-    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;
-        (0, vitest_1.expect)(returnedValues).toEqual([0, 0]);
-        rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent, { count: 1 })));
-        (0, vitest_1.expect)(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-        return [2 /*return*/];
-    });
-}); });

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@testing-library/react");
-var useObservable_1 = require("../useObservable");
+var react_2 = require("react");
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
-var react_2 = require("react");
-var vitest_1 = require("vitest");
-(0, vitest_1.test)('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
+var useObservable_1 = require("../useObservable");
+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;
@@ -14,27 +13,27 @@ var vitest_1 = require("vitest");
             subscribed = false;
         };
     });
-    (0, vitest_1.expect)(subscribed).toBe(false);
+    expect(subscribed).toBe(false);
     var unmount = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).unmount;
-    (0, vitest_1.expect)(subscribed).toBe(true);
+    expect(subscribed).toBe(true);
     unmount();
-    (0, vitest_1.expect)(subscribed).toBe(false);
+    expect(subscribed).toBe(false);
 });
-(0, vitest_1.test)('should only subscribe once when given same observable on re-renders', function () {
+test('should only subscribe once when given same observable on re-renders', function () {
     var subscriptionCount = 0;
     var observable = new rxjs_1.Observable(function () {
         subscriptionCount++;
     });
-    (0, vitest_1.expect)(subscriptionCount).toBe(0);
+    expect(subscriptionCount).toBe(0);
     var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }), unmount = _a.unmount, rerender = _a.rerender;
-    (0, vitest_1.expect)(subscriptionCount).toBe(1);
+    expect(subscriptionCount).toBe(1);
     rerender();
-    (0, vitest_1.expect)(subscriptionCount).toBe(1);
+    expect(subscriptionCount).toBe(1);
     unmount();
     (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); });
-    (0, vitest_1.expect)(subscriptionCount).toBe(2);
+    expect(subscriptionCount).toBe(2);
 });
-(0, vitest_1.test)('should not return undefined during render if initial value is given', function () {
+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() {
@@ -43,9 +42,9 @@ var vitest_1 = require("vitest");
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining(['initial value']));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
 });
-(0, vitest_1.test)('should not return undefined during render if observable is sync', function () {
+test('should not return undefined during render if observable is sync', function () {
     var observable = (0, rxjs_1.of)('initial value');
     var returnedValues = [];
     function ObservableComponent() {
@@ -54,9 +53,9 @@ var vitest_1 = require("vitest");
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining(['initial value']));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
 });
-(0, vitest_1.test)('should return undefined during first render if observable is async', function () {
+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() {
@@ -65,53 +64,53 @@ var vitest_1 = require("vitest");
         return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
     (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    (0, vitest_1.expect)(returnedValues).toEqual(vitest_1.expect.arrayContaining([undefined]));
+    expect(returnedValues).toEqual(expect.arrayContaining([undefined]));
 });
-(0, vitest_1.test)('should have sync values from an observable as initial value', function () {
+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;
-    (0, vitest_1.expect)(result.current).toBe('something sync');
+    expect(result.current).toBe('something sync');
 });
-(0, vitest_1.test)('should have undefined as initial value from delayed observables', function () {
+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;
-    (0, vitest_1.expect)(result.current).toBeUndefined();
+    expect(result.current).toBeUndefined();
     unmount();
 });
-(0, vitest_1.test)('should have passed initialValue as initial value from delayed observables', function () {
+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;
-    (0, vitest_1.expect)(result.current).toBe('initial');
+    expect(result.current).toBe('initial');
     unmount();
 });
-(0, vitest_1.test)('should update with values from observables', function () {
+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;
-    (0, vitest_1.expect)(result.current).toBe(undefined);
+    expect(result.current).toBe(undefined);
     (0, react_1.act)(function () { return values$.next('something'); });
-    (0, vitest_1.expect)(result.current).toBe('something');
+    expect(result.current).toBe('something');
     (0, react_1.act)(function () { return values$.next('otherthing'); });
-    (0, vitest_1.expect)(result.current).toBe('otherthing');
+    expect(result.current).toBe('otherthing');
     unmount();
 });
-(0, vitest_1.test)('should re-subscribe when receiving a new observable', function () {
+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'); });
-    (0, vitest_1.expect)(result.current).toBe('first 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
-    (0, vitest_1.expect)(result.current).toBe('!!initial!!');
+    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'); });
-    (0, vitest_1.expect)(result.current).toBe('second 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'); });
-    (0, vitest_1.expect)(result.current).toBe('second 1');
+    expect(result.current).toBe('second 1');
     unmount();
 });

package/dist/cjs/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/cjs/index.js

@@ -1,28 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservableCallback = exports.useAsObservable = exports.useMemoObservable = exports.useObservable = exports.observableCallback = exports.elementRef = exports.context = exports.handler = exports.state = exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = exports.forwardRef = exports.rxComponent = exports.reactiveComponent = void 0;
-// Main package exports
-var reactiveComponent_1 = require("./reactiveComponent");
-Object.defineProperty(exports, "reactiveComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
-Object.defineProperty(exports, "rxComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
-Object.defineProperty(exports, "forwardRef", { enumerable: true, get: function () { return reactiveComponent_1.forwardRef; } });
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "observeState", { enumerable: true, get: function () { return utils_1.observeState; } });
-Object.defineProperty(exports, "observeCallback", { enumerable: true, get: function () { return utils_1.observeCallback; } });
-Object.defineProperty(exports, "observeContext", { enumerable: true, get: function () { return utils_1.observeContext; } });
-Object.defineProperty(exports, "observeElement", { enumerable: true, get: function () { return utils_1.observeElement; } });
-var utils_2 = require("./utils");
-Object.defineProperty(exports, "state", { enumerable: true, get: function () { return utils_2.observeState; } });
-Object.defineProperty(exports, "handler", { enumerable: true, get: function () { return utils_2.observeCallback; } });
-Object.defineProperty(exports, "context", { enumerable: true, get: function () { return utils_2.observeContext; } });
-Object.defineProperty(exports, "elementRef", { enumerable: true, get: function () { return utils_2.observeElement; } });
-var observable_callback_1 = require("observable-callback");
-Object.defineProperty(exports, "observableCallback", { enumerable: true, get: function () { return observable_callback_1.observableCallback; } });
-// hooks
-var useObservable_1 = require("./useObservable");
-Object.defineProperty(exports, "useObservable", { enumerable: true, get: function () { return useObservable_1.useObservable; } });
-Object.defineProperty(exports, "useMemoObservable", { enumerable: true, get: function () { return useObservable_1.useMemoObservable; } });
-var useAsObservable_1 = require("./useAsObservable");
-Object.defineProperty(exports, "useAsObservable", { enumerable: true, get: function () { return useAsObservable_1.useAsObservable; } });
-var useObservableCallback_1 = require("./useObservableCallback");
-Object.defineProperty(exports, "useObservableCallback", { enumerable: true, get: function () { return useObservableCallback_1.useObservableCallback; } });
+__exportStar(require("./useObservable"), exports);
+__exportStar(require("./useObservableEvent"), exports);

package/dist/cjs/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 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;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/cjs/useObservable.js

@@ -1,31 +1,69 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoObservable = exports.useObservable = void 0;
+exports.useObservable = void 0;
 var react_1 = require("react");
 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.useState)(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
-    var initialValueRef = (0, react_1.useRef)(initialValue);
-    initialValueRef.current = initialValue;
+    /**
+     * 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.
+     */
+    var initialValueRef = (0, react_1.useRef)(getValue(initialValue));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
     (0, react_1.useEffect)(function () {
-        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) {
-    var _a = (0, react_1.useState)(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+        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();
+        }
+        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 subscription = getValue(observableOrFactory)
-            .pipe((0, operators_1.tap)(function (next) { return setValue(next); }))
-            .subscribe();
-        return function () { return subscription.unsubscribe(); };
-    }, deps);
-    return value;
+        var store = getOrCreateStore(observable, initialValueRef.current);
+        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, react_1.useSyncExternalStore)(subscribe, getSnapshot);
 }
-exports.useMemoObservable = useMemoObservable;
+exports.useObservable = useObservable;

package/dist/cjs/{useObservableCallback.js → useObservableEvent.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useObservableCallback = void 0;
-var react_1 = require("react");
 var observable_callback_1 = require("observable-callback");
+var react_1 = require("react");
 var EMPTY_DEPS = [];
 function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -11,7 +11,6 @@ function useObservableCallback(fn, dependencies) {
         callbackRef.current = (0, observable_callback_1.observableCallback)();
     }
     var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var callback = (0, react_1.useCallback)(fn, dependencies);
     (0, react_1.useEffect)(function () {
         var subscription = calls$.pipe(callback).subscribe();

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

@@ -7,12 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { BehaviorSubject, Observable } from 'rxjs';
-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';
+import { createElement, Fragment, StrictMode, useEffect } from 'react';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { useObservable } from '../useObservable';
 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* () {
@@ -21,15 +19,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).toBe(2);
+    render(createElement(StrictMode, null, createElement(ObservableComponent)));
+    expect(mountCount).toEqual(2);
     expect(returnedValues).toEqual([0, 0]);
     yield wait(10);
     act(() => subject.next(1));
@@ -58,37 +56,3 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
     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(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$, props.count);
-        returnedValues.push(count);
-        return createElement(Fragment, null, 'ok');
-    }
-    const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent, { count: 0 })));
-    expect(returnedValues).toEqual([0, 0]);
-    rerender(createElement(StrictMode, null, createElement(ObservableComponent, { count: 1 })));
-    expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-}));

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

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

package/dist/es2015/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/es2015/index.js

@@ -1,9 +1,2 @@
-// Main package exports
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-// hooks
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/es2015/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 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;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;