@proscom/prostore-react - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

lib/es/prostore-react.d.ts

@@ -6,1 +6,2 @@ export * from './ProstoreContext';
 export * from './useStore';
+export * from './useObservable';

lib/es/prostore-react.js

@@ -6,2 +6,3 @@ export * from './ProstoreContext';
 export * from './useStore';
+export * from './useObservable';
 //# sourceMappingURL=prostore-react.js.map

lib/es/useConnectStore.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useObservable } from './useObservable';
 /**
@@ -6,11 +6,4 @@ * Подписка на стор, чтобы актуализировать локальную копию
 export function useConnectStore(store, setState) {
-    useEffect(function () {
-        var sub = store.state$.subscribe(function (state) {
-            setState(state);
-        });
-        return function () {
-            sub.unsubscribe();
-        };
-    }, [store, setState]);
+    useObservable(store.state$, setState);
 }
 //# sourceMappingURL=useConnectStore.js.map

lib/es/useRequestStore.js

@@ -55,3 +55,5 @@ var __assign = (this && this.__assign) || function () {
     var loadData = useCallback(function () {
-        return store.loadData(variables, __assign({ ssr: ssrContext && ssrContext.isServer }, options)).then(function () {
+        return store
+            .loadData(variables, __assign({ ssr: ssrContext && ssrContext.isServer }, options))
+            .then(function () {
             store.setContextValue(ssrContext);
@@ -58,0 +60,0 @@ });

lib/es/useStore.d.ts

 import { StoreOrName } from './ProstoreContext';
+import { IStore } from '@proscom/prostore';
 /**
  * Хук, подключающий компонент к стору
  */
-export declare function useStore<State>(storeOrName: StoreOrName<State>): State;
+export declare function useStore<State>(storeOrName: StoreOrName<State>): [State, IStore<State>];
 /**
+ * Хук, подключающий компонент к стору
+ */
+export declare function useStoreState<State>(storeOrName: StoreOrName<State>): State;
+/**
  * Хук, подключащий компонент к стору и возвращающий часть состояния
  */
-export declare function useStoreSelect<State, Derived>(storeOrName: StoreOrName<State>, select: (state: State) => Derived): Derived;
+export declare function useStoreSelect<State, Derived>(storeOrName: StoreOrName<State>, select: (state: State) => Derived): [Derived, IStore<State>];

lib/es/useStore.js

@@ -11,2 +11,11 @@ import { useMemo, useState } from 'react';
     useConnectStore(store, setState);
+    return [state, store];
+}
+/**
+ * Хук, подключающий компонент к стору
+ */
+export function useStoreState(storeOrName) {
+    var store = useContextStore(storeOrName);
+    var _a = useState(store.state), state = _a[0], setState = _a[1];
+    useConnectStore(store, setState);
     return state;
@@ -18,5 +27,6 @@ }
 export function useStoreSelect(storeOrName, select) {
-    var state = useStore(storeOrName);
-    return useMemo(function () { return select(state); }, [select, state]);
+    var _a = useStore(storeOrName), state = _a[0], store = _a[1];
+    var selectedState = useMemo(function () { return select(state); }, [select, state]);
+    return [selectedState, store];
 }
 //# sourceMappingURL=useStore.js.map

lib/prostore-react.d.ts

@@ -6,1 +6,2 @@ export * from './ProstoreContext';
 export * from './useStore';
+export * from './useObservable';

lib/prostore-react.js

@@ -11,2 +11,3 @@ "use strict";
 __export(require("./useStore"));
+__export(require("./useObservable"));
 //# sourceMappingURL=prostore-react.js.map

lib/useConnectStore.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
+var useObservable_1 = require("./useObservable");
 /**
@@ -8,12 +8,5 @@ * Подписка на стор, чтобы актуализировать локальную копию
 function useConnectStore(store, setState) {
-    react_1.useEffect(function () {
-        var sub = store.state$.subscribe(function (state) {
-            setState(state);
-        });
-        return function () {
-            sub.unsubscribe();
-        };
-    }, [store, setState]);
+    useObservable_1.useObservable(store.state$, setState);
 }
 exports.useConnectStore = useConnectStore;
 //# sourceMappingURL=useConnectStore.js.map

lib/useRequestStore.js

@@ -57,3 +57,5 @@ "use strict";
     var loadData = react_1.useCallback(function () {
-        return store.loadData(variables, __assign({ ssr: ssrContext && ssrContext.isServer }, options)).then(function () {
+        return store
+            .loadData(variables, __assign({ ssr: ssrContext && ssrContext.isServer }, options))
+            .then(function () {
             store.setContextValue(ssrContext);
@@ -60,0 +62,0 @@ });

lib/useStore.d.ts

 import { StoreOrName } from './ProstoreContext';
+import { IStore } from '@proscom/prostore';
 /**
  * Хук, подключающий компонент к стору
  */
-export declare function useStore<State>(storeOrName: StoreOrName<State>): State;
+export declare function useStore<State>(storeOrName: StoreOrName<State>): [State, IStore<State>];
 /**
+ * Хук, подключающий компонент к стору
+ */
+export declare function useStoreState<State>(storeOrName: StoreOrName<State>): State;
+/**
  * Хук, подключащий компонент к стору и возвращающий часть состояния
  */
-export declare function useStoreSelect<State, Derived>(storeOrName: StoreOrName<State>, select: (state: State) => Derived): Derived;
+export declare function useStoreSelect<State, Derived>(storeOrName: StoreOrName<State>, select: (state: State) => Derived): [Derived, IStore<State>];

lib/useStore.js

@@ -13,13 +13,24 @@ "use strict";
     useConnectStore_1.useConnectStore(store, setState);
-    return state;
+    return [state, store];
 }
 exports.useStore = useStore;
 /**
+ * Хук, подключающий компонент к стору
+ */
+function useStoreState(storeOrName) {
+    var store = ProstoreContext_1.useContextStore(storeOrName);
+    var _a = react_1.useState(store.state), state = _a[0], setState = _a[1];
+    useConnectStore_1.useConnectStore(store, setState);
+    return state;
+}
+exports.useStoreState = useStoreState;
+/**
  * Хук, подключащий компонент к стору и возвращающий часть состояния
  */
 function useStoreSelect(storeOrName, select) {
-    var state = useStore(storeOrName);
-    return react_1.useMemo(function () { return select(state); }, [select, state]);
+    var _a = useStore(storeOrName), state = _a[0], store = _a[1];
+    var selectedState = react_1.useMemo(function () { return select(state); }, [select, state]);
+    return [selectedState, store];
 }
 exports.useStoreSelect = useStoreSelect;
 //# sourceMappingURL=useStore.js.map

package.json

 {
   "name": "@proscom/prostore-react",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "> TODO: description",
@@ -29,3 +29,3 @@ "author": "Andrew Starostin <[e-mail]>",
   "dependencies": {
-    "@proscom/prostore": "^0.0.12"
+    "@proscom/prostore": "^0.0.13"
   },
@@ -40,3 +40,3 @@ "devDependencies": {
   "sideEffects": false,
-  "gitHead": "8205e91b12ac93b36c5e6b56762defb8f6a0ffa5"
+  "gitHead": "b8b6b42dcb3ac856330ec90e37e1ee937fb67dec"
 }

README.md

@@ -0,0 +0,0 @@ # `prostore-react`

src/prostore-react.ts

@@ -6,1 +6,2 @@ export * from './ProstoreContext';
 export * from './useStore';
+export * from './useObservable';

src/ProstoreContext.ts

 import { useContext, createContext } from 'react';
-import {IStore} from '@proscom/prostore';
+import { IStore } from '@proscom/prostore';
 
 export type IProstoreContext = {
   [name: string]: IStore<any>;
-}
+};
 
@@ -12,3 +12,5 @@ export type StoreOrName<State> = string | IStore<State>;
 
-export function useContextStore<State>(storeOrName: StoreOrName<State>): IStore<State> {
+export function useContextStore<State>(
+  storeOrName: StoreOrName<State>
+): IStore<State> {
   const context = useContext(ProstoreContext);
@@ -19,3 +21,5 @@
     if (!store) {
-      throw new Error(`Store '${ storeOrName }' is not registered in the context`);
+      throw new Error(
+        `Store '${storeOrName}' is not registered in the context`
+      );
     }
@@ -22,0 +26,0 @@ return store;

src/ProstoreSsrContext.ts

 import { createContext } from 'react';
-import {IProstoreSsrContext} from '@proscom/prostore';
+import { IProstoreSsrContext } from '@proscom/prostore';
 
@@ -7,3 +7,3 @@ export const ProstoreSsrContext = createContext<ProstoreSsrManager>(null);
 export type IStates = {
-  [name: string]: any
+  [name: string]: any;
 };
@@ -10,0 +10,0 @@

src/useConnectStore.ts

@@ -1,3 +0,3 @@
-import { useEffect } from 'react';
-import {IStore} from '@proscom/prostore';
+import { IStore } from '@proscom/prostore';
+import { useObservable } from './useObservable';
 
@@ -7,12 +7,7 @@ /**
  */
-export function useConnectStore<State>(store: IStore<State>, setState: (state: State) => any) {
-  useEffect(() => {
-    const sub = store.state$.subscribe((state: State) => {
-      setState(state);
-    });
-    return () => {
-      sub.unsubscribe();
-    };
-  }, [store, setState]);
+export function useConnectStore<State>(
+  store: IStore<State>,
+  setState: (state: State) => any
+) {
+  useObservable(store.state$, setState);
 }
-

src/useRequestStore.ts

@@ -1,7 +0,15 @@
-import {useMemo, useCallback, useContext, useEffect, useState, DependencyList, useRef} from 'react';
+import {
+  useMemo,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  DependencyList,
+  useRef
+} from 'react';
 import { ProstoreSsrContext } from './ProstoreSsrContext';
-import {CheckRequestResult, checkRequestState} from '@proscom/prostore';
+import { CheckRequestResult, checkRequestState } from '@proscom/prostore';
 import { useConnectStore } from './useConnectStore';
-import {useContextStore} from './ProstoreContext';
-import {IRequestState, RequestStore} from '@proscom/prostore';
+import { useContextStore } from './ProstoreContext';
+import { IRequestState, RequestStore } from '@proscom/prostore';
 
@@ -18,5 +26,11 @@ export interface UseRequestStoreResult<State> {
  */
-export function useRequestStore<Vars, Data, Options>(storeOrName: string | RequestStore<Vars, Data, Options>, variables: Vars, options: Partial<Options> = null): UseRequestStoreResult<IRequestState<Vars, Data>> {
+export function useRequestStore<Vars, Data, Options>(
+  storeOrName: string | RequestStore<Vars, Data, Options>,
+  variables: Vars,
+  options: Partial<Options> = null
+): UseRequestStoreResult<IRequestState<Vars, Data>> {
   // Подключаем стор из контекста
-  const store: RequestStore<Vars, Data, Options> = useContextStore(storeOrName) as RequestStore<Vars, Data, Options>;
+  const store: RequestStore<Vars, Data, Options> = useContextStore(
+    storeOrName
+  ) as RequestStore<Vars, Data, Options>;
 
@@ -47,3 +61,3 @@ // Подключение к контексту, который хранит все результаты
       stateRef.current = newState;
-      rerender(s => s + 1);
+      rerender((s) => s + 1);
     }
@@ -63,8 +77,10 @@ }, []);
   const loadData = useCallback(() => {
-    return store.loadData(variables, {
-      ssr: ssrContext && ssrContext.isServer,
-      ...options
-    }).then(() => {
-      store.setContextValue(ssrContext);
-    });
+    return store
+      .loadData(variables, {
+        ssr: ssrContext && ssrContext.isServer,
+        ...options
+      })
+      .then(() => {
+        store.setContextValue(ssrContext);
+      });
   }, [store, variables, options]);
@@ -91,5 +107,9 @@
 
-export function useRequestStoreVars<Vars, Data>(storeOrName: string | RequestStore<Vars, Data, any>, variableCreator: () => Vars, args: DependencyList) {
+export function useRequestStoreVars<Vars, Data>(
+  storeOrName: string | RequestStore<Vars, Data, any>,
+  variableCreator: () => Vars,
+  args: DependencyList
+) {
   const variables = useMemo(variableCreator, args);
   return useRequestStore(storeOrName, variables);
 }

src/useStore.ts

 import { useMemo, useState } from 'react';
-import {StoreOrName, useContextStore} from './ProstoreContext';
+import { StoreOrName, useContextStore } from './ProstoreContext';
 import { useConnectStore } from './useConnectStore';
+import { IStore } from '@proscom/prostore';
 
@@ -8,6 +9,18 @@ /**
  */
-export function useStore<State>(storeOrName: StoreOrName<State>) {
+export function useStore<State>(
+  storeOrName: StoreOrName<State>
+): [State, IStore<State>] {
   const store = useContextStore(storeOrName);
   const [state, setState] = useState(store.state);
   useConnectStore(store, setState);
+  return [state, store];
+}
+
+/**
+ * Хук, подключающий компонент к стору
+ */
+export function useStoreState<State>(storeOrName: StoreOrName<State>): State {
+  const store = useContextStore(storeOrName);
+  const [state, setState] = useState(store.state);
+  useConnectStore(store, setState);
   return state;
@@ -19,5 +32,9 @@ }
  */
-export function useStoreSelect<State, Derived>(storeOrName: StoreOrName<State>, select: (state: State) => Derived): Derived {
-  const state = useStore(storeOrName);
-  return useMemo(() => select(state), [select, state]);
+export function useStoreSelect<State, Derived>(
+  storeOrName: StoreOrName<State>,
+  select: (state: State) => Derived
+): [Derived, IStore<State>] {
+  const [state, store] = useStore(storeOrName);
+  const selectedState = useMemo(() => select(state), [select, state]);
+  return [selectedState, store];
 }

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 package files

51

increased by13.33%

Lines of code

861

increased by1.89%

Worsened metrics

Total package byte prevSize

49419

decreased by-0.43%

Dependency changes

• + Added@proscom/prostore@0.0.13(transitive)

• - Removed@proscom/prostore@0.0.12(transitive)

• Updated@proscom/prostore@^0.0.13