fixed errors in snapshot hierarchy

Author: crperezt

dev-reactime/index.js

@@ -45,7 +45,7 @@ function getRouteURL(node) {
 window.addEventListener('message', ({ data: { action, payload } }) => {
   switch (action) {
     case 'jumpToSnap':
-      console.log('payload in jumpToSnap', payload);
+      // console.log('payload in jumpToSnap', payload);
       timeJump(payload); // * 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

dev-reactime/linkFiber.js

@@ -59,19 +59,19 @@ export default (snap, mode) => {
   function sendSnapshot() {
     // Don't send messages while jumping or while paused
     circularComponentTable.clear();
-    console.log('sending snapshot');
+    // console.log('sending snapshot');
     if (mode.jumping || mode.paused) return;
-    console.log('PAYLOAD: before cleaning', snap.tree);
+    // console.log('PAYLOAD: before cleaning', snap.tree);
 
     if (!snap.tree) {
-      console.log('snapshot empty, sending root');
+      // console.log('snapshot empty, sending root');
       snap.tree = new Tree('root');
     }
     const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
 
-    console.log('PAYLOAD: after cleaning', payload);
-    //try {
-      //await window.postMessage({
+    // console.log('PAYLOAD: after cleaning', payload);
+    // try {
+      // await window.postMessage({
       window.postMessage({
         action: 'recordSnap',
         payload,
@@ -105,7 +105,7 @@ export default (snap, mode) => {
   //
   function createTree(currentFiber, tree = new Tree('root'), fromSibling = false) {
     // Base case: child or sibling pointed to null
-    console.log('linkFiber.js: creating tree');
+    // console.log('linkFiber.js: creating tree');
     if (!currentFiber) return null;
     if (!tree) return tree;
 
@@ -132,7 +132,7 @@ export default (snap, mode) => {
     if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
       // Save component's state and setState() function to our record for future
       // time-travel state changing. Add record index to snapshot so we can retrieve.
-      console.log('linkFiber.js: found stateNode component');
+      // console.log('linkFiber.js: found stateNode component');
       componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
       newState = stateNode.state;
       componentFound = true;
@@ -142,7 +142,7 @@ export default (snap, mode) => {
     let hooksIndex;
     if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
       if (memoizedState.queue) {
-        console.log('linkFiber.js: found hooks component');
+        // console.log('linkFiber.js: found hooks component');
         // 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,
@@ -163,7 +163,7 @@ export default (snap, mode) => {
     }
 
     // This grabs stateless components
-    if (!componentFound && (tag === 0 || tag === 1)) {
+    if (!componentFound && (tag === 0 || tag === 1 || tag === 2)) {
       newState = 'stateless';
     }
 
@@ -176,20 +176,19 @@ export default (snap, mode) => {
       treeBaseDuration,
     };
 
-    console.log('linkFiber.js: adding new state to tree:', newState);
-    if (componentFound) {
-      console.log('componentFound, calling tree.addChild');
+    let newNode = null;
+    if (componentFound || newState === 'stateless') {
       if (fromSibling) {
-        tree.addSibling(newState, elementType.name ? elementType.name : elementType, componentData);
+        newNode = tree.addSibling(newState, 
+          elementType.name ? elementType.name : elementType,
+          componentData);
       } else {
-        tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
-      }
-    } else if (newState === 'stateless') {
-      if (fromSibling) {
-        tree.addSibling(newState, elementType.name ? elementType.name : elementType, componentData);
-      } else {
-        tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
+        newNode = tree.addChild(newState, 
+          elementType.name ? elementType.name : elementType,
+          componentData);
       }
+    } else {
+      newNode = tree;
     }
 
     // Recurse on children
@@ -198,32 +197,28 @@ export default (snap, mode) => {
       // If this node had state we appended to the children array,
       // so attach children to the newly appended child.
       // Otherwise, attach children to this same node.
-      console.log('going into child');
+      // console.log('going into child');
       // circularComponentTable.set(child, true);
-      if (tree.children.length > 0) {
-        createTree(child, tree.children[tree.children.length - 1]);
-      } else {
-        createTree(child, tree);
-      }
+      createTree(child, newNode);
     }
     // Recurse on siblings
     if (sibling) { // && !circularComponentTable.has(sibling)) {
-      console.log('going into sibling');
+      // console.log('going into sibling');
       // circularComponentTable.set(sibling, true);
-      createTree(sibling, tree, true);
+      createTree(sibling, newNode, true);
     }
 
-    console.log('linkFiber.js: processed children and sibling, returning tree');
+    // console.log('linkFiber.js: processed children and sibling, returning tree');
     return tree;
   }
 
   function updateSnapShotTree() {
-    console.log('linkFiber.js, updateSnapshotTree(), checking if we have fiberRoot to update');
+    // console.log('linkFiber.js, updateSnapshotTree(), checking if fiberRoot updated');
     if (fiberRoot) {
-      console.log('linkFiber.js, updateSnapshotTree(), fiberRoot found, updating snapshot', snap.tree);
+      // console.log('linkFiber.js, updateSnapshotTree(), updating snapshot', snap.tree);
       const { current } = fiberRoot;
       snap.tree = createTree(current);
-      console.log('linkFiber.js, updateSnapshotTree(), completed snapshot', snap.tree);
+      // console.log('linkFiber.js, updateSnapshotTree(), completed snapshot', snap.tree);
     }
   }
 
@@ -241,15 +236,13 @@ export default (snap, mode) => {
 
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
-    console.log('devTools:', devTools);
+    // console.log('devTools:', devTools);
 
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           fiberRoot = args[1];
-          console.log('this is fiberRoot', fiberRoot);
           updateSnapShotTree();
-          console.log('snap.tree is: ', snap.tree);
           sendSnapshot();
           return original(...args);
         };
@@ -260,7 +253,7 @@ export default (snap, mode) => {
     // This message is sent from contentScript.js in chrome extension bundles
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') {
-        console.log('content script started received at linkFiber.js')
+        // console.log('content script started received at linkFiber.js')
         sendSnapshot();
       }
     });

dev-reactime/timeJump.js

@@ -42,7 +42,7 @@ export default (origin, mode) => {
       target.state.hooksState.forEach(hooksState => {
         if (component && component.dispatch) {
           const hooksComponent = componentActionsRecord.getComponentByIndex(hooksState[1]);
-          console.log('dispatch going back to hooks state: ', target.state.hooksState[0]);
+          // console.log('dispatch going back to hooks state: ', target.state.hooksState[0]);
           hooksComponent.dispatch(target.state.hooksState[0]);
         }
       });

dev-reactime/tree.js

@@ -9,7 +9,6 @@ function scrubUnserializableMembers(tree) {
   Object.entries(tree.state).forEach(keyValuePair => {
     if (typeof keyValuePair[1] === 'function') tree.state[keyValuePair[0]] = 'function';
   });
-  // console.log('PAYLOAD: unserializable returns:', tree);
   return tree;
 }
 
@@ -24,41 +23,31 @@ class Tree {
   }
 
   addChild(state, name, componentData) {
-    console.log('tree.js: in addChild');
-    this.children.push(new Tree(state, name, componentData));
-    this.children[this.children.length - 1].parent = this;
+    // console.log('tree.js: in addChild');
+    const newChild = new Tree(state, name, componentData);
+    newChild.parent = this;
+    this.children.push(newChild);
+    return newChild;
   }
 
   addSibling(state, name, componentData) {
-    console.log('tree.js: in addChild');
-    this.parent.children.push(new Tree(state, name, componentData));
-    this.parent.children[this.children.length - 1].parent = this;
+    // console.log('tree.js: in addSibling');
+    const newSibling = new Tree(state, name, componentData);
+    newSibling.parent = this.parent;
+    this.parent.children.push(newSibling);
+    return newSibling;
   }
 
   cleanTreeCopy() {
-    // copies present node
+    // creates copy of present node
     let copy = new Tree(this.state, this.name, this.componentData);
     copy = scrubUnserializableMembers(copy);
     copy.children = this.children;
 
     // creates copy of each child of the present node
     copy.children = this.children.map(child => child.cleanTreeCopy());
 
-    // copy.children = this.children.map(child => {
-    //   newChild = new Tree(child.state, child.name, child.componentData);
-    //   newChild.children = child.children;
-    //   return scrubUnserializableMembers(newChild);
-    // });
-
-    /*
-    if (copy.children.length > 0) {
-      copy.children.forEach(child => {
-        if (child !== copy.children) {
-          child = child.cleanTreeCopy();
-        }
-        return null;
-      });
-    } */
+    // returns copy
     return copy;
   }
 

src/extension/contentScript.js

@@ -21,7 +21,7 @@ window.addEventListener('message', msg => { // runs automatically every second
   const { action } = msg.data;
 
   if (action === 'recordSnap') { // this is firing on page load
-    console.log('DATA AT EXTENSION:', msg.data);
+    // console.log('DATA AT EXTENSION:', msg.data);
     chrome.runtime.sendMessage(msg.data);
   }
 });