@webkrafters/react-observable-context 4.0.0 → 4.1.0-alpha.1

package/README.md

@@ -80,14 +80,7 @@ A property path is a dot-notation string leading to a specific property within a
 <strong id="property-path-example">Ex. Given the following object:</strong>
 
 ```jsx
-{
-	a: {
-		c: {
-			e: 5,
-			f: [ 0, 2, 4 ]
-		}
-	}
-}
+{ a: { c: { e: 5, f: [ 0, 2, 4 ] } } }
 ```
 The property path `a.c.e` accesses the `e=5` property.<br />
 Either of the property paths `a.c.f.1` and `a.c.f[1]`  accesses the `[1]=2` property.<br />
@@ -112,29 +105,28 @@ A selector map is an object holding key:value pairs.<br />
 ```jsx
 // Given the following state object:
 const state = {
-	a: 1,
-	b: 2,
-	c: 3,
-	d: {
-		e: 5,
-		f: [ 6, {
-				x: 7,
-				y: 8,
-				z: 9
-		} ]
-	}
+  a: 1, b: 2, c: 3, d: {
+    e: 5,
+    f: [ 6, {
+      x: 7,
+      y: 8,
+      z: 9
+   } ]
+  }
 };
+
 // a client observing the following selector map
 const selectorMap = {
-	all: '@@STATE',
-	myData: 'd',
-	secondFElement: 'd.f[1]'
+  all: '@@STATE',
+  myData: 'd',
+  secondFElement: 'd.f[1]'
 };
+
 // will receive the following store data
 store.data = {
-	all: state,
-	myData: state.d,
-	secondFElement: state.d.f[1]
+  all: state,
+  myData: state.d,
+  secondFElement: state.d.f[1]
 }
 ```
 
@@ -207,6 +199,199 @@ store.setState({ ...state, a: { ...state.a, b: [ { ...first, y: 30 }, 22, ...res
 // Refrain from doing this, please!
 ```
 
+<h3 id="setstate-tags"><b><i><u>Rewriting state using tag commands</u></i></b></h3>
+By default <code>store.setState</code> merges new changes into current state. To overwrite current state slices with new state values, <b>7</b> tag commands have been provided for:
+<ol>
+	<li><span style="margin-left: 10px"><code>@@CLEAR:</code> setting state slice to its corresponding empty value</span></li>
+	<li><span style="margin-left: 10px"><code>@@DELETE:</code> deleting properties</span></li>
+	<li><span style="margin-left: 10px"><code>@@MOVE:</code> moving array elements</span></li>
+	<li><span style="margin-left: 10px"><code>@@PUSH:</code> pushing new items into an array</span></li>
+	<li><span style="margin-left: 10px"><code>@@REPLACE:</code> replacing property values</span></li>
+	<li><span style="margin-left: 10px"><code>@@SET:</code> setting property values</span></li>
+	<li><span style="margin-left: 10px"><code>@@SPLICE:</code> splicing array items</span></li>
+</ol>
+<b>Examples:</b><br /><br />
+
+<i><b>@@CLEAR:</b> (takes no arguments)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10
+};
+
+/* empties the state; sets state = {} */
+store.setState( '@@CLEAR' ) // or store.setState({ '@@CLEAR': <anything> })
+
+/* empties the value at state.a.b; sets state.a.b = [] */
+store.setState({ a: { b: '@@CLEAR' } }) // or store.setState({ a: { b: { '@@CLEAR': <anything> } } })
+
+/* empties the value at state.a.j; sets state.a.j = null */
+store.setState({ a: { j: '@@CLEAR' } }) // or store.setState({ a: { j: { '@@CLEAR': <anything> } } })
+
+/* empties the value at state.a.b[ 0 ]; sets state.a.b = [{}] */
+store.setState({ a: { b: [ '@@CLEAR' ] } }) // or store.setState({ a: { b: [ { '@@CLEAR': <anything> } ] } })
+
+/* empties the value at state.a.b[0]; sets state.a.b = [{}, state.a.b[1]] */
+store.setState({ a: { b: [ '@@CLEAR', state.a.b[1] ] } }) // or store.setState({ a: { b: [ { '@@CLEAR': <anything> }, state.a.b[1] ] } })
+
+/* empties the value at state.a.b[0]; sets state.a.b = [{}, a.b[1]] using indexing (RECOMMENDED) */
+store.setState({ a: { b: { 0: '@@CLEAR' } } }) // or store.setState({ a: { b: { 0: { '@@CLEAR': <anything> } } } })
+```
+
+<i><b>@@DELETE:</b> (takes an array argument listing property keys to delete)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10
+};
+
+store.setState({ '@@DELETE': [ 'a' ] }) // removes state.a; sets state = {j: 10}
+
+store.setState({ a: { '@@DELETE': [ 'b' ] } }) // removes state.a.b; sets state.a = {}
+
+/* removes state.a.b[0]; leaving state.a.b = [{ x: 17, y: 18, z: 19 }] */
+store.setState({ a: { b: { '@@DELETE': [ 0 ] } } }) // or store.setState({ a: { b: { '@@DELETE': [ -2 ] } } })
+
+/* removes `x` and `z` properties from state.a.b[1]; sets state.a.b = [{ x: 7, y: 8, z: 9 }, {y: 18}] */
+store.setState({ a: { b: [ state.a.b[ 0 ], { '@@DELETE': [ 'x', 'z' ] } ] } })
+
+/* removes `x` and `z` properties from state.a.b[1]; sets state.a.b = [{ x: 7, y: 8, z: 9 }, {y: 18}] using indexing (RECOMMENDED) */
+store.setState({ a: { b: { 1: { '@@DELETE': [ 'x', 'z' ] } } } })
+```
+
+<i><b>@@MOVE:</b> (takes an array argument listing: -/+fromIndex, -/+toIndex and optional +numItems?. numItems = 1 by default)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10,
+  q: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+};
+
+store.setState({ a: { '@@MOVE': [ 0, 1 ] } }) // assigning a '@@MOVE' command to a non-array property has no effect.
+
+/* moves state.a.b[0] into index 1; leaving state.a.b = [{ x: 17, y: 18, z: 19 }, { x: 7, y: 8, z: 9 }] */
+store.setState({ a: { b: { '@@MOVE': [ 0, 1 ] } } }) // or store.setState({ a: { b: { '@@MOVE': [ -2, -1 ] } } })
+
+/* moves state.q[4] - [7] into indexes 1 - 4; leaving state.q = [ 1, 5, 6, 7, 8, 2, 3, 4, 9 ] */
+store.setState({ a: { q: { '@@MOVE': [ 4, 1, 4 ] } } }) // or store.setState({ a: { q: { '@@MOVE': [ -5, -8, 4 ] } } })
+```
+
+<i><b>@@PUSH:</b> (takes an array argument listing new values to append)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10
+};
+
+store.setState({ a: { '@@PUSH': [{ n: 5 }] } }) // assigning a '@@PUSH' command to a non-array property has no effect.
+
+/* appends 2 new items into state.a.b; leaving state.a.b = [...state.a.b, { x: 27, y: 28, z: 29 }, { x: 37, y: 38, z: 39 }] */
+store.setState({ a: { b: { '@@PUSH': [{ x: 27, y: 28, z: 29 }, { x: 37, y: 38, z: 39 }] } } })
+```
+
+<i><b>@@REPLACE:</b> (takes an argument holding the replacment value)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10
+};
+
+store.setState({ '@@REPLACE': { a: 'Demo', j: 17 } }) // rewrites state to { a: 'Demo', j: 17 };
+
+store.setState({ a: { '@@REPLACE': { message: 'Testing...' } } }) // rewrites state.a.b to { message: 'Testing...' }
+
+/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] */
+store.setState({ a: { b: [ state.a.b[ 0 ], { '@@REPLACE': { x: 97, y: 98, z: 99 } } ] } })
+
+/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] using indexing (RECOMMENDED) */
+store.setState({ a: { b: { 1: { '@@REPLACE': { x: 97, y: 98, z: 99 } } } } })
+```
+
+<i><b>@@SET:</b> (takes an argument holding either the replacment value or a compute function returning the replacement value)</i>
+
+```jsx
+/*
+This tag is for handling edge cases only. Please use sparingly. In most cases, store.setState with or without any of the other tags is sufficient and most efficient.
+
+This and the '@@REPLACE' tags are functionally equivalent when used with a replacement value argument.
+
+Be aware that the compute function argument may be `undefined` for properties which do not yet exist in the state.
+*/
+
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10
+};
+
+store.setState({ '@@SET': currentValue => ({ ...currentValue, a: 'Demo', j: 17 }) }) // rewrites state to { ...state, a: 'Demo', j: 17 };
+
+store.setState({ a: { '@@SET': currentValue => ({ ...currentValue, message: 'Testing...' }) } }) // rewrites state.a.b to { ...state, message: 'Testing...' }
+
+/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] */
+store.setState({ a: { b: [ state.a.b[ 0 ], { '@@SET': currentValue => ({ ...currentValue, x: 97, y: 98, z: 99 }) } ] } })
+
+/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] using indexing (RECOMMENDED) */
+store.setState({ a: { b: { 1: { '@@SET': currentValue => ({ ...currentValue, x: 97, y: 98, z: 99 }) } } } })
+```
+
+<i><b>@@SPLICE:</b> (takes an array argument listing: -/+fromIndex, +deleteCount and optional ...newItems? newItems = ...[] by default)</i>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10,
+  q: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+};
+
+store.setState({ a: { '@@SPLICE': [ 0, 1 ] } }) // assigning a '@@SPLICE' command to a non-array property has no effect.
+
+/* removes state.a.b[0]; leaving state.a.b = [{ x: 17, y: 18, z: 19 }] */
+store.setState({ a: { b: { '@@SPLICE': [ 0, 1 ] } } }) // or store.setState({ a: { b: { '@@SPLICE': [ -2, -1 ] } } })
+
+/* replaces state.q[4] - [7] with 2 items; leaving state.q = [ 1, 2, 3, 4, 33, 88, 9 ] */
+store.setState({ a: { q: { '@@SPLICE': [ 4, 4, 33, 88 ] } } }) // or store.setState({ a: { q: { '@@SPLICE': [ -5, 4, 33, 88 ] } } })
+```
+
+<h3><b><i>Combination Usage:</i></b></h3>
+
+These tags may be used in combination with the default usage where all top-level tag command results in property are sequentially merged into state followed by the merging of the rest of the property changes.
+
+<strong>Example:</strong>
+
+```jsx
+const state = {
+  a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
+  j: 10,
+  q: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+};
+
+store.setState({
+  a: {
+    b: {
+      /* evaluated 1st */ '@@DELETE': [ 0 ], // upon deleting state.a.b[0] -> state.a.b[1] becomes the new state.a.b[0]
+      /* evaluated 3rd */ 0: '@@CLEAR', // clear the new state.a.b[0]
+      /* evaluated 4th */ 2: { x: 47, y: 48, z: 49 }, // add new item at state.a.b[2],
+      /* evaluated 2md */ '@@PUSH': [{ x: 107, y: 108, z: 109 }] // appends state.a.b[1]
+    }
+  },
+  j: { '@@SET': currentValue => currentValue < 10 ? currentValue : 0 },
+  q: {
+    /* evaluated 1st */ '@@MOVE': [ 5, 3, 2 ],
+    /* evaluated 2md */ 12: 11
+  }
+})
+// => {
+//  a: { b: [{}, { x: 107, y: 108, z: 109 }, { x: 47, y: 48, z: 49 }] },
+//  j: 0,
+//  q: [ 1, 2, 3, 6, 7, 4, 5, 8, 9, <empty>, <empty>, <empty>, 11 ]
+// }
+```
+
 # API
 
 The React-Observable-Context module contains **4** exports namely:
@@ -252,13 +437,15 @@ The React-Observable-Context module contains **4** exports namely:
 
 # Usage
 
-<i><b><u>context.js</u></b></i>
+<i><u><b>context.js</b></u></i>
+
 ```jsx
 import { createContext } from '@webkrafters/react-observable-context';
 export default createContext();
 ```
 
-<i><b><u>ui.js</u></b> (connect method)</i>
+<i><u><b>ui.js</b></u> (connect method)</i>
+
 ```jsx
 import React, { useCallback, useEffect } from 'react';
 import { connect } from '@webkrafters/react-observable-context';
@@ -266,13 +453,13 @@ import ObservableContext from './context';
 
 export const YearText = ({ data }) => ( <div>Year: { data.year }</div> );
 export const YearInput = ({ data, setState, resetState }) => {
-	const onChange = useCallback( e => setState({
-		a: { b: { x: { y: { z: { 0: e.target.value } } } } }
-	}), [ setState ]);
-	useEffect(() => {
-		data.year > 2049 && resetState([ 'a.b.c' ]);
-	}, [ data.year ]);
-	return ( <div>Year: <input type="number" onChange={ onChange } /> );
+  const onChange = useCallback( e => setState({
+    a: { b: { x: { y: { z: { 0: e.target.value } } } } }
+  }), [ setState ]);
+  useEffect(() => {
+    data.year > 2049 && resetState([ 'a.b.c' ]);
+  }, [ data.year ]);
+  return ( <div>Year: <input type="number" onChange={ onChange } /> );
 };
 
 const withConnector = connect( ObservablContext, { year: 'a.b.x.y.z[0]' } );
@@ -280,16 +467,17 @@ const Client1 = withConnector( YearText );
 const Client2 = withConnector( YearInput );
 
 const Ui = () => (
-	<div>
-		<Client1 />
-		<Client2 />
-	</div>
+  <div>
+    <Client1 />
+    <Client2 />
+  </div>
 );
 
 export default Ui;
 ```
 
-<i><b><u>ui.js</u></b> (useContext with memo method)</i>
+<i><u><b>ui.js</b></u> (useContext with memo method)</i>
+
 ```jsx
 import React, { memo, useCallback, useEffect } from 'react';
 import { useContext } from '@webkrafters/react-observable-context';
@@ -298,32 +486,33 @@ import ObservableContext from './context';
 const selectorMap = { year: 'a.b.x.y.z[0]' };
 
 const Client1 = memo(() => { // memoize to prevent 'no-change' renders from the parent.
-	const { data } = useContext( ObservableContext, selectorMap );
-	return ( <div>Year: { data.year }</div> );
+  const { data } = useContext( ObservableContext, selectorMap );
+  return ( <div>Year: { data.year }</div> );
 });
 
 const Client2 = memo(() => { // memoize to prevent 'no-change' renders from the parent.
-	const { data, setState, resetState } = useContext( ObservableContext, selectorMap );
-	const onChange = useCallback( e => setState({
-		a: { b: { x: { y: { z: { 0: e.target.value } } } } }
-	}), [ setState ]);
-	useEffect(() => {
-		data.year > 2049 && resetState([ 'a.b.c' ]);
-	}, [ data.year ]);
-	return ( <div>Year: <input type="number" onChange={ onChange } /> );
+  const { data, setState, resetState } = useContext( ObservableContext, selectorMap );
+  const onChange = useCallback( e => setState({
+    a: { b: { x: { y: { z: { 0: e.target.value } } } } }
+  }), [ setState ]);
+  useEffect(() => {
+    data.year > 2049 && resetState([ 'a.b.c' ]);
+  }, [ data.year ]);
+  return ( <div>Year: <input type="number" onChange={ onChange } /> );
 });
 
 const Ui = () => (
-	<div>
-		<Client1 />
-		<Client2 />
-	</div>
+  <div>
+    <Client1 />
+    <Client2 />
+  </div>
 );
 
 export default Ui;
 ```
 
 <i id="provider-usage"><b><u>provider.js</u></b></i>
+
 ```jsx
 import React, { useEffect, useState } from 'react';
 import ObservableContext from './context';
@@ -332,47 +521,47 @@ import Ui from './ui';
 const DEFAULT_C = 36;
 
 const updateHooks = {
-	resetState: ( ...args ) => {
-		console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
-		return true;
-	},
-	setState: ( ...args ) => {
-		console.log( 'merging following into state >>>> ', JSON.stringify( args ) );
-		return true;
-	}
+  resetState: ( ...args ) => {
+    console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
+    return true;
+  },
+  setState: ( ...args ) => {
+    console.log( 'merging following into state >>>> ', JSON.stringify( args ) );
+    return true;
+  }
 };
 
 const storageStub = {
-	clone( data ) { return <your clone function>( data ) }, 
-	data: null,
-	getItem( key ) { return this.data },
-	removeItem( key ) { this.data = null },
-	setItem( key, data ) { this.data = data } 
+  clone( data ) { return your_clone_function( data ) }, 
+  data: null,
+  getItem( key ) { return this.data },
+  removeItem( key ) { this.data = null },
+  setItem( key, data ) { this.data = data } 
 };
 
 const Provider = ({ c = DEFAULT_C }) => {
 	
-	const [ state, setState ] = useState(() => ({
-		a: { b: { c, x: { y: { z: [ 2022 ] } } } });
-	}));
-	
-	useEffect(() => {
-		// similar to `store.setState`, use the following to update
-		// only the changed slice of the context internal state.
-		setState({ a: { b: { c } } });
-		// Do not do the following: it will override the context internal state.
-		// setState({ ...state, a: { ...state.a, b: { ...state.a.b, c } } });
-	}, [ c ]);
-	
-	return (
-		<ObservableContext.Provider
-			prehooks={ updateHooks }
-			storage={ storageStub }
-			value={ state }
-		>
-			<Ui />
-		</ObservableContext.Provider>
-	);
+  const [ state, setState ] = useState(() => ({
+    a: { b: { c, x: { y: { z: [ 2022 ] } } } }
+  }));
+
+  useEffect(() => {
+    // similar to `store.setState`, use the following to update
+    // only the changed slice of the context internal state.
+    setState({ a: { b: { c } } });
+    // Do not do the following: it will override the context internal state.
+    // setState({ ...state, a: { ...state.a, b: { ...state.a.b, c } } });
+  }, [ c ]);
+
+  return (
+    <ObservableContext.Provider
+      prehooks={ updateHooks }
+      storage={ storageStub }
+      value={ state }
+    >
+      <Ui />
+    </ObservableContext.Provider>
+  );
 };
 Provider.displayName = 'Provider';
 
@@ -380,6 +569,7 @@ export default Provider;
 ```
 
 <i><b><u>index.js</u></b></i>
+
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -389,6 +579,15 @@ ReactDOM.render( <Provider />, document.getElementById( 'root' ) );
 ```
 
 <h1 id="changes">What's Changed?</h1>
+<b>v4.1.0</b>
+<table>
+	<tbody>
+		<tr><td><b>1.</b></td><td>Added new setState <a href="#setstate-tags">tags</a> to facilitate state update operations.</td></tr>
+	</tbody>
+</table>
+<hr />
+
+<b>v4.0.0</b>
 <table>
 	<tbody>
 		<tr><td><b>1.</b></td><td>Added the <a href="#connect"><code>connect</code></a> function to facilitate the encapsulated context-usage method.</td></tr>

package/dist/constants.d.ts

@@ -1,2 +1,9 @@
+export const CLEAR_TAG: "@@CLEAR";
+export const DELETE_TAG: "@@DELETE";
 export const FULL_STATE_SELECTOR: "@@STATE";
-export const NULL_STATE_SELECTOR: "";
+export const MOVE_TAG: "@@MOVE";
+export const NULL_STATE_SELECTOR: "";
+export const PUSH_TAG: "@@PUSH";
+export const REPLACE_TAG: "@@REPLACE";
+export const SET_TAG: "@@SET";
+export const SPLICE_TAG: "@@SPLICE";

package/dist/constants.js

@@ -2,8 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NULL_STATE_SELECTOR = exports.FULL_STATE_SELECTOR = void 0;
+exports.SPLICE_TAG = exports.SET_TAG = exports.REPLACE_TAG = exports.PUSH_TAG = exports.NULL_STATE_SELECTOR = exports.MOVE_TAG = exports.FULL_STATE_SELECTOR = exports.DELETE_TAG = exports.CLEAR_TAG = void 0;
+var CLEAR_TAG = '@@CLEAR';
+exports.CLEAR_TAG = CLEAR_TAG;
+var DELETE_TAG = '@@DELETE';
+exports.DELETE_TAG = DELETE_TAG;
 var FULL_STATE_SELECTOR = '@@STATE';
 exports.FULL_STATE_SELECTOR = FULL_STATE_SELECTOR;
+var MOVE_TAG = '@@MOVE';
+exports.MOVE_TAG = MOVE_TAG;
 var NULL_STATE_SELECTOR = '';
-exports.NULL_STATE_SELECTOR = NULL_STATE_SELECTOR;
+exports.NULL_STATE_SELECTOR = NULL_STATE_SELECTOR;
+var PUSH_TAG = '@@PUSH';
+exports.PUSH_TAG = PUSH_TAG;
+var REPLACE_TAG = '@@REPLACE';
+exports.REPLACE_TAG = REPLACE_TAG;
+var SET_TAG = '@@SET';
+exports.SET_TAG = SET_TAG;
+var SPLICE_TAG = '@@SPLICE';
+exports.SPLICE_TAG = SPLICE_TAG;

package/dist/main/hooks/use-state-manager/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("react");
-var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
+var _utils = require("../../../utils");
 var _accessorCache = _interopRequireDefault(require("../../../model/accessor-cache"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -15,7 +15,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var useStateManager = function useStateManager(initStateValue) {
   var _useState = (0, _react.useState)(function () {
-      return (0, _lodash["default"])(initStateValue);
+      return (0, _utils.clonedeep)(initStateValue);
     }),
     _useState2 = _slicedToArray(_useState, 1),
     state = _useState2[0];

package/dist/main/hooks/use-store/index.d.ts

@@ -4,6 +4,7 @@ export namespace deps {
 }
 export default useStore;
 export type IStorage<T extends import("../../../types").State> = import("../../../types").IStorage<T>;
+export type UpdatePayload<T extends import("../../../types").State> = import("../../../types").UpdatePayload<PartialState<T>>;
 export type PartialState<T extends import("../../../types").State> = import('../../../types').PartialState<T>;
 export type Prehooks<T extends import("../../../types").State> = import("../../../types").Prehooks<T>;
 export type StoreInternal<T extends import("../../../types").State> = import("../../../types").StoreInternal<T>;
@@ -15,7 +16,7 @@ declare function useStore<T extends import("../../../types").State>(prehooks: Pr
         [propertyPaths: string]: Readonly<any>;
     };
     resetState: (propertyPaths?: string[]) => void;
-    setState: (changes: import("../../../types").PartialState<T>) => void;
+    setState: (changes: import("../../../types").UpdatePayload<import("../../../types").PartialState<T>>) => void;
     subscribe: (listener: import("../../../types").Listener<T>) => VoidFunction;
     unlinkCache: (clientId: string) => void;
 };

package/dist/main/hooks/use-store/index.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.deps = exports["default"] = void 0;
 var _react = require("react");
-var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
-var _lodash2 = _interopRequireDefault(require("lodash.isboolean"));
+var _lodash = _interopRequireDefault(require("lodash.isboolean"));
 var _uuid = require("uuid");
 var _constants = require("../../../constants");
 var _utils = require("../../../utils");
@@ -34,7 +33,7 @@ function runPrehook(prehooks, name, args) {
     return true;
   }
   var res = prehooks[name].apply(prehooks, _toConsumableArray(args));
-  if (!(0, _lodash2["default"])(res)) {
+  if (!(0, _lodash["default"])(res)) {
     throw new TypeError("`".concat(name, "` prehook must return a boolean value."));
   }
   return res;
@@ -75,12 +74,12 @@ var useStore = function useStore(prehooks, value, storage) {
     var original = _storage.clone(_storage.getItem(storageKey.current));
     var resetData = !propertyPaths.length ? {} : propertyPaths.includes(_constants.FULL_STATE_SELECTOR) ? original : (0, _utils.mapPathsToObject)(original, propertyPaths);
     runPrehook(prehooksRef.current, 'resetState', [resetData, {
-      current: (0, _lodash["default"])(state),
+      current: (0, _utils.clonedeep)(state),
       original: original
     }]) && deps.setState(state, resetData, onChange);
   }, []);
   var setState = (0, _react.useCallback)(function (changes) {
-    changes = (0, _lodash["default"])(changes);
+    changes = (0, _utils.clonedeep)(changes);
     runPrehook(prehooksRef.current, 'setState', [changes]) && deps.setState(state, changes, onChange);
   }, []);
   var subscribe = (0, _react.useCallback)(function (listener) {
@@ -101,7 +100,7 @@ var useStore = function useStore(prehooks, value, storage) {
       mounted.current = true;
       return;
     }
-    setState((0, _lodash["default"])(value));
+    setState((0, _utils.clonedeep)(value));
   }, [value]);
   (0, _react.useEffect)(function () {
     if (!listeners.size) {

package/dist/main/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @param {ObservableContext<T>} context Refers to the PublicObservableContext<T> type of the ObservableContext<T>
- * @param {{[selectorKey: string]: string|keyof T}} [selectorMap] Key:value pairs where `key` => arbitrary key given to a Store.data property holding a state slice and `value` => property path to a state slice used by this component: see examples below. May add a mapping for a certain arbitrary key='state' and value='@@STATE' to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using '@@STATE', note that any change within the state object will result in this component render.
+ * @param {SelectorMap<T>} [selectorMap] Key:value pairs where `key` => arbitrary key given to a Store.data property holding a state slice and `value` => property path to a state slice used by this component: see examples below. May add a mapping for a certain arbitrary key='state' and value='@@STATE' to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using '@@STATE', note that any change within the state object will result in this component render.
  * @returns {(WrappedComponent: C) => MemoExoticComponent<P>}
  * @template {State} T
  * @template {PartialStore<T> & {[x:string]:*}} [P=PartialStore<T>]
@@ -10,9 +10,7 @@
  */
 export function connect<T extends import("../types").State, P extends PartialStore<T> & {
     [x: string]: any;
-} = PartialStore<T>, C extends ComponentType<P> | import("react").ExoticComponent<ComponentType<P>>>(context: ObservableContext<T>, selectorMap?: {
-    [selectorKey: string]: string | keyof T;
-}): (WrappedComponent: C) => MemoExoticComponent<P>;
+} = PartialStore<T>, C extends ComponentType<P> | import("react").ExoticComponent<ComponentType<P>>>(context: ObservableContext<T>, selectorMap?: SelectorMap<T>): (WrappedComponent: C) => MemoExoticComponent<P>;
 
 /**
  * @returns {ObservableContext<T>} Refers to the IObservableContext<T> type of the ObservableContext<T>
@@ -27,7 +25,7 @@ export class UsageError extends Error {
  * Actively monitors the store and triggers component re-render if any of the watched keys in the state objects changes
  *
  * @param {ObservableContext<T>} context Refers to the PublicObservableContext<T> type of the ObservableContext<T>
- * @param {{[selectorKey: string]: string|keyof T}} [selectorMap = {}] Key:value pairs where `key` => arbitrary key given to a Store.data property holding a state slice and `value` => property path to a state slice used by this component: see examples below. May add a mapping for a certain arbitrary key='state' and value='@@STATE' to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using '@@STATE', note that any change within the state object will result in this component render.
+ * @param {SelectorMap<T>} [selectorMap = {}] Key:value pairs where `key` => arbitrary key given to a Store.data property holding a state slice and `value` => property path to a state slice used by this component: see examples below. May add a mapping for a certain arbitrary key='state' and value='@@STATE' to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using '@@STATE', note that any change within the state object will result in this component render.
  * @returns {Store<T>}
  * @template {State} T
  * @see {ObservableContext<T>}
@@ -48,9 +46,7 @@ export class UsageError extends Error {
  * {myX: 'd.e.f[1].x'} or {myX: 'd.e.f.1.x'} => {myX: 7} // same applies to {myY: 'd.e.f[1].y'} = {myY: 8}; {myZ: 'd.e.f[1].z'} = {myZ: 9}
  * {myData: '@@STATE'} => {myData: state}
  */
-export function useContext<T extends import("../types").State>(context: ObservableContext<T>, selectorMap?: {
-    [selectorKey: string]: string | keyof T;
-}): Store<T>;
+export function useContext<T extends import("../types").State>(context: ObservableContext<T>, selectorMap?: SelectorMap<T>): Store<T>;
 export type ObservableContext<T extends import("../types").State> = IObservableContext<T> | PublicObservableContext<T>;
 export type PublicObservableContext<T extends import("../types").State> = WithObservableProvider<Context<Store<T>>, T>;
 export type IObservableContext<T extends import("../types").State> = WithObservableProvider<Context<IStore>, T>;
@@ -66,11 +62,16 @@ export type ObservableProvider<T extends import("../types").State> = FC<{
 export type State = import("../types").State;
 export type PartialState<T extends import("../types").State> = import("../types").PartialState<T>;
 export type Prehooks<T extends import("../types").State> = import("../types").Prehooks<T>;
+export type SelectorMap<T extends import("../types").State> = {
+    [dataPropKey: string]: string | keyof T;
+} & {
+    [dataPropKey: string]: "@@STATE";
+};
 export type StoreInternal<T extends import("../types").State> = import("../types").StoreInternal<T>;
 export type PartialStore<T extends import("../types").State> = {
     data?: import("../types").Data;
     resetState?: (propertyPaths?: string[]) => void;
-    setState?: (changes: import("../types").PartialState<T>) => void;
+    setState?: (changes: import("../types").UpdatePayload<import("../types").PartialState<T>>) => void;
 };
 export type Store<T extends import("../types").State> = import("../types").Store<T>;
 export type IStore = import("../types").IStore;