fixing circular component snapshot errors in timeJump

Author: crperezt

src/backend/index.ts

@@ -40,7 +40,7 @@ function getRouteURL(node: SnapshotNode): string {
 window.addEventListener('message', ({ data: { action, payload } } : MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      timeJump(payload); // * This sets state with given payload
+      timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
 

src/backend/linkFiber.ts

@@ -74,8 +74,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       // Carlos: these two are legacy comments, we should look into them later
       // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
-      // console.log('traverse hooks memoizedState', memoizedState);
-      if (memoizedState.memoizedState) {
+      if (memoizedState.memoizedState && memoizedState.queue.lastRenderedReducer && memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer') {
         hooksStates.push({
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
@@ -109,13 +108,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
     } = currentFiber;
 
     let newState: any;
-    let componentData: ComponentData = {}; /* = {
-      index: -1,
-      actualDuration: 0,
-      actualStartTime: 0,
-      selfBaseDuration: 0,
-      treeBaseDuration: 0,
-    };*/
+    let componentData: ComponentData = {};
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -168,7 +161,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
     let newNode = null;
     // We want to add this fiber node to the snapshot
-    //const snapshotState = newState.state || newState.hooksState;
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
         newNode = tree.addSibling(newState,
@@ -211,7 +203,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
-    console.log('doWork is:', doWork);
   }
 
   return () => {

src/backend/timeJump.js

@@ -15,15 +15,18 @@ import 'core-js';
 // const componentActionsRecord = require('./masterState');
 import componentActionsRecord from './masterState';
 
+const circularComponentTable = new Set();
+
 // Carlos: origin is latest snapshot, linking to the fiber,
 // so changes to origin change app
 // module.exports = (origin, mode) => {
 export default (origin, mode) => {
   // Recursively change state of tree
   // Carlos: target is past state we are travelling to
 
-  function jump(target) {
+  function jump(target, firstCall = false) {
     // Set the state of the origin tree if the component is stateful
+
     if (!target) return;
     if (target.state === 'stateless') target.children.forEach(child => jump(child));
     const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
@@ -45,21 +48,26 @@ export default (origin, mode) => {
       // const [hooksState] = [target.state.hooksState];
       const hooksState = Object.values(target.state.hooksState[0])[0];
       if (hooksComponent && hooksComponent.dispatch) {
-        //hooksComponent.dispatch(Object.values(target.state.hooksState[0])[0]);
-        console.log('setting hooksState of component id:', target.state.hooksState[1], 'to:', hooksState)
+        // hooksComponent.dispatch(Object.values(target.state.hooksState[0])[0]);
         hooksComponent.dispatch(hooksState);
       }
       target.children.forEach(child => jump(child));
     }
 
-    if ((!component || !component.state) && !target.state.hooksState) {
-      target.children.forEach(child => jump(child));
-    }
+    target.children.forEach(child => {
+      if (!circularComponentTable.has(child)) {
+        circularComponentTable.add(child);
+        jump(child);
+      }
+    });
+
+    // }
   }
 
-  return target => {
+  return (target, firstCall = false) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;
+    if (firstCall) circularComponentTable.clear();
     jump(target);
     setTimeout(() => {
       mode.jumping = false;