rxjs-hooks - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

dist/cjs/__test__/use-observable.spec.js

@@ -123,3 +123,3 @@ "use strict";
         expect(find_1.find(testRenderer.root, 'div').children).toEqual([]);
-        var newProps = tslib_1.__assign({}, props, { bar: 'new bar' });
+        var newProps = tslib_1.__assign(tslib_1.__assign({}, props), { bar: 'new bar' });
         react_test_renderer_1.act(function () { return testRenderer.update(react_1.default.createElement(Fixture, tslib_1.__assign({}, newProps))); });
@@ -133,3 +133,3 @@ // wait useEffect fired
         expect(find_1.find(testRenderer.root, 'div').children).toEqual(["" + newProps.baz.foo]);
-        var renewProps = tslib_1.__assign({}, props, { foo: 1000 });
+        var renewProps = tslib_1.__assign(tslib_1.__assign({}, props), { foo: 1000 });
         react_test_renderer_1.act(function () { return testRenderer.update(react_1.default.createElement(Fixture, tslib_1.__assign({}, renewProps))); });
@@ -136,0 +136,0 @@ timer.tick(timeToDelay);

dist/cjs/use-event-callback.js

@@ -5,9 +5,10 @@ "use strict";
 var react_1 = require("react");
+var use_constant_1 = tslib_1.__importDefault(require("use-constant"));
 var rxjs_1 = require("rxjs");
 function useEventCallback(callback, initialState, inputs) {
     var initialValue = (typeof initialState !== 'undefined' ? initialState : null);
-    var inputSubject$ = new rxjs_1.BehaviorSubject(typeof inputs === 'undefined' ? null : inputs);
-    var stateSubject$ = new rxjs_1.BehaviorSubject(initialValue);
     var _a = tslib_1.__read(react_1.useState(initialValue), 2), state = _a[0], setState = _a[1];
-    var _b = tslib_1.__read(react_1.useState(new rxjs_1.Subject()), 1), event$ = _b[0];
+    var event$ = use_constant_1.default(function () { return new rxjs_1.Subject(); });
+    var state$ = use_constant_1.default(function () { return new rxjs_1.BehaviorSubject(initialValue); });
+    var inputs$ = use_constant_1.default(function () { return new rxjs_1.BehaviorSubject(typeof inputs === 'undefined' ? null : inputs); });
     function eventCallback(e) {
@@ -17,4 +18,2 @@ return event$.next(e);
     var returnedCallback = react_1.useCallback(eventCallback, []);
-    var _c = tslib_1.__read(react_1.useState(stateSubject$), 1), state$ = _c[0];
-    var _d = tslib_1.__read(react_1.useState(inputSubject$), 1), inputs$ = _d[0];
     react_1.useEffect(function () {
@@ -21,0 +20,0 @@ inputs$.next(inputs);

dist/cjs/use-observable.js

@@ -6,12 +6,7 @@ "use strict";
 var react_1 = require("react");
+var use_constant_1 = tslib_1.__importDefault(require("use-constant"));
 function useObservable(inputFactory, initialState, inputs) {
     var _a = tslib_1.__read(react_1.useState(typeof initialState !== 'undefined' ? initialState : null), 2), state = _a[0], setState = _a[1];
-    var _b = react_1.useMemo(function () {
-        var stateSubject$ = new rxjs_1.BehaviorSubject(initialState);
-        var inputSubject$ = new rxjs_1.BehaviorSubject(inputs);
-        return {
-            state$: stateSubject$,
-            inputs$: inputSubject$,
-        };
-    }, []), state$ = _b.state$, inputs$ = _b.inputs$;
+    var state$ = use_constant_1.default(function () { return new rxjs_1.BehaviorSubject(initialState); });
+    var inputs$ = use_constant_1.default(function () { return new rxjs_1.BehaviorSubject(inputs); });
     react_1.useEffect(function () {
@@ -37,3 +32,3 @@ inputs$.next(inputs);
         };
-    }, []);
+    }, []); // immutable forever
     return state;
@@ -40,0 +35,0 @@ }

dist/esm/__test__/use-event-callback.spec.js

@@ -1,2 +0,2 @@
-import * as tslib_1 from "tslib";
+import { __read } from "tslib";
 import React from 'react';
@@ -12,3 +12,3 @@ import { Observable, of } from 'rxjs';
         return function Fixture() {
-            var _a = tslib_1.__read(useEventCallback(factory, initialValue), 2), callback = _a[0], value = _a[1];
+            var _a = __read(useEventCallback(factory, initialValue), 2), callback = _a[0], value = _a[1];
             return (React.createElement(React.Fragment, null,
@@ -79,3 +79,3 @@ React.createElement("h1", null, value),
             return event$.pipe(withLatestFrom(state$), map(function (_a) {
-                var _b = tslib_1.__read(_a, 2), _ = _b[0], state = _b[1];
+                var _b = __read(_a, 2), _ = _b[0], state = _b[1];
                 return state + value;
@@ -85,3 +85,3 @@ }), delay(timeToDelay));
         function Fixture() {
-            var _a = tslib_1.__read(useEventCallback(factory, initialValue), 2), clickCallback = _a[0], stateValue = _a[1];
+            var _a = __read(useEventCallback(factory, initialValue), 2), clickCallback = _a[0], stateValue = _a[1];
             return (React.createElement(React.Fragment, null,
@@ -113,3 +113,3 @@ React.createElement("h1", null, stateValue),
             return event$.pipe(combineLatest(inputs$), map(function (_a) {
-                var _b = tslib_1.__read(_a, 2), _ = _b[0], _c = tslib_1.__read(_b[1], 1), count = _c[0];
+                var _b = __read(_a, 2), _ = _b[0], _c = __read(_b[1], 1), count = _c[0];
                 return value + count;
@@ -119,3 +119,3 @@ }), delay(timeToDelay));
         function Fixture(props) {
-            var _a = tslib_1.__read(useEventCallback(factory, initialValue, [props.count]), 2), clickCallback = _a[0], stateValue = _a[1];
+            var _a = __read(useEventCallback(factory, initialValue, [props.count]), 2), clickCallback = _a[0], stateValue = _a[1];
             return (React.createElement(React.Fragment, null,
@@ -122,0 +122,0 @@ React.createElement("h1", null, stateValue),

dist/esm/__test__/use-observable.spec.js

@@ -1,2 +0,2 @@
-import * as tslib_1 from "tslib";
+import { __assign, __read } from "tslib";
 import React from 'react';
@@ -72,3 +72,3 @@ import { create, act } from 'react-test-renderer';
                 return source$.pipe(withLatestFrom(state$), map(function (_a) {
-                    var _b = tslib_1.__read(_a, 2), intervalValue = _b[0], state = _b[1];
+                    var _b = __read(_a, 2), intervalValue = _b[0], state = _b[1];
                     if (state) {
@@ -118,8 +118,8 @@ return intervalValue + state;
         };
-        var testRenderer = create(React.createElement(Fixture, tslib_1.__assign({}, props)));
+        var testRenderer = create(React.createElement(Fixture, __assign({}, props)));
         expect(spy.callCount).toBe(0);
         expect(find(testRenderer.root, 'h1').children).toEqual([]);
         expect(find(testRenderer.root, 'div').children).toEqual([]);
-        var newProps = tslib_1.__assign({}, props, { bar: 'new bar' });
-        act(function () { return testRenderer.update(React.createElement(Fixture, tslib_1.__assign({}, newProps))); });
+        var newProps = __assign(__assign({}, props), { bar: 'new bar' });
+        act(function () { return testRenderer.update(React.createElement(Fixture, __assign({}, newProps))); });
         // wait useEffect fired
@@ -132,4 +132,4 @@ // https://reactjs.org/docs/hooks-reference.html#timing-of-effects
         expect(find(testRenderer.root, 'div').children).toEqual(["" + newProps.baz.foo]);
-        var renewProps = tslib_1.__assign({}, props, { foo: 1000 });
-        act(function () { return testRenderer.update(React.createElement(Fixture, tslib_1.__assign({}, renewProps))); });
+        var renewProps = __assign(__assign({}, props), { foo: 1000 });
+        act(function () { return testRenderer.update(React.createElement(Fixture, __assign({}, renewProps))); });
         timer.tick(timeToDelay);
@@ -136,0 +136,0 @@ expect(spy.callCount).toBe(2);

dist/esm/use-event-callback.js

@@ -1,10 +0,11 @@
-import * as tslib_1 from "tslib";
+import { __read } from "tslib";
 import { useEffect, useState, useCallback } from 'react';
+import useConstant from 'use-constant';
 import { BehaviorSubject, Subject } from 'rxjs';
 export function useEventCallback(callback, initialState, inputs) {
     var initialValue = (typeof initialState !== 'undefined' ? initialState : null);
-    var inputSubject$ = new BehaviorSubject(typeof inputs === 'undefined' ? null : inputs);
-    var stateSubject$ = new BehaviorSubject(initialValue);
-    var _a = tslib_1.__read(useState(initialValue), 2), state = _a[0], setState = _a[1];
-    var _b = tslib_1.__read(useState(new Subject()), 1), event$ = _b[0];
+    var _a = __read(useState(initialValue), 2), state = _a[0], setState = _a[1];
+    var event$ = useConstant(function () { return new Subject(); });
+    var state$ = useConstant(function () { return new BehaviorSubject(initialValue); });
+    var inputs$ = useConstant(function () { return new BehaviorSubject(typeof inputs === 'undefined' ? null : inputs); });
     function eventCallback(e) {
@@ -14,4 +15,2 @@ return event$.next(e);
     var returnedCallback = useCallback(eventCallback, []);
-    var _c = tslib_1.__read(useState(stateSubject$), 1), state$ = _c[0];
-    var _d = tslib_1.__read(useState(inputSubject$), 1), inputs$ = _d[0];
     useEffect(function () {
@@ -18,0 +17,0 @@ inputs$.next(inputs);

dist/esm/use-observable.js

@@ -1,14 +0,9 @@
-import * as tslib_1 from "tslib";
+import { __read } from "tslib";
 import { BehaviorSubject } from 'rxjs';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
+import useConstant from 'use-constant';
 export function useObservable(inputFactory, initialState, inputs) {
-    var _a = tslib_1.__read(useState(typeof initialState !== 'undefined' ? initialState : null), 2), state = _a[0], setState = _a[1];
-    var _b = useMemo(function () {
-        var stateSubject$ = new BehaviorSubject(initialState);
-        var inputSubject$ = new BehaviorSubject(inputs);
-        return {
-            state$: stateSubject$,
-            inputs$: inputSubject$,
-        };
-    }, []), state$ = _b.state$, inputs$ = _b.inputs$;
+    var _a = __read(useState(typeof initialState !== 'undefined' ? initialState : null), 2), state = _a[0], setState = _a[1];
+    var state$ = useConstant(function () { return new BehaviorSubject(initialState); });
+    var inputs$ = useConstant(function () { return new BehaviorSubject(inputs); });
     useEffect(function () {
@@ -34,5 +29,5 @@ inputs$.next(inputs);
         };
-    }, []);
+    }, []); // immutable forever
     return state;
 }
 //# sourceMappingURL=use-observable.js.map

package.json

 {
   "name": "rxjs-hooks",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "React hooks for RxJS",
@@ -24,38 +24,39 @@ "module": "dist/esm/index.js",
   "devDependencies": {
-    "@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.12",
-    "@types/sinon-chai": "^3.2.2",
-    "@types/webpack": "^4.4.32",
-    "coveralls": "^3.0.3",
-    "fork-ts-checker-webpack-plugin": "^1.3.4",
+    "@types/jest": "^24.0.22",
+    "@types/lodash": "^4.14.144",
+    "@types/react-dom": "^16.9.3",
+    "@types/react-test-renderer": "^16.9.1",
+    "@types/sinon": "^7.5.0",
+    "@types/sinon-chai": "^3.2.3",
+    "@types/webpack": "^4.39.8",
+    "coveralls": "^3.0.7",
+    "fork-ts-checker-webpack-plugin": "^3.0.1",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "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.5.2",
-    "sinon": "^7.3.2",
+    "husky": "^3.0.9",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.4.2",
+    "prettier": "^1.18.2",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-test-renderer": "16.11.0",
+    "rxjs": "^6.5.3",
+    "sinon": "^7.5.0",
     "source-map-loader": "^0.2.4",
-    "standard": "^12.0.1",
-    "ts-jest": "^24.0.2",
-    "ts-loader": "^6.0.2",
-    "tslint": "^5.17.0",
+    "standard": "^14.3.1",
+    "ts-jest": "^24.1.0",
+    "ts-loader": "^6.2.1",
+    "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
-    "tslint-react": "^4.0.0",
+    "tslint-react": "^4.1.0",
     "tslint-sonarts": "^1.9.0",
-    "typescript": "^3.5.1",
-    "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.5.0"
+    "typescript": "^3.7.2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
-    "tslib": "^1.9.3"
+    "tslib": "^1.10.0",
+    "use-constant": "^1.0.0"
   },
@@ -62,0 +63,0 @@ "lint-staged": {

src/use-event-callback.ts

 import { useEffect, useState, useCallback } from 'react'
+import useConstant from 'use-constant'
 import { Observable, BehaviorSubject, Subject } from 'rxjs'
@@ -10,7 +11,7 @@
   VoidableEventCallback<EventValue>,
-  [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]
+  [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>],
 ]
 export type ReturnedState<EventValue, State, Inputs> = [
   EventCallbackState<EventValue, State, Inputs>[0],
-  EventCallbackState<EventValue, State, Inputs>[1][0]
+  EventCallbackState<EventValue, State, Inputs>[1][0],
 ]
@@ -47,6 +48,9 @@
   const initialValue = (typeof initialState !== 'undefined' ? initialState : null) as VoidAsNull<State>
-  const inputSubject$ = new BehaviorSubject<RestrictArray<Inputs> | null>(typeof inputs === 'undefined' ? null : inputs)
-  const stateSubject$ = new BehaviorSubject<State | null>(initialValue)
   const [state, setState] = useState(initialValue)
-  const [event$] = useState(new Subject<EventValue>())
+  const event$ = useConstant(() => new Subject<EventValue>())
+  const state$ = useConstant(() => new BehaviorSubject<State | null>(initialValue))
+  const inputs$ = useConstant(
+    () => new BehaviorSubject<RestrictArray<Inputs> | null>(typeof inputs === 'undefined' ? null : inputs),
+  )
+
   function eventCallback(e: EventValue) {
@@ -56,4 +60,2 @@ return event$.next(e)
   const returnedCallback = useCallback(eventCallback, [])
-  const [state$] = useState(stateSubject$)
-  const [inputs$] = useState(inputSubject$)
 
@@ -60,0 +62,0 @@ useEffect(() => {

src/use-observable.ts

 import { Observable, BehaviorSubject } from 'rxjs'
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect } from 'react'
+import useConstant from 'use-constant'
 
@@ -25,12 +26,5 @@ import { RestrictArray } from './type'
 
-  const { state$, inputs$ } = useMemo(() => {
-    const stateSubject$ = new BehaviorSubject<State | undefined>(initialState)
-    const inputSubject$ = new BehaviorSubject<RestrictArray<Inputs> | undefined>(inputs)
+  const state$ = useConstant(() => new BehaviorSubject<State | undefined>(initialState))
+  const inputs$ = useConstant(() => new BehaviorSubject<RestrictArray<Inputs> | undefined>(inputs))
 
-    return {
-      state$: stateSubject$,
-      inputs$: inputSubject$,
-    }
-  }, [])
-
   useEffect(() => {
@@ -40,29 +34,26 @@ inputs$.next(inputs)
 
-  useEffect(
-    () => {
-      let output$: BehaviorSubject<State>
-      if (inputs) {
-        output$ = (inputFactory as (
-          inputs$: Observable<RestrictArray<Inputs> | undefined>,
-          state$: Observable<State | undefined>,
-        ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
-      } else {
-        output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
-          state$,
-        ) as BehaviorSubject<State>
-      }
-      const subscription = output$.subscribe((value) => {
-        state$.next(value)
-        setState(value)
-      })
-      return () => {
-        subscription.unsubscribe()
-        inputs$.complete()
-        state$.complete()
-      }
-    },
-    [], // immutable forever
-  )
+  useEffect(() => {
+    let output$: BehaviorSubject<State>
+    if (inputs) {
+      output$ = (inputFactory as (
+        inputs$: Observable<RestrictArray<Inputs> | undefined>,
+        state$: Observable<State | undefined>,
+      ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
+    } else {
+      output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
+        state$,
+      ) as BehaviorSubject<State>
+    }
+    const subscription = output$.subscribe((value) => {
+      state$.next(value)
+      setState(value)
+    })
+    return () => {
+      subscription.unsubscribe()
+      inputs$.complete()
+      state$.complete()
+    }
+  }, []) // immutable forever
 
   return state
 }

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

Total package byte prevSize

115236

increased by0.11%

Worsened metrics

Dependency count

2

increased by100%

Lines of code

1475

decreased by-1.27%

Dependency changes

• + Addeduse-constant@^1.0.0

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addeduse-constant@1.1.1(transitive)

• Updatedtslib@^1.10.0