Merge pull request #5 from oslabs-beta/hooks-implementation

Latest Hooks implementation

Author: andynullwong

package/linkFiber.js

@@ -1,3 +1,4 @@
+/* eslint-disable func-names */
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
 // links component state tree to library
@@ -9,14 +10,17 @@ module.exports = (snap, mode) => {
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
+    // DEV: So that when we are jumping to an old snapshot it wouldn't think we want to create new snapshots
     if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
+    // console.log('payload', payload);
     window.postMessage({
       action: 'recordSnap',
       payload,
     });
   }
 
+  // DEV: This is how we know when a change has happened (by injecting an event listener to every component's setState functionality). Will need to create a separate one for useState components
   function changeSetState(component) {
     // check that setState hasn't been changed yet
     if (component.setState.linkFiberChanged) return;
@@ -40,11 +44,31 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
+  // Helper function to traverse through the memoized state
+  function traverseHooks(memoizedState) {
+    // Declare variables and assigned to 0th index and an empty object, respectively
+    let index = 0;
+    const memoizedObj = {};
+    // while memoizedState is truthy, save the value to the object
+    while (memoizedState) {
+      // Increment the index by 1
+      memoizedObj[`useState${index += 1}`] = memoizedState.memoizedState;
+      // Reassign memoizedState to its next value
+      memoizedState = memoizedState.next;
+    }
+    return memoizedObj;
+  }
+
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
     // We have to figure out which properties to destructure from currentFiber
-    // To support hooks and Context API 
-    const { sibling, stateNode, child } = currentFiber;
+    // To support hooks and Context API
+    const {
+      sibling,
+      stateNode,
+      child,
+      memoizedState,
+    } = currentFiber;
 
     let nextTree = tree;
     // check if stateful component
@@ -54,8 +78,16 @@ module.exports = (snap, mode) => {
       // change setState functionality
       changeSetState(stateNode);
     }
-    // Need to check if functional component AND uses hooks 
-    
+    // Check if the component uses hooks
+    // TODO: Refactor the conditionals - think about the edge case where a stateful
+    // component might have a key called 'baseState' in the state
+    if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
+      // console.log('The memoizedState is: ', memoizedState);
+      const result = traverseHooks(memoizedState);
+      console.log('This is the result of calling traverseHooks:', result);
+      nextTree = tree.appendChild(result);
+    }
+
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
@@ -65,22 +97,61 @@ module.exports = (snap, mode) => {
   }
 
   function updateSnapShotTree() {
+    // console.log('fiberRoot', fiberRoot);
     const { current } = fiberRoot;
+    console.log('current', current);
     snap.tree = createTree(current);
   }
 
-  return container => {
-    const {
-      _reactRootContainer: { _internalRoot },
-      _reactRootContainer,
-    } = container;
-    // only assign internal root if it actually exists
-    fiberRoot = _internalRoot || _reactRootContainer;
-    updateSnapShotTree();
+  // return container => {
+  //   // console.log('Container', container);
+  //   const {
+  //     _reactRootContainer: { _internalRoot },
+  //     _reactRootContainer,
+  //   } = container;
+  //   // console.log('Root container', _reactRootContainer);
+  //   // only assign internal root if it actually exists
+  //   fiberRoot = _internalRoot || _reactRootContainer;
+  //   updateSnapShotTree();
 
-    // send the initial snapshot once the content script has started up
-    window.addEventListener('message', ({ data: { action } }) => {
-      if (action === 'contentScriptStarted') sendSnapshot();
-    });
+  //   // send the initial snapshot once the content script has started up
+  //   window.addEventListener('message', ({ data: { action } }) => {
+  //     if (action === 'contentScriptStarted') sendSnapshot();
+  //   });
+  // };
+
+  return {
+    main(container) {
+      // console.log('Container', container);
+      const {
+        _reactRootContainer: { _internalRoot },
+        _reactRootContainer,
+      } = container;
+      // console.log('Root container', _reactRootContainer);
+      // only assign internal root if it actually exists
+      fiberRoot = _internalRoot || _reactRootContainer;
+      updateSnapShotTree();
+  
+      // send the initial snapshot once the content script has started up
+      window.addEventListener('message', ({ data: { action } }) => {
+        if (action === 'contentScriptStarted') sendSnapshot();
+      });
+    },
+    changeUseState(useState) {
+      return function (initial) {
+        // running the original useState and storing its result (state and dispatch function)
+        const toReturn = useState(initial);
+        console.log(toReturn);
+        // storing the original dispatch function definition somewhere
+        const oldDispatch = toReturn[1];
+        // redefining the dispatch function so we can inject our code
+        toReturn[1] = function (callback) {
+          oldDispatch(callback);
+          updateSnapShotTree();
+          sendSnapshot();
+        };
+        return toReturn;
+      };
+    },
   };
-};
+};

package/tree.js

@@ -14,6 +14,8 @@ class Tree {
       this.name = name;
     }
     this.children = [];
+    // DEV: Added print() for debugging purposes
+    // this.print();
   }
 
   appendChild(component) {
@@ -26,7 +28,7 @@ class Tree {
   getCopy(copy = new Tree('root', true)) {
     // copy state of children
     copy.children = this.children.map(
-      child => new Tree(child.component.state, true, child.component.constructor.name),
+      child => new Tree(child.component.state || child.component, true, child.component.constructor.name),
     );
 
     // copy children's children recursively
@@ -35,10 +37,12 @@ class Tree {
   }
 
   // print out the tree in the console
+  // DEV: Process may be different for useState components
   // BUG FIX: Don't print the Router as a component 
   // Change how the children are printed 
   print() {
     const children = ['children: '];
+    // DEV: What should we push instead for components using hooks (it wouldn't be state)
     this.children.forEach(child => {
       children.push(child.state || child.component.state);
     });