react-rx 2.0.0 → 2.0.3

package/dist/cjs/useObservable.js

@@ -3,35 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoObservable = exports.useObservable = void 0;
 var rxjs_1 = require("rxjs");
 var react_1 = require("react");
-var useAsObservable_1 = require("./useAsObservable");
-var operators_1 = require("rxjs/operators");
 var shim_1 = require("use-sync-external-store/shim");
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-function useObservableSubscription(observable) {
-    var store = (0, react_1.useMemo)(function () {
-        var currentValue;
-        return {
-            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
-            getCurrentValue: function () { return currentValue; },
-            subscribe: function (callback) {
-                var subscription = observable.subscribe(function (value) {
-                    currentValue = value;
-                    callback(value);
-                });
+function useObservable(observable, initialValue) {
+    var _a = (0, react_1.useMemo)(function () {
+        var currentValue = getValue(initialValue);
+        var subject = new rxjs_1.Subject();
+        var subscription = observable.subscribe(function (value) {
+            currentValue = value;
+            subject.next(value);
+        });
+        return [
+            function () { return currentValue; },
+            function (callback) {
+                var subjectSub = subject.subscribe(function (value) { return callback(value); });
                 return function () {
                     subscription.unsubscribe();
+                    subjectSub.unsubscribe();
                 };
             },
-        };
-    }, [observable]);
-    return (0, shim_1.useSyncExternalStore)(store.subscribe, store.getCurrentValue);
-}
-function useObservable(observable, initialValue) {
-    return useObservableSubscription((0, useAsObservable_1.useAsObservable)(observable, (0, rxjs_1.pipe)((0, operators_1.distinctUntilChanged)(), (0, operators_1.switchMap)(function (observable) {
-        return (0, rxjs_1.merge)((0, rxjs_1.defer)(function () { return (0, rxjs_1.of)(getValue(initialValue)); }), observable);
-    }))));
+        ];
+    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot);
 }
 exports.useObservable = useObservable;
 function useMemoObservable(observableOrFactory, deps, initialValue) {

package/dist/es2015/useObservable.js

@@ -1,32 +1,29 @@
-import { defer, merge, of, pipe } from 'rxjs';
+import { Subject } from 'rxjs';
 import { useMemo } from 'react';
-import { useAsObservable } from './useAsObservable';
-import { distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-function useObservableSubscription(observable) {
-    const store = useMemo(() => {
-        let currentValue;
-        return {
-            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
-            getCurrentValue: () => currentValue,
-            subscribe: (callback) => {
-                const subscription = observable.subscribe(value => {
-                    currentValue = value;
-                    callback(value);
-                });
+export function useObservable(observable, initialValue) {
+    const [getSnapshot, subscribe] = useMemo(() => {
+        let currentValue = getValue(initialValue);
+        const subject = new Subject();
+        const subscription = observable.subscribe(value => {
+            currentValue = value;
+            subject.next(value);
+        });
+        return [
+            () => currentValue,
+            (callback) => {
+                const subjectSub = subject.subscribe(value => callback(value));
                 return () => {
                     subscription.unsubscribe();
+                    subjectSub.unsubscribe();
                 };
             },
-        };
+        ];
     }, [observable]);
-    return useSyncExternalStore(store.subscribe, store.getCurrentValue);
-}
-export function useObservable(observable, initialValue) {
-    return useObservableSubscription(useAsObservable(observable, pipe(distinctUntilChanged(), switchMap(observable => merge(defer(() => of(getValue(initialValue))), observable)))));
+    return useSyncExternalStore(subscribe, getSnapshot);
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
     return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);

package/dist/esm/useObservable.js

@@ -1,34 +1,29 @@
-import { defer, merge, of, pipe } from 'rxjs';
+import { Subject } from 'rxjs';
 import { useMemo } from 'react';
-import { useAsObservable } from './useAsObservable';
-import { distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-function useObservableSubscription(observable) {
-    var store = useMemo(function () {
-        var currentValue;
-        return {
-            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
-            getCurrentValue: function () { return currentValue; },
-            subscribe: function (callback) {
-                var subscription = observable.subscribe(function (value) {
-                    currentValue = value;
-                    callback(value);
-                });
+export function useObservable(observable, initialValue) {
+    var _a = useMemo(function () {
+        var currentValue = getValue(initialValue);
+        var subject = new Subject();
+        var subscription = observable.subscribe(function (value) {
+            currentValue = value;
+            subject.next(value);
+        });
+        return [
+            function () { return currentValue; },
+            function (callback) {
+                var subjectSub = subject.subscribe(function (value) { return callback(value); });
                 return function () {
                     subscription.unsubscribe();
+                    subjectSub.unsubscribe();
                 };
             },
-        };
-    }, [observable]);
-    return useSyncExternalStore(store.subscribe, store.getCurrentValue);
-}
-export function useObservable(observable, initialValue) {
-    return useObservableSubscription(useAsObservable(observable, pipe(distinctUntilChanged(), switchMap(function (observable) {
-        return merge(defer(function () { return of(getValue(initialValue)); }), observable);
-    }))));
+        ];
+    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    return useSyncExternalStore(subscribe, getSnapshot);
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
     return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -22,7 +22,8 @@
   "author": "Bjørge Næss <bjoerge@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "observable-callback": "^1.0.1"
+    "observable-callback": "^1.0.1",
+    "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",
@@ -49,7 +50,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
-    "use-sync-external-store": "^1.2.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.5",
     "ts-jest": "^26.5.2",

package/src/useObservable.ts

@@ -1,51 +1,34 @@
-import {defer, merge, Observable, of, pipe} from 'rxjs'
-import {DependencyList, useMemo} from 'react'
-import {useAsObservable} from './useAsObservable'
-import {distinctUntilChanged, switchMap} from 'rxjs/operators'
+import {Observable, Subject, Subscription} from 'rxjs'
+import {DependencyList, useMemo, useRef} from 'react'
 import {useSyncExternalStore} from 'use-sync-external-store/shim'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
-function useObservableSubscription<T>(observable: Observable<T>): T {
-  const store = useMemo(() => {
-    let currentValue: T
-    return {
-      // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
-      getCurrentValue: () => currentValue,
-      subscribe: (callback: (value: T) => void) => {
-        const subscription = observable.subscribe(value => {
-          currentValue = value
-          callback(value)
-        })
+export function useObservable<T>(observable: Observable<T>): T | undefined
+export function useObservable<T>(observable: Observable<T>, initialValue: T): T
+export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
+export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
+  const [getSnapshot, subscribe] = useMemo(() => {
+    let currentValue = getValue(initialValue)
+    const subject = new Subject<T>()
+    const subscription = observable.subscribe(value => {
+      currentValue = value
+      subject.next(value)
+    })
+    return [
+      () => currentValue,
+      (callback: (value: T) => void) => {
+        const subjectSub = subject.subscribe(value => callback(value))
         return () => {
           subscription.unsubscribe()
+          subjectSub.unsubscribe()
         }
       },
-    }
+    ]
   }, [observable])
-  return useSyncExternalStore(store.subscribe, store.getCurrentValue)
-}
-
-export function useObservable<T>(observable: Observable<T>): T | undefined
-export function useObservable<T>(observable: Observable<T>, initialValue: T): T
-export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
-export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
-  return useObservableSubscription(
-    useAsObservable(
-      observable,
-      pipe(
-        distinctUntilChanged(),
-        switchMap(observable =>
-          merge(
-            defer(() => of(getValue(initialValue))),
-            observable,
-          ),
-        ),
-      ),
-    ),
-  )
+  return useSyncExternalStore(subscribe, getSnapshot)
 }
 
 export function useMemoObservable<T>(