@webkrafters/react-observable-context 4.1.7 → 4.1.9

package/README.md

@@ -86,6 +86,48 @@ A context bearing an observable consumer [store](#store). State changes within t
 
 <h1 id="getting-started">Getting Started</h1>
 
+<i><b><u>index.js</u></b></i>
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render( <App />, document.getElementById( 'root' ) );
+```
+
+<i><b><u>app.js</u></b></i>
+
+```jsx
+import React, { useEffect, useState } from 'react';
+import ProviderDeno from './provider-demo';
+
+const MILLIS_PER_MINUTE = 6e4;
+
+let numCreated = 0;
+
+const App = () => {
+  const [ age, updateAge ] = useState( 0 );
+  const [ testNumber ] = useState( () => ++numCreated );
+
+  useEffect(() => {
+    const t = setTimeout(
+      () => updateAge( age => age + 1 ),
+      MILLIS_PER_MINUTE
+    ); 
+    return () => clearTimeout( t );
+  }, [ age ]);
+
+  return (
+    <div>
+      <h2>App instance #: { testNumber }</H2>
+      <ProviderDeno ageInMinutes={ age } />
+    </div>
+  );
+}
+export default App;
+```
+
 <i id="create-context-usage"><u><b>context.js</b></u></i>
 
 ```jsx
@@ -93,23 +135,27 @@ import { createContext } from '@webkrafters/react-observable-context';
 export default createContext();
 ```
 
-<i id="provider-usage"><b><u>provider.js</u></b></i>
+<i id="provider-usage"><b><u>provider-demo.js</u></b></i>
 
 ```jsx
 import React, { useEffect, useState } from 'react';
 import ObservableContext from './context';
 import Ui from './ui';
 
-const Provider = ({ c = 36 }) => {
+const createInitialState = c = ({
+  a: { b: { c, x: { y: { z: [ 2022 ] } } } }
+});
+
+const ProviderDemo = ({ ageInMinutes: c = 0 }) => {
 	
-  const [ state, setState ] = useState(() => ({
-    a: { b: { c, x: { y: { z: [ 2022 ] } } } }
-  }));
+  const [ state, setState ] = useState(() => createInitialState( c ));
 
   useEffect(() => {
     // similar to `store.setState`, use the following to update
     // only the changed slice of the context internal state.
-    setState({ a: { b: { c } } });
+    // Please see `Set State` section
+    setState({ a: { b: { c } } }); // OR
+    // setState({ a: { b: { c: { '@@REPLACE': c } } } });
     // Do not do the following: it will override the context internal state.
     // setState({ ...state, a: { ...state.a, b: { ...state.a.b, c } } });
   }, [ c ]);
@@ -120,9 +166,9 @@ const Provider = ({ c = 36 }) => {
     </ObservableContext.Provider>
   );
 };
-Provider.displayName = 'Provider';
+ProviderDemo.displayName = 'ProviderDemo';
 
-export default Provider;
+export default ProviderDemo;
 ```
 
 <i id="connect-usage"><u><b>ui.js</b></u> (connect method)</i>
@@ -133,13 +179,16 @@ import { connect } from '@webkrafters/react-observable-context';
 import ObservableContext from './context';
 
 export const YearText = ({ data }) => ( <div>Year: { data.year }</div> );
-export const YearInput = ({ data, setState, resetState }) => {
+
+export const YearInput = ({ data, resetState, setState }) => {
   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 } /> );
 };
 
@@ -173,12 +222,15 @@ const Client1 = memo(() => { // memoize to prevent 'no-change' renders from the
 
 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 } /> );
 });
 
@@ -192,16 +244,6 @@ const Ui = () => (
 export default Ui;
 ```
 
-<i><b><u>index.js</u></b></i>
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Provider from './provider';
-
-ReactDOM.render( <Provider />, document.getElementById( 'root' ) );
-```
-
 # API
 
 The React-Observable-Context module exports named constants and the following **4** main entities namely:
@@ -514,7 +556,7 @@ const state = {
 
 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...' }
+store.setState({ a: { '@@REPLACE': { message: 'Testing...' } } }) // rewrites state.a 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 } } ] } })
@@ -527,11 +569,11 @@ store.setState({ a: { b: { 1: { '@@REPLACE': { x: 97, y: 98, z: 99 } } } } })
 
 ```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.
+ 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 = {
@@ -541,7 +583,7 @@ const state = {
 
 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...' }
+store.setState({ a: { '@@SET': currentValue => ({ ...currentValue, message: 'Testing...' }) } }) // rewrites state.a 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 }) } ] } })

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

@@ -100,7 +100,7 @@ var useStore = function useStore(prehooks, value, storage) {
       mounted.current = true;
       return;
     }
-    setState((0, _utils.clonedeep)(value));
+    setState(value);
   }, [value]);
   (0, _react.useEffect)(function () {
     if (!listeners.size) {

package/package.json

@@ -133,5 +133,5 @@
     "test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
   },
   "types": "dist/main/index.d.ts",
-  "version": "4.1.7"
+  "version": "4.1.9"
 }