ignore

Author: yujinkay

.gitignore

@@ -6,3 +6,5 @@ tictactoe
 parents
 coverage
 src/extension/build.zip
+src/extension/build.crx
+src/extension/build/key.pem

.travis.yml

@@ -2,11 +2,3 @@ services:
   - docker
 script:
   - docker-compose up --abort-on-container-exit
-deploy:
-  provider: script
-  skip_cleanup: true
-  on:
-    branches:
-      only:
-        - dev
-        - master

assets/readme_logo.png

@@ -1,5 +1,5 @@
 {
-  "name": "reacttime-extension",
+  "name": "reactime-extension",
   "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",

demo2.gif renamed to demo.gif

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

@@ -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__/linkFiber.test.js

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

package/__tests__/timeJump.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable func-names */
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
 // links component state tree to library
@@ -9,8 +10,10 @@ module.exports = (snap, mode) => {
 
   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,
@@ -40,10 +43,48 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
+  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;
+      oldDispatch(fiber, queue, action);
+      setTimeout(() => {
+        updateSnapShotTree();
+        sendSnapshot();
+      }, 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
+    let index = 0;
+    const memoizedObj = {};
+    // while memoizedState is truthy, save the value to the object
+    while (memoizedState) {
+      changeUseState(memoizedState);
+      // Increment the index by 1
+      memoizedObj[`state${index += 1}`] = memoizedState.memoizedState;
+      // Reassign memoizedState to its next value
+      memoizedState = memoizedState.next;
+    }
+    return memoizedObj;
+  }
+
   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 +94,14 @@ module.exports = (snap, mode) => {
       // change setState functionality
       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);
+      memoizedState.traversed = traverseHooks(memoizedState);
+      nextTree = tree.appendChild(memoizedState);
+    }
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
@@ -67,18 +115,19 @@ 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) {
+      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();
+      });
+    },
   };
 };