Added symbol props support for state created by useAsyncDeepState hook;

Added toJSON method for the state object;

Author: DigitalBrainJS

lib/use-async-effect.js

@@ -469,6 +469,31 @@ const useFactory = (factory, args) => {
     return current;
 }
 
+const assignState= (obj, target)=>{
+    Object.assign(obj, target);
+    const symbols = Object.getOwnPropertySymbols(target);
+    let i = symbols.length;
+    while (i-- > 0) {
+        const symbol = symbols[i];
+        obj[symbol] = target[symbol];
+    }
+    return obj;
+}
+
+class ProtoState {
+    constructor(initialState) {
+        initialState && assignState(this, initialState);
+    }
+
+    toJSON() {
+        const obj = {};
+        let target = this;
+        do {
+            assignState(obj, target);
+        } while ((target = Object.getPrototypeOf(target)) && target !== Object.prototype);
+        return obj;
+    }
+}
 
 /**
  * useAsyncDeepState hook whose setter returns a promise
@@ -484,26 +509,27 @@ const useAsyncDeepState = (initialValue, {watch= true}= {}) => {
             throw TypeError('initial state must be a plain object');
         }
 
-        const state= initialValue? Object.assign({}, initialValue) : {};
+        const state = new ProtoState(initialValue);
 
         Object.assign(current, {
             state,
-            oldState: null,
+            oldState: new ProtoState(initialValue),
             callbacks: new Map()
         })
     }
 
-    const [state, setState] = useState(!current.inited && Object.create(current.state));
-
-    current.inited= true;
+    const [state, setState] = useState(!current.inited && Object.freeze(Object.create(current.state)));
 
     watch && useEffect(()=>{
+        if (!current.inited) return;
         const data= [state, current.oldState];
         current.callbacks.forEach(cb=> cb(data));
         current.callbacks.clear();
-        current.oldState= Object.assign({}, current.state);
+        current.oldState= new ProtoState(current.state);
     }, [state]);
 
+    current.inited= true;
+
     return [
         state,
         /**
@@ -522,7 +548,7 @@ const useAsyncDeepState = (initialValue, {watch= true}= {}) => {
                 }
 
                 setState((state)=>{
-                    if(newState == null || isEqualObjects(Object.assign(current.state, newState), current.oldState)){
+                    if(newState == null || isEqualObjects(assignState(current.state, newState), current.oldState)){
                         scope && cb([state, current.oldState]);
                         return state;
                     }
@@ -532,7 +558,7 @@ const useAsyncDeepState = (initialValue, {watch= true}= {}) => {
                         scope.onDone(() => current.callbacks.delete(scope))
                     }
 
-                    return Object.create(current.state)
+                    return Object.freeze(Object.create(current.state));
                 });
             }
 

playground/src/TestComponent7.js

@@ -4,11 +4,13 @@ import {
 } from "../../lib/use-async-effect";
 
 export default function TestComponent7(props) {
+  const symbol= Symbol('test');
 
   const [state, setState] = useAsyncDeepState({
     foo: 123,
     bar: 456,
-    counter: 0
+    counter: 0,
+    [symbol]: "test"
   });
 
   return (
@@ -20,7 +22,8 @@ export default function TestComponent7(props) {
           return {counter: state.counter + 1}
         });
 
-        console.log(`Updated: ${newState.counter}, old: ${oldState.counter}`);
+        console.log(`Updated counter: ${newState.counter}, old counter: ${oldState.counter}`);
+        console.log('Updated state: ', newState.toJSON(),' old state: ', oldState.toJSON());
       }}>Inc</button>
       <button onClick={()=>setState((state)=>{
          counter: state.counter

playground/src/TestComponent9.js

@@ -16,7 +16,7 @@ export default function TestComponent7(props) {
         yield CPromise.delay(delay);
       }
     },
-    { states: true, cancelPrevios: true }
+    { states: true, cancelPrevious: true }
   );
 
   return (