react-rx 2.0.1 → 2.0.4

package/.idea/vcs.xml

@@ -1,9 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$/../../_/parcel-transformer-mdx-with-toc" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/../react-repl" vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/../react-rx.dev" vcs="Git" />
   </component>
 </project>

package/dist/cjs/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/cjs/useAsObservable.js

@@ -4,18 +4,33 @@ exports.useAsObservable = void 0;
 var rxjs_1 = require("rxjs");
 var react_1 = require("react");
 var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
+var operators_1 = require("rxjs/operators");
 function useAsObservable(value, operator) {
-    var _a = (0, react_1.useMemo)(function () {
+    var setup = (0, react_1.useCallback)(function () {
         var subject = new rxjs_1.BehaviorSubject(value);
-        var observable = subject.asObservable();
+        var observable = subject.asObservable().pipe((0, operators_1.distinctUntilChanged)());
         return [operator ? observable.pipe(operator) : observable, subject];
-    }, []), observable = _a[0], subject = _a[1];
+    }, []);
+    var ref = (0, react_1.useRef)();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    var observable = ref.current[0];
     (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        if (!ref.current) {
+            return;
+        }
+        var _a = ref.current, subject = _a[1];
         subject.next(value);
-    }, [value]);
-    (0, react_1.useEffect)(function () {
+    }, [value, ref]);
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
         return function () {
+            if (!ref.current) {
+                return;
+            }
+            var _a = ref.current, subject = _a[1];
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/cjs/useObservable.js

@@ -1,37 +1,44 @@
 "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");
+var operators_1 = require("rxjs/operators");
+var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 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);
-                });
+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); }));
+        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.useMemo)(function () {
+        var record = getOrCreateStore(observable, getValue(initialValue));
+        return [
+            function getSnapshot() {
+                return record.currentValue;
+            },
+            function subscribe(callback) {
+                var sub = record.observable.subscribe(function (next) { return callback(next); });
                 return function () {
-                    subscription.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
+        ];
+    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        return function () {
+            getOrCreateStore(observable, getValue(initialValue)).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);
-    }))));
+    return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot);
 }
 exports.useObservable = useObservable;
 function useMemoObservable(observableOrFactory, deps, initialValue) {

package/dist/es2015/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/es2015/useAsObservable.js

@@ -1,18 +1,33 @@
 import { BehaviorSubject } from 'rxjs';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useRef } from 'react';
 import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
-    const [observable, subject] = useMemo(() => {
+    const setup = useCallback(() => {
         const subject = new BehaviorSubject(value);
-        const observable = subject.asObservable();
+        const observable = subject.asObservable().pipe(distinctUntilChanged());
         return [operator ? observable.pipe(operator) : observable, subject];
     }, []);
+    const ref = useRef();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    const [observable] = ref.current;
     useIsomorphicEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const [, subject] = ref.current;
         subject.next(value);
-    }, [value]);
-    useEffect(() => {
+    }, [value, ref]);
+    useIsomorphicEffect(() => {
         return () => {
+            if (!ref.current) {
+                return;
+            }
+            const [, subject] = ref.current;
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/es2015/useObservable.js

@@ -1,32 +1,41 @@
-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';
+import { shareReplay, tap } from 'rxjs/operators';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 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);
-                });
+const cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        const entry = { currentValue: initialValue };
+        entry.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.currentValue = value)));
+        entry.subscription = entry.observable.subscribe();
+        cache.set(inputObservable, entry);
+    }
+    return cache.get(inputObservable);
+}
+export function useObservable(observable, initialValue) {
+    const [getSnapshot, subscribe] = useMemo(() => {
+        const record = getOrCreateStore(observable, getValue(initialValue));
+        return [
+            function getSnapshot() {
+                return record.currentValue;
+            },
+            function subscribe(callback) {
+                const sub = record.observable.subscribe(next => callback(next));
                 return () => {
-                    subscription.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
+        ];
+    }, [observable]);
+    useIsomorphicEffect(() => {
+        return () => {
+            getOrCreateStore(observable, getValue(initialValue)).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/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/esm/useAsObservable.js

@@ -1,18 +1,33 @@
 import { BehaviorSubject } from 'rxjs';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useRef } from 'react';
 import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
-    var _a = useMemo(function () {
+    var setup = useCallback(function () {
         var subject = new BehaviorSubject(value);
-        var observable = subject.asObservable();
+        var observable = subject.asObservable().pipe(distinctUntilChanged());
         return [operator ? observable.pipe(operator) : observable, subject];
-    }, []), observable = _a[0], subject = _a[1];
+    }, []);
+    var ref = useRef();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    var observable = ref.current[0];
     useIsomorphicEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var _a = ref.current, subject = _a[1];
         subject.next(value);
-    }, [value]);
-    useEffect(function () {
+    }, [value, ref]);
+    useIsomorphicEffect(function () {
         return function () {
+            if (!ref.current) {
+                return;
+            }
+            var _a = ref.current, subject = _a[1];
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/esm/useObservable.js

@@ -1,34 +1,41 @@
-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';
+import { shareReplay, tap } from 'rxjs/operators';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 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);
-                });
+var cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        var entry_1 = { currentValue: initialValue };
+        entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
+        entry_1.subscription = entry_1.observable.subscribe();
+        cache.set(inputObservable, entry_1);
+    }
+    return cache.get(inputObservable);
+}
+export function useObservable(observable, initialValue) {
+    var _a = useMemo(function () {
+        var record = getOrCreateStore(observable, getValue(initialValue));
+        return [
+            function getSnapshot() {
+                return record.currentValue;
+            },
+            function subscribe(callback) {
+                var sub = record.observable.subscribe(function (next) { return callback(next); });
                 return function () {
-                    subscription.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
+        ];
+    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    useIsomorphicEffect(function () {
+        return function () {
+            getOrCreateStore(observable, getValue(initialValue)).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);
-    }))));
+    return useSyncExternalStore(subscribe, getSnapshot);
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
     return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);

package/jest.config.ts

@@ -0,0 +1,14 @@
+export default {
+  preset: 'ts-jest',
+  // verbose: true,
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  globals: {
+    'ts-jest': {
+      warnOnly: true,
+    },
+  },
+  rootDir: 'src',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -30,12 +30,11 @@
     "rxjs": "^6.5 || ^7"
   },
   "devDependencies": {
-    "@testing-library/dom": "^7.29.6",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@testing-library/dom": "^8.14.0",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/use-sync-external-store": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
@@ -43,16 +42,17 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "jest": "^26.6.3",
-    "jsdom": "^16.4.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "jsdom": "^20.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.5",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^28.0.5",
     "typescript": "^4.2.2"
   },
   "repository": {

package/src/reactiveComponent.ts

@@ -26,16 +26,16 @@ function fromComponent<Props>(component: Component<Props>): FunctionComponent<Pr
   return wrappedComponent
 }
 
-function fromObservable<Props>(input$: Observable<Props>): FunctionComponent<{}> {
+function fromObservable<Props>(input$: Observable<ReactNode>): FunctionComponent<{}> {
   return function ReactiveComponent() {
     return createElement(Fragment, null, useObservable<ReactNode>(input$))
   }
 }
 
-export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>
+export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(
-  observableOrComponent: Observable<Props> | Component<Props>,
+  observableOrComponent: Observable<ReactNode> | Component<Props>,
 ) {
   return typeof observableOrComponent === 'function'
     ? fromComponent(observableOrComponent)

package/src/useAsObservable.ts

@@ -1,6 +1,7 @@
 import {BehaviorSubject, Observable} from 'rxjs'
-import {useEffect, useMemo} from 'react'
+import {useCallback, useRef} from 'react'
 import {useIsomorphicEffect} from './useIsomorphicEffect'
+import {distinctUntilChanged} from 'rxjs/operators'
 
 /**
  * React hook to convert any props or state value into an observable
@@ -17,22 +18,38 @@ export function useAsObservable<T, K = T>(
   value: T,
   operator?: (input: Observable<T>) => Observable<K>,
 ): Observable<T | K> {
-  const [observable, subject] = useMemo(() => {
+  const setup = useCallback((): [Observable<T | K>, BehaviorSubject<T>] => {
     const subject = new BehaviorSubject(value)
 
-    const observable = subject.asObservable()
+    const observable = subject.asObservable().pipe(distinctUntilChanged())
     return [operator ? observable.pipe(operator) : observable, subject]
   }, [])
 
+  const ref = useRef<[Observable<T | K>, BehaviorSubject<T>]>()
+
+  if (!ref.current) {
+    ref.current = setup()
+  }
+
+  const [observable] = ref.current
+
   useIsomorphicEffect(() => {
+    if (!ref.current) {
+      return
+    }
+    const [, subject] = ref.current
     subject.next(value)
-  }, [value])
+  }, [value, ref])
 
-  useEffect(() => {
+  useIsomorphicEffect(() => {
     return () => {
+      if (!ref.current) {
+        return
+      }
+      const [, subject] = ref.current
       subject.complete()
+      ref.current = undefined
     }
   }, [])
-
   return observable
 }

package/src/useObservable.ts

@@ -1,51 +1,60 @@
-import {defer, merge, Observable, of, pipe} from 'rxjs'
+import {Observable, Subscription} 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'
+import {shareReplay, tap} from 'rxjs/operators'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 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)
-        })
-        return () => {
-          subscription.unsubscribe()
-        }
-      },
-    }
-  }, [observable])
-  return useSyncExternalStore(store.subscribe, store.getCurrentValue)
+interface CacheRecord<T> {
+  subscription: Subscription
+  observable: Observable<T>
+  currentValue: T
+}
+
+const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
+function getOrCreateStore<T>(inputObservable: Observable<T>, initialValue: T) {
+  if (!cache.has(inputObservable)) {
+    const entry: Partial<CacheRecord<T>> = {currentValue: initialValue}
+    entry.observable = inputObservable.pipe(
+      shareReplay({refCount: true, bufferSize: 1}),
+      tap(value => (entry.currentValue = value)),
+    )
+    entry.subscription = entry.observable.subscribe()
+
+    cache.set(inputObservable, entry as CacheRecord<T>)
+  }
+  return cache.get(inputObservable)
 }
 
 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,
-          ),
-        ),
-      ),
-    ),
-  )
+  const [getSnapshot, subscribe] = useMemo(() => {
+    const record = getOrCreateStore(observable, getValue(initialValue))!
+    return [
+      function getSnapshot() {
+        return record.currentValue
+      },
+      function subscribe(callback: (value: T) => void) {
+        const sub = record.observable.subscribe(next => callback(next))
+        return () => {
+          sub.unsubscribe()
+        }
+      },
+    ]
+  }, [observable])
+
+  useIsomorphicEffect(() => {
+    return () => {
+      getOrCreateStore(observable, getValue(initialValue))!.subscription.unsubscribe()
+    }
+  }, [observable])
+
+  return useSyncExternalStore(subscribe, getSnapshot)
 }
 
 export function useMemoObservable<T>(

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": ["src/**/*"],
   "compilerOptions": {
+    "target": "ES2015",
     "strict": true,
     "outDir": "dist",
     "jsx": "react",