react-rx 3.0.0-0 → 3.0.0-1

package/src/useObservable.ts

@@ -1,48 +1,90 @@
-import {Observable} from 'rxjs'
-import {DependencyList, useEffect, useRef, useState} from 'react'
-import {tap} from 'rxjs/operators'
+import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
+import {Observable, Subscription} from 'rxjs'
+import {shareReplay, tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
+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)),
+    )
+
+    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+    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)) {
-  const [value, setValue] = useState(() => getValue(initialValue))
-  const initialValueRef = useRef(initialValue)
-  initialValueRef.current = initialValue
+  /**
+   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
+   * But we also don't want the initialValue to be stale if the observable changes.
+   */
+  const initialValueRef = useRef(getValue(initialValue))
+
+  /**
+   * Ensures that the initialValue is always up-to-date in case the observable changes.
+   */
   useEffect(() => {
-    setValue(getValue(initialValueRef.current))
-    const subscription = observable.pipe(tap(next => setValue(next))).subscribe()
-    return () => subscription.unsubscribe()
-  }, [initialValueRef, observable])
+    initialValueRef.current = getValue(initialValue)
+  }, [initialValue])
 
-  return value
-}
+  const [getSnapshot, subscribe] = useMemo<
+    [() => T, Parameters<typeof useSyncExternalStore>[0]]
+  >(() => {
+    const store = getOrCreateStore(observable, initialValueRef.current)
+    if (store.subscription.closed) {
+      store.subscription = store.observable.subscribe()
+    }
+    return [
+      function getSnapshot() {
+        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+        return store.currentValue
+      },
+      function subscribe(callback: () => void) {
+        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+        const sub = store.observable.subscribe(callback)
+        return () => {
+          sub.unsubscribe()
+        }
+      },
+    ]
+  }, [observable])
 
-export function useMemoObservable<T>(
-  observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: DependencyList,
-): T | undefined
-export function useMemoObservable<T>(
-  observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: DependencyList,
-  initialValue: T | (() => T),
-): T
-export function useMemoObservable<T>(
-  observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: DependencyList,
-  initialValue?: T | (() => T),
-) {
-  const [value, setValue] = useState(() => getValue(initialValue))
+  const shouldRestoreSubscriptionRef = useRef(false)
   useEffect(() => {
-    const subscription = getValue(observableOrFactory)
-      .pipe(tap(next => setValue(next)))
-      .subscribe()
-    return () => subscription.unsubscribe()
-  }, deps)
+    const store = getOrCreateStore(observable, initialValueRef.current)
+    if (shouldRestoreSubscriptionRef.current) {
+      if (store.subscription.closed) {
+        store.subscription = store.observable.subscribe()
+      }
+      shouldRestoreSubscriptionRef.current = false
+    }
+
+    return () => {
+      // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+      // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+      shouldRestoreSubscriptionRef.current = !store.subscription.closed
+      store.subscription.unsubscribe()
+    }
+  }, [observable])
 
-  return value
+  return useSyncExternalStore(subscribe, getSnapshot)
 }

package/src/{useObservableCallback.ts → useObservableEvent.ts}

@@ -1,5 +1,5 @@
-import {DependencyList, useCallback, useEffect, useRef} from 'react'
 import {observableCallback} from 'observable-callback'
+import {DependencyList, useCallback, useEffect, useRef} from 'react'
 import {Observable} from 'rxjs'
 
 const EMPTY_DEPS: DependencyList = []
@@ -16,7 +16,6 @@ export function useObservableCallback<T, U>(
 
   const [calls$, call] = callbackRef.current
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const callback = useCallback(fn, dependencies)
 
   useEffect(() => {

package/dist/cjs/WithObservable.d.ts

@@ -1,12 +0,0 @@
-import { Observable } from 'rxjs';
-import { ComponentType, ReactNode } from 'react';
-interface Props<T> {
-    observable: Observable<T>;
-    children: (value: T) => ReactNode;
-}
-type ObservableComponent<T> = ComponentType<Props<T>>;
-/**
- * @deprecated Use the useObservable hook instead
- */
-export declare const WithObservable: ObservableComponent<unknown>;
-export {};

package/dist/cjs/WithObservable.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithObservable = void 0;
-var operators_1 = require("rxjs/operators");
-var reactiveComponent_1 = require("./reactiveComponent");
-function createWithObservable() {
-    return (0, reactiveComponent_1.reactiveComponent)(function (props$) {
-        return props$.pipe((0, operators_1.distinctUntilChanged)(function (props, prevProps) { return props.observable === prevProps.observable; }), (0, operators_1.switchMap)(function (props) {
-            return props.observable.pipe((0, operators_1.map)(function (observableValue) { return props.children(observableValue); }));
-        }));
-    });
-}
-/**
- * @deprecated Use the useObservable hook instead
- */
-exports.WithObservable = createWithObservable();

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

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

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

@@ -1,78 +0,0 @@
-"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");
-var vitest_1 = require("vitest");
-(0, vitest_1.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' });
-    (0, vitest_1.expect)(receivedValues).toEqual(['initial', 'rerender', 'rerender again']);
-    unmount();
-});
-(0, vitest_1.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' });
-    (0, vitest_1.expect)(receivedValues).toEqual(['some value']);
-    unmount();
-});
-(0, vitest_1.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];
-    (0, vitest_1.expect)(initial).toBe(firstRerender);
-    (0, vitest_1.expect)(firstRerender).toBe(secondRerender);
-    unmount();
-});
-(0, vitest_1.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;
-    (0, vitest_1.expect)(didComplete).toBe(false);
-    rerender();
-    (0, vitest_1.expect)(didComplete).toBe(false);
-    unmount();
-    (0, vitest_1.expect)(didComplete).toBe(true);
-});

package/dist/cjs/displayName.d.ts

@@ -1 +0,0 @@
-export declare const wrapDisplayName: (BaseComponent: Function, wrapperName: string) => string;

package/dist/cjs/displayName.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapDisplayName = void 0;
-var getDisplayName = function (Component) {
-    if (typeof Component === 'string') {
-        return 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), ")");
-};
-exports.wrapDisplayName = wrapDisplayName;

package/dist/cjs/reactiveComponent.d.ts

@@ -1,8 +0,0 @@
-import { Observable } from 'rxjs';
-import { FunctionComponent, ReactNode, Ref } from 'react';
-type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
-export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
-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>>;
-export {};

package/dist/cjs/reactiveComponent.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.forwardRef = exports.reactiveComponent = void 0;
-var displayName_1 = require("./displayName");
-var useAsObservable_1 = require("./useAsObservable");
-var useObservable_1 = require("./useObservable");
-var react_1 = require("react");
-function fromComponent(component) {
-    var wrappedComponent = function (props) {
-        return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)((0, react_1.useRef)(component((0, useAsObservable_1.useAsObservable)(props))).current));
-    };
-    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$));
-    };
-}
-function reactiveComponent(observableOrComponent) {
-    return typeof observableOrComponent === 'function'
-        ? fromComponent(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));
-    });
-    wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
-    return wrappedComponent;
-}
-exports.forwardRef = forwardRef;

package/dist/cjs/useAsObservable.d.ts

@@ -1,10 +0,0 @@
-import { Observable } from 'rxjs';
-/**
- * React hook to convert any props or state value into an observable
- * Returns an observable representing updates to any React value (props, state or any other calculated value)
- * Note: the returned observable is the same instance throughout the component lifecycle
- * @param value
- * @deprecated use an `of` operator and `useMemoObservable` instead for a faster, more robust and  siimpler solution
- */
-export declare function useAsObservable<T>(value: T): Observable<T>;
-export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/cjs/useAsObservable.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsObservable = void 0;
-var rxjs_1 = require("rxjs");
-var react_1 = require("react");
-var operators_1 = require("rxjs/operators");
-function useAsObservable(value, operator) {
-    var setup = (0, react_1.useCallback)(function () {
-        var subject = new rxjs_1.BehaviorSubject(value);
-        var observable = subject.asObservable().pipe((0, operators_1.distinctUntilChanged)());
-        return [operator ? observable.pipe(operator) : observable, subject];
-    }, []);
-    var ref = (0, react_1.useRef)();
-    if (!ref.current) {
-        ref.current = setup();
-    }
-    var observable = ref.current[0];
-    (0, react_1.useEffect)(function () {
-        if (!ref.current) {
-            return;
-        }
-        var _a = ref.current, subject = _a[1];
-        subject.next(value);
-    }, [value, ref]);
-    var shouldRestoreSubscriptionRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
-        if (shouldRestoreSubscriptionRef.current) {
-            if (!ref.current) {
-                ref.current = setup();
-            }
-            shouldRestoreSubscriptionRef.current = false;
-        }
-        return function () {
-            if (!ref.current) {
-                return;
-            }
-            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-            shouldRestoreSubscriptionRef.current = true;
-            var _a = ref.current, subject = _a[1];
-            subject.complete();
-            ref.current = undefined;
-        };
-    }, []);
-    return observable;
-}
-exports.useAsObservable = useAsObservable;

package/dist/cjs/useWithObservable.d.ts

@@ -1,9 +0,0 @@
-import { Observable } from 'rxjs';
-/**
- * React hook to convert any props or state value into an observable
- * Returns an observable representing updates to any React value (props, state or any other calculated value)
- * Note: the returned observable is the same instance throughout the component lifecycle
- * @param value
- */
-export declare function useWithObservable<T>(value: T): T | undefined;
-export declare function useWithObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): K | undefined;

package/dist/cjs/useWithObservable.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWithObservable = void 0;
-var useObservable_1 = require("./useObservable");
-var useAsObservable_1 = require("./useAsObservable");
-function useWithObservable(value, operator) {
-    return operator
-        ? (0, useObservable_1.useObservable)((0, useAsObservable_1.useAsObservable)(value, operator))
-        : (0, useObservable_1.useObservable)((0, useAsObservable_1.useAsObservable)(value));
-}
-exports.useWithObservable = useWithObservable;

package/dist/cjs/utils.d.ts

@@ -1,7 +0,0 @@
-import { Observable, OperatorFunction } from 'rxjs';
-import { Dispatch, SetStateAction, Context } from 'react';
-export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, Dispatch<SetStateAction<T>>];
-export declare function observeCallback<T>(): [Observable<T>, (arg: T) => void];
-export declare function observeCallback<T, K>(operator: OperatorFunction<T, K>): [Observable<K>, (arg: T) => void];
-export declare function observeContext<T>(context: Context<T>): Observable<T>;
-export declare function observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

package/dist/cjs/utils.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = void 0;
-var useAsObservable_1 = require("./useAsObservable");
-var observable_callback_1 = require("observable-callback");
-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)();
-    }
-    return ref.current;
-}
-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);
-    }
-    return ref.current;
-}
-exports.observeElement = observeElement;

package/dist/es2015/WithObservable.d.ts

@@ -1,12 +0,0 @@
-import { Observable } from 'rxjs';
-import { ComponentType, ReactNode } from 'react';
-interface Props<T> {
-    observable: Observable<T>;
-    children: (value: T) => ReactNode;
-}
-type ObservableComponent<T> = ComponentType<Props<T>>;
-/**
- * @deprecated Use the useObservable hook instead
- */
-export declare const WithObservable: ObservableComponent<unknown>;
-export {};

package/dist/es2015/WithObservable.js

@@ -1,9 +0,0 @@
-import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
-import { reactiveComponent } from './reactiveComponent';
-function createWithObservable() {
-    return reactiveComponent((props$) => props$.pipe(distinctUntilChanged((props, prevProps) => props.observable === prevProps.observable), switchMap((props) => props.observable.pipe(map((observableValue) => props.children(observableValue))))));
-}
-/**
- * @deprecated Use the useObservable hook instead
- */
-export const WithObservable = createWithObservable();

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

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

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

@@ -1,73 +0,0 @@
-import { useAsObservable } from '../useAsObservable';
-import React from 'react';
-import { renderHook } from '@testing-library/react';
-import { test, expect } from 'vitest';
-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/displayName.d.ts

@@ -1 +0,0 @@
-export declare const wrapDisplayName: (BaseComponent: Function, wrapperName: string) => string;

package/dist/es2015/displayName.js

@@ -1,8 +0,0 @@
-const getDisplayName = (Component) => {
-    if (typeof Component === 'string') {
-        return 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.d.ts

@@ -1,8 +0,0 @@
-import { Observable } from 'rxjs';
-import { FunctionComponent, ReactNode, Ref } from 'react';
-type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
-export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
-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>>;
-export {};

package/dist/es2015/reactiveComponent.js

@@ -1,30 +0,0 @@
-import { wrapDisplayName } from './displayName';
-import { useAsObservable } from './useAsObservable';
-import { useObservable } from './useObservable';
-import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
-function fromComponent(component) {
-    const wrappedComponent = (props) => {
-        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
-    };
-    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$));
-    };
-}
-export function reactiveComponent(observableOrComponent) {
-    return typeof observableOrComponent === 'function'
-        ? 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));
-    });
-    wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
-    return wrappedComponent;
-}

package/dist/es2015/useAsObservable.d.ts

@@ -1,10 +0,0 @@
-import { Observable } from 'rxjs';
-/**
- * React hook to convert any props or state value into an observable
- * Returns an observable representing updates to any React value (props, state or any other calculated value)
- * Note: the returned observable is the same instance throughout the component lifecycle
- * @param value
- * @deprecated use an `of` operator and `useMemoObservable` instead for a faster, more robust and  siimpler solution
- */
-export declare function useAsObservable<T>(value: T): Observable<T>;
-export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;