react-rx - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

dist/cjs/index.d.ts

 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 { 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';

dist/cjs/index.js

 "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.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;
 // Main package exports
@@ -9,14 +9,18 @@ var reactiveComponent_1 = require("./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; } });
 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 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; } });
+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; } });

dist/cjs/reactiveComponent.js

@@ -25,6 +25,7 @@ "use strict";
 var displayName_1 = require("./displayName");
+var useAsObservable_1 = require("./useAsObservable");
 var useObservable_1 = require("./useObservable");
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return React.createElement(React.Fragment, null, useObservable_1.useObservable(useObservable_1.toObservable(props, component)));
+        return React.createElement(React.Fragment, null, useObservable_1.useObservable(React.useRef(component(useAsObservable_1.useAsObservable(props))).current));
     };
@@ -47,3 +48,3 @@ wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');
     var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable_1.useObservable(component(useObservable_1.toObservable(props), ref)));
+        return React.createElement(React.Fragment, null, useObservable_1.useObservable(React.useRef(component(useAsObservable_1.useAsObservable(props), ref)).current));
     });
@@ -50,0 +51,0 @@ wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');

dist/cjs/useObservable.d.ts

 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 {};
+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>;

dist/cjs/useObservable.js

@@ -22,34 +22,8 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservableElement = exports.useObservableEvent = exports.useObservableContext = exports.useObservableState = exports.useObservable = exports.toObservable = void 0;
+exports.useMemoObservable = exports.useObservable = 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';
-};
 function getValue(value) {
-    return isCallable(value) ? value() : value;
+    return typeof value === 'function' ? value() : value;
 }
-function useObservable(observable$, initialValue) {
+function useObservable(observable, initialValue) {
     var subscription = React.useRef();
@@ -60,3 +34,3 @@ var isInitial = React.useRef(true);
         var syncVal = getValue(initialValue);
-        subscription.current = observable$.subscribe(function (nextVal) {
+        subscription.current = observable.subscribe(function (nextVal) {
             if (isSync) {
@@ -75,3 +49,3 @@ syncVal = nextVal;
         if (!isInitial.current) {
-            subscription.current = observable$.subscribe(function (nextVal) { return setState(nextVal); });
+            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
@@ -82,24 +56,12 @@ isInitial.current = false;
                 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];
+function useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
-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);
-}
-exports.useObservableElement = useObservableElement;
+exports.useMemoObservable = useMemoObservable;

dist/cjs/utils.d.ts

@@ -1,3 +0,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 * as React from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.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 observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

dist/cjs/utils.js

 "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.createState = exports.createEventHandler = void 0;
+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");
-// 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;
+function observeState(initial) {
+    var _a = React.useState(initial), value = _a[0], update = _a[1];
+    return [useAsObservable_1.useAsObservable(value), update];
+}
+exports.observeState = observeState;
+function observeCallback(operator) {
+    var ref = React.useRef();
+    if (!ref.current) {
+        ref.current = operator ? observable_callback_1.observableCallback(operator) : observable_callback_1.observableCallback();
+    }
+    return ref.current;
+}
+exports.observeCallback = observeCallback;
+function observeContext(context) {
+    return useAsObservable_1.useAsObservable(React.useContext(context));
+}
+exports.observeContext = observeContext;
+function observeElement() {
+    var ref = React.useRef();
+    if (!ref.current) {
+        ref.current = createState(null);
+    }
+    return ref.current;
+}
+exports.observeElement = observeElement;

dist/es2015/index.d.ts

 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 { 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';

dist/es2015/index.js

 // 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 { 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';

dist/es2015/reactiveComponent.js

 import * as React from 'react';
 import { wrapDisplayName } from './displayName';
-import { toObservable, useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+import { useObservable } from './useObservable';
 function fromComponent(component) {
-    const wrappedComponent = (props) => React.createElement(React.Fragment, null, useObservable(toObservable(props, component)));
+    const wrappedComponent = (props) => {
+        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
+    };
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
@@ -21,3 +24,3 @@ return wrappedComponent;
     const wrappedComponent = React.forwardRef((props, ref) => {
-        return React.createElement(React.Fragment, null, useObservable(component(toObservable(props), ref)));
+        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
     });
@@ -24,0 +27,0 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');

dist/es2015/useObservable.d.ts

 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 {};
+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>;

dist/es2015/useObservable.js

 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';
 function getValue(value) {
-    return isCallable(value) ? value() : value;
+    return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable$, initialValue) {
+export function useObservable(observable, initialValue) {
     const subscription = React.useRef();
@@ -34,3 +11,3 @@ const isInitial = React.useRef(true);
         let syncVal = getValue(initialValue);
-        subscription.current = observable$.subscribe(nextVal => {
+        subscription.current = observable.subscribe(nextVal => {
             if (isSync) {
@@ -49,3 +26,3 @@ syncVal = nextVal;
         if (!isInitial.current) {
-            subscription.current = observable$.subscribe(nextVal => setState(nextVal));
+            subscription.current = observable.subscribe(nextVal => setState(nextVal));
         }
@@ -56,19 +33,10 @@ isInitial.current = false;
                 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 useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable(React.useMemo(() => getValue(observableOrFactory), deps), initialValue);
 }
-export function useObservableContext(context) {
-    return toObservable(React.useContext(context));
-}
-export function useObservableEvent() {
-    return React.useMemo(createEventHandler, []);
-}
-export function useObservableElement() {
-    return useObservableState(null);
-}

dist/es2015/utils.d.ts

@@ -1,3 +0,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 * as React from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.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 observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

dist/es2015/utils.js

@@ -0,5 +1,26 @@
+import * as React from 'react';
+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));
+const createState = (initialState) => observableCallback(startWith(initialState));
+export function observeState(initial) {
+    const [value, update] = React.useState(initial);
+    return [useAsObservable(value), update];
+}
+export function observeCallback(operator) {
+    const ref = React.useRef();
+    if (!ref.current) {
+        ref.current = operator ? observableCallback(operator) : observableCallback();
+    }
+    return ref.current;
+}
+export function observeContext(context) {
+    return useAsObservable(React.useContext(context));
+}
+export function observeElement() {
+    const ref = React.useRef();
+    if (!ref.current) {
+        ref.current = createState(null);
+    }
+    return ref.current;
+}

dist/esm/index.d.ts

 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 { 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';

dist/esm/index.js

 // 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 { 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';

dist/esm/reactiveComponent.js

 import * as React from 'react';
 import { wrapDisplayName } from './displayName';
-import { toObservable, useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+import { useObservable } from './useObservable';
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return React.createElement(React.Fragment, null, useObservable(toObservable(props, component)));
+        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
     };
@@ -23,3 +24,3 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable(component(toObservable(props), ref)));
+        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
     });
@@ -26,0 +27,0 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');

dist/esm/useObservable.d.ts

 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 {};
+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>;

dist/esm/useObservable.js

 import * as React from 'react';
-import { BehaviorSubject } from 'rxjs';
-import { createEventHandler } from './utils';
-export function toObservable(value, setup) {
-    var isInitial = React.useRef(true);
-    var subject = React.useRef(new 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;
-}
-var isCallable = function (val) {
-    return typeof val === 'function';
-};
 function getValue(value) {
-    return isCallable(value) ? value() : value;
+    return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable$, initialValue) {
+export function useObservable(observable, initialValue) {
     var subscription = React.useRef();
@@ -36,3 +11,3 @@ var isInitial = React.useRef(true);
         var syncVal = getValue(initialValue);
-        subscription.current = observable$.subscribe(function (nextVal) {
+        subscription.current = observable.subscribe(function (nextVal) {
             if (isSync) {
@@ -51,3 +26,3 @@ syncVal = nextVal;
         if (!isInitial.current) {
-            subscription.current = observable$.subscribe(function (nextVal) { return setState(nextVal); });
+            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
@@ -58,19 +33,10 @@ isInitial.current = false;
                 subscription.current.unsubscribe();
+                subscription.current = undefined;
             }
         };
-    }, [observable$]);
+    }, [observable]);
     return value;
 }
-export function useObservableState(initial) {
-    var _a = React.useState(initial), value = _a[0], update = _a[1];
-    return [toObservable(value), update];
+export function useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
-export function useObservableContext(context) {
-    return toObservable(React.useContext(context));
-}
-export function useObservableEvent() {
-    return React.useMemo(createEventHandler, []);
-}
-export function useObservableElement() {
-    return useObservableState(null);
-}

dist/esm/utils.d.ts

@@ -1,3 +0,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 * as React from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.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 observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

dist/esm/utils.js

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

package.json

 {
   "name": "react-rx",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "React + RxJS = <3",
@@ -15,2 +15,3 @@ "main": "dist/cjs/index.js",
     "clean": "rimraf dist",
+    "dev": "cd website && npm run dev",
     "prepublishOnly": "npm run clean && npm run build",
@@ -63,3 +64,7 @@ "postpublish": "npm run clean",
   },
-  "homepage": "https://react-rx.dev"
+  "homepage": "https://react-rx.dev",
+  "workspaces": [
+    "website",
+    "."
+  ]
 }

src/index.ts

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

src/reactiveComponent.ts

 import * as React from 'react'
 import {Observable} from 'rxjs'
 import {wrapDisplayName} from './displayName'
-import {toObservable, useObservable} from './useObservable'
+import {useAsObservable} from './useAsObservable'
+import {useObservable} from './useObservable'
 
@@ -9,8 +10,9 @@ type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>
 function fromComponent<Props>(component: Component<Props>): React.FunctionComponent<Props> {
-  const wrappedComponent = (props: Props) =>
-    React.createElement(
+  const wrappedComponent = (props: Props) => {
+    return React.createElement(
       React.Fragment,
       null,
-      useObservable<React.ReactNode>(toObservable(props, component)),
+      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props))).current),
     )
+  }
   wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')
@@ -48,3 +50,3 @@ return wrappedComponent
       null,
-      useObservable(component(toObservable(props), ref)),
+      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props), ref)).current),
     )
@@ -51,0 +53,0 @@ })

src/useObservable.ts

 import * as React from 'react'
-import {BehaviorSubject, Observable, Subject, Subscription} from 'rxjs'
-import {createEventHandler} from './utils'
+import {Observable, Subscription} from 'rxjs'
 
-export function toObservable<T>(value: T): Observable<T>
-export function toObservable<T, K>(
-  value: T,
-  setup: (props$: Observable<T>) => Observable<K>,
-): Observable<K>
-export function toObservable<T, K>(
-  value: T,
-  setup?: (props$: Observable<T>) => Observable<K>,
-): Observable<T | K> {
-  const isInitial = React.useRef(true)
-  const subject = React.useRef<Subject<T>>(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
+function getValue<T>(value: T): T extends () => infer U ? U : T {
+  return typeof value === 'function' ? value() : value
 }
 
-const isCallable = (val: unknown): val is (...args: unknown[]) => unknown =>
-  typeof val === 'function'
-
-function getValue<T>(value: T): T
-function getValue<T>(value: T | (() => T)): T {
-  return isCallable(value) ? value() : value
-}
-
 export function useObservable<T>(observable$: Observable<T>): T | undefined
 export function useObservable<T>(observable$: Observable<T>, initialValue: T): T
 export function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T
-export function useObservable<T>(observable$: Observable<T>, initialValue?: T): T | undefined {
+export function useObservable<T>(
+  observable: Observable<T>,
+  initialValue?: T | (() => T),
+) {
   const subscription = React.useRef<Subscription>()
   const isInitial = React.useRef(true)
-  const [value, setState] = React.useState<T | undefined>(() => {
+  const [value, setState] = React.useState(() => {
     let isSync = true
     let syncVal = getValue(initialValue)
-    subscription.current = observable$.subscribe(nextVal => {
+    subscription.current = observable.subscribe(nextVal => {
       if (isSync) {
@@ -66,3 +34,3 @@ syncVal = nextVal
     if (!isInitial.current) {
-      subscription.current = observable$.subscribe(nextVal => setState(nextVal))
+      subscription.current = observable.subscribe(nextVal => setState(nextVal))
     }
@@ -73,5 +41,6 @@ isInitial.current = false
         subscription.current.unsubscribe()
+        subscription.current = undefined
       }
     }
-  }, [observable$])
+  }, [observable])
 
@@ -81,28 +50,20 @@ return value
 
-export function useObservableState<T>(
-  initial: T | (() => T),
-): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
-
-export function useObservableState<T>(
-  initial?: T | (() => T),
-): [Observable<T | undefined>, React.Dispatch<React.SetStateAction<T | undefined>>] {
-  const [value, update] = React.useState<T | undefined>(initial)
-  return [toObservable(value), update]
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: React.DependencyList,
+): Observable<T | undefined>
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: React.DependencyList,
+  initialValue: T | (() => T),
+): Observable<T>
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: React.DependencyList,
+  initialValue?: T | (() => T),
+) {
+  return useObservable(
+    React.useMemo(() => getValue(observableOrFactory), deps),
+    initialValue,
+  )
 }
-
-export function useObservableContext<T>(context: React.Context<T>): Observable<T> {
-  return toObservable(React.useContext<T>(context))
-}
-
-type ObservableEventTuple<Event> = [Observable<Event>, (event: Event) => void]
-
-export function useObservableEvent<Event>(): ObservableEventTuple<Event> {
-  return React.useMemo<ObservableEventTuple<Event>>(createEventHandler, [])
-}
-
-export function useObservableElement<Element extends HTMLElement>(): [
-  Observable<Element | null>,
-  (el: Element | null) => void,
-] {
-  return useObservableState<Element | null>(null)
-}

src/utils.ts

@@ -0,7 +1,43 @@
+import {Observable, OperatorFunction} from 'rxjs'
+import * as React from 'react'
+import {useAsObservable} from './useAsObservable'
 import {observableCallback} from 'observable-callback'
 import {startWith} from 'rxjs/operators'
 
-// for consumption outside of react only
-export const createEventHandler = observableCallback
+const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
 
-export const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
+export function observeState<T>(
+  initial: T | (() => T),
+): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
+export function observeState<T>(
+  initial?: T | (() => T),
+): [Observable<T | undefined>, React.Dispatch<React.SetStateAction<T | undefined>>] {
+  const [value, update] = React.useState<T | undefined>(initial)
+  return [useAsObservable(value), update]
+}
+
+export function observeCallback<T>(): [Observable<T>, (arg: T) => void]
+export function observeCallback<T, K>(
+  operator: OperatorFunction<T, K>,
+): [Observable<K>, (arg: T) => void]
+export function observeCallback<T, K>(
+  operator?: OperatorFunction<T, K>,
+): [Observable<T | K>, (arg: T) => void] {
+  const ref = React.useRef<[Observable<T | K>, (arg: T) => void]>()
+  if (!ref.current) {
+    ref.current = operator ? observableCallback<T, K>(operator) : observableCallback<T>()
+  }
+  return ref.current
+}
+
+export function observeContext<T>(context: React.Context<T>): Observable<T> {
+  return useAsObservable(React.useContext<T>(context))
+}
+
+export function observeElement<T>(): [Observable<T | null>, (el: T | null) => void] {
+  const ref = React.useRef<[Observable<T | null>, (value: T | null) => void]>()
+  if (!ref.current) {
+    ref.current = createState<T | null>(null)
+  }
+  return ref.current
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189059

increased by154.54%

Number of package files

180

increased by164.71%

Lines of code

4209

increased by340.73%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes