map updates

Author: kevinfey

src/app/components/PerfView.tsx

@@ -40,6 +40,7 @@ const PerfView = (props: PerfViewProps) => {
   // snapshots.forEach((snapshot) => snapshot.children[0].children.shift());
   // console.log('SNAPSHOTS -------------------------->', snapshots);
   // Figure out which snapshot index to use
+  
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
   else indexToDisplay = viewIndex;

src/backend/linkFiber.ts

@@ -95,8 +95,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
           state: memoizedState.memoizedState,
         });
         //console.log('MEMOIZED PROPS ------>', memoizedProps);
-        console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
-        console.log('HOOK STATE ------->', hooksStates);
+        // console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
+        // console.log('HOOK STATE ------->', hooksStates);
       }
       memoizedState =
         memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -170,7 +170,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     //   });
     atomArray.push(memoizedProps);
 
-    console.log('1st ATOM ARRAY', atomArray);
+    //console.log('1st ATOM ARRAY', atomArray);
 
     function traverseRecoilHooks(memoizedState: any): HookStates {
       const hooksStates: HookStates = [];
@@ -187,9 +187,10 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
               state: memoizedProps,
             });
           }
-          console.log('MEMOIZED PROPS ------>', memoizedProps);
-          console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
-          console.log('HOOK STATE ------->', hooksStates);
+
+          // console.log('MEMOIZED PROPS ------>', memoizedProps);
+          // console.log('MEMOIZEDSTATE QUEUE------>', memoizedState.queue);
+          // console.log('HOOK STATE ------->', hooksStates);
         }
         memoizedState =
           memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -210,22 +211,32 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
         // which includes the dispatch() function we use to change their state.
 
         const hooksStates = traverseRecoilHooks(memoizedState);
-        console.log("HOOK STATE BEFORE LOOPING", hooksStates)
+       // console.log('HOOK STATE BEFORE LOOPING', hooksStates);
         const hooksNames = getHooksNames(elementType.toString());
         hooksStates.forEach((state, i) => {
-          console.log('STATE IN SAVE NEW LOOP', state);
+         // console.log('STATE IN SAVE NEW LOOP', state);
           hooksIndex = componentActionsRecord.saveNew(
             state.state,
             state.component
           );
           componentData.hooksIndex = hooksIndex;
 
+          // if (newState && newState.hooksState) {
+          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
+          // } else if (newState) {
+          //   newState.hooksState = [{ [hooksNames[i]]: state.state }];
+          // } else {
+          //   newState = { hooksState: [] };
+          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
+          // }
+
+          //improves tree visualization but breaks jump
           if (newState && newState.hooksState) {
             newState.push(state.state);
           } else if (newState) {
-            newState = [ state.state ];
+            newState = [state.state];
           } else {
-            newState.push(state.state );
+            newState.push(state.state);
           }
           componentFound = true;
         });
@@ -234,9 +245,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
 
     // Check if node is a hooks useState function
     //REGULAR REACT HOOKS
-    if (memoizedState && (tag === 0 || tag === 1 || tag === 2 || tag === 10) && isRecoil === false) {
+    if (
+      memoizedState &&
+      (tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
+      isRecoil === false
+    ) {
       if (memoizedState.queue) {
-        console.log('Regular Hooks');
+        //console.log('Regular Hooks');
         // Hooks states are stored as a linked list using memoizedState.next,
         // so we must traverse through the list and get the states.
         // We then store them along with the corresponding memoizedState.queue,
@@ -321,9 +336,9 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       snap.tree = createTree(current);
     }
 
-    console.log('Fiber', fiberRoot.current);
+    // console.log('Fiber', fiberRoot.current);
 
-    console.log('SNAP.TREE->', snap.tree);
+    // console.log('SNAP.TREE->', snap.tree);
 
     sendSnapshot();
   }

src/backend/masterState.js

@@ -6,10 +6,11 @@ import 'core-js';
 
 const componentActionsRecord = {};
 let index = 0;
-
 // module.exports = {
 export default {
   saveNew: (state, component) => {
+  //console.log("COMPONENET ACTION RECORDS",componentActionsRecord)
+
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;

src/backend/timeJump.ts

@@ -33,34 +33,44 @@ export default (origin, mode) => {
     if (!target) return;
 
     if (target.state === 'stateless') {
-      target.children.forEach(child => jump(child));
+      target.children.forEach((child) => jump(child));
       return;
     }
-    const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
+    const component = componentActionsRecord.getComponentByIndex(
+      target.componentData.index
+    );
     if (component && component.setState) {
-      component.setState(prevState => {
-        Object.keys(prevState).forEach(key => {
-          if (target.state[key] === undefined) {
-            target.state[key] = undefined;
-          }
-        });
-        return target.state;
-        // Iterate through new children after state has been set
-      }, () => target.children.forEach(child => jump(child)));
+      component.setState(
+        (prevState) => {
+          Object.keys(prevState).forEach((key) => {
+            if (target.state[key] === undefined) {
+              target.state[key] = undefined;
+            }
+          });
+          return target.state;
+          // Iterate through new children after state has been set
+        },
+        () => target.children.forEach((child) => jump(child))
+      );
     }
 
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
-      target.state.hooksState.forEach(hook => {
-        const hooksComponent = componentActionsRecord.getComponentByIndex(target.componentData.hooksIndex);
+      target.state.hooksState.forEach((hook) => {
+        const hooksComponent = componentActionsRecord.getComponentByIndex(
+          target.componentData.hooksIndex
+        );
         const hookState = Object.values(hook);
+        console.log('target', target);
         if (hooksComponent && hooksComponent.dispatch) {
+          console.log('HOOKS COMPONENT', hooksComponent);
+          console.log('HOOKS STATE of Zero', hookState[0]);
           hooksComponent.dispatch(hookState[0]);
         }
       });
     }
 
-    target.children.forEach(child => {
+    target.children.forEach((child) => {
       if (!circularComponentTable.has(child)) {
         circularComponentTable.add(child);
         jump(child);