@proscom/prostore-react - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

lib/es/useObservable.d.ts

 import { Observable } from 'rxjs';
 import { ObservableWithValue } from "@proscom/prostore";
 /**
- * Subscribe to Observable
+ * Subscribe to Observable reactively.
+ * Whenever callback changes, the observable is resubscribed to, which
+ * may lead to additional callback calls with the same value, because
+ * some observable types call the subscriber immediately when subscription occurs.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param setState - callback to which the observable value is passed
  */
-export declare function useObservable<State = any>(obs$: Observable<State> | null | undefined, setState: (state: State) => any): void;
+export declare function useObservable<State = any>(obs$: Observable<State> | null | undefined, setState: (state: State) => void): void;
+/**
+ * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
+ */
 export declare function useObservableState<State = any>(obs$: Observable<State> | null | undefined, initialState: State): State;
+/**
+ * Subscribe to Observable with useState included.
+ * Until the subscriber is called, the state value is null (on the first render).
+ *
+ * @param obs$ - observable to subscribe to
+ */
 export declare function useObservableState<State = any>(obs$: Observable<State> | null | undefined): State | null;
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export declare function useSubject<State = any>(sub$: ObservableWithValue<State>): State;
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export declare function useSubject<State = any>(sub$: ObservableWithValue<State> | null | undefined): State | null;
+/**
+ * Subscribe to observable imperatively.
+ * In contrast to simple useObservable, in this hook the observable is not
+ * resubscribed to whenever the callback changes. This is more suitable
+ * for subscribing to events instead of values.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param callback - callback which is called whenever the observable changes
+ */
+export declare function useObservableCallback<State = any>(obs$: Observable<State> | null | undefined, callback: (state: State) => void): void;

lib/es/useObservable.js

 import { useEffect, useState } from 'react';
+import { useLatestCallbackRef } from "@proscom/ui-react";
 /**
- * Subscribe to Observable
+ * Subscribe to Observable reactively.
+ * Whenever callback changes, the observable is resubscribed to, which
+ * may lead to additional callback calls with the same value, because
+ * some observable types call the subscriber immediately when subscription occurs.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param setState - callback to which the observable value is passed
  */
@@ -20,2 +27,5 @@ export function useObservable(obs$, setState) {
  * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
  */
@@ -29,3 +39,5 @@ export function useObservableState(obs$, initialState) {
 /**
- * Subscribe to BehaviorSubject
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
  */
@@ -36,2 +48,15 @@ export function useSubject(sub$) {
 }
+/**
+ * Subscribe to observable imperatively.
+ * In contrast to simple useObservable, in this hook the observable is not
+ * resubscribed to whenever the callback changes. This is more suitable
+ * for subscribing to events instead of values.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param callback - callback which is called whenever the observable changes
+ */
+export function useObservableCallback(obs$, callback) {
+    var callbackRef = useLatestCallbackRef(callback);
+    useObservable(obs$, callbackRef);
+}
 //# sourceMappingURL=useObservable.js.map

lib/useObservable.d.ts

 import { Observable } from 'rxjs';
 import { ObservableWithValue } from "@proscom/prostore";
 /**
- * Subscribe to Observable
+ * Subscribe to Observable reactively.
+ * Whenever callback changes, the observable is resubscribed to, which
+ * may lead to additional callback calls with the same value, because
+ * some observable types call the subscriber immediately when subscription occurs.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param setState - callback to which the observable value is passed
  */
-export declare function useObservable<State = any>(obs$: Observable<State> | null | undefined, setState: (state: State) => any): void;
+export declare function useObservable<State = any>(obs$: Observable<State> | null | undefined, setState: (state: State) => void): void;
+/**
+ * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
+ */
 export declare function useObservableState<State = any>(obs$: Observable<State> | null | undefined, initialState: State): State;
+/**
+ * Subscribe to Observable with useState included.
+ * Until the subscriber is called, the state value is null (on the first render).
+ *
+ * @param obs$ - observable to subscribe to
+ */
 export declare function useObservableState<State = any>(obs$: Observable<State> | null | undefined): State | null;
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export declare function useSubject<State = any>(sub$: ObservableWithValue<State>): State;
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export declare function useSubject<State = any>(sub$: ObservableWithValue<State> | null | undefined): State | null;
+/**
+ * Subscribe to observable imperatively.
+ * In contrast to simple useObservable, in this hook the observable is not
+ * resubscribed to whenever the callback changes. This is more suitable
+ * for subscribing to events instead of values.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param callback - callback which is called whenever the observable changes
+ */
+export declare function useObservableCallback<State = any>(obs$: Observable<State> | null | undefined, callback: (state: State) => void): void;

lib/useObservable.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubject = exports.useObservableState = exports.useObservable = void 0;
+exports.useObservableCallback = exports.useSubject = exports.useObservableState = exports.useObservable = void 0;
 var react_1 = require("react");
+var ui_react_1 = require("@proscom/ui-react");
 /**
- * Subscribe to Observable
+ * Subscribe to Observable reactively.
+ * Whenever callback changes, the observable is resubscribed to, which
+ * may lead to additional callback calls with the same value, because
+ * some observable types call the subscriber immediately when subscription occurs.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param setState - callback to which the observable value is passed
  */
@@ -24,2 +31,5 @@ function useObservable(obs$, setState) {
  * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
  */
@@ -34,3 +44,5 @@ function useObservableState(obs$, initialState) {
 /**
- * Subscribe to BehaviorSubject
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
  */
@@ -42,2 +54,16 @@ function useSubject(sub$) {
 exports.useSubject = useSubject;
+/**
+ * Subscribe to observable imperatively.
+ * In contrast to simple useObservable, in this hook the observable is not
+ * resubscribed to whenever the callback changes. This is more suitable
+ * for subscribing to events instead of values.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param callback - callback which is called whenever the observable changes
+ */
+function useObservableCallback(obs$, callback) {
+    var callbackRef = ui_react_1.useLatestCallbackRef(callback);
+    useObservable(obs$, callbackRef);
+}
+exports.useObservableCallback = useObservableCallback;
 //# sourceMappingURL=useObservable.js.map

package.json

 {
   "name": "@proscom/prostore-react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Prostore hooks and utils for React",
@@ -29,4 +29,4 @@ "author": "Andrew Starostin <[e-mail]>",
   "dependencies": {
-    "@proscom/prostore": "^0.2.2",
-    "@proscom/ui-react": "<0.1",
+    "@proscom/prostore": "^0.2.4",
+    "@proscom/ui-react": "<0.2",
     "shallowequal": "^1.1.0",
@@ -44,3 +44,3 @@ "tslib": "^2.0.3"
   "sideEffects": false,
-  "gitHead": "c094e2acbea9fd8fc6160a1c87e72626d5d322f8"
+  "gitHead": "ce19c247d0400cab79c7de80235460c09a764f5a"
 }

README.md

@@ -417,1 +417,82 @@ # `prostore-react`
 [См. пример в CodeSandbox](https://codesandbox.io/s/prostore-react-demo-props-observable-d05ot?file=/src/App.tsx)
+
+### `useObservable`
+
+Этот хук позволяет подписать колбек на произвольный обзервабл.
+
+```tsx
+import { useObservable } from '@proscom/prostore-react';
+import { fromEvent } from 'rxjs';
+
+const resize$ = fromEvent(window, 'resize');
+
+function MyComponent() {
+  const handleChange = useCallback((value) => {
+    console.log('changed', value);
+  });
+  useObservable(resize$, handleChange);
+
+  // ...
+}
+```
+
+### `useObservableCallback`
+
+Этот хук позволяет подписаться на произвольный обзервабл, но не выполняет переподписку
+при изменении колбека. Поэтому пример выше может быть переписан следующим образом:
+
+```tsx
+import { useObservableCallback } from '@proscom/prostore-react';
+import { fromEvent } from 'rxjs';
+
+const resize$ = fromEvent(window, 'resize');
+
+function MyComponent() {
+  useObservableCallback(resize$, (value) => {
+    console.log('changed', value);
+  });
+
+  // ...
+}
+```
+
+Этот хук полезен при создании подписки на события сторов, а не на их состояния.
+См. пример в документации [`prostore`](https://gitlab.com/proscom/prostore/-/tree/master/packages/prostore).
+
+### `useObservableState`
+
+Этот хук позволяет подписать компонент на произвольный обзервабл.
+При наступлении события (изменении обзервабла), его данные будут сохранены в стейт компонента,
+а компонент перерендерится.
+
+```tsx
+import { useObservableState } from '@proscom/prostore-react';
+import { fromEvent } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+const windowSize$ = fromEvent(window, 'resize').pipe(
+  map(() => window.innerWidth)
+);
+
+function MyComponent() {
+  const windowWidth = useObservableState(windowSize$, window.innerWidth);
+  // ...
+}
+```
+
+### `useSubject`
+
+Этот хук аналогичен `useObservableState`, только принимает не просто `Observable`,
+а кастомный тип `ObservableWithValue`, и автоматически задает первоначальное значение стейта компонента.
+
+```tsx
+import { useSubject } from '@proscom/prostore-react';
+import { BehaviorSubject } from 'rxjs';
+
+const data$ = new BehaviorSubject(5);
+
+function MyComponent() {
+  const data = useSubject(data$);
+  // ...
+}
+```

src/useObservable.ts

 import { Observable } from 'rxjs';
 import { useEffect, useState } from 'react';
 import { ObservableWithValue } from "@proscom/prostore";
+import { useLatestCallbackRef } from "@proscom/ui-react";
 
 /**
- * Subscribe to Observable
+ * Subscribe to Observable reactively.
+ * Whenever callback changes, the observable is resubscribed to, which
+ * may lead to additional callback calls with the same value, because
+ * some observable types call the subscriber immediately when subscription occurs.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param setState - callback to which the observable value is passed
  */
 export function useObservable<State = any>(
   obs$: Observable<State>|null|undefined,
-  setState: (state: State) => any
+  setState: (state: State) => void
 ) {
@@ -25,2 +32,8 @@ useEffect(() => {
 
+/**
+ * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
+ */
 export function useObservableState<State = any>(
@@ -30,2 +43,8 @@ obs$: Observable<State>|null|undefined,
 ): State;
+/**
+ * Subscribe to Observable with useState included.
+ * Until the subscriber is called, the state value is null (on the first render).
+ *
+ * @param obs$ - observable to subscribe to
+ */
 export function useObservableState<State = any>(
@@ -36,2 +55,5 @@ obs$: Observable<State>|null|undefined
  * Subscribe to Observable with useState included
+ *
+ * @param obs$ - observable to subscribe to
+ * @param initialState - initial value for the embedded state
  */
@@ -47,6 +69,18 @@ export function useObservableState<State = any>(
 
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export function useSubject<State = any>(sub$: ObservableWithValue<State>): State;
+/**
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
+ */
 export function useSubject<State = any>(sub$: ObservableWithValue<State>|null|undefined): State|null;
 /**
- * Subscribe to BehaviorSubject
+ * Subscribe to observable with value
+ *
+ * @param sub$ - observable with value to subscribe to
  */
@@ -56,1 +90,15 @@ export function useSubject<State = any>(sub$: ObservableWithValue<State>|null|undefined) {
 }
+
+/**
+ * Subscribe to observable imperatively.
+ * In contrast to simple useObservable, in this hook the observable is not
+ * resubscribed to whenever the callback changes. This is more suitable
+ * for subscribing to events instead of values.
+ *
+ * @param obs$ - observable to subscribe to
+ * @param callback - callback which is called whenever the observable changes
+ */
+export function useObservableCallback<State = any>(obs$: Observable<State>|null|undefined, callback: (state: State) => void) {
+  const callbackRef = useLatestCallbackRef(callback);
+  useObservable(obs$, callbackRef);
+}

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

124303

increased by8.78%

Lines of code

1996

increased by9.55%

Number of lines in readme file

498

increased by19.42%

Dependency changes

• + Added@proscom/ui-react@0.1.18(transitive)

• - Removed@proscom/ui-react@0.0.7(transitive)

• - Removed@proscom/ui-utils@0.0.7(transitive)

• - Removedlodash-es@4.17.21(transitive)

• Updated@proscom/prostore@^0.2.4

• Updated@proscom/ui-react@<0.2