react-rx 1.0.0-beta.3 → 1.0.0

package/dist/cjs/useObservableCallback.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useObservableCallback = void 0;
+var react_1 = require("react");
+var observable_callback_1 = require("observable-callback");
+var EMPTY_DEPS = [];
+function useObservableCallback(fn, dependencies) {
+    if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
+    var callbackRef = (0, react_1.useRef)();
+    if (!callbackRef.current) {
+        callbackRef.current = (0, observable_callback_1.observableCallback)();
+    }
+    var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var callback = (0, react_1.useCallback)(fn, dependencies);
+    (0, react_1.useEffect)(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [calls$, call, callback]);
+    return call;
+}
+exports.useObservableCallback = useObservableCallback;

package/dist/cjs/useWithObservable.d.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,11 @@
+"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,3 +1,7 @@
-import { observableCallback } from 'observable-callback';
-export declare const createEventHandler: typeof observableCallback;
-export declare const createState: <T>(initialState: T) => [import("rxjs").Observable<T>, (arg: T) => void];
+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,9 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createState = exports.createEventHandler = void 0;
+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");
-// for consumption outside of react only
-exports.createEventHandler = observable_callback_1.observableCallback;
-var createState = function (initialState) { return observable_callback_1.observableCallback(operators_1.startWith(initialState)); };
-exports.createState = createState;
+var react_1 = require("react");
+var createState = function (initialState) { return (0, observable_callback_1.observableCallback)((0, operators_1.startWith)(initialState)); };
+function observeState(initial) {
+    var _a = (0, react_1.useState)(initial), value = _a[0], update = _a[1];
+    return [(0, useAsObservable_1.useAsObservable)(value), update];
+}
+exports.observeState = observeState;
+function observeCallback(operator) {
+    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) {
+    return (0, useAsObservable_1.useAsObservable)((0, react_1.useContext)(context));
+}
+exports.observeContext = observeContext;
+function observeElement() {
+    var ref = (0, react_1.useRef)();
+    if (!ref.current) {
+        ref.current = createState(null);
+    }
+    return ref.current;
+}
+exports.observeElement = observeElement;

package/dist/cjs/withPropsStream.js

@@ -39,13 +39,13 @@ var reactiveComponent_1 = require("./reactiveComponent");
  * @deprecated Use reactiveComponent instead
  */
 function withPropsStream(observableOrFactory, TargetComponent) {
-    var ComposedComponent = reactiveComponent_1.reactiveComponent(function (sourceProps$) {
+    var ComposedComponent = (0, reactiveComponent_1.reactiveComponent)(function (sourceProps$) {
         var targetProps$ = typeof observableOrFactory === 'function'
             ? observableOrFactory(sourceProps$)
             : observableOrFactory;
-        return targetProps$.pipe(operators_1.map(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
+        return targetProps$.pipe((0, operators_1.map)(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
     });
-    ComposedComponent.displayName = displayName_1.wrapDisplayName(TargetComponent, 'withPropsStream');
+    ComposedComponent.displayName = (0, displayName_1.wrapDisplayName)(TargetComponent, 'withPropsStream');
     return ComposedComponent;
 }
 exports.withPropsStream = withPropsStream;

package/dist/es2015/WithObservable.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
+import { ComponentType, ReactNode } from 'react';
 interface Props<T> {
     observable: Observable<T>;
-    children: (value: T) => React.ReactNode;
+    children: (value: T) => ReactNode;
 }
-declare type ObservableComponent<T> = React.ComponentType<Props<T>>;
+declare type ObservableComponent<T> = ComponentType<Props<T>>;
 /**
  * @deprecated Use the useObservable hook instead
  */

package/dist/es2015/index.d.ts

@@ -1,3 +1,7 @@
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { createEventHandler, createState } from './utils';
-export { useObservableState as useState, useObservableState, useObservableContext as useContext, useObservableContext, useObservableEvent as useEvent, useObservableEvent, useObservableElement as useElement, useObservable, toObservable, } from './useObservable';
+export { observeState, observeCallback, observeContext, observeElement } from './utils';
+export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
+export { observableCallback } from 'observable-callback';
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/es2015/index.js

@@ -1,4 +1,9 @@
 // Main package exports
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { createEventHandler, createState } from './utils';
-export { useObservableState as useState, useObservableState, useObservableContext as useContext, useObservableContext, useObservableEvent as useEvent, useObservableEvent, useObservableElement as useElement, useObservable, toObservable, } from './useObservable';
+export { observeState, observeCallback, observeContext, observeElement } from './utils';
+export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
+export { observableCallback } from 'observable-callback';
+// hooks
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/es2015/reactiveComponent.d.ts

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

package/dist/es2015/reactiveComponent.js

@@ -1,14 +1,17 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
-import { toObservable, useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
-    const wrappedComponent = (props) => React.createElement(React.Fragment, null, useObservable(toObservable(props, component)));
+    const wrappedComponent = (props) => {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
+    };
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
 }
 export function reactiveComponent(observableOrComponent) {
@@ -17,8 +20,8 @@ export function reactiveComponent(observableOrComponent) {
         : fromObservable(observableOrComponent);
 }
 export function forwardRef(component) {
-    const wrappedComponent = React.forwardRef((props, ref) => {
-        return React.createElement(React.Fragment, null, useObservable(component(toObservable(props), ref)));
+    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

@@ -0,0 +1,9 @@
+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 useAsObservable<T>(value: T): Observable<T>;
+export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/es2015/useAsObservable.js

@@ -0,0 +1,27 @@
+import { BehaviorSubject } from 'rxjs';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    const isInitial = useRef(true);
+    const subjectRef = useRef(new BehaviorSubject(value));
+    const observableRef = useRef();
+    if (!observableRef.current) {
+        const observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
+    }
+    useIsomorphicEffect(() => {
+        if (isInitial.current) {
+            isInitial.current = false;
+        }
+        else {
+            // emit only on update
+            subjectRef.current.next(value);
+        }
+    }, [value]);
+    useIsomorphicEffect(() => {
+        return () => {
+            return subjectRef.current.complete();
+        };
+    }, []);
+    return observableRef.current;
+}

package/dist/es2015/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useLayoutEffect;

package/dist/es2015/useIsomorphicEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/es2015/useObservable.d.ts

@@ -1,16 +1,7 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-export declare function toObservable<T>(value: T): Observable<T>;
-export declare function toObservable<T, K>(value: T, setup: (props$: Observable<T>) => Observable<K>): Observable<K>;
-export declare function useObservable<T>(observable$: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T;
-export declare function useObservableState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.SetStateAction<T>>];
-export declare function useObservableContext<T>(context: React.Context<T>): Observable<T>;
-declare type ObservableEventTuple<Event> = [Observable<Event>, (event: Event) => void];
-export declare function useObservableEvent<Event>(): ObservableEventTuple<Event>;
-export declare function useObservableElement<Element extends HTMLElement>(): [
-    Observable<Element | null>,
-    (el: Element | null) => void
-];
-export {};
+import { DependencyList } from 'react';
+export declare function useObservable<T>(observable: Observable<T>): T | undefined;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/es2015/useObservable.js

@@ -1,37 +1,15 @@
-import * as React from 'react';
-import { BehaviorSubject } from 'rxjs';
-import { createEventHandler } from './utils';
-export function toObservable(value, setup) {
-    const isInitial = React.useRef(true);
-    const subject = React.useRef(new BehaviorSubject(value));
-    React.useEffect(() => {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subject.current.next(value);
-        }
-    }, [value]);
-    React.useEffect(() => {
-        return () => {
-            return subject.current.complete();
-        };
-    }, []);
-    const observable = subject.current.asObservable();
-    return setup ? setup(observable) : observable;
-}
-const isCallable = (val) => typeof val === 'function';
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
-    return isCallable(value) ? value() : value;
+    return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable$, initialValue) {
-    const subscription = React.useRef();
-    const isInitial = React.useRef(true);
-    const [value, setState] = React.useState(() => {
+export function useObservable(observable, initialValue) {
+    const subscription = useRef();
+    const isInitial = useRef(true);
+    const [value, setState] = useState(() => {
         let isSync = true;
         let syncVal = getValue(initialValue);
-        subscription.current = observable$.subscribe(nextVal => {
+        subscription.current = observable.subscribe(nextVal => {
             if (isSync) {
                 syncVal = nextVal;
             }
@@ -42,30 +20,21 @@ export function useObservable(observable$, initialValue) {
         isSync = false;
         return syncVal;
     });
-    React.useEffect(() => {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(() => {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
-            subscription.current = observable$.subscribe(nextVal => setState(nextVal));
+            subscription.current = observable.subscribe(nextVal => setState(nextVal));
         }
         isInitial.current = false;
         return () => {
             if (subscription.current) {
                 subscription.current.unsubscribe();
+                subscription.current = undefined;
             }
         };
-    }, [observable$]);
+    }, [observable]);
     return value;
 }
-export function useObservableState(initial) {
-    const [value, update] = React.useState(initial);
-    return [toObservable(value), update];
-}
-export function useObservableContext(context) {
-    return toObservable(React.useContext(context));
-}
-export function useObservableEvent() {
-    return React.useMemo(createEventHandler, []);
-}
-export function useObservableElement() {
-    return useObservableState(null);
+export function useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);
 }

package/dist/es2015/useObservableCallback.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+import { Observable } from 'rxjs';
+export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;

package/dist/es2015/useObservableCallback.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { observableCallback } from 'observable-callback';
+const EMPTY_DEPS = [];
+export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
+    const callbackRef = useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = observableCallback();
+    }
+    const [calls$, call] = callbackRef.current;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const callback = useCallback(fn, dependencies);
+    useEffect(() => {
+        const subscription = calls$.pipe(callback).subscribe();
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [calls$, call, callback]);
+    return call;
+}

package/dist/es2015/useWithObservable.d.ts

@@ -0,0 +1,9 @@
+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/es2015/useWithObservable.js

@@ -0,0 +1,7 @@
+import { useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+export function useWithObservable(value, operator) {
+    return operator
+        ? useObservable(useAsObservable(value, operator))
+        : useObservable(useAsObservable(value));
+}

package/dist/es2015/utils.d.ts

@@ -1,3 +1,7 @@
-import { observableCallback } from 'observable-callback';
-export declare const createEventHandler: typeof observableCallback;
-export declare const createState: <T>(initialState: T) => [import("rxjs").Observable<T>, (arg: T) => void];
+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/es2015/utils.js

@@ -1,5 +1,26 @@
+import { useAsObservable } from './useAsObservable';
 import { observableCallback } from 'observable-callback';
 import { startWith } from 'rxjs/operators';
-// for consumption outside of react only
-export const createEventHandler = observableCallback;
-export const createState = (initialState) => observableCallback(startWith(initialState));
+import { useContext, useRef, useState } from 'react';
+const createState = (initialState) => observableCallback(startWith(initialState));
+export function observeState(initial) {
+    const [value, update] = useState(initial);
+    return [useAsObservable(value), update];
+}
+export function observeCallback(operator) {
+    const ref = useRef();
+    if (!ref.current) {
+        ref.current = operator ? observableCallback(operator) : observableCallback();
+    }
+    return ref.current;
+}
+export function observeContext(context) {
+    return useAsObservable(useContext(context));
+}
+export function observeElement() {
+    const ref = useRef();
+    if (!ref.current) {
+        ref.current = createState(null);
+    }
+    return ref.current;
+}

package/dist/esm/WithObservable.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
+import { ComponentType, ReactNode } from 'react';
 interface Props<T> {
     observable: Observable<T>;
-    children: (value: T) => React.ReactNode;
+    children: (value: T) => ReactNode;
 }
-declare type ObservableComponent<T> = React.ComponentType<Props<T>>;
+declare type ObservableComponent<T> = ComponentType<Props<T>>;
 /**
  * @deprecated Use the useObservable hook instead
  */

package/dist/esm/index.d.ts

@@ -1,3 +1,7 @@
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { createEventHandler, createState } from './utils';
-export { useObservableState as useState, useObservableState, useObservableContext as useContext, useObservableContext, useObservableEvent as useEvent, useObservableEvent, useObservableElement as useElement, useObservable, toObservable, } from './useObservable';
+export { observeState, observeCallback, observeContext, observeElement } from './utils';
+export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
+export { observableCallback } from 'observable-callback';
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/esm/index.js

@@ -1,4 +1,9 @@
 // Main package exports
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { createEventHandler, createState } from './utils';
-export { useObservableState as useState, useObservableState, useObservableContext as useContext, useObservableContext, useObservableEvent as useEvent, useObservableEvent, useObservableElement as useElement, useObservable, toObservable, } from './useObservable';
+export { observeState, observeCallback, observeContext, observeElement } from './utils';
+export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
+export { observableCallback } from 'observable-callback';
+// hooks
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/esm/reactiveComponent.d.ts

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

package/dist/esm/reactiveComponent.js

@@ -1,16 +1,17 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
-import { toObservable, useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return React.createElement(React.Fragment, null, useObservable(toObservable(props, component)));
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
     };
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
 }
 export function reactiveComponent(observableOrComponent) {
@@ -19,8 +20,8 @@ export function reactiveComponent(observableOrComponent) {
         : fromObservable(observableOrComponent);
 }
 export function forwardRef(component) {
-    var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable(component(toObservable(props), ref)));
+    var wrappedComponent = reactForwardRef(function (props, ref) {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));
     });
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;

package/dist/esm/useAsObservable.d.ts

@@ -0,0 +1,9 @@
+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 useAsObservable<T>(value: T): Observable<T>;
+export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/esm/useAsObservable.js

@@ -0,0 +1,27 @@
+import { BehaviorSubject } from 'rxjs';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    var isInitial = useRef(true);
+    var subjectRef = useRef(new BehaviorSubject(value));
+    var observableRef = useRef();
+    if (!observableRef.current) {
+        var observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
+    }
+    useIsomorphicEffect(function () {
+        if (isInitial.current) {
+            isInitial.current = false;
+        }
+        else {
+            // emit only on update
+            subjectRef.current.next(value);
+        }
+    }, [value]);
+    useIsomorphicEffect(function () {
+        return function () {
+            return subjectRef.current.complete();
+        };
+    }, []);
+    return observableRef.current;
+}

package/dist/esm/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useLayoutEffect;

package/dist/esm/useIsomorphicEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export var useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/esm/useObservable.d.ts

@@ -1,16 +1,7 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-export declare function toObservable<T>(value: T): Observable<T>;
-export declare function toObservable<T, K>(value: T, setup: (props$: Observable<T>) => Observable<K>): Observable<K>;
-export declare function useObservable<T>(observable$: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T;
-export declare function useObservableState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.SetStateAction<T>>];
-export declare function useObservableContext<T>(context: React.Context<T>): Observable<T>;
-declare type ObservableEventTuple<Event> = [Observable<Event>, (event: Event) => void];
-export declare function useObservableEvent<Event>(): ObservableEventTuple<Event>;
-export declare function useObservableElement<Element extends HTMLElement>(): [
-    Observable<Element | null>,
-    (el: Element | null) => void
-];
-export {};
+import { DependencyList } from 'react';
+export declare function useObservable<T>(observable: Observable<T>): T | undefined;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;