Merge pull request #17 from oslabs-beta/acorn-ast-test

Added masterState, helpers for hooks, fixed playback issue

Author: nusanam

.gitignore

@@ -8,3 +8,4 @@ coverage
 src/extension/build.zip
 src/extension/build.crx
 src/extension/build/key.pem
+package/__tests__

package/linkFiber.js

@@ -4,11 +4,12 @@
 // links component state tree to library
 // changes the setState method to also update our snapshot
 const Tree = require('./tree');
-const astParser = require('./astParser.js');
+const astParser = require('./astParser'); 
+const { saveState } = require('./masterState'); 
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
-  let astHooks; 
+  let astHooks;
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
@@ -45,14 +46,15 @@ module.exports = (snap, mode) => {
 
   function changeUseState(component) {
     if (component.queue.dispatch.linkFiberChanged) return;
-    // store the original dispatch function definition 
-    const oldDispatch = component.queue.dispatch.bind(component.queue);; 
+    // store the original dispatch function definition  
+    const oldDispatch = component.queue.dispatch.bind(component.queue);
     // redefine the dispatch function so we can inject our code
     component.queue.dispatch = (fiber, queue, action) => {
       // don't do anything if state is locked
       if (mode.locked && !mode.jumping) return; 
-      oldDispatch(fiber, queue, action);
+      //oldDispatch(fiber, queue, action);
       setTimeout(() => {
+        oldDispatch(fiber, queue, action);
         updateSnapShotTree();
         sendSnapshot();
       }, 100);
@@ -61,16 +63,16 @@ module.exports = (snap, mode) => {
   }
 
   // Helper function to traverse through the memoized state
-  // TODO: WE NEED TO CLEAN IT UP A BIT
   function traverseHooks(memoizedState) {
     // Declare variables and assigned to 0th index and an empty object, respectively
     const memoized = {};
     let index = 0; 
     astHooks = Object.values(astHooks); 
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState && astHooks) {
+    while (memoizedState) {
       changeUseState(memoizedState);
-      memoized[astHooks[index]] = memoizedState.memoizedState;
+      //memoized[astHooks[index]] = memoizedState.memoizedState;
+      memoized[astHooks[index]] = memoizedState.memoizedState; 
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
       // Increment the index by 2
@@ -98,7 +100,7 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
-    if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
+    if (memoizedState && memoizedState.hasOwnProperty('baseState')) { 
       // Add a traversed property and initialize to the evaluated result 
       // of invoking traverseHooks, and reassign nextTree
       memoizedState.traversed = traverseHooks(memoizedState);
@@ -111,7 +113,8 @@ module.exports = (snap, mode) => {
 
     return tree;
   }
-
+  // runs when page initially loads 
+  // but skips 1st hook click 
   function updateSnapShotTree() {
     const { current } = fiberRoot;
     snap.tree = createTree(current);
@@ -125,9 +128,12 @@ module.exports = (snap, mode) => {
     // only assign internal rootp if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
     // If hooks are implemented, traverse through the source code 
-    if (entryFile) astHooks = astParser(entryFile);
-
-    updateSnapShotTree();
+    // Save the getter/setter combo for timeJump
+    if (entryFile) {
+      astHooks = astParser(entryFile);
+      saveState(astHooks); 
+    }
+    updateSnapShotTree(); 
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') sendSnapshot();

package/masterState.js

@@ -0,0 +1,13 @@
+// Export two functions that either saves the AST state object into an array
+// or returns the array for use
+const masterState = [];
+
+module.exports = {
+  saveState: state => {
+    for (const key in state) {
+      masterState.push(state[key]);
+    }
+    return masterState; 
+  },
+  returnState: () => masterState
+};

package/timeJump.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-param-reassign */
 // traverses given tree by accessing children through coords array
+const { returnState } = require('./masterState'); 
+
 function traverseTree(tree, coords) {
   let curr = tree;
   coords.forEach(coord => {
@@ -21,13 +23,16 @@ module.exports = (origin, mode) => {
         });
       });
     } else {
-      // if component uses hooks
+      // if component uses hooks, traverse through the memoize tree
       let current = originNode.component;
-      let index = 1;
-      // Iterate through the memoized tree
+      let index = 0;
+      const hooks = returnState(); 
+      // Iterate through the memoize tree
       while (current) {
-        current.queue.dispatch(target.state[`state${index++}`]);
+        current.queue.dispatch(target.state[hooks[index]]);
+        // Reassign the current value
         current = current.next;
+        index += 2;
       }
     }
   }