Merge pull request #16 from oslabs-beta/dev

Support for Context API, initial support for useState and useReducer hooks

Author: nusanam

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",
@@ -20,10 +20,20 @@
     "type": "git",
     "url": "https://github.com/oslabs-beta/reactime"
   },
-  "author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
+  "contributors": [
+    "Andy Wong",
+    "Bryan Lee",
+    "David Chai",
+    "Josh Kim",
+    "Ruthba Anam",
+    "Ryan Dang",
+    "Sierra Swaby",
+    "Yujin Kang"
+  ],
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
@@ -49,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

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-filename-extension */
-import React from 'react';
+import React, { Component, useState } from 'react';
 import { render } from 'react-dom';
 
 const linkFiberRequire = require('../linkFiber');
@@ -8,7 +8,7 @@ let linkFiber;
 let mode;
 let snapShot;
 
-class App extends React.Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = { foo: 'bar' };
@@ -20,6 +20,17 @@ class App extends React.Component {
   }
 }
 
+// Need to create a functioanl component instance to test 
+// Would need to be revised but here's the gist
+// const funcComponent = () => {
+//     const [ number, setNumber ] = useState(0); 
+//     const newNumber = setNumber(1); 
+    
+//     return (
+//       <div>{newNumber}</div>
+//     )
+// }
+
 describe('unit test for linkFiber', () => {
   beforeEach(() => {
     snapShot = { tree: null };

package/__tests__/linkFiber.test.js

@@ -19,6 +19,10 @@ class FiberNode {
   }
 }
 
+// MVP FEATURE: Additional Testing 
+// Testing for useState and useContext 
+
+
 describe('unit testing for timeJump.js', () => {
   let timeJump;
   let snapShot;

package/__tests__/timeJump.test.js

@@ -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

@@ -1,16 +1,21 @@
+/* eslint-disable func-names */
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
 // 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
+    // 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,
@@ -20,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
@@ -40,10 +43,51 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
+  function changeUseState(component) {
+    if (component.queue.dispatch.linkFiberChanged) 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
+    const memoized = {};
+    let index = 0; 
+    astHooks = Object.values(astHooks); 
+    // while memoizedState is truthy, save the value to the object
+    while (memoizedState && astHooks) {
+      changeUseState(memoizedState);
+      memoized[astHooks[index]] = memoizedState.memoizedState;
+      // Reassign memoizedState to its next value
+      memoizedState = memoizedState.next;
+      // Increment the index by 2
+      index += 2; 
+    }
+    return memoized;
+  }
+
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
 
-    const { sibling, stateNode, child } = currentFiber;
+    const {
+      sibling,
+      stateNode,
+      child,
+      memoizedState,
+    } = currentFiber;
 
     let nextTree = tree;
     // check if stateful component
@@ -53,7 +97,13 @@ module.exports = (snap, mode) => {
       // change setState functionality
       changeSetState(stateNode);
     }
-
+    // Check if the component uses hooks
+    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);
+      nextTree = tree.appendChild(memoizedState);
+    }
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
@@ -67,18 +117,20 @@ module.exports = (snap, mode) => {
     snap.tree = createTree(current);
   }
 
-  return container => {
+  return (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();
+    // 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();
     });
-  };
+  }
 };