pulled latest version from dev and fixed merged conflicts 11/7

Author: chriswillsflannery

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

@@ -5,7 +5,7 @@
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
     "test": "jest --verbose --coverage --watchAll",
-    "lint": "eslint --ext .js --ext .jsx src"
+    "docker-test-lint": "eslint --ext .js --ext .jsx src"
   },
   "keywords": [
     "react",

package/astParser.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-inner-declarations */
 const acorn = require('acorn'); // javascript parser
 // eslint-disable-next-line import/newline-after-import
 const jsx = require('acorn-jsx');
@@ -11,34 +12,44 @@ module.exports = elementType => {
   // All module exports will always start off as a single 'FunctionDeclaration' type
   while (Object.hasOwnProperty.call(ast, 'body')) {
     // Traverse down .body once before invoking parsing logic and will loop through any .body after
-    // depending on the type of state mgmt, ast will have varying levels where
-    // body array appears in the hierarchy. console.log(ast) on various apps to see this.
-    if (ast.body[0].expression) {
-      ast = ast.body[0].expression.body.body;
-    } else {
-      ast = ast.body[0].body.body;
-    }
-    // Iterate through AST of every function declaration
-    // Check within each function declaration if there are hook declarations
-    // ast.forEach(functionDec => { // removed 11/6 to account for change on line 16
-    //   const { body } = functionDec.body; // removed 11/6 to account for change on line 16
+    ast = ast.body;
     const statements = [];
-    // Traverse through the function's funcDecs and Expression Statements
-    ast.forEach(program => { // changed from body to ast 11/6 to account for change on line 16
+
+    function saveAstHooks(st) {
+      st.forEach((el, i) => {
+        if (el.match(/_use/)) hookState[el] = statements[i + 2];
+      });
+    }
+
+    function findHookDeclarations(astVal) {
+      astVal.forEach(elem => {
+        if (elem.type === 'VariableDeclaration') {
+          elem.declarations.forEach(decClar => {
+            statements.push(decClar.id.name);
+          });
+        }
+      });
+    }
+
+    // handle useState useContext
+    if (ast[0].expression.body.body) {
+      ast = ast[0].expression.body.body;
       // Hook Declarations will only be under 'VariableDeclaration' type
-      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];
-      }
+      findHookDeclarations(ast);
+      // Iterate array and determine getter/setters based on pattern
+      saveAstHooks(statements); // add key-value to hookState
+    } else {
+      // TODO test if this is needed, backward compatibility?
+      // Iterate through AST of every function declaration
+      // Check within each function declaration if there are hook declarations
+      ast.forEach(functionDec => {
+        const { body } = functionDec.body;
+        // Traverse through the function's funcDecs and Expression Statements
+        findHookDeclarations(body);
+        // Iterate array and determine getter/setters based on pattern
+        saveAstHooks(statements); // add key-value to hookState
+      });
     }
-    // });
   }
   return hookState;
 };

package/index.js

@@ -9,10 +9,17 @@ const mode = {
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
 
-window.addEventListener('message', ({ data: { action, payload } }) => { //runs automatically twice per second with inspectedElement
+window.addEventListener('message', ({ data: { action, payload } }) => {
+  //runs automatically twice per second with inspectedElement
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload);
+      // Get the pathname from payload and add new entry to browser history
+      // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+      if (payload.children[0].state && payload.children[0].state.location) {
+        const route = payload.children[0].state.location.pathname;
+        window.history.pushState('', '', route);
+      }
       break;
     case 'setLock':
       mode.locked = payload;

package/linkFiber.js

@@ -70,16 +70,13 @@ module.exports = (snap, mode) => {
     let index = 0;
     astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState && memoizedState.queue) { // prevents useEffect from crashing on load
-      if (memoizedState.next && memoizedState.next.queue === null) { // prevents double pushing snapshot updates
-        changeUseState(memoizedState);
-      }
-      // memoized[astHooks[index]] = memoizedState.memoizedState;
+    while (memoizedState && memoizedState.queue) {
+      changeUseState(memoizedState);
+
       memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
-      // Increment the index by  2
-      index += 2;
+      index += 2; // Increment the index by 2
     }
     return memoized;
   }
@@ -104,7 +101,10 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
-    if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
+    if (
+      memoizedState
+      && Object.hasOwnProperty.call(memoizedState, 'baseState')
+    ) {
       // Traverse through the currentFiber and extract the getters/setters
       astHooks = astParser(elementType);
       saveState(astHooks);

src/app/__tests__/TravelContainer.test.js

@@ -81,4 +81,4 @@ describe('testing the play-button', () => {
     wrapper = shallow(<TravelContainer snapshotsLength={2} />);
     expect(wrapper.find('.play-button').text()).toBe('Play');
   });
-});
+});

src/app/containers/StateContainer.jsx

@@ -1,34 +1,55 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  MemoryRouter as Router, Route, NavLink, Switch,
+  MemoryRouter as Router,
+  Route,
+  NavLink,
+  Switch,
 } from 'react-router-dom';
 import StateRoute from '../components/StateRoute';
 import DiffRoute from '../components/DiffRoute';
 
-
 // eslint-disable-next-line react/prop-types
 const StateContainer = ({ snapshot, hierarchy }) => {
-  const [ Text, setText ] = useState('State');
+  const [Text, setText] = useState('State');
   return (
     <Router>
       <div className="state-container">
         <div className="main-navbar-container">
-          <div className="main-navbar-text">
-            {Text}
-          </div>
+          <div className="main-navbar-text">{Text}</div>
           <div className="main-navbar">
-            <NavLink className="main-router-link" activeClassName="is-active" exact to="/">
+            <NavLink
+              className="main-router-link"
+              activeClassName="is-active"
+              exact
+              to="/"
+            >
               State
             </NavLink>
-            <NavLink className="main-router-link" activeClassName="is-active" to="/diff">
+            <NavLink
+              className="main-router-link"
+              activeClassName="is-active"
+              to="/diff"
+            >
               Diff
             </NavLink>
           </div>
         </div>
         <Switch>
-          <Route path="/diff" render={() => { setText('Diff'); return <DiffRoute snapshot={snapshot} />; }} />
-          <Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} hierarchy={hierarchy} />; }} />
+          <Route
+            path="/diff"
+            render={() => {
+              setText('Diff');
+              return <DiffRoute snapshot={snapshot} />;
+            }}
+          />
+          <Route
+            path="/"
+            render={() => {
+              setText('State');
+              return <StateRoute snapshot={snapshot} hierarchy={hierarchy} />;
+            }}
+          />
         </Switch>
       </div>
     </Router>

src/app/index.js

@@ -5,6 +5,3 @@ import App from './components/App';
 import './styles/main.scss';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-
-// chris test

src/extension/background.js

@@ -8,10 +8,8 @@ const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
 
-console.log("background scripts");
 
 function createTabObj(title) {
-
   // update tabsObj
   return {
     title,
@@ -62,14 +60,17 @@ function changeCurrLocation(tabObj, rootNode, index) {
     return;
     // if not, recurse on each one of the children
   }
-  rootNode.children.forEach(child => {
-    changeCurrLocation(tabObj, child, index);
-  });
+  // added if (rootNode.children) { <=======
+  if (rootNode.children) {
+    rootNode.children.forEach(child => {
+      changeCurrLocation(tabObj, child, index);
+    });
+  }
 }
 
-
 // establishing connection with devtools
-chrome.runtime.onConnect.addListener(port => { // port is one end of the connection - an object
+chrome.runtime.onConnect.addListener(port => {
+  // port is one end of the connection - an object
 
   // push every port connected to the ports array
   portsArr.push(port);
@@ -92,8 +93,9 @@ chrome.runtime.onConnect.addListener(port => { // port is one end of the connect
     }
   });
 
-  // receive snapshot from devtools and send it to contentScript - 
-  port.onMessage.addListener(msg => { // msg is action denoting a time jump in devtools
+  // receive snapshot from devtools and send it to contentScript -
+  port.onMessage.addListener(msg => {
+    // msg is action denoting a time jump in devtools
 
     // ---------------------------------------------------------------
     // message incoming from devTools should look like this:
@@ -143,7 +145,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   let isReactTimeTravel = false;
 
   // Filter out tabs that don't have reactime
-  if (action === 'tabReload' || action === 'recordSnap' || action === 'jumpToSnap') {
+  if (
+    action === 'tabReload'
+    || action === 'recordSnap'
+    || action === 'jumpToSnap'
+  ) {
     isReactTimeTravel = true;
   } else return;
 
@@ -191,7 +197,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         reloaded[tabId] = false;
 
         tabsObj[tabId].snapshots.push(request.payload);
-        sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
+        sendToHierarchy(
+          tabsObj[tabId],
+          new Node(request.payload, tabsObj[tabId]),
+        );
         if (portsArr.length > 0) {
           portsArr.forEach(bg => bg.postMessage({
             action: 'initialConnectSnapshots',
@@ -207,7 +216,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
-        sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
+        sendToHierarchy(
+          tabsObj[tabId],
+          new Node(request.payload, tabsObj[tabId]),
+        );
       }
       // send message to devtools
       if (portsArr.length > 0) {
@@ -253,7 +265,6 @@ chrome.runtime.onInstalled.addListener(() => {
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
-  console.log("clicked menu");
   const options = {
     type: 'panel',
     left: 0,