working on extension bugs for large websites

Author: crperezt

dev-reactime/linkFiber.js

@@ -47,6 +47,16 @@
 // const Tree = require('./tree').default;
 // const componentActionsRecord = require('./masterState');\
 
+const DEBUG_MODE = false;
+
+const alwaysLog = console.log;
+
+console.log = (original => { 
+  return (...args) => {
+    if (DEBUG_MODE) original(...args);
+  }
+})(console.log);
+
 import Tree from './tree';
 import componentActionsRecord from './masterState';
 
@@ -57,6 +67,7 @@ export default (snap, mode) => {
   let fiberRoot = null;
 
   function sendSnapshot() {
+    alwaysLog('sendSnapshot called');
     // Don't send messages while jumping or while paused
     circularComponentTable.clear();
     // console.log('sending snapshot');
@@ -105,7 +116,7 @@ export default (snap, mode) => {
   //
   function createTree(currentFiber, tree = new Tree('root', 'root'), fromSibling = false) {
     // Base case: child or sibling pointed to null
-    // console.log('linkFiber.js: creating tree');
+    console.log('createTree: creating tree');
     if (!currentFiber) return null;
     if (!tree) return tree;
 
@@ -129,10 +140,10 @@ export default (snap, mode) => {
     let componentFound = false;
 
     // Check if node is a stateful setState component
-    if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
+    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('createTree() found setState component');
       componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
       newState = stateNode.state;
       componentFound = true;
@@ -142,7 +153,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('createTree() 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 +174,7 @@ export default (snap, mode) => {
     }
 
     // This grabs stateless components
-    if (!componentFound && (tag === 0 || tag === 1 || tag === 2)) {
+    if (!componentFound && (tag === 0 || tag === 1)) { // || tag === 2)) {
       newState = 'stateless';
     }
 
@@ -179,15 +190,18 @@ export default (snap, mode) => {
     let newNode = null;
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
-        newNode = tree.addSibling(newState, 
-          elementType.name ? elementType.name : elementType,
+        console.log('createTree(), relevant component found in sibling');
+        newNode = tree.addSibling(newState,
+          elementType ? elementType.name : 'nameless',
           componentData);
       } else {
-        newNode = tree.addChild(newState, 
-          elementType.name ? elementType.name : elementType,
+        console.log('createTree(), relevant component found in child');
+        newNode = tree.addChild(newState,
+          elementType ? elementType.name : 'nameless',
           componentData);
       }
     } else {
+      console.log('createTree(), no new relevant nodes, continuing from same node')
       newNode = tree;
     }
 
@@ -197,33 +211,34 @@ 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);
       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, 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 fiberRoot updated');
+    // console.log('updateSnapshotTree(), checking if fiberRoot updated');
     if (fiberRoot) {
-      // console.log('linkFiber.js, updateSnapshotTree(), updating snapshot', snap.tree);
+      console.log('updateSnapshotTree(), updating snapshot', snap.tree);
       const { current } = fiberRoot;
       snap.tree = createTree(current);
-      // console.log('linkFiber.js, updateSnapshotTree(), completed snapshot', snap.tree);
+      console.log('updateSnapshotTree(), completed snapshot', snap.tree);
     }
   }
 
   return async () => {
 
+    /*
     const container = document.getElementById('root');
     if (container._internalRoot) {
       fiberRoot = container._internalRoot;
@@ -234,18 +249,21 @@ export default (snap, mode) => {
       } = container;
       // Only assign internal root if it actually exists
       fiberRoot = _internalRoot || _reactRootContainer;
-    }
+    }*/
 
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
 
-    //console.log('fiberRoot retrieved:', fiberRoot);
+    //// console.log('fiberRoot retrieved:', fiberRoot);
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           fiberRoot = args[1];
+          //console.log('Fiber committed, updating snapshot tree with:', fiberRoot);
           updateSnapShotTree();
+          console.log('Fiber committed, sending latest snapshot');
           sendSnapshot();
+          console.log('Fiber committed, latest snapshot sent');
           return original(...args);
         };
       }(devTools.onCommitFiberRoot));

dev-reactime/tree.js

@@ -23,7 +23,7 @@ class Tree {
   }
 
   addChild(state, name, componentData) {
-    // console.log('tree.js: in addChild');
+    //console.log('tree.js: in addChild');
     const newChild = new Tree(state, name, componentData);
     newChild.parent = this;
     this.children.push(newChild);