made sure traverseHooks does not double-push snapshot for each hooks update

Author: chriswillsflannery

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

@@ -11,7 +11,7 @@ const { saveState } = require('./masterState'); // saves AST state as array for
 
 module.exports = (snap, mode) => {
   // snap is the current tree
-  // mode is {jumping: bool, locked: bool, paused: bool}
+  // mode is {jumping: bool, locked: bool, paused: bool
 
   let fiberRoot = null;
   let astHooks;
@@ -34,7 +34,7 @@ module.exports = (snap, mode) => {
     if (component.setState.linkFiberChanged) {
       // console.log("setState has already been changed for", component);
       return;
-    };
+    }
     // make a copy of setState
     const oldSetState = component.setState.bind(component);
     // replace component's setState so developer doesn't change syntax
@@ -46,27 +46,31 @@ module.exports = (snap, mode) => {
       // continue normal setState functionality, except add sending message (to chrome extension) 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)
+        sendSnapshot(); // runs once on page load, after event listener: message (line 145)
         callback.bind(component)(); // WHY DO WE NEED THIS ?
       });
     };
     component.setState.linkFiberChanged = true; // we changed setState.
   }
 
   function changeUseState(component) { // if invoked, change useState dispatch functionality so that it also updates our snapshot
-    //check that changeUseState hasn't been changed yet
+    // check that changeUseState hasn't been changed yet
     if (component.queue.dispatch.linkFiberChanged) return;
     // store the original dispatch function definition
-    const oldDispatch = component.queue.dispatch.bind(component.queue);
+
+    // not sure why we need the bind, seems to work without it
+    // const oldDispatch = component.queue.dispatch.bind(component.queue);
+    const oldDispatch = component.queue.dispatch;
+
     // 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
       if (mode.locked && !mode.jumping) return;
-      oldDispatch(fiber, queue, action);
-      setTimeout(() => {
-        updateSnapShotTree();
-        sendSnapshot();
-      }, 100);
+      oldDispatch(fiber, queue, action); // hooks sees this and thinks its a side effect, that's why it's throwing an error
+      // setTimeout(() => {
+      updateSnapShotTree();
+      sendSnapshot();
+      // }, 100);
     };
     component.queue.dispatch.linkFiberChanged = true;
   }
@@ -79,8 +83,13 @@ 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 !== null) {
+      // we only want to changeUseState (which updates and sends the snapshot)
+      // on the last item in the memoizedState chain. This makes sure it doesn't double-push
+      // values to the timeline.
+      if (memoizedState.next === null) {
+        changeUseState(memoizedState);
+      }
       // memoized[astHooks[index]] = memoizedState.memoizedState;
       memoized[astHooks[index]] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
@@ -103,7 +112,7 @@ module.exports = (snap, mode) => {
       elementType,
     } = currentFiber; // extract properties of current fiber
 
-    let childTree = tree; // initialize child fiber tree as current fiber tree 
+    let childTree = tree; // initialize child fiber tree as current fiber tree
     // check if stateful component
     if (stateNode && stateNode.state) {
       // add component to tree
@@ -112,6 +121,7 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
+
     if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
       // Traverse through the currentFiber and extract the getters/setters
       astHooks = astParser(elementType);
@@ -133,7 +143,7 @@ module.exports = (snap, mode) => {
   // 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);
+    console.log('current', current);
     snap.tree = createTree(current);
   }
 
@@ -154,8 +164,9 @@ module.exports = (snap, mode) => {
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') { // runs once on initial page load
         // console.log("in window.addEL")
-        sendSnapshot()
-      };
+        console.log('page running');
+        sendSnapshot();
+      }
     });
   };
 };

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',