state-decorator 6.12.2 → 7.0.0-beta.1

package/README.md

@@ -11,12 +11,22 @@ The StateDecorator is a set of Reacts hook that manages a complex component stat
 - Deterministic state changes (clear separation of effects and side effects)
 - Ease asynchronous actions state changes (loading / error states, success & error handlers, parallel actions management, optimistic updates...)
 - Easily and efficiently share slices of state.
-- Easily testable (uses pure functions, utility functions provided)
+- Easily testable (test framework provided)
 - Easily update state from or react to props changes
-- Ease debugging (trace state changes)
+- Ease debugging (trace state changes, dev tools)
 - Improve code conciseness (no boiler plate code)
-- Enforce separation of container components and presentation components.
-- Strongly typed
+- Strongly typed (Typescript)
+
+# V7: Partial state and new hooks
+
+- React 17 (upcoming V8 for React 18)
+- All effects can now return a partial state that will be merged with current state.
+- More documentation on global and local store use cases.
+- **useLocalStore** and **useStore** now have a parameter to specify if the React component must re-rerender after a state change.
+- New **useStoreContextSlice** hook was added to get a slice of a store in a context.
+- New **onMountDeferred** to execute initialization code after initial render
+- New effect helpers
+- Removed useBindStore hook.
 
 # 🏎️ V6: The Store
 
@@ -82,13 +92,12 @@ export const getInitialState = (): State => ({
 
 export const userAppActions: StoreActions<State, Actions, Props> = {
   // synchronous action (simple form)
-  selectUser: ({ state, args: [id] }) => ({ ...state, selectedUserId: id }),
+  selectUser: ({ args: [id] }) => ({ selectedUserId: id }),
 
   // a synchronous action with side effects
   selectAndLoadUser: {
-    // same as simple form, using aliases (use short context alias 's' instead of 'state')
     // effects contain only immutable state changes
-    effects: ({ s, args: [id] }) => ({ ...s, selectedUserId: id }),
+    effects: ({ args: [id] }) => ({ selectedUserId: id }),
     // side effects (ie. other effects than state changes), using "actions" alias
     sideEffects: ({ a }) => {
       a.loadUser();
@@ -100,9 +109,9 @@ export const userAppActions: StoreActions<State, Actions, Props> = {
     // promise provider, can use action context (ctx) to get current state, args, props etc.
     getPromise: (ctx) => Promise.resolve({ firstName: 'John', lastName: 'Doe' }),
     // state changes
-    effects: ({ s, res }) => ({ ...s, user: res }),
+    effects: ({ res }) => ({ user: res }),
     // state changes if error
-    errorEffects: ({ s, error }) => ({ ...s, user: null }),
+    errorEffects: ({ error }) => ({ user: null }),
     // side effects here
     sideEffects: ({ res, actions }) => {},
     // side effects if error
@@ -139,12 +148,12 @@ export function App(props: Props) => {
 
 # React hooks
 
-| Hook          | Purpose                                                | Component refreshed on store change | Store is destroyed on unmount |
-| ------------- | ------------------------------------------------------ | ----------------------------------- | ----------------------------- |
-| useLocalStore | Create a store and binds it to the react component     | Y                                   | Y                             |
-| useStore      | Binds an existing store to a react component (sharing) | Y                                   | Y                             |
-| useBindStore  | Bind an existing store to a react component (sharing)  | N                                   | Y                             |
-| useStoreSlice | Binds a store slice to a react component (sharing)     | If slice has changed only           | N                             |
+| Hook                 | Purpose                                             | Returns | Is component refreshed on store change? | Is store destroyed on unmount? |
+| -------------------- | --------------------------------------------------- | ------- | --------------------------------------- | ------------------------------ |
+| useLocalStore        | Create a store and binds it to the react component. | Store   | if **refreshOnUpdate** is set           | Y                              |
+| useStore             | Binds a store instance to the react component.      | Store   | if **refreshOnUpdate** is set           | N                              |
+| useStoreSlice        | Get a slice of a store.                             | Slice   | If slice has changed only               | N                              |
+| useStoreContextSlice | Get a slice of a store stored in a context          | Slice   | If slice has changed only               | N                              |
 
 # Initial state
 
@@ -190,14 +199,14 @@ The StateDecorator is taking a list of actions and decorate them to inject state
 ## Short form
 
 ```typescript
-action: (ctx) => ctx.state, // state changes
+action: (ctx) => ctx.state, // changes to be merged to current state
 ```
 
 Example:
 
 ```typescript
 const actions: StoreActions<State, Actions> = {
-  setText: ({ s, args: [newText] }) => ({ ...s, text: newText }),
+  setText: ({ args: [newText] }) => ({ text: newText }),
 };
 ```
 
@@ -222,7 +231,7 @@ Example:
 ```typescript
 const actions: StoreActions<State, Actions> = {
   setText: {
-    effects: ({ s, args: [newText] }) => ({ ...s, text: newText }),
+    effects: ({ args: [newText] }) => ({ text: newText }),
     // use either debounceTimeout or debounceSideEffectsTimeout
     // debounceTimeout: 5000,
     debounceSideEffectsTimeout: 5000,
@@ -272,7 +281,7 @@ Example:
 const actions: StoreActions<State, Actions> = {
   loadList: {
     getPromise: () => fetch('https://myapi/myservices').then((res) => (res.ok ? res.json() : Promise.reject())),
-    effects: ({ s, res }) => ({ ...s, list: res }),
+    effects: ({ res }) => ({ list: res }),
     sideEffects: ({ a }) => {
       a.otherAction();
     },
@@ -395,7 +404,7 @@ If some actions need to be triggered, set **errorSideEffects**.
 const actions: StoreActions<State, Actions> = {
   loadList: {
     getPromise: () => new Promise((_, reject) => setTimeout(reject, 500, new Error('Too bad'))),
-    errorEffects: ({ state, error }) => ({ ...state, error: error.message, list: [] }),
+    errorEffects: ({ error }) => ({ error: error.message, list: [] }),
     getErrorMessage: ({ err }) => err.message,
     errorSideEffects: ({ error }) => {
       Logger.log(error);
@@ -517,8 +526,8 @@ Example:
 const actions: StoreActions<State, Actions> = {
   deleteItem: {
     getPromise: ([id]) => new Promise((resolve) => setTimeout(resolve, 500)),
-    optimisticEffects: (state, args) => ({ ...state, list: list.filter((item) => item.id === args[0]) }),
-    errorEffects: (state, error: Error) => ({ ...state, error: error.message }),
+    optimisticEffects: ({ args: [id] }) => ({ list: list.filter((item) => item.id === id) }),
+    errorEffects: ({err} => ({ err: error.message }),
   },
 };
 ```
@@ -554,9 +563,9 @@ export const actionsAbort: StoreActions<State, Actions, Props> = {
           reject(new DOMException('Aborted', 'AbortError'));
         });
       }),
-    errorEffects: ({s, err}) => (err.name === 'AbortError' ? { ...s, isAborted: true } : { ...s, isError: true }),
-    effects: ({s}) => ({ ...s, isSuccess: true }),
-    errorSideEffects: ({s, err}) => {
+    errorEffects: ({ err}) => (err.name === 'AbortError' ? { isAborted: true } : { isError: true }),
+    effects: () => ({ isSuccess: true }),
+    errorSideEffects: ({ err }) => {
       if (e.name === 'AbortError') {
         console.log('AbortError side effect');
       } else {
@@ -571,6 +580,40 @@ Note: ongoing abortable actions will be automatically aborted on store destructi
 
 [![Edit Abort](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abort-v6-uvnl7)
 
+## Helper effect functions
+
+For common / simple use cases, some helpers functions are provided to write basic action effects and improve actions readability.
+
+Example
+
+```typescript
+import { setArgIn } from 'state-decorator/helpers';
+
+type State = {
+  myProp: string;
+};
+
+type Actions = {
+  setMyProp: (v: string) => void;
+};
+
+const actions: StoreActions<State, Actions> = {
+  setMyProp: setArgIn('myProp'),
+  // same as
+  // setMyProp: ({ args: [v] }) => ({ myProp: v }),
+};
+```
+
+| Name         | Purpose                                                                                                                     | Action signature             |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
+| setArgIn     | Effect function to update a state property from action first argument                                                       | (v:T) => void                |
+| setTrueIn    | Effect function to update a boolean state property to true                                                                  | () => void                   |
+| setFalseIn   | Effect function to update a boolean state property to false                                                                 | () => void                   |
+| toggleProp   | Effect function to toggle a boolean state property                                                                          | () => void                   |
+| setMapProp   | Effect function to update a state property of type Record<string, T> using first action argument as key and second as value | (id: string, v:T) => void    |
+| setArrayItem | Effect function to update a state property of type T[] using first action argument as index and second as value             | (index: number, v:T) => void |
+| setResIn     | Effect function of asynchronous action to update a state property with the result of the promise                            | () => Promise<T>             |
+
 ## Call actions on mount
 
 When store is created (for example whe React component in mounted), the **onMount** option is called.
@@ -580,7 +623,21 @@ import { createStore } from 'state-decorator';
 
 const store = createStore(getInitialState, actionsImpl, {
   onMount: ({ a }) => {
-    a.loadList;
+    a.loadList();
+  },
+});
+```
+
+After React component is mounted using _useLocalStore_, the **onMountDeferred** option is called (in a _useEffect_).
+The **onMount** is called _during_ the render of the hooks. If the onMount code is containing a function that is changing parent state,
+React will not update the parent state and will issue a warning.
+
+```typescript
+import { createStore } from 'state-decorator';
+
+const store = createStore(getInitialState, actionsImpl, {
+  onMountDeferred: ({ p }) => {
+    p.loadParentList();
   },
 });
 ```
@@ -646,34 +703,6 @@ export function SubComponent() {
 
 [![Edit Slice](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/slices-v6-eg471?file=/src/SliceView.tsx)
 
-# Global configuration
-
-Overrides configuration to set properties that will be used by all stores.
-
-```typescript
-// all parameters are optional
-setGlobalConfig({
-  // Used to clone state and props when managing optimistic conflicting actions.
-  clone: defaultCloneFunc,
-  // Compare to objets and returns if they are equal (slices).
-  comparator: shallow,
-  // Callback function to handle asychronous actions rejected promise (error reporting).
-  asyncErrorHandler: () => {},
-  // Tests if the error will trigger a retry of the action or will fail directly (retry promises)
-  retryOnErrorFunction: (error: Error) => error instanceof TypeError,
-  // Notification function on successful asynchronous action (if success message is set on action)
-  notifySuccess: undefined,
-  // Notification function on failed asynchronous action (if error message is set on action)
-  notifyError: undefined,
-  // Notification function injected in side effects action context (success and error) to notify warning
-  notifyWarning: undefined,
-  // Function called to return common error message if error message is not provided or error not managed in action.
-  // To override locally in action, provide a function that returns _null_.
-  // If _isErrorManaged_ is set to _true_, this function will not be called.
-  getErrorMessage: undefined,
-});
-```
-
 # Update store when props change
 
 ## Getting started
@@ -686,7 +715,7 @@ const store = createStore(getInitialState, actionsImpl, {
     // list of depedencies that should trigger effects & side effects if changed
     getDeps: (p) => [p.id],
     // state changes, indices contains the indices of dependencies that have changed
-    effects: ({ state, props, indices, isInit }) => ({ ...state, selectedId: props.id }),
+    effects: ({ props, indices, isInit }) => ({ selectedId: props.id }),
     // other changes (use short aliases)
     sideEffects: ({ p, a, indices, isInit }) => {
       a.loadItem(p.id);
@@ -722,7 +751,7 @@ const store = createStore(getInitialState, actionsImpl, {
     },
     {
       getDeps: (p) => [p.otherProp],
-      effects: ({ state, props, indices }) => ({ ...state, otherProp: props.otherProp }),
+      effects: ({ props, indices }) => ({ otherProp: props.otherProp }),
       sideEffects: ({ p, a }) => {
         a.otherSideEffect(p.otherProp);
       },
@@ -745,7 +774,7 @@ const store = createStore(getInitialState, actionsImpl, {
   onPropsChange: [
     {
       getDeps: (p) => [p.userId],
-      effects: ({ s, p }) => ({ ...s, userId: p.userId }),
+      effects: ({ p }) => ({ userId: p.userId }),
       sideEffects: ({ p, a }) => {
         a.loadUser(p.userId);
       },
@@ -759,7 +788,7 @@ const store = createStore(getInitialState, actionsImpl, {
   onPropsChange: [
     {
       getDeps: (p) => [p.userId],
-      effects: ({ s, p, isInit }) => (isInit ? null : { ...s, userId: p.userId }),
+      effects: ({ p, isInit }) => (isInit ? null : { userId: p.userId }),
       sideEffects: ({ p, a }) => {
         a.loadUser(p.userId);
       },
@@ -776,6 +805,210 @@ const store = createStore(getInitialState, actionsImpl, {
 - Use several prop change configurations to separate dependencies between props and have simple definition.
 - Use onMount flag to have a more systematic and simpler code.
 
+# Global / local Stores and State sharing
+
+There are two ways to share state and actions:
+
+- Using regular props.
+- Using state slices.
+
+There are two types of stores:
+
+- Global store:
+
+  - store is created as an instance (**createStore**) and it is exported from the JS module.
+  - it can be imported in any other JS module.
+  - store lifespan is equal to the application one.
+
+- Local store:
+  - store is created by a hook (**useLocalStore**) and is bound to a React component (each instance of this component owns its own store).
+  - action and props can be shared using props or sharing the store itself (see example below)
+  - store is destroyed when its owner React component is unmounted.
+
+## Using props
+
+- Bind a React component to make store state / actions available on React component.
+- Any change in the store (state, loading actions, ...) will trigger a refresh of the bound React component.
+- Pass state / actions using regular React props.
+- Use React.memo to prevent unecessary React re-renders if needed.
+
+### Global store
+
+```typescript
+// Declare typings & actions as above
+
+// Create a store in a dedicated file, named GlobalStore.ts for example
+export const store = createStore(getInitialState, userAppActions);
+
+//----------------------
+
+// In another file
+import React, { memo } from 'react';
+import { useStore } from 'state-decorator';
+import store from './GlobalStore';
+
+// Bind to react component
+// Each time the store state changes, a re-render is done.
+export function Container(props: Props) {
+  const { state, actions } = useStore(store, props);
+  return (
+    <div>
+      <Title text={state.title} />
+      <Subtitle text={state.subtitle} />
+    </div>
+  );
+}
+
+// Simple presentation components
+// Use memo to prevent re-render if another part of the state has changed than "title"
+const Title = memo(function Title(props: { title: string }) {
+  return <div>{props.text}</div>;
+});
+
+const Subtitle = memo(function Subtitle(props: { subtitle: string }) {
+  return <div>{props.subtitle}</div>;
+});
+```
+
+### Local Store
+
+```typescript
+import React, { memo } from 'react';
+import { useLocalStore } from 'state-decorator';
+
+// Declare typings & actions as above
+
+// Create and bind to react component
+// Each time the store state changes, a re-render is done.
+export function Container(props: Props) {
+  const { state, actions } = useLocalStore(getInitialState, userAppActions, props);
+  return (
+    <div>
+      <Title text={state.title} />
+      <Subtitle text={state.subtitle} />
+    </div>
+  );
+}
+
+// Simple presentation components
+// Use memo to prevent re-render if another part of the state has changed than "title"
+const Title = memo(function Title(props: { title: string }) {
+  return <div>{props.title}</div>;
+});
+
+const Subtitle = memo(function Subtitle(props: { subtitle: string }) {
+  return <div>{props.subtitle}</div>;
+});
+```
+
+## State slices
+
+Using React props implies useless re-renders and optionally memoization.
+
+To prevent this, React provides [context](https://en.reactjs.org/docs/context.html) hooks.
+
+The problem is that if the context contains a complex state with lots of props, if **any** of these props is changing, **all** components that uses this context will be re-rendered.
+
+To overcome this problem, the StateDecorator provides a **useStoreSlice** and **useStoreContextSlice** hook that allow to define and extracts a slice of the state and trigger a re-render of the React component only if the slice has changed.
+
+[![Edit Slice](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/slices-v6-eg471?file=/src/SliceView.tsx)
+
+## Global Store
+
+```typescript
+// Declare typings & actions as above
+
+// Create a store in a dedicated file, named GlobalStore.ts for example
+export const store = createStore(getInitialState, userAppActions);
+
+//----------------------
+
+import React, { memo } from 'react';
+import { useStoreSlice } from 'state-decorator';
+import store from './GlobalStore';
+
+export function Container(props: Props) {
+  return (
+    <div>
+      <Title />
+      <Subtitle />
+    </div>
+  );
+}
+
+function Title() {
+  // extracts the "title" slice
+  // component is refresh only if title is changed in the store
+  const { title } = useStoreSlice(store, ['title']);
+  return <div>{title}</div>;
+}
+
+function Subtitle(props: { subtitle: string }) {
+  const { subtitle } = useStoreSlice(store, ['subtitle']);
+  return <div>{subtitle}</div>;
+}
+```
+
+## Local Store
+
+```typescript
+// ------- stores/MyStore.ts --------
+
+import React from 'react';
+import { useLocalStore, useStoreContextSlice } from 'state-decorator';
+
+// Declare typings & actions as above
+
+// Create a store context
+
+type StoreContextProps = StoreApi<State, Actions, Props>;
+
+export const StoreContext = createContext<StoreContextProps>(null);
+
+// The StoreContext will allow to access to the store
+// But this context is NOT refreshed if the store state is changed
+export function StoreContextProvider(p: { children: any; propIn: string }) {
+  const { children, ...props } = p;
+  const store = useLocalStore(getInitialState, actionsImpl, props);
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+}
+
+// In a container file ------------------------
+
+import { StoreContextProvider } from 'stores/MyStore';
+
+// If Container is destroyed store is destroyed
+export function Container(props: Props) {
+  return (
+    <StoreContextProvider {...props}>
+      <SubComponent />
+      <SubComponent2 />
+    </StoreContextProvider>
+  );
+}
+
+// Component deeper in the component tree...
+
+import { StoreContext } from 'stores/MyStore';
+
+function Title() {
+  // extracts the "title" slice
+  // component is refresh only if title is changed in the store
+  const { title } = useStoreContextSlice(StoreContext, ['title']);
+
+  // same as
+  // const store = useContext(StoreContext)
+  // const { title } = useStoreSlice(store, ['title']);
+
+  return <div>{title}</div>;
+}
+
+function Subtitle(props: { subtitle: string }) {
+  const { subtitle } = useStoreContextSlice(StoreContext, ['subtitle']);
+  return <div>{subtitle}</div>;
+}
+```
+
 # Derived state
 
 A derived state is a state that can be deduced from state and props.
@@ -831,6 +1064,32 @@ export function App(props: Props) {
 - In general, do **not** compute derived values directly in state, it's error prone as you can forget some places or implement different logic.
 - Use derived state especially if this state is shared accross several sub components
 
+# Global configuration
+
+Overrides configuration to set properties that will be used by all stores.
+
+```typescript
+// all parameters are optional
+setGlobalConfig({
+  // Used to clone state and props when managing optimistic conflicting actions.
+  clone: defaultCloneFunc,
+  // Compare to objets and returns if they are equal (slices).
+  comparator: shallow,
+  // Callback function to handle asychronous actions rejected promise (error reporting).
+  asyncErrorHandler: () => {},
+  // Tests if the error will trigger a retry of the action or will fail directly (retry promises)
+  retryOnErrorFunction: (error: Error) => error instanceof TypeError,
+  // Notification function on successful asynchronous action (if success message is set on action)
+  notifySuccess: undefined,
+  // Notification function on failed asynchronous action (if error message is set on action)
+  notifyError: undefined,
+  // Notification function injected in side effects action context (success and error) to notify warning
+  notifyWarning: undefined,
+  // Function called to return common error message if error message is not provided or error not managed in action. To override locally in action, provide a function that returns _null_.
+  getErrorMessage: undefined,
+});
+```
+
 # Debug actions
 
 To debug actions, add a middleware to the store.
@@ -862,7 +1121,7 @@ Example:
 
 ```
 [StateDecorator sample] loadList effects {list: Array(10), prop1: "", prop2: "", prop3: ""} loading: false
-middlewares.ts:36 [StateDecorator sample] setProp1 effects {list: Array(10), prop1: "92", prop2: "", prop3: ""}
+[StateDecorator sample] setProp1 effects {list: Array(10), prop1: "92", prop2: "", prop3: ""}
 ```
 
 ## Detailed Logger
@@ -914,11 +1173,11 @@ function Container(props: Props) {
   - a new store is created each time state or props are set.
   - it allows to share mock store across tests.
 - The API is chainable: functions are returning a mock store, excepting test functions.
-- On a mock store, we can test the store internals after initialiation, after inbound props have changed, after actions are called.
+- On a mock store, we can test the store internals after initialiation, after inbound props have changed, after actions are called. These test function do not change the internal state of the mock store.
 
 ## Getting started
 
-1. Create and setup a mock store (_createMockFromStore_)
+1. Create and setup a mock store (_createMockFromStore_, _createMockStore_)
 2. Test store after initialization (_onInit_)
 3. Test store after props changes (_onPropsChange_)
 4. Test each action:

package/es/helpers.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Effect function that sets the first action argument to the specified prop.
+ */
+export declare function setArgIn<S, K extends keyof S>(propName: K): (ctx: {
+    s: S;
+    args: [S[K]];
+}) => Partial<S>;
+/**
+ * Effect function that sets <code>true</code> in the specified prop.
+ */
+export declare function setTrueIn<S, K extends keyof S>(propName: K): (ctx: {
+    s: S;
+}) => Partial<S>;
+/**
+ * Effect function that sets <code>false</code> in the specified prop.
+ */
+export declare function setFalseIn<S, K extends keyof S>(propName: K): (ctx: {
+    s: S;
+}) => Partial<S>;
+/**
+ * Effect function that sets toggles the boolean value of the specified prop.
+ */
+export declare function toggleProp<S, K extends keyof S>(propName: K): (ctx: {
+    s: S;
+}) => Partial<S>;
+/**
+ * Effect function that sets the update the specifed prop as an array using first action argument as index
+ * and second as value to set.
+ */
+export declare function setMapItem<S, K extends keyof S, T>(propName: K): (ctx: {
+    s: S;
+    args: [string, T];
+}) => Partial<S>;
+/**
+ * Effect function that sets the update the specifed prop as an array using first action argument as index
+ * and second as value to set.
+ */
+export declare function setArrayItem<S, K extends keyof S, T>(propName: K): (ctx: {
+    s: S;
+    args: [number, T];
+}) => Partial<S>;
+/**
+ * Effect function that sets the asynchronous action result to the specified prop.
+ */
+export declare function setResIn<S, K extends keyof S>(propName: K): (ctx: {
+    s: S;
+    res: S[K];
+}) => Partial<S>;

package/es/helpers.js

@@ -0,0 +1,2 @@
+var n=function(){return(n=Object.assign||function(n){for(var r,t=1,u=arguments.length;t<u;t++)for(var e in r=arguments[t])Object.prototype.hasOwnProperty.call(r,e)&&(n[e]=r[e]);return n}).apply(this,arguments)};function r(n){return function(r){var t,u=r.s,e=r.args[0];return u[n]===e?null:((t={})[n]=e,t)}}function t(n){return function(r){var t;return r.s[n]?null:((t={})[n]=!0,t)}}function u(n){return function(r){var t;return r.s[n]?((t={})[n]=!1,t):null}}function e(n){return function(r){var t,u=r.s;return(t={})[n]=!u[n],t}}function o(r){return function(t){var u,e,o=t.s,c=t.args,i=c[0],a=c[1];return(u={})[r]=n(n({},o[r]),((e={})[i]=a,e)),u}}function c(n){return function(r){var t,u=r.s,e=r.args,o=e[0],c=e[1],i=function(n,r,t){if(t||2===arguments.length)for(var u,e=0,o=r.length;e<o;e++)!u&&e in r||(u||(u=Array.prototype.slice.call(r,0,e)),u[e]=r[e]);return n.concat(u||Array.prototype.slice.call(r))}([],u[n],!0);return i[o]=c,(t={})[n]=i,t}}function i(n){return function(r){var t,u=r.res;return(t={})[n]=u,t}}export{r as setArgIn,c as setArrayItem,u as setFalseIn,o as setMapItem,i as setResIn,t as setTrueIn,e as toggleProp};
+//# sourceMappingURL=helpers.js.map

package/es/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../node_modules/tslib/tslib.es6.js"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","to","from","pack","ar","l","Array","slice","concat"],"mappings":"AA+BO,IAAIA,EAAW,WAQlB,OAPAA,EAAWC,OAAOC,QAAU,SAAkBC,GAC1C,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KAAIN,EAAEM,GAAKL,EAAEK,IAE9E,OAAON,IAEKU,MAAMC,KAAMP,sgBA6HzB,SAAuBQ,EAAIC,EAAMC,GACpC,GAAIA,GAA6B,IAArBV,UAAUC,OAAc,IAAK,IAA4BU,EAAxBb,EAAI,EAAGc,EAAIH,EAAKR,OAAYH,EAAIc,EAAGd,KACxEa,GAAQb,KAAKW,IACRE,IAAIA,EAAKE,MAAMV,UAAUW,MAAMT,KAAKI,EAAM,EAAGX,IAClDa,EAAGb,GAAKW,EAAKX,IAGrB,OAAOU,EAAGO,OAAOJ,GAAME,MAAMV,UAAUW,MAAMT,KAAKI"}

package/es/impl.d.ts

@@ -188,7 +188,7 @@ export declare function areSameArgs(args1: any[], args2: any[]): boolean;
 /** @internal */
 export declare function computeDerivedValues<S, A, P, DS>(s: Ref<S>, p: Ref<P>, derivedStateRef: Ref<DerivedState<DS>>, options: StoreOptions<S, A, P, DS>): boolean;
 /** @internal */
-export declare function onPropChange<S, P, A, DS>(stateRef: Ref<S>, derivedStateRef: Ref<DerivedState<DS>>, propsRef: Ref<P>, oldProps: P, actionsRef: Ref<A>, options: StoreOptions<S, A, P, DS>, setState: SetStateFunc<S, A>, isInit: boolean): void;
+export declare function onPropChange<S, P, A, DS>(stateRef: Ref<S>, derivedStateRef: Ref<DerivedState<DS>>, propsRef: Ref<P>, oldProps: P, actionsRef: Ref<A>, options: StoreOptions<S, A, P, DS>, setState: SetStateFunc<S, A>, isInit: boolean, isDeferred: boolean): void;
 /** @internal */
 export declare function runMiddlewares<S, A extends DecoratedActions, P>(middlewares: Middleware<S, A, P>[], oldState: S, newState: S, loading: boolean, actionName: keyof A, actionType: 'preEffects' | 'effects' | 'errorEffects' | null, isAsync: boolean, actionCtx: any): {
     newState: S;