Merge branch 'dev' into d3-test

Author: davidchai717

Dockerfile

@@ -1,4 +1,4 @@
 FROM node:10.16.2
-WORKDIR /usr/src/app
+WORKDIR /usr/src/app 
 COPY package*.json ./
 RUN npm i

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "reacttime-extension",
+  "name": "reactime",
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "webpack --mode production",
@@ -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,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,43 +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(() => {
-        console.log('Updating the snapshot tree after an action has been dispatched');
         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,
@@ -96,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);
     }
@@ -113,23 +114,23 @@ module.exports = (snap, mode) => {
 
   function updateSnapShotTree() {
     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();
-      // 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"
+  }
 }