rxjs-hooks - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

dist/cjs/use-event-callback.d.ts

 import { Observable, BehaviorSubject } from 'rxjs';
 import { RestrictArray, Not } from './type';
-declare type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N;
-declare type IsAny<T> = IfAny<T, true, false>;
-declare type IsVoid<T> = IsAny<T> extends true ? false : [T] extends [void] ? true : false;
-declare type VoidableCallback<EventValue> = IsVoid<EventValue> extends true ? () => void : (val: EventValue) => void;
-export declare type EventCallbackState<EventValue, State, Inputs = void> = [VoidableCallback<EventValue>, [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]];
+export declare type EventCallbackState<EventValue, State, Inputs = void> = [(e: EventValue) => void, [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]];
 export declare type ReturnedState<EventValue, State, Inputs> = [EventCallbackState<EventValue, State, Inputs>[0], EventCallbackState<EventValue, State, Inputs>[1][0]];
@@ -13,2 +9,1 @@ export declare type EventCallback<EventValue, State, Inputs> = Not<Inputs extends void ? true : false, (eventSource$: Observable<EventValue>, inputs$: Observable<RestrictArray<Inputs>>, state$: Observable<State>) => Observable<State>, (eventSource$: Observable<EventValue>, state$: Observable<State>) => Observable<State>>;
 export declare function useEventCallback<EventValue, State, Inputs>(callback: EventCallback<EventValue, State, Inputs>, initialState: State, inputs: RestrictArray<Inputs>): ReturnedState<EventValue, State, Inputs>;
-export {};

dist/cjs/use-event-callback.js

@@ -11,3 +11,7 @@ "use strict";
     var _a = tslib_1.__read(react_1.useState(initialValue), 2), state = _a[0], setState = _a[1];
-    var _b = tslib_1.__read(react_1.useState(function () { return rxjs_1.noop; }), 2), returnedCallback = _b[0], setEventCallback = _b[1];
+    var _b = tslib_1.__read(react_1.useState(new rxjs_1.Subject()), 1), event$ = _b[0];
+    function eventCallback(e) {
+        return event$.next(e);
+    }
+    var returnedCallback = react_1.useCallback(eventCallback, []);
     var _c = tslib_1.__read(react_1.useState(stateSubject$), 1), state$ = _c[0];
@@ -19,8 +23,3 @@ var _d = tslib_1.__read(react_1.useState(inputSubject$), 1), inputs$ = _d[0];
     react_1.useEffect(function () {
-        var event$ = new rxjs_1.Subject();
-        function eventCallback(e) {
-            return event$.next(e);
-        }
         setState(initialValue);
-        setEventCallback(function () { return eventCallback; });
         var value$;
@@ -27,0 +26,0 @@ if (!inputs) {

dist/esm/use-event-callback.d.ts

 import { Observable, BehaviorSubject } from 'rxjs';
 import { RestrictArray, Not } from './type';
-declare type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N;
-declare type IsAny<T> = IfAny<T, true, false>;
-declare type IsVoid<T> = IsAny<T> extends true ? false : [T] extends [void] ? true : false;
-declare type VoidableCallback<EventValue> = IsVoid<EventValue> extends true ? () => void : (val: EventValue) => void;
-export declare type EventCallbackState<EventValue, State, Inputs = void> = [VoidableCallback<EventValue>, [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]];
+export declare type EventCallbackState<EventValue, State, Inputs = void> = [(e: EventValue) => void, [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]];
 export declare type ReturnedState<EventValue, State, Inputs> = [EventCallbackState<EventValue, State, Inputs>[0], EventCallbackState<EventValue, State, Inputs>[1][0]];
@@ -13,2 +9,1 @@ export declare type EventCallback<EventValue, State, Inputs> = Not<Inputs extends void ? true : false, (eventSource$: Observable<EventValue>, inputs$: Observable<RestrictArray<Inputs>>, state$: Observable<State>) => Observable<State>, (eventSource$: Observable<EventValue>, state$: Observable<State>) => Observable<State>>;
 export declare function useEventCallback<EventValue, State, Inputs>(callback: EventCallback<EventValue, State, Inputs>, initialState: State, inputs: RestrictArray<Inputs>): ReturnedState<EventValue, State, Inputs>;
-export {};

dist/esm/use-event-callback.js

 import * as tslib_1 from "tslib";
-import { useEffect, useState } from 'react';
-import { BehaviorSubject, Subject, noop } from 'rxjs';
+import { useEffect, useState, useCallback } from 'react';
+import { BehaviorSubject, Subject } from 'rxjs';
 export function useEventCallback(callback, initialState, inputs) {
@@ -9,3 +9,7 @@ var initialValue = (typeof initialState !== 'undefined' ? initialState : null);
     var _a = tslib_1.__read(useState(initialValue), 2), state = _a[0], setState = _a[1];
-    var _b = tslib_1.__read(useState(function () { return noop; }), 2), returnedCallback = _b[0], setEventCallback = _b[1];
+    var _b = tslib_1.__read(useState(new Subject()), 1), event$ = _b[0];
+    function eventCallback(e) {
+        return event$.next(e);
+    }
+    var returnedCallback = useCallback(eventCallback, []);
     var _c = tslib_1.__read(useState(stateSubject$), 1), state$ = _c[0];
@@ -17,8 +21,3 @@ var _d = tslib_1.__read(useState(inputSubject$), 1), inputs$ = _d[0];
     useEffect(function () {
-        var event$ = new Subject();
-        function eventCallback(e) {
-            return event$.next(e);
-        }
         setState(initialValue);
-        setEventCallback(function () { return eventCallback; });
         var value$;
@@ -25,0 +24,0 @@ if (!inputs) {

package.json

 {
   "name": "rxjs-hooks",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "React hooks for RxJS",
@@ -24,27 +24,27 @@ "module": "dist/esm/index.js",
   "devDependencies": {
-    "@types/jest": "^24.0.6",
-    "@types/lodash": "^4.14.121",
-    "@types/react-dom": "^16.8.2",
+    "@types/jest": "^24.0.13",
+    "@types/lodash": "^4.14.133",
+    "@types/react-dom": "^16.8.4",
     "@types/react-test-renderer": "^16.8.1",
-    "@types/sinon": "^7.0.6",
+    "@types/sinon": "^7.0.12",
     "@types/sinon-chai": "^3.2.2",
-    "@types/webpack": "^4.4.24",
+    "@types/webpack": "^4.4.32",
     "coveralls": "^3.0.3",
-    "fork-ts-checker-webpack-plugin": "^1.0.0",
+    "fork-ts-checker-webpack-plugin": "^1.3.4",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.3.1",
-    "jest": "^24.1.0",
-    "lint-staged": "^8.1.4",
-    "prettier": "^1.16.4",
+    "husky": "^2.3.0",
+    "jest": "^24.8.0",
+    "lint-staged": "^8.1.7",
+    "prettier": "^1.17.1",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-test-renderer": "16.8.6",
-    "rxjs": "^6.4.0",
-    "sinon": "^7.2.4",
+    "rxjs": "^6.5.2",
+    "sinon": "^7.3.2",
     "source-map-loader": "^0.2.4",
     "standard": "^12.0.1",
-    "ts-jest": "^24.0.0",
-    "ts-loader": "^5.3.3",
-    "tslint": "^5.13.0",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.2",
+    "tslint": "^5.17.0",
     "tslint-config-prettier": "^1.18.0",
@@ -54,6 +54,6 @@ "tslint-eslint-rules": "^5.4.0",
     "tslint-sonarts": "^1.9.0",
-    "typescript": "^3.3.3",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1"
+    "typescript": "^3.5.1",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.5.0"
   },
@@ -60,0 +60,0 @@ "dependencies": {

README.md

@@ -377,1 +377,56 @@ # React hooks for RxJS
 ```
+
+**Example of combining callback observables coming from separate elements - animation with start/stop button and rate controllable via slider**
+
+[live demo](https://codesandbox.io/s/pprzmxy230)
+
+```tsx
+const Animation = ({ frame }) => {
+  const frames = "|/-\\|/-\\|".split("");
+  return (
+    <div>
+      <p>{frames[frame % frames.length]}</p>
+    </div>
+  );
+};
+
+
+const App = () => {
+  const defaultRate = 5;
+
+  const [running, setRunning] = useState(false);
+
+  const [onEvent, frame] = useEventCallback(events$ => {
+    const running$ = events$.pipe(
+      filter(e => e.type === "click"),
+      scan(running => !running, running),
+      startWith(running),
+      tap(setRunning)
+    );
+
+    return events$.pipe(
+      filter(e => e.type === "change"),
+      map(e => parseInt(e.target.value, 10)),
+      startWith(defaultRate),
+      switchMap(i => timer(200, 1000 / i)),
+      withLatestFrom(running$),
+      filter(([_, running]) => running),
+      scan(frame => frame + 1, 0)
+    );
+  });
+
+  return (
+    <div className="App">
+      <button onClick={onEvent}>{running ? "Stop" : "Start"}</button>
+      <input
+        type="range"
+        onChange={onEvent}
+        defaultValue={defaultRate}
+        min="1"
+        max="10"
+      ></input>
+      <Animation frame={frame} />
+    </div>
+  );
+};
+```

src/use-event-callback.ts

@@ -1,17 +0,8 @@
-import { useEffect, useState } from 'react'
-import { Observable, BehaviorSubject, Subject, noop } from 'rxjs'
+import { useEffect, useState, useCallback } from 'react'
+import { Observable, BehaviorSubject, Subject } from 'rxjs'
 
 import { RestrictArray, VoidAsNull, Not } from './type'
 
-// https://stackoverflow.com/questions/55541275/typescript-check-for-the-any-type
-type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N
-
-type IsAny<T> = IfAny<T, true, false>
-
-type IsVoid<T> = IsAny<T> extends true ? false : [T] extends [void] ? true : false
-
-type VoidableCallback<EventValue> = IsVoid<EventValue> extends true ? () => void : (val: EventValue) => void
-
 export type EventCallbackState<EventValue, State, Inputs = void> = [
-  VoidableCallback<EventValue>,
+  (e: EventValue) => void,
   [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]
@@ -56,5 +47,7 @@ ]
   const [state, setState] = useState(initialValue)
-  const [returnedCallback, setEventCallback] = useState<VoidableCallback<EventValue>>(
-    () => noop as VoidableCallback<EventValue>,
-  )
+  const [event$] = useState(new Subject<EventValue>())
+  function eventCallback(e: EventValue) {
+    return event$.next(e)
+  }
+  const returnedCallback = useCallback(eventCallback, [])
   const [state$] = useState(stateSubject$)
@@ -68,8 +61,3 @@ const [inputs$] = useState(inputSubject$)
   useEffect(() => {
-    const event$ = new Subject<EventValue>()
-    function eventCallback(e: EventValue) {
-      return event$.next(e)
-    }
     setState(initialValue)
-    setEventCallback(() => eventCallback as VoidableCallback<EventValue>)
     let value$: Observable<State>
@@ -76,0 +64,0 @@

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

Improved metrics

Number of lines in readme file

432

increased by14.59%

Worsened metrics

Total package byte prevSize

114687

decreased by-72.39%

Number of package files

60

decreased by-1.64%

Lines of code

1491

decreased by-1.32%

No dependency changes