react-rx 1.0.0-beta.4 → 1.0.1

package/.idea/vcs.xml

@@ -5,8 +5,5 @@
     <mapping directory="$PROJECT_DIR$/../react-repl" vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
     <mapping directory="$PROJECT_DIR$/../react-rx.dev" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/test-concurrent-mode" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/test-concurrent-mode2" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/website" vcs="Git" />
   </component>
 </project>

package/.idea/workspace.xml

@@ -48,7 +48,7 @@
     <property name="com.intellij.ide.scratch.LRUPopupBuilder$1/New Scratch File" value="JavaScript" />
     <property name="full.screen.before.presentation.mode" value="true" />
     <property name="last.edited.regexp" value="jsx{1,2}" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/test-concurrent-mode" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.detected.package.standard" value="true" />
     <property name="node.js.detected.package.tslint" value="true" />
@@ -63,17 +63,17 @@
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="prettierjs.PrettierConfiguration.Package" value="$PROJECT_DIR$/node_modules/prettier" />
-    <property name="settings.editor.selected.configurable" value="settings.javascript.linters.eslint" />
+    <property name="settings.editor.selected.configurable" value="project.propVCSSupport.Mappings" />
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src" />
       <recent name="$PROJECT_DIR$/test-concurrent-mode" />
       <recent name="$PROJECT_DIR$/website/src/examples" />
       <recent name="$PROJECT_DIR$/src/__tests__" />
       <recent name="$PROJECT_DIR$/../react-rx.dev" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/src/entries" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/website/src/examples" />
@@ -83,7 +83,7 @@
       <recent name="$PROJECT_DIR$/../react-rx.dev/webpack-configs" />
     </key>
   </component>
-  <component name="RunManager" selected="Jest.useObservable.test.tsx">
+  <component name="RunManager" selected="Jest.it calls the setup function once, at mount">
     <configuration name="All Tests" type="JavaScriptTestRunnerJest" nameIsGenerated="true">
       <node-interpreter value="project" />
       <node-options value="" />
@@ -103,20 +103,20 @@
       <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
       <method v="2" />
     </configuration>
-    <configuration name="the returned observable should *not* receive a new value when component is rendered with an unchanged value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
+    <configuration name="it calls the setup function once, at mount" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <node-options value="" />
       <jest-package value="$PROJECT_DIR$/node_modules/jest" />
       <working-dir value="$PROJECT_DIR$" />
       <envs />
       <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/reactiveComponent.test.tsx" />
       <test-names>
-        <test-name value="the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
+        <test-name value="it calls the setup function once, at mount" />
       </test-names>
       <method v="2" />
     </configuration>
-    <configuration name="the returned observable should receive a new value when component is rendered with a new value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
+    <configuration name="the returned observable should *not* receive a new value when component is rendered with an unchanged value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <node-options value="" />
       <jest-package value="$PROJECT_DIR$/node_modules/jest" />
@@ -125,11 +125,11 @@
       <scope-kind value="TEST" />
       <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
       <test-names>
-        <test-name value="the returned observable should receive a new value when component is rendered with a new value" />
+        <test-name value="the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
       </test-names>
       <method v="2" />
     </configuration>
-    <configuration name="the returned observable should receive a new value when component is rendered with an unchanged value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
+    <configuration name="the returned observable should receive a new value when component is rendered with a new value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <node-options value="" />
       <jest-package value="$PROJECT_DIR$/node_modules/jest" />
@@ -138,7 +138,7 @@
       <scope-kind value="TEST" />
       <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
       <test-names>
-        <test-name value="the returned observable should receive a new value when component is rendered with an unchanged value" />
+        <test-name value="the returned observable should receive a new value when component is rendered with a new value" />
       </test-names>
       <method v="2" />
     </configuration>
@@ -165,19 +165,19 @@
     <list>
       <item itemvalue="Jest.All Tests" />
       <item itemvalue="Jest.useObservable.test.tsx" />
-      <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with a new value" />
-      <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with an unchanged value" />
-      <item itemvalue="Jest.the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
       <item itemvalue="Jest.asObservable.test.tsx" />
+      <item itemvalue="Jest.it calls the setup function once, at mount" />
+      <item itemvalue="Jest.the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
+      <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with a new value" />
       <item itemvalue="Jest.useAsObservable.test.tsx" />
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="Jest.it calls the setup function once, at mount" />
         <item itemvalue="Jest.useAsObservable.test.tsx" />
         <item itemvalue="Jest.asObservable.test.tsx" />
         <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with a new value" />
         <item itemvalue="Jest.the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
-        <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with an unchanged value" />
       </list>
     </recent_temporary>
   </component>
@@ -214,6 +214,9 @@
   <component name="VcsManagerConfiguration">
     <ignored-roots>
       <path value="$PROJECT_DIR$/../../_/parcel-plugin-mdx" />
+      <path value="$PROJECT_DIR$/test-concurrent-mode" />
+      <path value="$PROJECT_DIR$/test-concurrent-mode2" />
+      <path value="$PROJECT_DIR$/website" />
     </ignored-roots>
   </component>
   <component name="com.intellij.coverage.CoverageDataManagerImpl">

package/dist/cjs/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/cjs/WithObservable.js

@@ -4,9 +4,9 @@ exports.WithObservable = void 0;
 var operators_1 = require("rxjs/operators");
 var reactiveComponent_1 = require("./reactiveComponent");
 function createWithObservable() {
-    return reactiveComponent_1.reactiveComponent(function (props$) {
-        return props$.pipe(operators_1.distinctUntilChanged(function (props, prevProps) { return props.observable === prevProps.observable; }), operators_1.switchMap(function (props) {
-            return props.observable.pipe(operators_1.map(function (observableValue) { return props.children(observableValue); }));
+    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); }));
         }));
     });
 }

package/dist/cjs/index.d.ts

@@ -1,6 +1,7 @@
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
 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/cjs/index.js

@@ -1,16 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observableCallback = exports.elementRef = exports.context = exports.handler = exports.state = exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = exports.useAsObservable = exports.useMemoObservable = exports.useObservable = exports.forwardRef = exports.rxComponent = exports.reactiveComponent = void 0;
+exports.useObservableCallback = exports.useAsObservable = exports.useMemoObservable = exports.useObservable = exports.observableCallback = exports.elementRef = exports.context = exports.handler = exports.state = exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = exports.forwardRef = exports.rxComponent = exports.reactiveComponent = void 0;
 // Main package exports
 var reactiveComponent_1 = require("./reactiveComponent");
 Object.defineProperty(exports, "reactiveComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
 Object.defineProperty(exports, "rxComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
 Object.defineProperty(exports, "forwardRef", { enumerable: true, get: function () { return reactiveComponent_1.forwardRef; } });
-var useObservable_1 = require("./useObservable");
-Object.defineProperty(exports, "useObservable", { enumerable: true, get: function () { return useObservable_1.useObservable; } });
-Object.defineProperty(exports, "useMemoObservable", { enumerable: true, get: function () { return useObservable_1.useMemoObservable; } });
-var useAsObservable_1 = require("./useAsObservable");
-Object.defineProperty(exports, "useAsObservable", { enumerable: true, get: function () { return useAsObservable_1.useAsObservable; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "observeState", { enumerable: true, get: function () { return utils_1.observeState; } });
 Object.defineProperty(exports, "observeCallback", { enumerable: true, get: function () { return utils_1.observeCallback; } });
@@ -23,3 +18,11 @@ Object.defineProperty(exports, "context", { enumerable: true, get: function () {
 Object.defineProperty(exports, "elementRef", { enumerable: true, get: function () { return utils_2.observeElement; } });
 var observable_callback_1 = require("observable-callback");
 Object.defineProperty(exports, "observableCallback", { enumerable: true, get: function () { return observable_callback_1.observableCallback; } });
+// hooks
+var useObservable_1 = require("./useObservable");
+Object.defineProperty(exports, "useObservable", { enumerable: true, get: function () { return useObservable_1.useObservable; } });
+Object.defineProperty(exports, "useMemoObservable", { enumerable: true, get: function () { return useObservable_1.useMemoObservable; } });
+var useAsObservable_1 = require("./useAsObservable");
+Object.defineProperty(exports, "useAsObservable", { enumerable: true, get: function () { return useAsObservable_1.useAsObservable; } });
+var useObservableCallback_1 = require("./useObservableCallback");
+Object.defineProperty(exports, "useObservableCallback", { enumerable: true, get: function () { return useObservableCallback_1.useObservableCallback; } });

package/dist/cjs/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/cjs/reactiveComponent.js

@@ -1,39 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.forwardRef = exports.reactiveComponent = void 0;
-var React = __importStar(require("react"));
 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 React.createElement(React.Fragment, null, useObservable_1.useObservable(React.useRef(component(useAsObservable_1.useAsObservable(props))).current));
+        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 = displayName_1.wrapDisplayName(component, 'reactiveComponent');
+    wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable_1.useObservable(input$));
+        return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)(input$));
     };
 }
 function reactiveComponent(observableOrComponent) {
@@ -43,10 +24,10 @@ function reactiveComponent(observableOrComponent) {
 }
 exports.reactiveComponent = reactiveComponent;
 function forwardRef(component) {
-    var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable_1.useObservable(React.useRef(component(useAsObservable_1.useAsObservable(props), ref)).current));
+    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 = displayName_1.wrapDisplayName(component, 'reactiveComponent');
+    wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
     return wrappedComponent;
 }
 exports.forwardRef = forwardRef;

package/dist/cjs/useAsObservable.d.ts

@@ -6,3 +6,4 @@ import { Observable } from 'rxjs';
  * @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/cjs/useAsObservable.js

@@ -1,41 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAsObservable = void 0;
 var rxjs_1 = require("rxjs");
-var React = __importStar(require("react"));
-/**
- * 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
- */
-function useAsObservable(value) {
-    var isInitial = React.useRef(true);
-    var subjectRef = React.useRef(new rxjs_1.BehaviorSubject(value));
-    var observableRef = React.useRef();
+var react_1 = require("react");
+var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
+function useAsObservable(value, operator) {
+    var isInitial = (0, react_1.useRef)(true);
+    var subjectRef = (0, react_1.useRef)(new rxjs_1.BehaviorSubject(value));
+    var observableRef = (0, react_1.useRef)();
     if (!observableRef.current) {
-        observableRef.current = subjectRef.current.asObservable();
+        var observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
     }
-    React.useEffect(function () {
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
         if (isInitial.current) {
             isInitial.current = false;
         }
@@ -44,7 +21,7 @@ function useAsObservable(value) {
             subjectRef.current.next(value);
         }
     }, [value]);
-    React.useEffect(function () {
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
         return function () {
             return subjectRef.current.complete();
         };

package/dist/cjs/useIsomorphicEffect.d.ts

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

package/dist/cjs/useIsomorphicEffect.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicEffect = void 0;
+var react_1 = require("react");
+exports.useIsomorphicEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;

package/dist/cjs/useObservable.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-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: React.DependencyList): Observable<T | undefined>;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: React.DependencyList, initialValue: T | (() => T)): Observable<T>;
+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/cjs/useObservable.js

@@ -1,33 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoObservable = exports.useObservable = void 0;
-var React = __importStar(require("react"));
+var react_1 = require("react");
+var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 function useObservable(observable, initialValue) {
-    var subscription = React.useRef();
-    var isInitial = React.useRef(true);
-    var _a = React.useState(function () {
+    var subscription = (0, react_1.useRef)();
+    var isInitial = (0, react_1.useRef)(true);
+    var _a = (0, react_1.useState)(function () {
         var isSync = true;
         var syncVal = getValue(initialValue);
         subscription.current = observable.subscribe(function (nextVal) {
@@ -41,8 +23,8 @@ function useObservable(observable, initialValue) {
         isSync = false;
         return syncVal;
     }), value = _a[0], setState = _a[1];
-    React.useEffect(function () {
-        // when the observable$ changes after initial (possibly sync render)
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
             subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
@@ -58,6 +40,6 @@ function useObservable(observable, initialValue) {
 }
 exports.useObservable = useObservable;
 function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    return useObservable((0, react_1.useMemo)(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
 exports.useMemoObservable = useMemoObservable;

package/dist/cjs/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/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,7 +1,7 @@
 import { Observable, OperatorFunction } from 'rxjs';
-import * as React from 'react';
-export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.SetStateAction<T>>];
+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: React.Context<T>): Observable<T>;
+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,49 +1,30 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = void 0;
-var React = __importStar(require("react"));
 var useAsObservable_1 = require("./useAsObservable");
 var observable_callback_1 = require("observable-callback");
 var operators_1 = require("rxjs/operators");
-var createState = function (initialState) { return observable_callback_1.observableCallback(operators_1.startWith(initialState)); };
+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 = React.useState(initial), value = _a[0], update = _a[1];
-    return [useAsObservable_1.useAsObservable(value), update];
+    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 = React.useRef();
+    var ref = (0, react_1.useRef)();
     if (!ref.current) {
-        ref.current = operator ? observable_callback_1.observableCallback(operator) : observable_callback_1.observableCallback();
+        ref.current = operator ? (0, observable_callback_1.observableCallback)(operator) : (0, observable_callback_1.observableCallback)();
     }
     return ref.current;
 }
 exports.observeCallback = observeCallback;
 function observeContext(context) {
-    return useAsObservable_1.useAsObservable(React.useContext(context));
+    return (0, useAsObservable_1.useAsObservable)((0, react_1.useContext)(context));
 }
 exports.observeContext = observeContext;
 function observeElement() {
-    var ref = React.useRef();
+    var ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = createState(null);
     }

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,6 +1,7 @@
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
 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,7 +1,9 @@
 // Main package exports
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
 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';