Merge pull request #4 from oslabs-beta/chris-10-29

some hooks updates and main slider fix 11/4

Author: rocky9413

package.json

@@ -22,8 +22,12 @@
   "contributors": [
     "Andy Wong",
     "Bryan Lee",
+    "Chris Flannery",
     "David Chai",
     "Josh Kim",
+    "Prasanna Malla",
+    "Rajeeb Banstola",
+    "Rocky Lin",
     "Ruth Anam",
     "Ryan Dang",
     "Sierra Swaby",

package/index.js

@@ -9,7 +9,7 @@ const mode = {
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
 
-window.addEventListener('message', ({ data: { action, payload } }) => {
+window.addEventListener('message', ({ data: { action, payload } }) => { //runs automatically twice per second with inspectedElement
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload);

package/linkFiber.js

@@ -1,40 +1,32 @@
 /* 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');
-const { saveState } = require('./masterState'); // saves AST state as array for later use
+const { saveState } = require('./masterState');
 
 module.exports = (snap, mode) => {
-  // snap is the current tree
-  // mode is {jumping: bool, locked: bool, paused: bool}
-
   let fiberRoot = null;
   let astHooks;
 
-  function sendSnapshot() { // send snapshot of current fiber tree to chrome extension ?
+  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
+    // 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(); // copy of current react fiber tree
+    const payload = snap.tree.getCopy();
     // console.log('payload', payload);
-    window.postMessage({ // send to window
+    window.postMessage({
       action: 'recordSnap',
       payload,
     });
   }
 
-  function changeSetState(component) { // if invoked, change setState functionality so that it also updates our snapshot
-    // console.log("what is component?", component);
+  function changeSetState(component) {
     // check that setState hasn't been changed yet
-    if (component.setState.linkFiberChanged) {
-      // console.log("setState has already been changed for", component);
-      return;
-    };
+    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
@@ -43,30 +35,29 @@ module.exports = (snap, mode) => {
       // 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 (to chrome extension) middleware
+      // continue normal setState functionality, except add sending message middleware
       oldSetState(state, () => {
-        updateSnapShotTree(); // this doubles the actions in reactime for star wars app, also invokes changeSetState twice, also invokes changeSetState with Route and Characters
-        sendSnapshot(); //runs once on page load, after event listener: message (line 145)
-        callback.bind(component)(); // WHY DO WE NEED THIS ?
+        updateSnapShotTree();
+        sendSnapshot();
+        callback.bind(component)();
       });
     };
-    component.setState.linkFiberChanged = true; // we changed setState.
+    component.setState.linkFiberChanged = true;
   }
 
-  function changeUseState(component) { // if invoked, change useState dispatch functionality so that it also updates our snapshot
-    //check that changeUseState hasn't been changed yet
+  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, UNLESS we are currently jumping through time
+      // don't do anything if state is locked
       if (mode.locked && !mode.jumping) return;
       oldDispatch(fiber, queue, action);
-      setTimeout(() => {
-        updateSnapShotTree();
-        sendSnapshot();
-      }, 100);
+      // setTimeout(() => {
+      updateSnapShotTree();
+      sendSnapshot();
+      // }, 100);
     };
     component.queue.dispatch.linkFiberChanged = true;
   }
@@ -79,8 +70,10 @@ module.exports = (snap, mode) => {
     let index = 0;
     astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState) {
-      changeUseState(memoizedState);
+    while (memoizedState && memoizedState.queue) { // prevents useEffect from crashing on load
+      if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
+        changeUseState(memoizedState);
+      }
       // memoized[astHooks[index]] = memoizedState.memoizedState;
       memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
@@ -92,22 +85,21 @@ module.exports = (snap, mode) => {
   }
 
   function createTree(currentFiber, tree = new Tree('root')) {
-    // if there is no current fiber just return the new tree as-is
     if (!currentFiber) return tree;
-    // console.log("what is currentFiber", currentFiber);
+
     const {
       sibling,
       stateNode,
       child,
       memoizedState,
       elementType,
-    } = currentFiber; // extract properties of current fiber
+    } = currentFiber;
 
-    let childTree = tree; // initialize child fiber tree as current fiber tree 
+    let nextTree = tree;
     // check if stateful component
     if (stateNode && stateNode.state) {
       // add component to tree
-      childTree = tree.appendChild(stateNode); // returns newly appended tree
+      nextTree = tree.appendChild(stateNode);
       // change setState functionality
       changeSetState(stateNode);
     }
@@ -119,43 +111,34 @@ module.exports = (snap, mode) => {
       // Create a traversed property and assign to the evaluated result of
       // invoking traverseHooks with memoizedState
       memoizedState.traversed = traverseHooks(memoizedState);
-      childTree = tree.appendChild(memoizedState);
+      nextTree = tree.appendChild(memoizedState);
     }
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
-    createTree(child, childTree);
+    createTree(child, nextTree);
 
     return tree;
   }
-
-  // runs when page initially loads and on subsequent state changes
+  // runs when page initially loads
   // but skips 1st hook click
   function updateSnapShotTree() {
-    const { current } = fiberRoot; // on initial page load, current - fiberNode is tag type HostRoot (entire fiber tree)
-    console.log("current", current);
+    const { current } = fiberRoot;
     snap.tree = createTree(current);
   }
 
-  // RUNS ONCE, ON INITIAL PAGE LOAD ?
   return container => {
-    // on first page load, container is entire html hierarchy of top level div
-    // _reactRootContainer is that invisible top level object which wraps the top level div
-    // _reactRootContainer._internalRoot is an object with property .current which includes HostRoot fiberNode (entire fiber tree)
     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') { // runs once on initial page load
-        // console.log("in window.addEL")
-        sendSnapshot()
-      };
+      if (action === 'contentScriptStarted') sendSnapshot();
     });
   };
 };

package/timeJump.js

@@ -28,7 +28,7 @@ module.exports = (origin, mode) => {
       let index = 0;
       const hooks = returnState();
       // while loop through the memoize tree
-      while (current) {
+      while (current && current.queue) { // allows time travel with useEffect
         current.queue.dispatch(target.state[hooks[index]]);
         // Reassign the current value
         current = current.next;

src/app/containers/ActionContainer.jsx

@@ -5,6 +5,13 @@ import Action from '../components/Action';
 import { emptySnapshots } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+const resetSlider = () => {
+  console.log('in reset slider');
+  const slider = document.querySelector('.rc-slider-handle');
+  console.log('my slider', slider);
+  slider.setAttribute('style', 'left: 0');
+};
+
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];
@@ -28,7 +35,15 @@ function ActionContainer() {
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <button className="empty-button" onClick={() => dispatch(emptySnapshots())} type="button">
+        <button
+          className="empty-button"
+          onClick={() => {
+            dispatch(emptySnapshots());
+            // set slider back to zero
+            resetSlider();
+          }}
+          type="button"
+        >
           Empty
         </button>
       </div>

src/extension/background.js

@@ -1,13 +1,17 @@
 /* eslint-disable max-len */
 /* eslint-disable no-param-reassign */
+
 // store ports in an array
 const portsArr = [];
 const reloaded = {};
 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,
@@ -65,7 +69,8 @@ function changeCurrLocation(tabObj, rootNode, index) {
 
 
 // establishing connection with devtools
-chrome.runtime.onConnect.addListener(port => {
+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);
 
@@ -87,8 +92,9 @@ chrome.runtime.onConnect.addListener(port => {
     }
   });
 
-  // receive snapshot from devtools and send it to contentScript
-  port.onMessage.addListener(msg => {
+  // 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:
     // {
@@ -99,7 +105,7 @@ chrome.runtime.onConnect.addListener(port => {
     // ---------------------------------------------------------------
     const { action, payload, tabId } = msg;
     switch (action) {
-      case 'import':
+      case 'import': // create a snapshot property on tabId and set equal to tabs object
         tabsObj[tabId].snapshots = payload;
         return;
       case 'emptySnap':
@@ -247,6 +253,7 @@ 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,

src/extension/contentScript.js

@@ -1,7 +1,7 @@
 let firstMessage = true;
 
 // listening for messages from npm package
-window.addEventListener('message', msg => {
+window.addEventListener('message', msg => { // runs automatically every second
   // window listener picks up the message it sends, so we should filter
   // messages sent by contentscript
   if (msg.data.action !== 'contentScriptStarted' && firstMessage) {
@@ -13,11 +13,15 @@ window.addEventListener('message', msg => {
 
   // post initial Message to background.js
   const { action } = msg.data;
-  if (action === 'recordSnap') chrome.runtime.sendMessage(msg.data);
+
+  if (action === 'recordSnap') { // this is firing on page load
+    chrome.runtime.sendMessage(msg.data);
+  }
 });
 
 // listening for messages from the UI
-chrome.runtime.onMessage.addListener(request => {
+chrome.runtime.onMessage.addListener(request => { // seems to never fire
+
   // send the message to npm package
   const { action } = request;
   switch (action) {

webpack.config.js

@@ -1,7 +1,8 @@
 const path = require('path');
-const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
+const ChromeExtensionReloader = require('webpack-chrome-extension-reloader'); //enable hot reloading while developing a chrome extension
 
 const config = {
+  // use a "multi-main entry" to inject multiple dependent files together and graph their dependencies into one "chunk"
   entry: {
     app: './src/app/index.js',
     background: './src/extension/background.js',