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

Acorn ast test

Author: andynullwong

package-lock.json

@@ -59,6 +59,8 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
+    "acorn": "^7.1.0",
+    "acorn-jsx": "^5.0.2",
     "d3": "^3.5.17",
     "immer": "^3.2.0",
     "jsondiffpatch": "^0.3.11",

package.json

@@ -0,0 +1,34 @@
+const acorn = require('acorn');
+const jsx = require('acorn-jsx');
+const JSXParser = acorn.Parser.extend(jsx());
+
+// Helper function to recursively traverse through the user's codebase 
+// INSERT HERE 
+
+module.exports = file => {
+  // Initialize empty object to store the setters and getter
+  const hookState = {};
+  const ast = JSXParser.parse(file).body;
+  // Iterate through AST of every function declaration
+  // Check within each function declaration if there are hook declarations
+  ast.forEach(func => {
+    const { body } = func.body; 
+    const statements = [];
+    // Traverse through the function's funcDecs and Expression Statements
+    body.forEach(program => {
+      if (program.type === 'VariableDeclaration') {
+        program.declarations.forEach(dec => {
+          statements.push(dec.id.name);
+        });
+      }
+    });
+    // Iterate through the array and determine getter/setters based on pattern
+    for (let i = 0; i < statements.length; i += 1) {
+      if (statements[i].match(/_use/)) {
+        hookState[statements[i]] = statements[i + 2];
+      }
+    }
+  });
+  // Return the object with setters and getters
+  return hookState;
+};

package/astParser.js

@@ -25,4 +25,4 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
   }
 });
 
-module.exports = linkFiber; 
+module.exports = linkFiber;

package/index.js

@@ -4,9 +4,11 @@
 // links component state tree to library
 // changes the setState method to also update our snapshot
 const Tree = require('./tree');
+const astParser = require('./astParser.js');
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
+  let astHooks; 
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
@@ -23,14 +25,12 @@ module.exports = (snap, mode) => {
   function changeSetState(component) {
     // check that setState hasn't been changed yet
     if (component.setState.linkFiberChanged) return;
-
     // make a copy of setState
     const oldSetState = component.setState.bind(component);
-
     // replace component's setState so developer doesn't change syntax
     // component.setState = newSetState.bind(component);
-    component.setState = (state, callback = () => {}) => {
-      // dont do anything if state is locked
+    component.setState = (state, callback = () => { }) => {
+      // don't do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
       // continue normal setState functionality, except add sending message middleware
@@ -43,42 +43,45 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
-  function changeUseState (component) {
+  function changeUseState(component) {
     if (component.queue.dispatch.linkFiberChanged) return;
-    // storing the original dispatch function definition somewhere
-    const oldDispatch = component.queue.dispatch.bind(component.queue);
-    // redefining the dispatch function so we can inject our code
-    component.queue.dispatch = function (fiber, queue, action) {
-      console.log('mode', mode);
-      if (mode.locked && !mode.jumping) return;
+    // 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);
       setTimeout(() => {
         updateSnapShotTree();
         sendSnapshot();
       }, 100);
     };
     component.queue.dispatch.linkFiberChanged = true;
-  };
-  
+  }
+
   // 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
-    let index = 0;
-    const memoizedObj = {};
+    const memoized = {};
+    let index = 0; 
+    astHooks = Object.values(astHooks); 
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState) {
+    while (memoizedState && astHooks) {
       changeUseState(memoizedState);
-      // Increment the index by 1
-      memoizedObj[`state${index += 1}`] = memoizedState.memoizedState;
+      memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
+      // Increment the index by 2
+      index += 2; 
     }
-    return memoizedObj;
+    return memoized;
   }
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-  
+
     const {
       sibling,
       stateNode,
@@ -95,10 +98,9 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // 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("I'm not supposed to run", currentFiber);
+      // Add a traversed property and initialize to the evaluated result 
+      // of invoking traverseHooks, and reassign nextTree
       memoizedState.traversed = traverseHooks(memoizedState);
       nextTree = tree.appendChild(memoizedState);
     }
@@ -115,19 +117,20 @@ module.exports = (snap, mode) => {
     snap.tree = createTree(current);
   }
 
-  return {
-    _(container) {
-      const {
-        _reactRootContainer: { _internalRoot },
-        _reactRootContainer,
-      } = container;
-      // 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();
-      });
-    },
-  };
+  return (container, entryFile) => {
+    const {
+      _reactRootContainer: { _internalRoot },
+      _reactRootContainer,
+    } = container;
+    // 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();
+    // send the initial snapshot once the content script has started up
+    window.addEventListener('message', ({ data: { action } }) => {
+      if (action === 'contentScriptStarted') sendSnapshot();
+    });
+  }
 };

package/linkFiber.js

@@ -27,10 +27,13 @@
     "David Chai",
     "Josh Kim",
     "Ruthba Anam",
-    "Ryan Dang", 
+    "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"
   ],
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {
+    "acorn": "^7.1.0",
+    "acorn-jsx": "^5.0.2"
+  }
 }

package/package-lock.json

@@ -22,16 +22,12 @@ module.exports = (origin, mode) => {
       });
     } else {
       // if component uses hooks
-      // variable for current location
-      let currLocation = originNode.component;
-      // state no
-      let stateNum = 1;
-      console.log('component', originNode.component);
-      // while loop through the memoize tree
-      while (currLocation) {
-        currLocation.queue.dispatch(target.state[`state${stateNum}`]);
-        currLocation = currLocation.next;
-        stateNum += 1;
+      let current = originNode.component;
+      let index = 1;
+      // Iterate through the memoized tree
+      while (current) {
+        current.queue.dispatch(target.state[`state${index++}`]);
+        current = current.next;
       }
     }
   }