pull master

Author: aquinojardim

.gitignore

@@ -10,3 +10,4 @@ src/extension/build.crx
 src/extension/build.pem
 bower_components
 sandboxes/manual-tests/NextJS/.next
+.vscode

dev-reactime/linkFiber.js

@@ -44,37 +44,18 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
 
-<<<<<<< HEAD
-const { Tree, UnfilteredTreeNode } = require('./tree');
-const astParser = require('./astParser');
-const { saveState } = require('./masterState');
-// import * as reactWorkTags from './reactWorkTags';
-=======
 const Tree = require('./tree');
 const componentActionsRecord = require('./masterState');
->>>>>>> 8e774670f36699322d70300c6382bcdcc7b349e0
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
-  let astHooks;
-  let concurrent = false; // flag to check if we are in concurrent mode
-  const reactWorkTags = [
-    'FunctionComponent',
-    'ClassComponent',
-    'IndeterminateComponent',
-    'HostRoot', // Root of a host tree. Could be nested inside another node.
-    'HostPortal', // A subtree. Could be an entry point to a different renderer.
-    'HostComponent',
-    'HostText',
-  ];
-
 
   async function sendSnapshot() {
     // Don't send messages while jumping or while paused
     if (mode.jumping || mode.paused) return;
-    // console.log('PAYLOAD: before cleaning', snap.tree);
+    console.log('PAYLOAD: before cleaning', snap.tree);
     const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
-    // console.log('PAYLOAD: after cleaning', payload);
+    console.log('PAYLOAD: after cleaning', payload);
     try {
       await window.postMessage({
         action: 'recordSnap',
@@ -88,14 +69,14 @@ module.exports = (snap, mode) => {
   // Carlos: Injects instrumentation to update our state tree every time
   // a hooks component changes state
   function traverseHooks(memoizedState) {
-    const hooksComponents = [];
+    const hooksStates = [];
     while (memoizedState && memoizedState.queue) {
       // 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
       if (memoizedState.memoizedState) {
         console.log('memoizedState in traverseHooks is:', memoizedState);
-        hooksComponents.push({
+        hooksStates.push({
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
         });
@@ -104,14 +85,15 @@ module.exports = (snap, mode) => {
       memoizedState = memoizedState.next !== memoizedState
         ? memoizedState.next : null;
     }
-    return hooksComponents;
+    return hooksStates;
   }
 
   // Carlos: This runs after EVERY Fiber commit. It creates a new snapshot,
   //
   function createTree(currentFiber, tree = new Tree('root')) {
     // Base case: child or sibling pointed to null
-    if (!currentFiber) return tree;
+    if (!currentFiber) return null;
+    if (!tree) return tree;
 
     // These have the newest state. We update state and then
     // called updateSnapshotTree()
@@ -122,40 +104,81 @@ module.exports = (snap, mode) => {
       memoizedState,
       elementType,
       tag,
+      actualDuration,
+      actualStartTime,
+      selfBaseDuration,
+      treeBaseDuration,
     } = currentFiber;
 
-    let index;
-    // Check if node is a stateful component
+    let newState = null;
+    let componentData = {};
+    let componentFound = false;
+
+    // Check if node is a stateful setState component
     if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
       // 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.
-      index = componentActionsRecord.saveNew(stateNode.state, stateNode);
-      tree.appendChild(stateNode.state, elementType.name, index); // Add component to tree
-    } else {
-      // grab stateless components here
+      componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
+      newState.state = stateNode.state;
+      componentFound = true;
     }
 
-    // Check if node is a hooks function
+    // Check if node is a hooks useState function
+    let hooksIndex;
     if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
       if (memoizedState.queue) {
-        const hooksComponents = traverseHooks(memoizedState);
-        hooksComponents.forEach(c => {
-          if (elementType.name) {
-            index = componentActionsRecord.saveNew(c.state, c.component);
-            tree.appendChild(c.state, elementType.name ? elementType.name : 'nameless', index);
+        // 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,
+        // which includes the dispatch() function we use to change their state.
+        const hooksStates = traverseHooks(memoizedState);
+        hooksStates.forEach(state => {
+          hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
+          if (newState && newState.hooksState) {
+            newState.hooksState.push([state.state, hooksIndex]);
+          } else if (newState) {
+            newState.hooksState = [[state.state, hooksIndex]];
+          } else {
+            newState = { hooksState: [[state.state, hooksIndex]] };
           }
+          componentFound = true;
         });
       }
     }
 
-    // Recurse on siblings
-    createTree(sibling, tree);
+    // This grabs stateless components
+    if (!componentFound && (tag === 0 || tag === 1)) {
+      newState = 'stateless';
+    }
+
+    // Adds performance metrics to the component data
+    componentData = {
+      ...componentData,
+      actualDuration,
+      actualStartTime,
+      selfBaseDuration,
+      treeBaseDuration,
+    };
+
+    if (componentFound) {
+      tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
+    } else if (newState === 'stateless') {
+      tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
+    }
+
     // Recurse on children
-    if (tree.children.length > 0) {
-      createTree(child, tree.children[0]);
-    } else {
-      createTree(child, tree);
+    if (child) {
+      // 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.
+      if (tree.children.length > 0) {
+        createTree(child, tree.children[tree.children.length - 1]);
+      } else {
+        createTree(child, tree);
+      }
     }
+    // Recurse on siblings
+    if (sibling) createTree(sibling, tree);
 
     return parentNode;
   }
@@ -194,6 +217,7 @@ module.exports = (snap, mode) => {
 
   // ! BUG: skips 1st hook click
   function updateSnapShotTree() {
+<<<<<<< HEAD
     /* let current;
     // If concurrent mode, grab current.child
     if (concurrent) {
@@ -218,28 +242,26 @@ module.exports = (snap, mode) => {
     // fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
     snap.tree = createTree(current); // Carlos: pass new hooks state here?
 >>>>>>> 8e774670f36699322d70300c6382bcdcc7b349e0
+=======
+    const { current } = fiberRoot;
+    snap.tree = createTree(current);
+>>>>>>> 7a59cf2ae4fd041fc21b23c396e02eae0fc01e84
   }
 
   return async container => {
     // Point fiberRoot to FiberRootNode
     if (container._internalRoot) {
       fiberRoot = container._internalRoot;
-      concurrent = true;
     } else {
       const {
         _reactRootContainer: { _internalRoot },
         _reactRootContainer,
       } = container;
       // Only assign internal root if it actually exists
       fiberRoot = _internalRoot || _reactRootContainer;
-      // console.log('_reactRootContainer is:', _reactRootContainer);
-      // console.log('linkFiber.js, fiberRoot:', fiberRoot);
     }
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
-    const overrideHookState = reactInstance ? reactInstance.overrideHookState : null;
-    console.log('DEVTOOLS:', devTools);
-    console.log('roots:', reactInstance.getCurrentFiber())
 
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {

dev-reactime/timeJump.js

@@ -20,20 +20,11 @@ module.exports = (origin, mode) => {
   // Carlos: target is past state we are travelling to
 
   function jump(target, originNode = origin.tree) {
-    console.log('origin (link to current app state) in jump():', origin);
-    console.log('target state is: ', target);
     // Set the state of the origin tree if the component is stateful
     if (!target) return;
-    const component = componentActionsRecord.getComponentByIndex(target.index);
-    if (component) {
-      console.log('time-travel component is true');
-      if (component.setState) {
-        console.log('time-travel component setState is true');
-      }
-    }
-
+    if (target.state === 'stateless') target.children.forEach(child => jump(child));
+    const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
     if (component && component.setState) {
-      console.log('time-travel calling setState', component);
       component.setState(prevState => {
         Object.keys(prevState).forEach(key => {
           if (target.state[key] === undefined) {
@@ -43,16 +34,24 @@ module.exports = (origin, mode) => {
         return target.state;
         // Iterate through new children after state has been set
       }, () => target.children.forEach(child => jump(child)));
-    } else if (component && component.dispatch) {
-      // ** not entering here
-      console.log('time-travel calling dispatch', component);
-      component.dispatch(target.state);
+    }
+    
+    if (target.state.hooksState) {
+      target.state.hooksState.forEach(hooksState => {
+        if (component && component.dispatch) {
+          const hooksComponent = componentActionsRecord.getComponentByIndex(hooksState[1]);
+          hooksComponent.dispatch(target.state.hooksState[0]);
+        }
+      });
       target.children.forEach(child => jump(child));
-    } else {
-      console.log('time-travel did not call setState nor dispatch', component);
+    }
+    
+    if ((!component || !component.state) && !target.state.hooksState) {
       target.children.forEach(child => jump(child));
     }
 
+
+
     /*
     if (originNode.component.setState) {
       console.log('stateful component jump, originNode: ', originNode.component);