Merge pull request #28 from crperezt/byebyenpm

Fixing bugs with hooks components state.

Author: crperezt

dev-reactime/linkFiber.js

@@ -46,8 +46,6 @@ 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
@@ -68,14 +66,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,7 +82,7 @@ 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,
@@ -94,7 +92,6 @@ module.exports = (snap, mode) => {
     if (!currentFiber) return null;
     if (!tree) return tree;
 
-
     // These have the newest state. We update state and then
     // called updateSnapshotTree()
     const {
@@ -113,39 +110,45 @@ module.exports = (snap, mode) => {
     let newState = null;
     let componentData = {};
     let componentFound = false;
-    // Check if node is a stateful component
+
+    // 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.
       componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
-      newState = stateNode.state;
+      newState.state = stateNode.state;
       componentFound = true;
-      // tree.appendToChild(stateNode.state, elementType.name, index); // Add component to tree
-    } else if (tag === 0 || tag === 1) {
-      // grab stateless components here
-      newState = 'stateless';
-      //  tree.appendChild({}, elementType.name) // Add component to tree
     }
 
-    // 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 => {
-          hooksIndex = componentActionsRecord.saveNew(c.state, c.component);
-          if (newState.hooksState) {
-            newState.hooksState.push([c.state, hooksIndex]);
+        // 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 = [[c.state, hooksIndex]];
+            newState = { hooksState: [[state.state, hooksIndex]] };
           }
           componentFound = true;
-          // newState = { ...newState, hooksState: c.state };
-          // tree.appendSibling(c.state, elementType.name ? elementType.name : 'nameless', index);
         });
       }
     }
 
+    // This grabs stateless components
+    if (!componentFound && (tag === 0 || tag === 1)) {
+      newState = 'stateless';
+    }
+
+    // Adds performance metrics to the component data
     componentData = {
       ...componentData,
       actualDuration,
@@ -162,6 +165,9 @@ module.exports = (snap, mode) => {
 
     // Recurse on children
     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 {
@@ -176,43 +182,24 @@ module.exports = (snap, mode) => {
 
   // ! BUG: skips 1st hook click
   function updateSnapShotTree() {
-    /* let current;
-    // If concurrent mode, grab current.child
-    if (concurrent) {
-      // we need a way to wait for current child to populate
-      const promise = new Promise((resolve, reject) => {
-        setTimeout(() => resolve(fiberRoot.current.child), 400);
-      });
-      current = await promise;
-      current = fiberRoot.current.child;
-    } else {
-      current = fiberRoot.current;
-    } */
-    const { current } = fiberRoot; // Carlos: get rid of concurrent mode for now
-
-    // console.log('FIBER COMMITTED, new fiber is:', util.inspect(current, false, 4));
-    // fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
-    snap.tree = createTree(current); // Carlos: pass new hooks state here?
+    const { current } = fiberRoot;
+    snap.tree = createTree(current);
   }
 
   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;
 
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {