react-global-state-hooks 1.0.8 → 1.0.10

package/README.advance.md

@@ -0,0 +1,123 @@
+
+## Creating hooks with reusable actions
+
+Let's say you want to have a STATE with a specific set of actions that you could be reused. With this library is pretty easy to accomplish. Let's create **increase** and **decrease** actions to our count-store. **useCountGlobal.ts**:
+
+```JSX
+import {
+  IActionCollectionConfig,
+  IActionCollectionResult,
+  StateSetter,
+} from 'react-global-state-hooks/lib/GlobalStoreTypes';
+
+/**
+ * When using a custom api, the getHook and getHookDecoupled will not longer return directly the setter,
+ * intead they will return and api with the specific actions and mutations defined for the store
+ * Creating a configuration object for our api
+ */
+const countActionsApi: IActionCollectionConfig<number> = {
+  /* Decrease the value of the count */
+  decrease(decrease: number) {
+    /**
+     * We need to return the async function that is gonna take care of the state mutation or actions
+     */
+    return async (setter: StateSetter<number>, state: number) => {
+      /**
+       * Next, we perfom whatever modification we want on top of the store
+       */
+      return setter(state - decrease);
+    };
+  },
+
+  //* Lets add a new action to increase the value of the count */
+  increase(increase: number) {
+
+    return async (setter: StateSetter<number>, state: number) => {
+      return setter(state + increase);
+    };
+  },
+};
+
+/**
+ *  Now our getHook and getHookDecoupled are gonna return our custom api instead of the StateSetter,
+ *  This will allow us to have more control over our store since the mutations of the same are gonna be limitated 
+*/
+const countStore = new GlobalStore(0, countActionsApi);
+```
+
+If we remove all the explanatory comments the code will look like this:
+
+```TS
+const countStore = new GlobalStore(0, {
+  decrease(decrease: number) {
+    return (setter: StateSetter<number>, state: number) =>
+      setter(state - decrease);
+  },
+
+  increase(increase: number) {
+    return (setter: StateSetter<number>, state: number) =>
+      setter(state + increase);
+  },
+} as IActionCollectionConfig<number>);
+```
+
+Now lets get our new global hook with specific API
+
+```TS
+export interface ICountActions
+  extends IActionCollectionResult<number, IActionCollectionConfig<number>> {
+  decrease: (decrease: number) => Promise<number>;
+  increase: (increase: number) => Promise<number>;
+}
+
+/**
+ * The ICountActions interface is optional but it allow you yo get more accurate results for the typescript autocompletes and validations, ignore this if you are not using TS
+ */
+export const useCountGlobal = countStore.getHook<ICountActions>();
+```
+
+And that's it! the result of our useCountGlobal will return our actions instead of a simple setter... Let's see how that will look:
+
+```JSX
+import { useCountGlobal } from './useCountGlobal'
+
+const MyComponent: Reac.FC = () => {
+  const [count, countActions] = useCountGlobal();
+
+  // this functions are strongly typed 
+  const increaseClick = () => countActions.increase(1);
+  const decreaseClick = () => countActions.decrease(1);
+
+  return (<>
+      <label>{count}<label/><br/>
+      <button onPress={increaseClick}>increase<button/>
+      <button onPress={decreaseClick}>decrease<button/>
+    </>);
+}
+
+```
+
+## Customize persist storage
+
+Let suppose you don't like **async-storage** or you also want to implement some kind of encrypt-process. You could easily extend the **GlobalStore** Class, and customize your persist store implementation. 
+
+```JSX
+import GlobalState from 'react-global-state-hooks';
+import { IActionCollection } from 'react-global-state-hooks/lib/GlobalStoreTypes';
+
+export class SecureGlobalState<
+  IState,
+  IPersist extends string | null = null,
+  IsPersist extends boolean = IPersist extends null ? false : true,
+  IActions extends IActionCollection<IState> | null = null
+> extends GlobalState<IState, IPersist, IsPersist, IActions> {
+
+  protected getStoreItem = () => secureStorage.getItem(this.persistStoreAs as string);
+
+  /** value is a json string*/
+  protected setStoreItem = (value: string) => secureStorage.setItem(this.persistStoreAs as string, value);
+  
+}
+
+export default SecureGlobalState;
+```

package/README.md

@@ -1,172 +1,134 @@
 # react-global-state-hooks
-This is a package to easily handling global-state across your react components No-redux, No-context.
+This is a package to easily handling global-state across your react-components **No-redux**, **No-context**
 
-This utility follows the same style as the default useState hook, this in order to be an intuitive tool to help you to quickly migrate from complex options as redux to the new react-hooks.
+This utility follows the same style as the default **useState** hook, with a subscription pattern and **HOFs** to create a more intuitive, atomic and easy way of sharing state between components
 
 ## Creating a global store, an a simple hook
 
 We are gonna create a global count example **count.ts**:
 
-```
+```JSX
+// Import the store costructor
 import GlobalStore from 'react-global-state-hooks';
 
+// initialize your store with the default value of the same.
 const countStore = new GlobalStore(0);
 
-export const useCount = countStore.getHook();
+// you'll use this function the same way you'll use the **useState**
+export const useCountGlobal = countStore.getHook();
+
+// That's it, that's a global store... Strongly typed, with a global-hook that we could reuse cross all our react-components.
 ```
 
-That's it, that's a global store... Strongly typed, with a global-hook that we could reuse cross all our react-components.
+## Implementing your global hook into your components
+Let's say we have two components **MyFirstComponent**, **MySecondComponent**, in order to use our global hook they will look just like: 
 
-## Consuming global hook
-Let's say we have two components stage1, stage2, in order to use our global hook they will look just like: 
-```
-import { useCount } from './count'
+```JSX
+import { useCountGlobal } from './count'
 
-function Stage1() {
-  const [count, setter] = useCount();
+const MyFirstComponent: React.FC = () => {
+  const [count, setter] = useCountGlobal();
   const onClick = useCallback(() => setter(currentState => currentState + 1), []);
-  return (<button onPress={onClick}>count: {count}<button/>);
-}
 
-function Stage2() {
-  const [count, setter] = useCount();
-  const onClick = useCallback(() => setter(currentState => currentState + 1));
-  return (<button onPress={onClick}>count: {count}<button/>);
+  return (<button onclick={onClick}>count: {count}<button/>);
 }
-```
-Just like that, you are using a global state. Note that the only difference between this and the default useState hook is that you are not adding the initial value, cause you already did that when you created the store. 
-
-## Persisted store
-
-You could persist the state in the local-storage by just adding a name to the constructor of your global-store let's see.
-```
-const countStore = new GlobalStore(0, null, 'GLOBAL_COUNT');
-```
-
-## Consuming Persisted Store
-```
-const [state, setter] = useCount();
-```
-
-## Customize persist storage
-
-Let suppose you don't like localStorage, or you also want to implement some kind of decode/encode. You could easily extends the GlobalStore Class, and customize your persist store implementation. 
-
-```
-import { decode, encode } from 'wherever';
-import GlobalState from 'react-global-state-hooks';
-import { IActionCollection } from 'react-global-state-hooks/lib/GlobalStoreTypes';
 
-export class SecureGlobalState<IState> extends GlobalState<IState> {
-
-  protected localStorageGetItem = () => decode(localStorage.getItem(this.persistStoreAs as string));
+const MySecondComponent: React.FC = () => {
+  const [count, setter] = useCountGlobal();
+  const onClick = useCallback(() => setter(currentState => currentState + 1));
 
-  protected localStorageSetItem = (value: string) => localStorage.setItem(this.persistStoreAs as string, encode(value));
-  
+  return (<button onclick={onClick}>count: {count}<button/>);
 }
 
-export default SecureGlobalState;
+// Just like that! You are now using a global state!!
 ```
 
-## Creating hooks with reusable actions
-
-Let's say you want to have a STATE with a specific set of actions that you could reuse. With this library is pretty easy to accomplish. Let's create **plus** and **decrease** actions to our COUNT-store. **count.ts**:
+Note that the only difference between this and the default **useState** hook is that you are not adding the initial value, cause you already did that when you created the store:
 
+```JSX
+const countStore = new GlobalStore(0);
 ```
-import * as IGlobalState from 'react-global-state-hooks/lib/GlobalStoreTypes';
-import GlobalStore from 'react-global-state-hooks';
 
-const countStore = new GlobalStore(0, {
-  plus: (increase: number) => async (setter: IGlobalStore.StateSetter<number>, currentState: number) => {
-    // perfom whatever login you want
-    setter(currentState + increase);
-  },
-  decrease: (decrease: number) => async (setter: IGlobalStore.StateSetter<number>, currentState: number) => {
-    // perfom whatever login you want
-    setter(currentState - decrease);
-  },
-}, 'GLOBAL_COUNT');
+## Persisted store
 
-export const useCount = countStore.getHook();
+You could persist the state with **local-storage** by just adding the **storage-key** to the constructor of your global-store, for example: 
 
+```JSX
+// The FIRST parameter is the initial value of the state
+// The Second parameter is an API to restrict access to the state, will talk about that later on [README]:./README.advance.md
+// The Third parameter is the key that will be used on the local-storage
+const countStore = new GlobalStore(0, null, 'GLOBAL_COUNT');
 ```
 
-Now the result of our useCount will return our actions instead of a simple setter... Let's see:
-
-```
-import { useCount } from './count'
+## Consuming Persisted Store
 
-function Stage1() {
-  const [count, actions] = useCount();
-  const increaseClick = useCallback(() => actions.plus(1), []);
-  const decreaseClick = useCallback(() => actions.decrease(1), []);
+```JSX
+const MyComponent: React.FC = () => {
+  // connect the component to the global persisted storage
+  const [count, setCount] = useCountGlobal();
+  const onClickAddOne = () => setCount(count + 1);
 
-  return (<>
-      <label>{count}<label/><br/>
-      <button onPress={increaseClick}>increase<button/>
-      <button onPress={decreaseClick}>decrease<button/>
-    </>);
+  return (<button onclick={onClickAddOne}>count: {count}<button/>);
 }
-
 ```
 
-You could also type the API contract, in order to take more advantage of typescript, just by passing an interface to getHook method:
-
-```
-export interface ICountActions {
-  plus: (increase: number) => Promise<void>,
-  decrease: (decrease: number) => Promise<void>,
-}
+## Decoupled hook
 
-export const useCount = countStore.getHook<ICountActions>();
-```
-The above step is necessary to get the correct typing of the parameters of your actions. The above step is necessary to get the correct typing of the parameters of your actions, otherwise, you'll get the name of the actions but the parameters would be all TYPE-ANY
+If you want to access the global state outside a component or outside a hook, or without subscribing the component to the state changes... 
 
-## Decoupled hook
+This is especially useful when you want to create components that have edition access to a certain store, but they actually don't need to be reactive to the state changes, like a search component that just need to get the current state every time that is going to search the data; but actually don't need to be subscribed to the changes over the collection he is going to be filtering. 
 
-Finally, if you want to access the global state outside a component, or without subscribing the component to the state changes... 
 
-This is especially useful when you want to reuse an action into another one, or when you wrote components that have edition access to a certain store, but they actually don't need to be reactive to the state changes, like a search component that just need to get the current state every time is gonna search the data, but actually don't need to hear all changes over the collection he is gonna be filtering. 
+```JSX
+import GlobalStore from 'react-global-state-hooks';
 
-```
 const countStore = new GlobalStore(0);
 
-export const [getCountValue, countActions] = countStore.getHookDecoupled<ICountActions>()();
+// remember this should be used as the **useState** hook.
+export const useCountGlobal = countStore.getHook();
+
+// this functions are not hooks, and they can be used in whatever place into your code, ClassComponents, OtherHooks, Services etc.
+export const [getCountGlobalValue, setCountGlobalValue] = countStore.getHookDecoupled();
+
 ```
 
 Let's see a trivial example: 
-```
-import { useCount, useCountDecoupled } from './count'
 
-function Stage1() {
-  const [count] = useCount();
+```JSX
+import { useCountGlobal, setCountGlobalValue } from './useCountGlobal'
+
+const CountDisplayerComponent: React.FC = () => {
+  const [count] = useCountGlobal();
 
-  return (<label>{count}<label/><br/>);
+  return (<label>{count}<label/>);
 }
 
-function Stage2() {
-  const [, actions] = useCountDecoupled();
-  const increaseClick = useCallback(() => actions.plus(1), []);
-  const decreaseClick = useCallback(() => actions.decrease(1), []);
+// Stage2 does not need to be updated once the global count changes
+const CountManagerComponent: React.FC = () => {
+  const increaseClick = () => setCountGlobalValue(count => count + 1);
+  const decreaseClick = () => setCountGlobalValue(count => count - 1);
 
   return (<>
-      <button onPress={increaseClick}>increase<button/>
-      <button onPress={decreaseClick}>decrease<button/>
+      <button onclick={increaseClick}>increase<button/>
+      <button onclick={decreaseClick}>decrease<button/>
     </>);
 }
 ```
 
-Now our stage 1, is just listening to the changes of the state, while stage 2 is just acting as an orchestrator, but stage 2 is not actively listening to state changes, so, actually is not gonna be re-render while stage 1 does. 
-
-# Important notes:
-Are concern about performance? this library is for you, instead of handling huge complex stores with options like redux, or by passing the setState to a context Provider (because of the limitations that the context has)... If does, You should just use this library, we are using the more atomic and 'native' way that REACT gives to handle the state, and that is the hook **useState**... 
-
-This utility is just including the implementation of the use state into a subscriber pattern, to enable you to create hooks that will be subscribed to specific store changes, does how we'll be creating a global state hook. 
+## Advance Config
+Here you can see more information how to create more complex services for your global stores.
+[README]:./README.advance.md
 
 ## Advantages:
 1. Using REACT's simplest and default way to deal with the state.
 2. Adding partial state designations (This is not on useState default functionality)
 3. Added availability to create actions and decoupled access to the states, no more connects, and dispatches, just call your actions as a normal service of whatever other libraries.
 4. This library is already taking care of avoiding re-renders if the new state does not have changes
-5. This library also is taking care of batching multiple stores updates by using **React unstable_batchedUpdates**; this is a problem that the **useState** have when you call multiple **setStates** into async flows as setTimeout
-6. This tool also take care for you to avoid localStorage data to lose the data types that you stored. For example when you are using datetimes
+5. This tool also take care for you to avoid **localStorage** data to lose the data types that you stored. For example when you are using datetimes
+6. This library also is taking care of batching multiple stores updates by using **React unstable_batchedUpdates**; this is a problem that the **useState** have when you call multiple **setStates** into async flows as setTimeout
+
+# Finallly notes:
+Are concern about performance? this library is for you, instead of handling huge complex stores with options like redux, or by passing the setState to a context Provider (because of the limitations that the context has)... You should just use this library, we are using the more atomic and 'native' way that REACT gives to handle the state, and that is the hook **useState**... 
+
+This utility is just including the implementation of the use state into a subscriber pattern, to enable you to create hooks that will be subscribed to specific store changes, does how we'll be creating a global state hook. 
+

package/lib/GlobalStore.d.ts

@@ -10,7 +10,7 @@ export declare const isPrimitive: <T>(value: T) => boolean;
 * this will disable the default return of the state-setter of the hook, and instead will return the API
 * @param {string} persistStoreAs - A name if you want to persist the state of the store in localstorage
 * */
-export declare class GlobalStore<IState, IActions extends IGlobalStore.IActionCollection<IState> | null = null> implements IGlobalStore.IGlobalState<IState, IActions> {
+export declare class GlobalStore<IState, IActions extends IGlobalStore.IActionCollectionConfig<IState> | null = null> implements IGlobalStore.IGlobalState<IState, IActions> {
     protected state: IState;
     protected actions: IActions;
     protected persistStoreAs: string | null;
@@ -30,15 +30,15 @@ export declare class GlobalStore<IState, IActions extends IGlobalStore.IActionCo
      * Returns a global hook that will share information across components by subscribing them to a specific store.
      * @return [currentState, GlobalState.IHookResult<IState, IActions, IApi>]
      */
-    getHook: <IApi extends IGlobalStore.ActionCollectionResult<IActions> | null = IActions extends null ? null : IGlobalStore.ActionCollectionResult<IActions>>() => () => [IState, IGlobalStore.IHookResult<IState, IActions, IApi>];
+    getHook: <IApi extends IGlobalStore.IActionCollectionResult<IState, IActions> | null = IActions extends null ? null : IGlobalStore.IActionCollectionResult<IState, IActions>>() => () => [IState, IGlobalStore.IHookResult<IState, IActions, IApi>];
     /**
      * This is an access to the subscribers queue and to the current state of a specific store...
      * THIS IS NOT A REACT-HOOK, so you could use it everywhere example other hooks, and services.
      * @return [currentState, GlobalState.IHookResult<IState, IActions, IApi>]
      */
-    getHookDecoupled: <IApi extends IGlobalStore.ActionCollectionResult<IActions> | null = IActions extends null ? null : IGlobalStore.ActionCollectionResult<IActions>>() => [() => IState, IGlobalStore.IHookResult<IState, IActions, IApi>];
+    getHookDecoupled: <IApi extends IGlobalStore.IActionCollectionResult<IState, IActions> | null = IActions extends null ? null : IGlobalStore.IActionCollectionResult<IState, IActions>>() => [() => IState, IGlobalStore.IHookResult<IState, IActions, IApi>];
     private _stateOrchestrator;
-    protected get stateOrchestrator(): IGlobalStore.StateSetter<IState> | IGlobalStore.ActionCollectionResult<IActions>;
+    protected get stateOrchestrator(): IGlobalStore.StateSetter<IState> | IGlobalStore.IActionCollectionResult<IState, IActions>;
     /**
      **  [subscriber-update-callback, hook, newState]
      */
@@ -48,7 +48,7 @@ export declare class GlobalStore<IState, IActions extends IGlobalStore.IActionCo
     protected globalSetterToPersistStoreAsync: (setter: Partial<IState> | ((state: IState) => Partial<IState>)) => Promise<void>;
     static ExecutePendingBatchesCallbacks: (() => void)[];
     static ExecutePendingBatches: import("lodash").DebouncedFunc<() => void>;
-    protected getActions: <IApi extends IGlobalStore.ActionCollectionResult<IGlobalStore.IActionCollection<IState>>>() => IApi;
+    protected getActions: <IApi extends IGlobalStore.IActionCollectionResult<IState, IGlobalStore.IActionCollectionConfig<IState>>>() => IApi;
 }
 export default GlobalStore;
 //# sourceMappingURL=GlobalStore.d.ts.map

package/lib/GlobalStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStore.d.ts","sourceRoot":"","sources":["../src/GlobalStore.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,oBAAoB,CAAC;AAOnD,eAAO,MAAM,WAAW,0BAAuH,CAAC;AAEhJ;;;;;;;;IAQI;AACJ,qBAAa,WAAW,CACtB,MAAM,EACN,QAAQ,SAAS,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,CACrE,YAAW,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;IAQ1C,SAAS,CAAC,KAAK,EAAE,MAAM;IAAE,SAAS,CAAC,OAAO,EAAE,QAAQ;IAAqB,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAN5H,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAM;IAE/D,IAAW,cAAc,YAExB;gBAEqB,KAAK,EAAE,MAAM,EAAY,OAAO,GAAE,QAA2B,EAAY,cAAc,GAAE,MAAM,GAAG,IAAW;IAEnI,OAAO,CAAC,eAAe,CAAiC;IAExD,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG;IA0B7C,SAAS,CAAC,mBAAmB,IAAI,MAAM,GAAG,IAAI;IAI9C,SAAS,CAAC,YAAY,IAAI,MAAM;IAgBhC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG;IAmBvC,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAIzD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,oBAAoB,QAAO,MAAM,CAAwB;IAEnE,SAAS,CAAC,YAAY,QAAO,MAAM,CAAyC;IAE5E;;;OAGG;IACI,OAAO,2NAqBZ;IAEF;;;;OAIG;IACI,gBAAgB,iKAGf,MAAM,oDASZ;IAEF,OAAO,CAAC,kBAAkB,CAAiG;IAE3H,SAAS,KAAK,iBAAiB,IAAI,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAYlH;IAED;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAM;IAErE,SAAS,CAAC,YAAY,sCAAuC,MAAM,KAAK,QAAQ,MAAM,CAAC,aAAa,MAAM,IAAI,UAyB5G;IAEF,SAAS,CAAC,iBAAiB,sCACiB,MAAM,KAAK,QAAQ,MAAM,CAAC,MACpE,QAAQ,IAAI,CAAC,CAAyE;IAExF,SAAS,CAAC,+BAA+B,sCAA6C,MAAM,KAAK,QAAQ,MAAM,CAAC,MAAI,QAAQ,IAAI,CAAC,CAG/H;IAEF,MAAM,CAAC,8BAA8B,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAM;IAG3D,MAAM,CAAC,qBAAqB,6CAWtB;IAEN,SAAS,CAAC,UAAU,uGAwBlB;CAEH;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"GlobalStore.d.ts","sourceRoot":"","sources":["../src/GlobalStore.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,oBAAoB,CAAC;AAOnD,eAAO,MAAM,WAAW,0BAAuH,CAAC;AAEhJ;;;;;;;;IAQI;AACJ,qBAAa,WAAW,CACtB,MAAM,EACN,QAAQ,SAAS,YAAY,CAAC,uBAAuB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,CAC3E,YAAW,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;IAQ1C,SAAS,CAAC,KAAK,EAAE,MAAM;IAAE,SAAS,CAAC,OAAO,EAAE,QAAQ;IAAqB,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAN5H,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAM;IAE/D,IAAW,cAAc,YAExB;gBAEqB,KAAK,EAAE,MAAM,EAAY,OAAO,GAAE,QAA2B,EAAY,cAAc,GAAE,MAAM,GAAG,IAAW;IAEnI,OAAO,CAAC,eAAe,CAAiC;IAExD,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG;IA0B7C,SAAS,CAAC,mBAAmB,IAAI,MAAM,GAAG,IAAI;IAI9C,SAAS,CAAC,YAAY,IAAI,MAAM;IAgBhC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG;IAmBvC,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAIzD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,oBAAoB,QAAO,MAAM,CAAwB;IAEnE,SAAS,CAAC,YAAY,QAAO,MAAM,CAAyC;IAE5E;;;OAGG;IACI,OAAO,6OAqBZ;IAEF;;;;OAIG;IACI,gBAAgB,mLAGf,MAAM,oDASZ;IAEF,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,SAAS,KAAK,iBAAiB,IAAI,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAY3H;IAED;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAM;IAErE,SAAS,CAAC,YAAY,sCAAuC,MAAM,KAAK,QAAQ,MAAM,CAAC,aAAa,MAAM,IAAI,UAyB5G;IAEF,SAAS,CAAC,iBAAiB,sCACiB,MAAM,KAAK,QAAQ,MAAM,CAAC,MACpE,QAAQ,IAAI,CAAC,CAAyE;IAExF,SAAS,CAAC,+BAA+B,sCAA6C,MAAM,KAAK,QAAQ,MAAM,CAAC,MAAI,QAAQ,IAAI,CAAC,CAG/H;IAEF,MAAM,CAAC,8BAA8B,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAM;IAG3D,MAAM,CAAC,qBAAqB,6CAWtB;IAEN,SAAS,CAAC,UAAU,sHAwBlB;CAEH;AAED,eAAe,WAAW,CAAC"}

package/lib/GlobalStore.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
 const lodash_1 = require("lodash");
 const react_1 = require("react");
-const isPrimitive = (value) => lodash_1.isNil(value) || lodash_1.isNumber(value) || lodash_1.isBoolean(value) || lodash_1.isString(value) || typeof value === 'symbol';
+const isPrimitive = (value) => (0, lodash_1.isNil)(value) || (0, lodash_1.isNumber)(value) || (0, lodash_1.isBoolean)(value) || (0, lodash_1.isString)(value) || typeof value === 'symbol';
 exports.isPrimitive = isPrimitive;
 /**
 * This is a class to create global-store objects
@@ -17,6 +17,9 @@ exports.isPrimitive = isPrimitive;
 * @param {string} persistStoreAs - A name if you want to persist the state of the store in localstorage
 * */
 class GlobalStore {
+    get isPersistStore() {
+        return !!this.persistStoreAs;
+    }
     constructor(state, actions = null, persistStoreAs = null) {
         this.state = state;
         this.actions = actions;
@@ -24,15 +27,15 @@ class GlobalStore {
         this.subscribers = [];
         this.storedStateItem = undefined;
         this.getPersistStoreValue = () => this.getStoreItem();
-        this.getStateCopy = () => Object.freeze(lodash_1.cloneDeep(this.state));
+        this.getStateCopy = () => Object.freeze((0, lodash_1.cloneDeep)(this.state));
         /**
          * Returns a global hook that will share information across components by subscribing them to a specific store.
          * @return [currentState, GlobalState.IHookResult<IState, IActions, IApi>]
          */
         this.getHook = () => () => {
-            const [value, setter] = react_1.useState(this.state);
+            const [value, setter] = (0, react_1.useState)(this.state);
             const valueWrapper = this.isPersistStore ? this.getPersistStoreValue() : value;
-            react_1.useEffect(() => {
+            (0, react_1.useEffect)(() => {
                 this.subscribers.push(setter);
                 return () => {
                     this.subscribers = this.subscribers.filter((hook) => setter !== hook);
@@ -58,7 +61,7 @@ class GlobalStore {
         this._stateOrchestrator = null;
         this.globalSetter = (setter, callback) => {
             const partialState = typeof setter === 'function' ? setter(this.getStateCopy()) : setter;
-            let newState = exports.isPrimitive(partialState) || Array.isArray(partialState)
+            let newState = (0, exports.isPrimitive)(partialState) || Array.isArray(partialState)
                 ? partialState : Object.assign(Object.assign({}, this.state), partialState);
             // avoid perform multiple update batches by accumulating state changes of the same hook
             GlobalStore.batchedUpdates = GlobalStore.batchedUpdates.filter(([, hook, previousState]) => {
@@ -66,7 +69,7 @@ class GlobalStore {
                 if (isSameHook) {
                     // eslint-disable-next-line no-console
                     console.warn('You should try avoid call the same state-setter multiple times at one execution line');
-                    newState = exports.isPrimitive(newState) || Array.isArray(partialState)
+                    newState = (0, exports.isPrimitive)(newState) || Array.isArray(partialState)
                         ? newState : Object.assign(Object.assign({}, previousState), newState);
                 }
                 return !isSameHook;
@@ -99,9 +102,6 @@ class GlobalStore {
                 }) })), {});
         };
     }
-    get isPersistStore() {
-        return !!this.persistStoreAs;
-    }
     formatItemFromStore(obj) {
         const isArray = Array.isArray(obj);
         if (isArray) {
@@ -114,7 +114,7 @@ class GlobalStore {
             if (isDateType) {
                 return Object.assign(Object.assign({}, acumulator), { [key]: new Date(unformatedValue) });
             }
-            return Object.assign(Object.assign({}, acumulator), { [key]: exports.isPrimitive(unformatedValue) ? unformatedValue : this.formatItemFromStore(unformatedValue) });
+            return Object.assign(Object.assign({}, acumulator), { [key]: (0, exports.isPrimitive)(unformatedValue) ? unformatedValue : this.formatItemFromStore(unformatedValue) });
         }, {});
     }
     localStorageGetItem() {
@@ -126,7 +126,7 @@ class GlobalStore {
         const item = this.localStorageGetItem();
         if (item) {
             const value = JSON.parse(item);
-            const primitive = exports.isPrimitive(value);
+            const primitive = (0, exports.isPrimitive)(value);
             const newState = primitive ? value : this.formatItemFromStore(value);
             this.state = primitive || Array.isArray(value) ? newState : Object.assign(Object.assign({}, this.state), newState);
         }
@@ -140,7 +140,7 @@ class GlobalStore {
         return Object.keys(obj).reduce((acumulator, key) => {
             const value = obj[key];
             const isDatetime = value instanceof Date;
-            return (Object.assign(Object.assign({}, acumulator), { [key]: exports.isPrimitive(value) || isDatetime ? value : this.formatToStore(value), [`${key}_type`]: isDatetime ? 'date' : typeof value }));
+            return (Object.assign(Object.assign({}, acumulator), { [key]: (0, exports.isPrimitive)(value) || isDatetime ? value : this.formatToStore(value), [`${key}_type`]: isDatetime ? 'date' : typeof value }));
         }, {});
     }
     localStorageSetItem(valueToStore) {
@@ -150,7 +150,7 @@ class GlobalStore {
         if (this.storedStateItem === this.state)
             return;
         this.storedStateItem = this.state;
-        const valueToStore = exports.isPrimitive(this.state) ? this.state : this.formatToStore(lodash_1.cloneDeep(this.state));
+        const valueToStore = (0, exports.isPrimitive)(this.state) ? this.state : this.formatToStore((0, lodash_1.cloneDeep)(this.state));
         this.localStorageSetItem(JSON.stringify(valueToStore));
     }
     get stateOrchestrator() {
@@ -175,7 +175,7 @@ exports.GlobalStore = GlobalStore;
 GlobalStore.batchedUpdates = [];
 GlobalStore.ExecutePendingBatchesCallbacks = [];
 // avoid multiples calls to batchedUpdates
-GlobalStore.ExecutePendingBatches = lodash_1.debounce(() => {
+GlobalStore.ExecutePendingBatches = (0, lodash_1.debounce)(() => {
     const reactBatchedUpdates = react_dom_1.default.unstable_batchedUpdates || ((mock) => mock());
     reactBatchedUpdates(() => {
         GlobalStore.batchedUpdates.forEach(([execute]) => {

package/lib/GlobalStoreTypes.d.ts

@@ -2,27 +2,27 @@
 * @param {StateSetter<IState>} setter - add a new value to the state
 * @returns {Promise<void>} result - resolves when update_batches finished
 */
-export declare type StateSetter<IState> = (setter: Partial<IState> | ((state: IState) => Partial<IState>)) => Promise<void>;
+export type StateSetter<IState> = (setter: Partial<IState> | ((state: IState) => Partial<IState>)) => Promise<void>;
 /**
 * This is the structure required by the API actions in order to be able to capture action parameters and inject state setter into actions.
 */
-export declare type IAction<IState> = <IResult>(...params: any[]) => (setter: StateSetter<IState>, currentState: IState) => Promise<unknown> | IResult;
+export type IAction<IState> = <IResult>(...params: any[]) => (setter: StateSetter<IState>, currentState: IState) => Promise<unknown> | IResult;
 /**
 * Configuration of you API
 */
-export interface IActionCollection<IState> {
+export interface IActionCollectionConfig<IState> {
     [key: string]: IAction<IState>;
 }
 /**
 * This is the API result of the hook (if you passed an API as a parameter)
 */
-export declare type ActionCollectionResult<IActions> = {
-    [key in keyof IActions]: <IResult>(...params: any[]) => any | IResult;
+export type IActionCollectionResult<IState, IActions extends IActionCollectionConfig<IState> | null> = {
+    [key in keyof IActions]: (...params: any[]) => unknown;
 };
 /**
 * Hook result, if you passed an API as a parameter it will be returned in the second position of the hook invoke.
 */
-export declare type IHookResult<IState, IActions extends IActionCollection<IState> | null = null, IApi extends ActionCollectionResult<IActions> | null = IActions extends null ? null : ActionCollectionResult<IActions>> = IApi extends null ? StateSetter<IState> : IActions extends IActionCollection<IState> ? IApi extends ActionCollectionResult<IActions> ? IApi : StateSetter<IState> : StateSetter<IState>;
+export type IHookResult<IState, IActions extends IActionCollectionConfig<IState> | null = null, IApi extends IActionCollectionResult<IState, IActions> | null = IActions extends null ? null : IActionCollectionResult<IState, IActions>> = IApi extends null ? StateSetter<IState> : IActions extends IActionCollectionConfig<IState> ? IApi extends IActionCollectionResult<IState, IActions> ? IApi : StateSetter<IState> : StateSetter<IState>;
 /**
 * This is a class to create global-store objects
 * @template IState
@@ -32,12 +32,12 @@ export declare type IHookResult<IState, IActions extends IActionCollection<IStat
 * this will disable the default return of the state-setter of the hook, and instead will return the API
 * @param {string} persistStoreAs - A name if you want to persist the state of the store in localstorage
 * */
-export interface IGlobalState<IState, IActions extends IActionCollection<IState> | null = null> {
+export interface IGlobalState<IState, IActions extends IActionCollectionConfig<IState> | null = null> {
     /**
     * Returns a global hook that will share information across components by subscribing them to a specific store.
     * @return [currentState, GlobalState.IHookResult<IState, IActions, IApi>]
     */
-    getHook: <IApi extends IActions extends ActionCollectionResult<IActions> ? ActionCollectionResult<IActions> : null>() => () => [
+    getHook: <IApi extends IActions extends IActionCollectionResult<IState, IActions> ? IActionCollectionResult<IState, IActions> : null>() => () => [
         IState,
         IHookResult<IState, IActions, IApi>
     ];
@@ -46,7 +46,7 @@ export interface IGlobalState<IState, IActions extends IActionCollection<IState>
     * THIS IS NOT A REACT-HOOK, so you could use it everywhere example other hooks, and services.
     * @return [currentState, GlobalState.IHookResult<IState, IActions, IApi>]
     */
-    getHookDecoupled: <IApi extends IActions extends ActionCollectionResult<IActions> ? ActionCollectionResult<IActions> : null>() => [
+    getHookDecoupled: <IApi extends IActions extends IActionCollectionResult<IState, IActions> ? IActionCollectionResult<IState, IActions> : null>() => [
         () => IState,
         IHookResult<IState, IActions, IApi>
     ];

package/lib/GlobalStoreTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStoreTypes.d.ts","sourceRoot":"","sources":["../src/GlobalStoreTypes.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,oBAAY,WAAW,CAAC,MAAM,IAAI,CAChC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,KAC3D,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB;;EAEE;AAEF,oBAAY,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAE/I;;EAEE;AACF,MAAM,WAAW,iBAAiB,CAAC,MAAM;IACvC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;EAEE;AACF,oBAAY,sBAAsB,CAAC,QAAQ,IAAI;KAE5C,GAAG,IAAI,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,OAAO;CACtE,CAAC;AAEF;;EAEE;AACF,oBAAY,WAAW,CACrB,MAAM,EACN,QAAQ,SAAS,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,EACxD,IAAI,SAAS,sBAAsB,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,QAAQ,SAAS,IAAI,GAAG,IAAI,GAAG,sBAAsB,CAAC,QAAQ,CAAC,IACpH,IAAI,SAAS,IAAI,GACjB,WAAW,CAAC,MAAM,CAAC,GACnB,QAAQ,SAAS,iBAAiB,CAAC,MAAM,CAAC,GAC1C,IAAI,SAAS,sBAAsB,CAAC,QAAQ,CAAC,GAC3C,IAAI,GACJ,WAAW,CAAC,MAAM,CAAC,GACrB,WAAW,CAAC,MAAM,CAAC,CAAC;AAExB;;;;;;;;IAQI;AACJ,MAAM,WAAW,YAAY,CAC3B,MAAM,EAAE,QAAQ,SAAS,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI;IAEhE;;;MAGE;IACF,OAAO,EAAE,CAAC,IAAI,SAAS,QAAQ,SAAS,sBAAsB,CAAC,QAAQ,CAAC,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG,IAAI,OAAO,MAAM;QAC7H,MAAM;QACN,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC;KACpC,CAAC;IAEF;;;;MAIE;IACF,gBAAgB,EAAE,CAAC,IAAI,SAAS,QAAQ,SAAS,sBAAsB,CAAC,QAAQ,CAAC,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG,IAAI,OAAQ;QACjI,MAAM,MAAM;QACZ,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC;KACpC,CAAC;CACH"}
+{"version":3,"file":"GlobalStoreTypes.d.ts","sourceRoot":"","sources":["../src/GlobalStoreTypes.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,MAAM,MAAM,WAAW,CAAC,MAAM,IAAI,CAChC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,KAC3D,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB;;EAEE;AAEF,MAAM,MAAM,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAE/I;;EAEE;AACF,MAAM,WAAW,uBAAuB,CAAC,MAAM;IAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;EAEE;AACF,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,QAAQ,SAAS,uBAAuB,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI;KAEpG,GAAG,IAAI,MAAM,QAAQ,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,EAAE,KAAK,OAAO;CACvD,CAAC;AAEF;;EAEE;AACF,MAAM,MAAM,WAAW,CACrB,MAAM,EACN,QAAQ,SAAS,uBAAuB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,EAC9D,IAAI,SAAS,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,GAAG,QAAQ,SAAS,IAAI,GAAG,IAAI,GAAG,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,IACtI,IAAI,SAAS,IAAI,GACjB,WAAW,CAAC,MAAM,CAAC,GACnB,QAAQ,SAAS,uBAAuB,CAAC,MAAM,CAAC,GAChD,IAAI,SAAS,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GACpD,IAAI,GACJ,WAAW,CAAC,MAAM,CAAC,GACrB,WAAW,CAAC,MAAM,CAAC,CAAC;AAExB;;;;;;;;IAQI;AACJ,MAAM,WAAW,YAAY,CAC3B,MAAM,EAAE,QAAQ,SAAS,uBAAuB,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI;IAEtE;;;MAGE;IACF,OAAO,EAAE,CAAC,IAAI,SAAS,QAAQ,SAAS,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,OAAO,MAAM;QAC/I,MAAM;QACN,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC;KACpC,CAAC;IAEF;;;;MAIE;IACF,gBAAgB,EAAE,CAAC,IAAI,SAAS,QAAQ,SAAS,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,OAAQ;QACnJ,MAAM,MAAM;QACZ,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC;KACpC,CAAC;CACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-global-state-hooks",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "This is a package to easily handling global-state across your react components No-redux, No-context.",
   "main": "lib/GlobalStore.js",
   "files": [