react-rx - npm Package Compare versions

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

dist/cjs/reactiveComponent.d.ts

@@ -1,8 +0,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 {};

dist/cjs/reactiveComponent.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.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 react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(react_1.useRef(component(useAsObservable_1.useAsObservable(props))).current));
     };
@@ -36,3 +17,3 @@ wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable_1.useObservable(input$));
+        return react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(input$));
     };
@@ -47,4 +28,4 @@ }
 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 = react_1.forwardRef(function (props, ref) {
+        return react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(react_1.useRef(component(useAsObservable_1.useAsObservable(props), ref)).current));
     });
@@ -51,0 +32,0 @@ wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');

dist/cjs/useAsObservable.d.ts

@@ -9,1 +9,2 @@ import { Observable } from 'rxjs';
 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>;

dist/cjs/useAsObservable.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.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 = react_1.useRef(true);
+    var subjectRef = react_1.useRef(new rxjs_1.BehaviorSubject(value));
+    var observableRef = 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 () {
+    useIsomorphicEffect_1.useIsomorphicEffect(function () {
         if (isInitial.current) {
@@ -47,3 +24,3 @@ isInitial.current = false;
     }, [value]);
-    React.useEffect(function () {
+    useIsomorphicEffect_1.useIsomorphicEffect(function () {
         return function () {
@@ -50,0 +27,0 @@ return subjectRef.current.complete();

dist/cjs/useObservable.d.ts

@@ -1,7 +0,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): Observable<T | undefined>;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): Observable<T>;

dist/cjs/useObservable.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.useMemoObservable = exports.useObservable = void 0;
-var React = __importStar(require("react"));
+var react_1 = require("react");
+var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 function getValue(value) {
@@ -28,5 +10,5 @@ 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 = react_1.useRef();
+    var isInitial = react_1.useRef(true);
+    var _a = react_1.useState(function () {
         var isSync = true;
@@ -45,4 +27,4 @@ var syncVal = getValue(initialValue);
     }), value = _a[0], setState = _a[1];
-    React.useEffect(function () {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect_1.useIsomorphicEffect(function () {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
@@ -63,4 +45,4 @@ subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
 function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    return useObservable(react_1.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
 exports.useMemoObservable = useMemoObservable;

dist/cjs/utils.d.ts

 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];

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.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 react_1 = require("react");
 var createState = function (initialState) { return observable_callback_1.observableCallback(operators_1.startWith(initialState)); };
 function observeState(initial) {
-    var _a = React.useState(initial), value = _a[0], update = _a[1];
+    var _a = react_1.useState(initial), value = _a[0], update = _a[1];
     return [useAsObservable_1.useAsObservable(value), update];
@@ -34,3 +15,3 @@ }
 function observeCallback(operator) {
-    var ref = React.useRef();
+    var ref = react_1.useRef();
     if (!ref.current) {
@@ -43,7 +24,7 @@ ref.current = operator ? observable_callback_1.observableCallback(operator) : observable_callback_1.observableCallback();
 function observeContext(context) {
-    return useAsObservable_1.useAsObservable(React.useContext(context));
+    return useAsObservable_1.useAsObservable(react_1.useContext(context));
 }
 exports.observeContext = observeContext;
 function observeElement() {
-    var ref = React.useRef();
+    var ref = react_1.useRef();
     if (!ref.current) {
@@ -50,0 +31,0 @@ ref.current = createState(null);

dist/cjs/WithObservable.d.ts

@@ -1,8 +0,8 @@
-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>>;
 /**
@@ -9,0 +9,0 @@ * @deprecated Use the useObservable hook instead

dist/es2015/reactiveComponent.d.ts

@@ -1,8 +0,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 {};

dist/es2015/reactiveComponent.js

@@ -1,8 +0,8 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
 import { useAsObservable } from './useAsObservable';
 import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
     const wrappedComponent = (props) => {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
     };
@@ -14,3 +14,3 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
@@ -24,4 +24,4 @@ }
 export function forwardRef(component) {
-    const wrappedComponent = React.forwardRef((props, ref) => {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
+    const wrappedComponent = reactForwardRef((props, ref) => {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));
     });
@@ -28,0 +28,0 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');

dist/es2015/useAsObservable.d.ts

@@ -9,1 +9,2 @@ import { Observable } from 'rxjs';
 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>;

dist/es2015/useAsObservable.js

 import { BehaviorSubject } from 'rxjs';
-import * as React from '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
- */
-export function useAsObservable(value) {
-    const isInitial = React.useRef(true);
-    const subjectRef = React.useRef(new BehaviorSubject(value));
-    const observableRef = React.useRef();
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    const isInitial = useRef(true);
+    const subjectRef = useRef(new BehaviorSubject(value));
+    const observableRef = useRef();
     if (!observableRef.current) {
-        observableRef.current = subjectRef.current.asObservable();
+        const observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
     }
-    React.useEffect(() => {
+    useIsomorphicEffect(() => {
         if (isInitial.current) {
@@ -25,3 +21,3 @@ isInitial.current = false;
     }, [value]);
-    React.useEffect(() => {
+    useIsomorphicEffect(() => {
         return () => {
@@ -28,0 +24,0 @@ return subjectRef.current.complete();

dist/es2015/useObservable.d.ts

@@ -1,7 +0,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): Observable<T | undefined>;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): Observable<T>;

dist/es2015/useObservable.js

@@ -1,2 +0,3 @@
-import * as React from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
@@ -6,5 +7,5 @@ return typeof value === 'function' ? value() : value;
 export function useObservable(observable, initialValue) {
-    const subscription = React.useRef();
-    const isInitial = React.useRef(true);
-    const [value, setState] = React.useState(() => {
+    const subscription = useRef();
+    const isInitial = useRef(true);
+    const [value, setState] = useState(() => {
         let isSync = true;
@@ -23,4 +24,4 @@ let syncVal = getValue(initialValue);
     });
-    React.useEffect(() => {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(() => {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
@@ -40,3 +41,3 @@ subscription.current = observable.subscribe(nextVal => setState(nextVal));
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(() => getValue(observableOrFactory), deps), initialValue);
+    return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);
 }

dist/es2015/utils.d.ts

 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];

dist/es2015/utils.js

@@ -1,12 +0,12 @@
-import * as React from 'react';
 import { useAsObservable } from './useAsObservable';
 import { observableCallback } from 'observable-callback';
 import { startWith } from 'rxjs/operators';
+import { useContext, useRef, useState } from 'react';
 const createState = (initialState) => observableCallback(startWith(initialState));
 export function observeState(initial) {
-    const [value, update] = React.useState(initial);
+    const [value, update] = useState(initial);
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
-    const ref = React.useRef();
+    const ref = useRef();
     if (!ref.current) {
@@ -18,6 +18,6 @@ ref.current = operator ? observableCallback(operator) : observableCallback();
 export function observeContext(context) {
-    return useAsObservable(React.useContext(context));
+    return useAsObservable(useContext(context));
 }
 export function observeElement() {
-    const ref = React.useRef();
+    const ref = useRef();
     if (!ref.current) {
@@ -24,0 +24,0 @@ ref.current = createState(null);

dist/es2015/WithObservable.d.ts

@@ -1,8 +0,8 @@
-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>>;
 /**
@@ -9,0 +9,0 @@ * @deprecated Use the useObservable hook instead

dist/esm/reactiveComponent.d.ts

@@ -1,8 +0,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 {};

dist/esm/reactiveComponent.js

@@ -1,8 +0,8 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
 import { useAsObservable } from './useAsObservable';
 import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
     };
@@ -14,3 +14,3 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
@@ -24,4 +24,4 @@ }
 export function forwardRef(component) {
-    var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
+    var wrappedComponent = reactForwardRef(function (props, ref) {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));
     });
@@ -28,0 +28,0 @@ wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');

dist/esm/useAsObservable.d.ts

@@ -9,1 +9,2 @@ import { Observable } from 'rxjs';
 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>;

dist/esm/useAsObservable.js

 import { BehaviorSubject } from 'rxjs';
-import * as React from '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
- */
-export function useAsObservable(value) {
-    var isInitial = React.useRef(true);
-    var subjectRef = React.useRef(new BehaviorSubject(value));
-    var observableRef = React.useRef();
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    var isInitial = useRef(true);
+    var subjectRef = useRef(new BehaviorSubject(value));
+    var observableRef = useRef();
     if (!observableRef.current) {
-        observableRef.current = subjectRef.current.asObservable();
+        var observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
     }
-    React.useEffect(function () {
+    useIsomorphicEffect(function () {
         if (isInitial.current) {
@@ -25,3 +21,3 @@ isInitial.current = false;
     }, [value]);
-    React.useEffect(function () {
+    useIsomorphicEffect(function () {
         return function () {
@@ -28,0 +24,0 @@ return subjectRef.current.complete();

dist/esm/useObservable.d.ts

@@ -1,7 +0,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): Observable<T | undefined>;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): Observable<T>;

dist/esm/useObservable.js

@@ -1,2 +0,3 @@
-import * as React from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
@@ -6,5 +7,5 @@ return typeof value === 'function' ? value() : value;
 export function useObservable(observable, initialValue) {
-    var subscription = React.useRef();
-    var isInitial = React.useRef(true);
-    var _a = React.useState(function () {
+    var subscription = useRef();
+    var isInitial = useRef(true);
+    var _a = useState(function () {
         var isSync = true;
@@ -23,4 +24,4 @@ var syncVal = getValue(initialValue);
     }), value = _a[0], setState = _a[1];
-    React.useEffect(function () {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(function () {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
@@ -40,3 +41,3 @@ subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }

dist/esm/utils.d.ts

 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];

dist/esm/utils.js

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

dist/esm/WithObservable.d.ts

@@ -1,8 +0,8 @@
-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>>;
 /**
@@ -9,0 +9,0 @@ * @deprecated Use the useObservable hook instead

package.json

 {
   "name": "react-rx",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "React + RxJS = <3",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

src/reactiveComponent.ts

@@ -1,2 +0,1 @@
-import * as React from 'react'
 import {Observable} from 'rxjs'
@@ -6,11 +5,20 @@ import {wrapDisplayName} from './displayName'
 import {useObservable} from './useObservable'
+import {
+  createElement,
+  Fragment,
+  FunctionComponent,
+  ReactNode,
+  Ref,
+  useRef,
+  forwardRef as reactForwardRef,
+} from 'react'
 
-type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>
 
-function fromComponent<Props>(component: Component<Props>): React.FunctionComponent<Props> {
+function fromComponent<Props>(component: Component<Props>): FunctionComponent<Props> {
   const wrappedComponent = (props: Props) => {
-    return React.createElement(
-      React.Fragment,
+    return createElement(
+      Fragment,
       null,
-      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props))).current),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props))).current),
     )
@@ -22,13 +30,11 @@ }
 
-function fromObservable<Props>(input$: Observable<Props>): React.FunctionComponent<{}> {
+function fromObservable<Props>(input$: Observable<Props>): FunctionComponent<{}> {
   return function ReactiveComponent() {
-    return React.createElement(React.Fragment, null, useObservable<React.ReactNode>(input$))
+    return createElement(Fragment, null, useObservable<ReactNode>(input$))
   }
 }
 
-export function reactiveComponent<Props>(observable: Observable<Props>): React.FunctionComponent<{}>
+export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>
+export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(
-  component: Component<Props>,
-): React.FunctionComponent<Props>
-export function reactiveComponent<Props>(
   observableOrComponent: Observable<Props> | Component<Props>,
@@ -43,11 +49,11 @@ ) {
   input$: Observable<Props>,
-  ref: React.Ref<RefType>,
-) => Observable<React.ReactNode>
+  ref: Ref<RefType>,
+) => Observable<ReactNode>
 
 export function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>) {
-  const wrappedComponent = React.forwardRef((props: Props, ref: React.Ref<RefType>) => {
-    return React.createElement(
-      React.Fragment,
+  const wrappedComponent = reactForwardRef((props: Props, ref: Ref<RefType>) => {
+    return createElement(
+      Fragment,
       null,
-      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props), ref)).current),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props), ref)).current),
     )
@@ -54,0 +60,0 @@ })

src/useAsObservable.ts

 import {BehaviorSubject, Observable, Subject} from 'rxjs'
-import * as React from 'react'
+import {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
@@ -10,11 +11,20 @@ /**
  */
-export function useAsObservable<T>(value: T): Observable<T> {
-  const isInitial = React.useRef(true)
-  const subjectRef = React.useRef<Subject<T>>(new BehaviorSubject(value))
-  const observableRef = React.useRef<Observable<T>>()
+export function useAsObservable<T>(value: T): Observable<T>
+export function useAsObservable<T, K>(
+  value: T,
+  operator: (input: Observable<T>) => Observable<K>,
+): Observable<K>
+export function useAsObservable<T, K = T>(
+  value: T,
+  operator?: (input: Observable<T>) => Observable<K>,
+): Observable<T | K> {
+  const isInitial = useRef(true)
+  const subjectRef = useRef<Subject<T>>(new BehaviorSubject(value))
+  const observableRef = useRef<Observable<T | K>>()
   if (!observableRef.current) {
-    observableRef.current = subjectRef.current.asObservable()
+    const observable = subjectRef.current.asObservable()
+    observableRef.current = operator ? observable.pipe(operator) : observable
   }
 
-  React.useEffect(() => {
+  useIsomorphicEffect(() => {
     if (isInitial.current) {
@@ -27,3 +37,3 @@ isInitial.current = false
   }, [value])
-  React.useEffect(() => {
+  useIsomorphicEffect(() => {
     return () => {
@@ -30,0 +40,0 @@ return subjectRef.current.complete()

src/useObservable.ts

@@ -1,3 +0,4 @@
-import * as React from 'react'
 import {Observable, Subscription} from 'rxjs'
+import {DependencyList, useMemo, useRef, useState} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
@@ -8,12 +9,9 @@ function getValue<T>(value: T): T extends () => infer U ? U : T {
 
-export function useObservable<T>(observable$: Observable<T>): T | undefined
-export function useObservable<T>(observable$: Observable<T>, initialValue: T): T
-export function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T
-export function useObservable<T>(
-  observable: Observable<T>,
-  initialValue?: T | (() => T),
-) {
-  const subscription = React.useRef<Subscription>()
-  const isInitial = React.useRef(true)
-  const [value, setState] = React.useState(() => {
+export function useObservable<T>(observable: Observable<T>): T | undefined
+export function useObservable<T>(observable: Observable<T>, initialValue: T): T
+export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
+export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
+  const subscription = useRef<Subscription>()
+  const isInitial = useRef(true)
+  const [value, setState] = useState(() => {
     let isSync = true
@@ -32,4 +30,4 @@ let syncVal = getValue(initialValue)
 
-  React.useEffect(() => {
-    // when the observable$ changes after initial (possibly sync render)
+  useIsomorphicEffect(() => {
+    // when the observable changes after initial (possibly sync render)
     if (!isInitial.current) {
@@ -52,7 +50,7 @@ subscription.current = observable.subscribe(nextVal => setState(nextVal))
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
+  deps: DependencyList,
 ): Observable<T | undefined>
 export function useMemoObservable<T>(
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
+  deps: DependencyList,
   initialValue: T | (() => T),
@@ -62,9 +60,9 @@ ): Observable<T>
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
+  deps: DependencyList,
   initialValue?: T | (() => T),
 ) {
   return useObservable(
-    React.useMemo(() => getValue(observableOrFactory), deps),
+    useMemo(() => getValue(observableOrFactory), deps),
     initialValue,
   )
 }

src/utils.ts

 import {Observable, OperatorFunction} from 'rxjs'
-import * as React from 'react'
 import {useAsObservable} from './useAsObservable'
 import {observableCallback} from 'observable-callback'
 import {startWith} from 'rxjs/operators'
+import {Dispatch, SetStateAction, useContext, useRef, useState, Context} from 'react'
 
@@ -11,7 +11,7 @@ const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
   initial: T | (() => T),
-): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
+): [Observable<T>, Dispatch<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)
+): [Observable<T | undefined>, Dispatch<SetStateAction<T | undefined>>] {
+  const [value, update] = useState<T | undefined>(initial)
   return [useAsObservable(value), update]
@@ -27,3 +27,3 @@ }
 ): [Observable<T | K>, (arg: T) => void] {
-  const ref = React.useRef<[Observable<T | K>, (arg: T) => void]>()
+  const ref = useRef<[Observable<T | K>, (arg: T) => void]>()
   if (!ref.current) {
@@ -35,8 +35,8 @@ ref.current = operator ? observableCallback<T, K>(operator) : observableCallback<T>()
 
-export function observeContext<T>(context: React.Context<T>): Observable<T> {
-  return useAsObservable(React.useContext<T>(context))
+export function observeContext<T>(context: Context<T>): Observable<T> {
+  return useAsObservable(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]>()
+  const ref = useRef<[Observable<T | null>, (value: T | null) => void]>()
   if (!ref.current) {
@@ -43,0 +43,0 @@ ref.current = createState<T | null>(null)

website/package.json

@@ -47,3 +47,3 @@ {
     "react-dom": "^17.0.1",
-    "react-rx": "1.0.0-beta.3",
+    "react-rx": "1.0.0-beta.4",
     "remark-emoji": "^2.1.0",
@@ -50,0 +50,0 @@ "rimraf": "^3.0.2",

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

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

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

Improved metrics

Total package byte prevSize

194715

increased by2.99%

Number of package files

201

increased by11.67%

Lines of code

4328

increased by2.83%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes