refactored to include astParser.js to access client source code

Author: andynullwong

package-lock.json

@@ -26,7 +26,7 @@
     "David Chai",
     "Josh Kim",
     "Ruthba Anam",
-    "Ryan Dang", 
+    "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"
   ],
@@ -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,38 @@
+const acorn = require('acorn');
+const jsx = require('acorn-jsx');
+
+const JSXParser = acorn.Parser.extend(jsx());
+
+const hookState = {};
+
+module.exports = jsFile => {
+  // console.log('ast inside', jsFile);
+  const ast = JSXParser.parse(jsFile).body;
+  // Iterating through AST of every function declaration
+  ast.forEach(astFuncDec => {
+    // Checking within each function declaration if there are hook declarations
+    // console.log('App.js', astFuncDec.body.body);
+    const fd = astFuncDec.body.body;
+    // console.log(astFuncDec.body.body);
+    // Traversing through the function's funcDecs and Expression Statements
+    const allVarDeclarations = [];
+    fd.forEach(astProgramBody => {
+      if (astProgramBody.type === 'VariableDeclaration') {
+        astProgramBody.declarations.forEach(declarations => {
+          allVarDeclarations.push(declarations.id.name);
+        });
+      }
+    });
+    // console.log(allVarDeclarations);
+    // Iterate through the array
+    for (let varDec = 0; varDec < allVarDeclarations.length; varDec += 1) {
+      // Determine getter/setters based on pattern
+      if (allVarDeclarations[varDec].match(/_useState/)) {
+        // Map the 4 elements together
+        hookState[allVarDeclarations[varDec]] = allVarDeclarations[varDec + 2];
+        // hookState[allVarDeclarations[varDec + 1]] = allVarDeclarations[varDec + 2];
+      }
+    }
+  });
+  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,6 +4,7 @@
 // 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;
@@ -29,7 +30,7 @@ module.exports = (snap, mode) => {
 
     // replace component's setState so developer doesn't change syntax
     // component.setState = newSetState.bind(component);
-    component.setState = (state, callback = () => {}) => {
+    component.setState = (state, callback = () => { }) => {
       // dont do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -43,7 +44,7 @@ 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);
@@ -59,8 +60,8 @@ module.exports = (snap, mode) => {
       }, 100);
     };
     component.queue.dispatch.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
@@ -79,7 +80,7 @@ module.exports = (snap, mode) => {
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-  
+
     const {
       sibling,
       stateNode,
@@ -99,7 +100,6 @@ module.exports = (snap, mode) => {
     // 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);
       memoizedState.traversed = traverseHooks(memoizedState);
       nextTree = tree.appendChild(memoizedState);
     }
@@ -116,20 +116,21 @@ module.exports = (snap, mode) => {
     console.log('current', current);
     snap.tree = createTree(current);
   }
-
   return {
-    _(container) {
+    _(container, ENTRYFILE) {
       const {
         _reactRootContainer: { _internalRoot },
         _reactRootContainer,
       } = container;
-      // only assign internal root if it actually exists
+      // only assign internal rootp 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();
       });
+      const astEntryFile = astParser(ENTRYFILE);
+      console.log('ENTRYFILE into ast', astEntryFile);
     },
   };
 };

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"
+  }
 }