10/31 added helpful comments to linkFiber.js and tree.js -c

Author: chriswillsflannery

package/astParser.js

@@ -1,4 +1,4 @@
-const acorn = require('acorn');
+const acorn = require('acorn'); // javascript parser
 // eslint-disable-next-line import/newline-after-import
 const jsx = require('acorn-jsx');
 const JSXParser = acorn.Parser.extend(jsx());

package/linkFiber.js

@@ -1,32 +1,40 @@
 /* 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');
+const { saveState } = require('./masterState'); // saves AST state as array for later use
 
 module.exports = (snap, mode) => {
+  // snap is the current tree
+  // mode is {jumping: bool, locked: bool, paused: bool}
+
   let fiberRoot = null;
   let astHooks;
 
-  function sendSnapshot() {
+  function sendSnapshot() { // send snapshot of current fiber tree to chrome extension ?
     // 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();
+    const payload = snap.tree.getCopy(); // copy of current react fiber tree
     // console.log('payload', payload);
-    window.postMessage({
+    window.postMessage({ // send to window
       action: 'recordSnap',
       payload,
     });
   }
 
-  function changeSetState(component) {
+  function changeSetState(component) { // if invoked, change setState functionality so that it also updates our snapshot
+    // console.log("what is component?", component);
     // check that setState hasn't been changed yet
-    if (component.setState.linkFiberChanged) return;
+    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
@@ -35,23 +43,24 @@ 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 middleware
+      // continue normal setState functionality, except add sending message (to chrome extension) middleware
       oldSetState(state, () => {
-        updateSnapShotTree();
-        sendSnapshot();
-        callback.bind(component)();
+        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 ?
       });
     };
-    component.setState.linkFiberChanged = true;
+    component.setState.linkFiberChanged = true; // we changed setState.
   }
 
-  function changeUseState(component) {
+  function changeUseState(component) { // if invoked, change useState dispatch functionality so that it also updates our snapshot
+    //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);
     // redefine the dispatch function so we can inject our code
     component.queue.dispatch = (fiber, queue, action) => {
-      // don't do anything if state is locked
+      // 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(() => {
@@ -83,21 +92,22 @@ 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;
+    } = currentFiber; // extract properties of current fiber
 
-    let nextTree = tree;
+    let childTree = tree; // initialize child fiber tree as current fiber tree 
     // check if stateful component
     if (stateNode && stateNode.state) {
       // add component to tree
-      nextTree = tree.appendChild(stateNode);
+      childTree = tree.appendChild(stateNode); // returns newly appended tree
       // change setState functionality
       changeSetState(stateNode);
     }
@@ -109,34 +119,43 @@ module.exports = (snap, mode) => {
       // Create a traversed property and assign to the evaluated result of
       // invoking traverseHooks with memoizedState
       memoizedState.traversed = traverseHooks(memoizedState);
-      nextTree = tree.appendChild(memoizedState);
+      childTree = tree.appendChild(memoizedState);
     }
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
-    createTree(child, nextTree);
+    createTree(child, childTree);
 
     return tree;
   }
-  // runs when page initially loads
+
+  // runs when page initially loads and on subsequent state changes
   // but skips 1st hook click
   function updateSnapShotTree() {
-    const { current } = fiberRoot;
+    const { current } = fiberRoot; // on initial page load, current - fiberNode is tag type HostRoot (entire fiber tree)
+    console.log("current", current);
     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 rootp if it actually exists
+    // 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();
+      if (action === 'contentScriptStarted') { // runs once on initial page load
+        // console.log("in window.addEL")
+        sendSnapshot()
+      };
     });
   };
 };

package/tree.js

@@ -17,7 +17,8 @@ class Tree {
     }
     this.children = [];
     // DEV: Added print() for debugging purposes
-    // this.print();
+
+    // this.print(); // this call is not useful here. it would be useful in a function call where we've already added to this.children
   }
 
   appendChild(component) {
@@ -39,20 +40,21 @@ class Tree {
     return copy;
   }
 
-  // print out the tree in the console
+  // print out the tree structure in the console
   // DEV: Process may be different for useState components
   // BUG FIX: Don't print the Router as a component
   // Change how the children are printed
   print() {
+    console.log("current tree structure for *this : ", this);
     const children = ['children: '];
     // DEV: What should we push instead for components using hooks (it wouldn't be state)
-    this.children.forEach(child => {
+    this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
       children.push(child.state || child.component.state);
     });
-    if (this.name) console.log(this.name);
+    if (this.name) console.log("this.name if exists: ", this.name);
     if (children.length === 1) {
-      console.log(this.state || this.component.state);
-    } else console.log(this.state || this.component.state, ...children);
+      console.log(`children length 1. ${this.state ? `this.state: ` : `this.component.state: `}`, this.state || this.component.state);
+    } else console.log(`children length !== 1. ${this.state ? `this.state: ` : `this.component.state, children: `}`, this.state || this.component.state, ...children);
     this.children.forEach(child => {
       child.print();
     });