react-rx 1.0.0-beta.3 → 1.0.0

package/.idea/codeStyles/Project.xml

@@ -102,12 +102,6 @@
         <option name="TAB_SIZE" value="2" />
       </indentOptions>
     </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
     <codeStyleSettings language="XML">
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,10 +1,6 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="TypescriptExplicitMemberType" enabled="false" level="INFORMATION" enabled_by_default="false" />
-    <inspection_tool class="UnterminatedStatementJS" enabled="false" level="WARNING" enabled_by_default="false">
-      <option name="ignoreSemicolonAtEndOfBlock" value="true" />
-    </inspection_tool>
   </profile>
 </component>

package/.idea/workspace.xml

@@ -5,28 +5,38 @@
       <change beforePath="$PROJECT_DIR$/../react-repl/src/Editor.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/Editor.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../react-repl/src/ShowError.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/ShowError.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../react-repl/src/transformers/babel.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/transformers/babel.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.eslintrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/__tests__/useObservable.test.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/__tests__/useObservable.test.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/useObservable.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/useObservable.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../react-rx.dev/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../react-rx.dev/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../react-rx.dev/src/pages/Index/ReactRxReadme.md" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/src/pages/Index/ReactRxReadme.md" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="ChangesViewManager">
+    <option name="groupingKeys">
+      <option value="directory" />
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="ROOT_SYNC" value="DONT_SYNC" />
   </component>
+  <component name="GitSEFilterConfiguration">
+    <file-type-list>
+      <filtered-out-file-type name="LOCAL_BRANCH" />
+      <filtered-out-file-type name="REMOTE_BRANCH" />
+      <filtered-out-file-type name="TAG" />
+      <filtered-out-file-type name="COMMIT_BY_MESSAGE" />
+    </file-type-list>
+  </component>
   <component name="MacroExpansionManager">
     <option name="directoryName" value="iy052u10" />
   </component>
   <component name="ProjectId" id="1PI8FtTkoa1tFBP8398nQ82nYf0" />
   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectViewState">
-    <option name="autoscrollFromSource" value="true" />
     <option name="autoscrollToSource" value="true" />
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
@@ -38,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$/../react-rx.dev" />
+    <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" />
@@ -53,27 +63,27 @@
     <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" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/website/src/examples" />
+      <recent name="$PROJECT_DIR$/src" />
       <recent name="$PROJECT_DIR$/../react-rx.dev/src" />
       <recent name="$PROJECT_DIR$/../react-rx.dev/webpack" />
       <recent name="$PROJECT_DIR$/../react-rx.dev/webpack-configs" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/webpack-plugins" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/public" />
-    </key>
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/../react-rx.dev" />
-      <recent name="$PROJECT_DIR$/src/__tests__" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/src/entries" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/src/datastores" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/src/pages/Index" />
     </key>
   </component>
-  <component name="RunManager" selected="Jest.All Tests">
+  <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="" />
@@ -83,53 +93,63 @@
       <scope-kind value="ALL" />
       <method v="2" />
     </configuration>
-    <configuration name="should only subscribe once when given same observable on rerenders" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
+    <configuration name="asObservable.test.tsx" 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_FILE" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
+      <method v="2" />
+    </configuration>
+    <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__/useObservable.test.tsx" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/reactiveComponent.test.tsx" />
       <test-names>
-        <test-name value="should only subscribe once when given same observable on rerenders" />
+        <test-name value="it calls the setup function once, at mount" />
       </test-names>
       <method v="2" />
     </configuration>
-    <configuration name="should re-subscribe when receiving a new observable" 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" />
       <working-dir value="$PROJECT_DIR$" />
       <envs />
       <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/useObservable.test.tsx" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
       <test-names>
-        <test-name value="should re-subscribe when receiving a new observable" />
+        <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="toObservable on value returned from a hook" 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" />
       <working-dir value="$PROJECT_DIR$" />
       <envs />
       <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/toObservable.test.tsx" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
       <test-names>
-        <test-name value="toObservable on value returned from a hook" />
+        <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>
-    <configuration name="toObservable.test.tsx" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
+    <configuration name="useAsObservable.test.tsx" 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_FILE" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/toObservable.test.tsx" />
+      <test-file value="$PROJECT_DIR$/src/__tests__/useAsObservable.test.tsx" />
       <method v="2" />
     </configuration>
     <configuration name="useObservable.test.tsx" type="JavaScriptTestRunnerJest" nameIsGenerated="true">
@@ -142,32 +162,22 @@
       <test-file value="$PROJECT_DIR$/src/__tests__/useObservable.test.tsx" />
       <method v="2" />
     </configuration>
-    <configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
-      <package-json value="$PROJECT_DIR$/package.json" />
-      <command value="run" />
-      <scripts>
-        <script value="build" />
-      </scripts>
-      <node-interpreter value="project" />
-      <envs />
-      <method v="2" />
-    </configuration>
     <list>
       <item itemvalue="Jest.All Tests" />
       <item itemvalue="Jest.useObservable.test.tsx" />
-      <item itemvalue="Jest.toObservable.test.tsx" />
-      <item itemvalue="Jest.toObservable on value returned from a hook" />
-      <item itemvalue="Jest.should re-subscribe when receiving a new observable" />
-      <item itemvalue="Jest.should only subscribe once when given same observable on rerenders" />
-      <item itemvalue="npm.build" />
+      <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.should only subscribe once when given same observable on rerenders" />
-        <item itemvalue="Jest.should re-subscribe when receiving a new observable" />
-        <item itemvalue="npm.build" />
-        <item itemvalue="Jest.toObservable.test.tsx" />
-        <item itemvalue="Jest.toObservable on value returned from a hook" />
+        <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" />
       </list>
     </recent_temporary>
   </component>
@@ -204,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,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/cjs/index.js

@@ -1,21 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toObservable = exports.useObservable = exports.useElement = exports.useObservableEvent = exports.useEvent = exports.useObservableContext = exports.useContext = exports.useObservableState = exports.useState = exports.createState = exports.createEventHandler = 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 utils_1 = require("./utils");
-Object.defineProperty(exports, "createEventHandler", { enumerable: true, get: function () { return utils_1.createEventHandler; } });
-Object.defineProperty(exports, "createState", { enumerable: true, get: function () { return utils_1.createState; } });
+Object.defineProperty(exports, "observeState", { enumerable: true, get: function () { return utils_1.observeState; } });
+Object.defineProperty(exports, "observeCallback", { enumerable: true, get: function () { return utils_1.observeCallback; } });
+Object.defineProperty(exports, "observeContext", { enumerable: true, get: function () { return utils_1.observeContext; } });
+Object.defineProperty(exports, "observeElement", { enumerable: true, get: function () { return utils_1.observeElement; } });
+var utils_2 = require("./utils");
+Object.defineProperty(exports, "state", { enumerable: true, get: function () { return utils_2.observeState; } });
+Object.defineProperty(exports, "handler", { enumerable: true, get: function () { return utils_2.observeCallback; } });
+Object.defineProperty(exports, "context", { enumerable: true, get: function () { return utils_2.observeContext; } });
+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, "useState", { enumerable: true, get: function () { return useObservable_1.useObservableState; } });
-Object.defineProperty(exports, "useObservableState", { enumerable: true, get: function () { return useObservable_1.useObservableState; } });
-Object.defineProperty(exports, "useContext", { enumerable: true, get: function () { return useObservable_1.useObservableContext; } });
-Object.defineProperty(exports, "useObservableContext", { enumerable: true, get: function () { return useObservable_1.useObservableContext; } });
-Object.defineProperty(exports, "useEvent", { enumerable: true, get: function () { return useObservable_1.useObservableEvent; } });
-Object.defineProperty(exports, "useObservableEvent", { enumerable: true, get: function () { return useObservable_1.useObservableEvent; } });
-Object.defineProperty(exports, "useElement", { enumerable: true, get: function () { return useObservable_1.useObservableElement; } });
 Object.defineProperty(exports, "useObservable", { enumerable: true, get: function () { return useObservable_1.useObservable; } });
-Object.defineProperty(exports, "toObservable", { enumerable: true, get: function () { return useObservable_1.toObservable; } });
+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,38 +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(useObservable_1.toObservable(props, component)));
+        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) {
@@ -42,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(component(useObservable_1.toObservable(props), ref)));
+    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

@@ -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/cjs/useAsObservable.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsObservable = void 0;
+var rxjs_1 = require("rxjs");
+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) {
+        var observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
+    }
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        if (isInitial.current) {
+            isInitial.current = false;
+        }
+        else {
+            // emit only on update
+            subjectRef.current.next(value);
+        }
+    }, [value]);
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        return function () {
+            return subjectRef.current.complete();
+        };
+    }, []);
+    return observableRef.current;
+}
+exports.useAsObservable = useAsObservable;

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,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/cjs/useObservable.js

@@ -1,62 +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.useObservableElement = exports.useObservableEvent = exports.useObservableContext = exports.useObservableState = exports.useObservable = exports.toObservable = void 0;
-var React = __importStar(require("react"));
-var rxjs_1 = require("rxjs");
-var utils_1 = require("./utils");
-function toObservable(value, setup) {
-    var isInitial = React.useRef(true);
-    var subject = React.useRef(new rxjs_1.BehaviorSubject(value));
-    React.useEffect(function () {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subject.current.next(value);
-        }
-    }, [value]);
-    React.useEffect(function () {
-        return function () {
-            return subject.current.complete();
-        };
-    }, []);
-    var observable = subject.current.asObservable();
-    return setup ? setup(observable) : observable;
-}
-exports.toObservable = toObservable;
-var isCallable = function (val) {
-    return typeof val === 'function';
-};
+exports.useMemoObservable = exports.useObservable = void 0;
+var react_1 = require("react");
+var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 function getValue(value) {
-    return isCallable(value) ? value() : 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 () {
+function useObservable(observable, initialValue) {
+    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) {
+        subscription.current = observable.subscribe(function (nextVal) {
             if (isSync) {
                 syncVal = nextVal;
             }
@@ -67,35 +23,23 @@ 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); });
+            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
         isInitial.current = false;
         return function () {
             if (subscription.current) {
                 subscription.current.unsubscribe();
+                subscription.current = undefined;
             }
         };
-    }, [observable$]);
+    }, [observable]);
     return value;
 }
 exports.useObservable = useObservable;
-function useObservableState(initial) {
-    var _a = React.useState(initial), value = _a[0], update = _a[1];
-    return [toObservable(value), update];
-}
-exports.useObservableState = useObservableState;
-function useObservableContext(context) {
-    return toObservable(React.useContext(context));
-}
-exports.useObservableContext = useObservableContext;
-function useObservableEvent() {
-    return React.useMemo(utils_1.createEventHandler, []);
-}
-exports.useObservableEvent = useObservableEvent;
-function useObservableElement() {
-    return useObservableState(null);
+function useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable((0, react_1.useMemo)(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
-exports.useObservableElement = useObservableElement;
+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;