merged changes into local master

Author: gpanciera

.gitignore

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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.enable": true
+}

dev-reactime/index.js

@@ -7,7 +7,10 @@ import 'regenerator-runtime/runtime';
 import { exist } from 'acorn-jsx/xhtml';
 
 // * State snapshot object initialized here
-const snapShot = { tree: null };
+const snapShot = { 
+  tree: null, 
+  unfilteredTree: null 
+};
 
 
 const mode = {

dev-reactime/linkFiber.js

@@ -1,3 +1,6 @@
+/* eslint-disable indent */
+/* eslint-disable brace-style */
+/* eslint-disable comma-dangle */
 /**
  * This file contains core module functionality.
  *
@@ -46,15 +49,13 @@ const componentActionsRecord = require('./masterState');
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
-  let astHooks;
-  let concurrent = false; // flag to check if we are in concurrent mode
 
   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',
@@ -68,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,
         });
@@ -84,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()
@@ -102,46 +104,136 @@ 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)) {
+      console.log('in create tree if')
+      console.log('this is currentFiber from createTree', currentFiber)
       // 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)) {
+      console.log('in create tree if')
+      console.log('this is currentFiber from createTree', currentFiber)
       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;
         });
       }
+    } else {
+      console.log('in create tree else')
+      console.log('this is currentFiber from createTree', currentFiber)
+      console.log('this is memoizedState from createTree', memoizedState)
+      // grab stateless components here
+      if(elementType){
+        if(elementType.name){
+          tree.appendChild('stateless', elementType.name, index);
+        } else {
+          tree.appendChild('stateless', elementType, index);
+        }
+      }
+    }
+
+    // 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 siblings
-    createTree(sibling, tree);
     // 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 tree;
   }
 
+
+  // function createUnfilteredTree(curFiber, parentNode) {
+  //   // on call from updateSnapShot, no parentNode provided, so create a root node
+  //   if(! parentNode) parentNode = new Tree('root');
+    
+  //   // Base case: parentNode's child or sibling pointed to null
+  //   if (!curFiber) return parentNode;
+    
+  //   let newChildNode = null;
+
+  //   // If stateful, add to parentNode's children array, then inject new setState into fiber node
+  //   if (curFiber.stateNode && curFiber.stateNode.state) {
+  //     newChildNode = parentNode.appendChild(curFiber.stateNode);
+  //     // changeSetState(curFiber.stateNode);
+  //     newChildNode.isStateful = true;
+  //   }
+  //   else {
+
+  //   }
+
+  //   // Recurse to sibling; siblings that have state should be added to our parentNode
+  //   createTree(curFiber.sibling, parentNode);  
+
+  //   // Recurse to child; If this fiber was stateful, then we added a newChildNode here, and we want
+  //   // to attach further children to that. If this fiber wasn't stateful, we want to attach any 
+  //   // children to our existing parentNode.
+  //   createTree(curFiber.child, newChildNode || parentNode);
+
+  //   return parentNode;
+  // }
+
+
   // ! BUG: skips 1st hook click
   function updateSnapShotTree() {
+<<<<<<< HEAD
     /* let current;
     // If concurrent mode, grab current.child
     if (concurrent) {
@@ -165,27 +257,23 @@ module.exports = (snap, mode) => {
     // 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__;
+    console.log('this is devTools', devTools)
     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) {
         return function (...args) {
           fiberRoot = args[1];
+          console.log('this is fiberRoot', fiberRoot)
           updateSnapShotTree();
           sendSnapshot();
           return original(...args);
@@ -202,3 +290,82 @@ module.exports = (snap, mode) => {
     });
   };
 };
+
+
+
+
+// function createUnfilteredTree(currentFiber, tree = new Tree('root')) {
+//   // Base case: child or sibling pointed to null
+//   if (!currentFiber) return tree;
+
+//   const { sibling, stateNode, child, memoizedState, elementType,
+//           tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
+//   } = currentFiber;
+
+//   const extraProps = {
+//     tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
+//   };
+
+//   let nextTree = tree;
+//   let nextTreeUnfiltered = unfilteredTreeNode = new UnfilteredTreeNode('root');
+
+//   // Check if stateful component
+//   if (stateNode && stateNode.state) {
+//     nextTree = tree.appendChild(stateNode); // Add component to tree
+//     changeSetState(stateNode); // Change setState functionality
+//   }
+//   nextTreeUnfiltered = unfilteredTreeNode.appendChild(stateNode);
+
+//   // TODO: handle Hooks cases...
+
+//   // Recurse on siblings
+//   createTree(sibling, tree);
+//   // Recurse on children
+//   createTree(child, nextTree);
+
+//   return tree;
+// }
+
+
+
+// Check if the component uses hooks
+// if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
+//   // 'catch-all' for suspense elements (experimental)
+//   if (typeof elementType.$$typeof === 'symbol') return;
+//   // Traverse through the currentFiber and extract the getters/setters
+//   astHooks = astParser(elementType);
+//   saveState(astHooks);
+//   // Create a traversed property and assign to the evaluated result of
+//   // invoking traverseHooks with memoizedState
+//   memoizedState.traversed = traverseHooks(memoizedState);
+//   nextTree = tree.appendChild(memoizedState);
+// }
+
+
+
+
+
+
+
+
+// function createTree(currentFiber, tree = new Tree('root')) {
+//   // Base case: child or sibling pointed to null
+//   if (!currentFiber) return tree;
+
+//   const { sibling, stateNode, child, memoizedState, elementType } = currentFiber;
+
+//   let nextTree = tree;
+
+//   // Check if stateful component
+//   if (stateNode && stateNode.state) {
+//     nextTree = tree.appendChild(stateNode); // Add component to tree
+//     changeSetState(stateNode); // Change setState functionality
+//   }
+
+//   // Recurse on siblings
+//   createTree(sibling, tree);
+//   // Recurse on children
+//   createTree(child, nextTree);
+
+//   return tree;
+// }

dev-reactime/reactWorkTags.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/prefer-default-export
+export const reactWorkTags = [
+  { 0: 'FunctionComponent' },
+  { 1: 'ClassComponent' },
+  { 2: 'IndeterminateComponent' },
+  { 3: 'HostRoot' }, // Root of a host tree. Could be nested inside another node.
+  { 4: 'HostPortal' }, // A subtree. Could be an entry point to a different renderer.
+  { 5: 'HostComponent' },
+  { 6: 'HostText' },
+];