react-rx 2.1.0 → 2.1.1

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

@@ -0,0 +1,110 @@
+import { act, render, renderHook } from '@testing-library/react';
+import { useObservable } from '../useObservable';
+import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
+import { mapTo } from 'rxjs/operators';
+import { createElement, Fragment } from 'react';
+test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
+    let subscribed = false;
+    const observable = new Observable(() => {
+        subscribed = true;
+        return () => {
+            subscribed = false;
+        };
+    });
+    expect(subscribed).toBe(false);
+    const { unmount } = renderHook(() => useObservable(observable));
+    expect(subscribed).toBe(true);
+    unmount();
+    expect(subscribed).toBe(false);
+});
+test('should only subscribe once when given same observable on re-renders', () => {
+    let subscriptionCount = 0;
+    const observable = new Observable(() => {
+        subscriptionCount++;
+    });
+    expect(subscriptionCount).toBe(0);
+    const { unmount, rerender } = renderHook(() => useObservable(observable));
+    expect(subscriptionCount).toBe(1);
+    rerender();
+    expect(subscriptionCount).toBe(1);
+    unmount();
+    renderHook(() => useObservable(observable));
+    expect(subscriptionCount).toBe(2);
+});
+test('should not return undefined during render if initial value is given', () => {
+    const observable = timer(100).pipe(mapTo('emitted value'));
+    const returnedValues = [];
+    function ObservableComponent() {
+        const observedValue = useObservable(observable, 'initial value');
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+});
+test('should not return undefined during render if observable is sync', () => {
+    const observable = of('initial value');
+    const returnedValues = [];
+    function ObservableComponent() {
+        const observedValue = useObservable(observable);
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+});
+test('should return undefined during first render if observable is async', () => {
+    const observable = scheduled('async value', asyncScheduler);
+    const returnedValues = [];
+    function ObservableComponent() {
+        const observedValue = useObservable(observable);
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining([undefined]));
+});
+test('should have sync values from an observable as initial value', () => {
+    const observable = of('something sync');
+    const { result } = renderHook(() => useObservable(observable));
+    expect(result.current).toBe('something sync');
+});
+test('should have undefined as initial value from delayed observables', () => {
+    const { result, unmount } = renderHook(() => useObservable(scheduled('something async', asyncScheduler)));
+    expect(result.current).toBeUndefined();
+    unmount();
+});
+test('should have passed initialValue as initial value from delayed observables', () => {
+    const { result, unmount } = renderHook(() => useObservable(scheduled('something async', asyncScheduler), 'initial'));
+    expect(result.current).toBe('initial');
+    unmount();
+});
+test('should update with values from observables', () => {
+    const values$ = new Subject();
+    const { result, unmount } = renderHook(() => useObservable(values$));
+    expect(result.current).toBe(undefined);
+    act(() => values$.next('something'));
+    expect(result.current).toBe('something');
+    act(() => values$.next('otherthing'));
+    expect(result.current).toBe('otherthing');
+    unmount();
+});
+test('should re-subscribe when receiving a new observable', () => {
+    const first$ = new Subject();
+    const second$ = new Subject();
+    let current$ = first$;
+    const { result, rerender, unmount } = renderHook(() => useObservable(current$, '!!initial!!'));
+    act(() => 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
+    act(() => second$.next('second 1'));
+    expect(result.current).toBe('second 1');
+    // we should no longer be subscribed to the first and ignore any emissions
+    act(() => first$.next('first 2'));
+    expect(result.current).toBe('second 1');
+    unmount();
+});

package/dist/es2015/displayName.js

@@ -4,4 +4,5 @@ const getDisplayName = (Component) => {
     }
     return (Component && (Component.displayName || Component.name)) || 'Unknown';
 };
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export const wrapDisplayName = (BaseComponent, wrapperName) => `${wrapperName}(${getDisplayName(BaseComponent)})`;

package/dist/es2015/reactiveComponent.js

@@ -9,6 +9,7 @@ function fromComponent(component) {
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
+// eslint-disable-next-line @typescript-eslint/ban-types
 function fromObservable(input$) {
     return function ReactiveComponent() {
         return createElement(Fragment, null, useObservable(input$));
@@ -19,6 +20,7 @@ export function reactiveComponent(observableOrComponent) {
         ? fromComponent(observableOrComponent)
         : fromObservable(observableOrComponent);
 }
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export function forwardRef(component) {
     const wrappedComponent = reactForwardRef((props, ref) => {
         return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));

package/dist/es2015/utils.js

@@ -4,10 +4,13 @@ import { startWith } from 'rxjs/operators';
 import { useContext, useRef, useState } from 'react';
 const createState = (initialState) => observableCallback(startWith(initialState));
 export function observeState(initial) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, update] = useState(initial);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = useRef();
     if (!ref.current) {
         ref.current = operator ? observableCallback(operator) : observableCallback();
@@ -15,9 +18,11 @@ export function observeCallback(operator) {
     return ref.current;
 }
 export function observeContext(context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return useAsObservable(useContext(context));
 }
 export function observeElement() {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = useRef();
     if (!ref.current) {
         ref.current = createState(null);

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

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

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

@@ -0,0 +1,109 @@
+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 };
+    }
+};
+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';
+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() {
+        useEffect(function () {
+            mountCount++;
+        }, []);
+        var observedValue = useObservable(observable);
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    var subject, observable, returnedValues, mountCount, rerender;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                subject = new BehaviorSubject(0);
+                observable = subject.asObservable();
+                returnedValues = [];
+                mountCount = 0;
+                rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
+                expect(mountCount).toEqual(2);
+                expect(returnedValues).toEqual([0, 0]);
+                return [4 /*yield*/, wait(10)];
+            case 1:
+                _a.sent();
+                act(function () { return subject.next(1); });
+                expect(returnedValues).toEqual([0, 0, 1, 1]);
+                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 Observable(function () {
+        subscribed = true;
+        return function () {
+            subscribed = false;
+        };
+    });
+    function ObservableComponent() {
+        useObservable(observable);
+        return createElement(Fragment, null);
+    }
+    var rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
+    expect(subscribed).toBe(true);
+    rerender(createElement(StrictMode, null, 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$ = useAsObservable(props.count);
+        var count = useObservable(count$);
+        returnedValues.push(count);
+        return createElement(Fragment, null, 'ok');
+    }
+    var returnedValues, rerender;
+    return __generator(this, function (_a) {
+        returnedValues = [];
+        rerender = render(createElement(StrictMode, null, createElement(ObservableComponent, { count: 0 }))).rerender;
+        expect(returnedValues).toEqual([0, 0]);
+        rerender(createElement(StrictMode, null, createElement(ObservableComponent, { count: 1 })));
+        expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
+        return [2 /*return*/];
+    });
+}); });

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

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

package/dist/esm/__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', function () {
+    var receivedValues = [];
+    var _a = renderHook(function (props) {
+        var observable = useAsObservable(props.value);
+        React.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 = renderHook(function (props) {
+        var observable = useAsObservable(props.value);
+        React.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 = renderHook(function () {
+        returnValues.push(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 = renderHook(function () {
+        var observable = useAsObservable('render');
+        React.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/esm/__tests__/useObservable.test.d.ts

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

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

@@ -0,0 +1,114 @@
+import { act, render, renderHook } from '@testing-library/react';
+import { useObservable } from '../useObservable';
+import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
+import { mapTo } from 'rxjs/operators';
+import { createElement, Fragment } from 'react';
+test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
+    var subscribed = false;
+    var observable = new Observable(function () {
+        subscribed = true;
+        return function () {
+            subscribed = false;
+        };
+    });
+    expect(subscribed).toBe(false);
+    var unmount = renderHook(function () { return 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 Observable(function () {
+        subscriptionCount++;
+    });
+    expect(subscriptionCount).toBe(0);
+    var _a = renderHook(function () { return useObservable(observable); }), unmount = _a.unmount, rerender = _a.rerender;
+    expect(subscriptionCount).toBe(1);
+    rerender();
+    expect(subscriptionCount).toBe(1);
+    unmount();
+    renderHook(function () { return useObservable(observable); });
+    expect(subscriptionCount).toBe(2);
+});
+test('should not return undefined during render if initial value is given', function () {
+    var observable = timer(100).pipe(mapTo('emitted value'));
+    var returnedValues = [];
+    function ObservableComponent() {
+        var observedValue = useObservable(observable, 'initial value');
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+});
+test('should not return undefined during render if observable is sync', function () {
+    var observable = of('initial value');
+    var returnedValues = [];
+    function ObservableComponent() {
+        var observedValue = useObservable(observable);
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
+});
+test('should return undefined during first render if observable is async', function () {
+    var observable = scheduled('async value', asyncScheduler);
+    var returnedValues = [];
+    function ObservableComponent() {
+        var observedValue = useObservable(observable);
+        returnedValues.push(observedValue);
+        return createElement(Fragment, null, observedValue);
+    }
+    render(createElement(ObservableComponent));
+    expect(returnedValues).toEqual(expect.arrayContaining([undefined]));
+});
+test('should have sync values from an observable as initial value', function () {
+    var observable = of('something sync');
+    var result = renderHook(function () { return useObservable(observable); }).result;
+    expect(result.current).toBe('something sync');
+});
+test('should have undefined as initial value from delayed observables', function () {
+    var _a = renderHook(function () {
+        return useObservable(scheduled('something async', 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 = renderHook(function () {
+        return useObservable(scheduled('something async', 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 Subject();
+    var _a = renderHook(function () { return useObservable(values$); }), result = _a.result, unmount = _a.unmount;
+    expect(result.current).toBe(undefined);
+    act(function () { return values$.next('something'); });
+    expect(result.current).toBe('something');
+    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 Subject();
+    var second$ = new Subject();
+    var current$ = first$;
+    var _a = renderHook(function () { return useObservable(current$, '!!initial!!'); }), result = _a.result, rerender = _a.rerender, unmount = _a.unmount;
+    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
+    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
+    act(function () { return first$.next('first 2'); });
+    expect(result.current).toBe('second 1');
+    unmount();
+});

package/dist/esm/displayName.js

@@ -4,6 +4,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
 export var wrapDisplayName = function (BaseComponent, wrapperName) {
     return "".concat(wrapperName, "(").concat(getDisplayName(BaseComponent), ")");
 };

package/dist/esm/reactiveComponent.js

@@ -9,6 +9,7 @@ function fromComponent(component) {
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
+// eslint-disable-next-line @typescript-eslint/ban-types
 function fromObservable(input$) {
     return function ReactiveComponent() {
         return createElement(Fragment, null, useObservable(input$));
@@ -19,6 +20,7 @@ export function reactiveComponent(observableOrComponent) {
         ? fromComponent(observableOrComponent)
         : fromObservable(observableOrComponent);
 }
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export function forwardRef(component) {
     var wrappedComponent = reactForwardRef(function (props, ref) {
         return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));

package/dist/esm/utils.js

@@ -4,10 +4,13 @@ import { startWith } from 'rxjs/operators';
 import { useContext, useRef, useState } from 'react';
 var createState = function (initialState) { return observableCallback(startWith(initialState)); };
 export function observeState(initial) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var _a = useState(initial), value = _a[0], update = _a[1];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = useRef();
     if (!ref.current) {
         ref.current = operator ? observableCallback(operator) : observableCallback();
@@ -15,9 +18,11 @@ export function observeCallback(operator) {
     return ref.current;
 }
 export function observeContext(context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return useAsObservable(useContext(context));
 }
 export function observeElement() {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = useRef();
     if (!ref.current) {
         ref.current = createState(null);