react-rx 2.1.0 → 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,7 @@
+[![CI & Release](https://github.com/sanity-io/react-rx/actions/workflows/ci.yml/badge.svg?event=push)](https://github.com/sanity-io/react-rx/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/react-rx.svg)](https://www.npmjs.com/package/react-rx)
+
+[![react-rx-some-smaller](https://user-images.githubusercontent.com/81981/194187624-9abd09da-bf03-4886-b512-78c1f22fc2de.png)](https://react-rx.dev/)
+
 > Hooks and utilities for combining React with RxJS Observables
 
 Features:
@@ -18,3 +22,12 @@ Although they share a lot of similarities, and reactiveComponent is built on top
 - [Reactive components](https://react-rx.dev/guide#reactive-components)
 - [Observable hooks](https://react-rx.dev/guide#observable-hooks)
 - [Code examples](https://react-rx.dev/examples)
+
+---
+
+# Contributing and publishing new versions to npm
+
+Run the ["CI & Release" workflow](https://github.com/sanity-io/react-rx/actions/workflows/ci.yml).
+Make the default branch, `current`, should be preselected. Check "Release new version" and press "Run workflow'.
+
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/dist/cjs/__tests__/strictmode.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,111 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        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]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 () {
+    function ObservableComponent() {
+        (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);
+    }
+    var subject, observable, returnedValues, mountCount, rerender;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                subject = new rxjs_1.BehaviorSubject(0);
+                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;
+                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); });
+                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);
+                return [2 /*return*/];
+        }
+    });
+}); });
+test('Strict mode should unsubscribe the source observable on unmount', function () {
+    var subscribed = false;
+    var observable = new rxjs_1.Observable(function () {
+        subscribed = true;
+        return function () {
+            subscribed = false;
+        };
+    });
+    function ObservableComponent() {
+        (0, useObservable_1.useObservable)(observable);
+        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);
+    rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)('div')));
+    expect(subscribed).toBe(false);
+});
+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$);
+        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;
+        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]);
+        return [2 /*return*/];
+    });
+}); });

package/dist/cjs/__tests__/useAsObservable.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 receivedValues = [];
+    var _a = (0, react_2.renderHook)(function (props) {
+        var observable = (0, useAsObservable_1.useAsObservable)(props.value);
+        react_1.default.useEffect(function () {
+            var subscription = observable.subscribe(function (v) {
+                receivedValues.push(v);
+            });
+            return function () {
+                subscription.unsubscribe();
+            };
+        }, []);
+    }, { initialProps: { value: 'initial' } }), unmount = _a.unmount, rerender = _a.rerender;
+    rerender({ value: 'rerender' });
+    rerender({ value: 'rerender again' });
+    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 () {
+    var receivedValues = [];
+    var _a = (0, react_2.renderHook)(function (props) {
+        var observable = (0, useAsObservable_1.useAsObservable)(props.value);
+        react_1.default.useEffect(function () {
+            var subscription = observable.subscribe(function (v) {
+                receivedValues.push(v);
+            });
+            return function () {
+                subscription.unsubscribe();
+            };
+        }, []);
+    }, { initialProps: { value: 'some value' } }), unmount = _a.unmount, rerender = _a.rerender;
+    rerender({ value: 'some value' });
+    rerender({ value: 'some value' });
+    expect(receivedValues).toEqual(['some value']);
+    unmount();
+});
+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'));
+    }), unmount = _a.unmount, rerender = _a.rerender;
+    rerender();
+    rerender();
+    var initial = returnValues[0], firstRerender = returnValues[1], secondRerender = returnValues[2];
+    expect(initial).toBe(firstRerender);
+    expect(firstRerender).toBe(secondRerender);
+    unmount();
+});
+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');
+        react_1.default.useEffect(function () {
+            var subscription = observable.subscribe({
+                complete: function () {
+                    didComplete = true;
+                },
+            });
+            return function () {
+                subscription.unsubscribe();
+            };
+        }, []);
+    }), unmount = _a.unmount, rerender = _a.rerender;
+    expect(didComplete).toBe(false);
+    rerender();
+    expect(didComplete).toBe(false);
+    unmount();
+    expect(didComplete).toBe(true);
+});

package/dist/cjs/__tests__/useObservable.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+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 subscribed = false;
+    var observable = new rxjs_1.Observable(function () {
+        subscribed = true;
+        return function () {
+            subscribed = false;
+        };
+    });
+    expect(subscribed).toBe(false);
+    var unmount = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).unmount;
+    expect(subscribed).toBe(true);
+    unmount();
+    expect(subscribed).toBe(false);
+});
+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);
+    var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }), unmount = _a.unmount, rerender = _a.rerender;
+    expect(subscriptionCount).toBe(1);
+    rerender();
+    expect(subscriptionCount).toBe(1);
+    unmount();
+    (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); });
+    expect(subscriptionCount).toBe(2);
+});
+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() {
+        var observedValue = (0, useObservable_1.useObservable)(observable, 'initial value');
+        returnedValues.push(observedValue);
+        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']));
+});
+test('should not return undefined during render if observable is sync', function () {
+    var observable = (0, rxjs_1.of)('initial value');
+    var returnedValues = [];
+    function ObservableComponent() {
+        var observedValue = (0, useObservable_1.useObservable)(observable);
+        returnedValues.push(observedValue);
+        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']));
+});
+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() {
+        var observedValue = (0, useObservable_1.useObservable)(observable);
+        returnedValues.push(observedValue);
+        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]));
+});
+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');
+});
+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();
+    unmount();
+});
+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');
+    unmount();
+});
+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, react_1.act)(function () { return values$.next('something'); });
+    expect(result.current).toBe('something');
+    (0, react_1.act)(function () { return values$.next('otherthing'); });
+    expect(result.current).toBe('otherthing');
+    unmount();
+});
+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');
+    current$ = second$;
+    rerender();
+    // since observable #2 hasn't emitted a value yet, we should use the initial value
+    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');
+    // 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');
+    unmount();
+});

package/dist/cjs/displayName.js

@@ -7,6 +7,7 @@ var getDisplayName = function (Component) {
     }
     return (Component && (Component.displayName || Component.name)) || 'Unknown';
 };
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 var wrapDisplayName = function (BaseComponent, wrapperName) {
     return "".concat(wrapperName, "(").concat(getDisplayName(BaseComponent), ")");
 };

package/dist/cjs/reactiveComponent.js

@@ -12,6 +12,7 @@ function fromComponent(component) {
     wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
     return wrappedComponent;
 }
+// eslint-disable-next-line @typescript-eslint/ban-types
 function fromObservable(input$) {
     return function ReactiveComponent() {
         return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)(input$));
@@ -23,6 +24,7 @@ function reactiveComponent(observableOrComponent) {
         : fromObservable(observableOrComponent);
 }
 exports.reactiveComponent = reactiveComponent;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 function forwardRef(component) {
     var wrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
         return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)((0, react_1.useRef)(component((0, useAsObservable_1.useAsObservable)(props), ref)).current));

package/dist/cjs/utils.js

@@ -7,11 +7,14 @@ var operators_1 = require("rxjs/operators");
 var react_1 = require("react");
 var createState = function (initialState) { return (0, observable_callback_1.observableCallback)((0, operators_1.startWith)(initialState)); };
 function observeState(initial) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var _a = (0, react_1.useState)(initial), value = _a[0], update = _a[1];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return [(0, useAsObservable_1.useAsObservable)(value), update];
 }
 exports.observeState = observeState;
 function observeCallback(operator) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = operator ? (0, observable_callback_1.observableCallback)(operator) : (0, observable_callback_1.observableCallback)();
@@ -20,10 +23,12 @@ function observeCallback(operator) {
 }
 exports.observeCallback = observeCallback;
 function observeContext(context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return (0, useAsObservable_1.useAsObservable)((0, react_1.useContext)(context));
 }
 exports.observeContext = observeContext;
 function observeElement() {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = createState(null);

package/dist/es2015/__tests__/strictmode.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,69 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BehaviorSubject, Observable } from 'rxjs';
+import { useObservable } from '../useObservable';
+import { createElement, Fragment, StrictMode, useEffect } from 'react';
+import { act, render } from '@testing-library/react';
+import { useAsObservable } from '../useAsObservable';
+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* () {
+    const subject = new BehaviorSubject(0);
+    const observable = subject.asObservable();
+    const returnedValues = [];
+    let mountCount = 0;
+    function ObservableComponent() {
+        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(returnedValues).toEqual([0, 0]);
+    yield wait(10);
+    act(() => subject.next(1));
+    expect(returnedValues).toEqual([0, 0, 1, 1]);
+    act(() => subject.next(2));
+    expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
+    expect(mountCount).toEqual(2);
+}));
+test('Strict mode should unsubscribe the source observable on unmount', () => {
+    let subscribed = false;
+    const observable = new Observable(() => {
+        subscribed = true;
+        return () => {
+            subscribed = false;
+        };
+    });
+    function ObservableComponent() {
+        useObservable(observable);
+        return createElement(Fragment, null);
+    }
+    const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
+    expect(subscribed).toBe(true);
+    rerender(createElement(StrictMode, null, createElement('div')));
+    expect(subscribed).toBe(false);
+});
+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$);
+        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__/useAsObservable.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,72 @@
+import { useAsObservable } from '../useAsObservable';
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+test('the returned observable should receive a new value when component is rendered with a new value', () => {
+    const receivedValues = [];
+    const { unmount, rerender } = renderHook((props) => {
+        const observable = useAsObservable(props.value);
+        React.useEffect(() => {
+            const subscription = observable.subscribe(v => {
+                receivedValues.push(v);
+            });
+            return () => {
+                subscription.unsubscribe();
+            };
+        }, []);
+    }, { initialProps: { value: 'initial' } });
+    rerender({ value: 'rerender' });
+    rerender({ value: 'rerender again' });
+    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', () => {
+    const receivedValues = [];
+    const { unmount, rerender } = renderHook((props) => {
+        const observable = useAsObservable(props.value);
+        React.useEffect(() => {
+            const subscription = observable.subscribe(v => {
+                receivedValues.push(v);
+            });
+            return () => {
+                subscription.unsubscribe();
+            };
+        }, []);
+    }, { initialProps: { value: 'some value' } });
+    rerender({ value: 'some value' });
+    rerender({ value: 'some value' });
+    expect(receivedValues).toEqual(['some value']);
+    unmount();
+});
+test('the returned observable should have the same identity across multiple re-renders/hook calls', () => {
+    const returnValues = [];
+    const { unmount, rerender } = renderHook(() => {
+        returnValues.push(useAsObservable('render'));
+    });
+    rerender();
+    rerender();
+    const [initial, firstRerender, secondRerender] = returnValues;
+    expect(initial).toBe(firstRerender);
+    expect(firstRerender).toBe(secondRerender);
+    unmount();
+});
+test('the returned observable should complete on unmount', () => {
+    let didComplete = false;
+    const { unmount, rerender } = renderHook(() => {
+        const observable = useAsObservable('render');
+        React.useEffect(() => {
+            const subscription = observable.subscribe({
+                complete: () => {
+                    didComplete = true;
+                },
+            });
+            return () => {
+                subscription.unsubscribe();
+            };
+        }, []);
+    });
+    expect(didComplete).toBe(false);
+    rerender();
+    expect(didComplete).toBe(false);
+    unmount();
+    expect(didComplete).toBe(true);
+});

package/dist/es2015/__tests__/useObservable.test.d.ts

@@ -0,0 +1 @@
+export {};