react-rx 2.0.1 → 2.0.2

package/dist/cjs/useObservable.js

@@ -1,37 +1,26 @@
 "use strict";
 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) {
+function useObservable(observable, initialValue) {
+    var _a = (0, react_1.useMemo)(function () {
+        var currentValue = getValue(initialValue);
+        return [
+            function () { return currentValue; },
+            function (callback) {
                 var subscription = observable.subscribe(function (value) {
                     currentValue = value;
                     callback(value);
                 });
-                return function () {
-                    subscription.unsubscribe();
-                };
+                return function () { return subscription.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,23 @@
-import { defer, merge, of, pipe } 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) => {
+export function useObservable(observable, initialValue) {
+    const [getSnapshot, subscribe] = useMemo(() => {
+        let currentValue = getValue(initialValue);
+        return [
+            () => currentValue,
+            (callback) => {
                 const subscription = observable.subscribe(value => {
                     currentValue = value;
                     callback(value);
                 });
-                return () => {
-                    subscription.unsubscribe();
-                };
+                return () => subscription.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,23 @@
-import { defer, merge, of, pipe } 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) {
+export function useObservable(observable, initialValue) {
+    var _a = useMemo(function () {
+        var currentValue = getValue(initialValue);
+        return [
+            function () { return currentValue; },
+            function (callback) {
                 var subscription = observable.subscribe(function (value) {
                     currentValue = value;
                     callback(value);
                 });
-                return function () {
-                    subscription.unsubscribe();
-                };
+                return function () { return subscription.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.1",
+  "version": "2.0.2",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/src/useObservable.ts

@@ -1,51 +1,29 @@
-import {defer, merge, Observable, of, pipe} from 'rxjs'
+import {Observable} from 'rxjs'
 import {DependencyList, useMemo} from 'react'
-import {useAsObservable} from './useAsObservable'
-import {distinctUntilChanged, switchMap} from 'rxjs/operators'
 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) => {
+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)
+    return [
+      () => currentValue,
+      (callback: (value: T) => void) => {
         const subscription = observable.subscribe(value => {
           currentValue = value
           callback(value)
         })
-        return () => {
-          subscription.unsubscribe()
-        }
+        return () => subscription.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>(