Add documentation for snapShot file

Author: ngoczwolinski

src/backend/linkFiber.ts

@@ -82,7 +82,6 @@ type ComponentData = {
 
 let rtidCounter = 0;
 
-
 /**
  * @function traverseHooks
  * @param memoizedState - The current state of the component associated with the current Fiber node.
@@ -106,7 +105,6 @@ function traverseHooks(memoizedState: any): HookStates {
   return hooksStates;
 }
 
-// This runs after every Fiber commit. It creates a new snapshot
 const exclude = new Set([
   'alternate',
   'basename',
@@ -365,7 +363,7 @@ export function createTree(
     context: {},
     state: {},
   };
-  let componentFound = false;
+  let isStatefulComponent = false;
 
   // ----------------APPEND PROP DATA FROM REACT DEV TOOL-----------------------
   // check to see if the parent component has any state/props
@@ -431,7 +429,7 @@ export function createTree(
     componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
     // passess to front end
     newState = stateNode.state;
-    componentFound = true;
+    isStatefulComponent = true;
   }
 
   // REGULAR REACT HOOKS
@@ -463,15 +461,15 @@ export function createTree(
           newState.hooksState = [];
         }
         newState.hooksState.push({ [hooksNames[i]]: state.state });
-        componentFound = true;
+        isStatefulComponent = true;
       });
       // console.log({ newState: newState.hooksState });
     }
   }
 
   // This grabs stateless components
   if (
-    !componentFound &&
+    !isStatefulComponent &&
     (tag === FunctionComponent || tag === ClassComponent || tag === IndeterminateComponent)
   ) {
     newState = 'stateless';
@@ -500,7 +498,7 @@ export function createTree(
   let rtid: string | null = null;
   // We want to add this fiber node to the snapshot
   // if (componentFound || (newState === 'stateless' && !newState.hooksState)) {
-  if (componentFound || newState === 'stateless') {
+  if (isStatefulComponent || newState === 'stateless') {
     // Grab JSX Component & replace the 'fromLinkFiber' class value
     if (currentFiberNode.child?.stateNode?.setAttribute) {
       rtid = `fromLinkFiber${rtidCounter}`;

src/backend/snapShot.ts

@@ -5,21 +5,43 @@ import Tree from './tree';
 import componentActionsRecord from './masterState';
 import routes from './routes';
 import { createTree } from './linkFiber';
+
+// ---------------------------UPDATE TREE SNAP SHOT-----------------------------
+/**
+ * - Create a new `snapShot` tree with the provided `fiberRoot`. This runs after every Fiber commit.
+ * - Middleware: Updates snapShot object with latest snapshot, using `sendSnapshot`
+ * @param snapShot The current snapshot
+ * @param mode The current mode (i.e. jumping, time-traveling, or paused)
+ * @param fiberRoot The `fiberRootNode`, which is the root node of a tree of React component. The `current` property of `fiberRoot` has data structure of a Tree, which can be used to traverse and obtain all child component data.
+ */
+// updating tree depending on current mode on the panel (pause, etc)
+export default function updateSnapShotTree(
+  snapShot: Snapshot,
+  mode: Status,
+  fiberRoot: FiberRoot,
+): void {
+  console.log('snapShot.ts - Update');
+  // this is the currently active root fiber(the mutable root of the tree)
+  const { current } = fiberRoot;
+  componentActionsRecord.clear();
+  // creates snapshot that is a tree based on properties in fiberRoot object
+  snapShot.tree = createTree(current);
+  // sends the updated tree back
+  sendSnapshot(snapShot, mode);
+}
+
+// -------------------SEND TREE SNAP SHOT TO FRONT END--------------------------
 /**
- * @method sendSnapshot
+ * Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
  * @param snapShot The current snapshot
  * @param mode The current mode (i.e. jumping, time-traveling, or paused)
- * @return Nothing.
+ * @return void
  *
- * Middleware: Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
  */
 function sendSnapshot(snapShot: Snapshot, mode: Status): void {
   // Don't send messages while jumping or while paused
   if (mode.jumping || mode.paused) return;
-  // If there is no current tree  creates a new one
-  if (!snapShot.tree) {
-    snapShot.tree = new Tree('root', 'root');
-  }
+
   // Make a deep copy of the tree:
   const payload = snapShot.tree.cleanTreeCopy();
   payload.route = routes.addRoute(window.location.href);
@@ -38,27 +60,3 @@ function sendSnapshot(snapShot: Snapshot, mode: Status): void {
     '*',
   );
 }
-
-/**
- * @function updateSnapShotTree
- * @param snapShot The current snapshot
- * @param mode The current mode (i.e. jumping, time-traveling, or paused)
- * Middleware: Updates snapShot object with latest snapshot, using @sendSnapshot
- */
-// updating tree depending on current mode on the panel (pause, etc)
-export default function updateSnapShotTree(
-  snapShot: Snapshot,
-  mode: Status,
-  fiberRoot: FiberRoot,
-): void {
-  console.log('snapShot - Update');
-  // this is the currently active root fiber(the mutable root of the tree)
-  if (fiberRoot) {
-    const { current } = fiberRoot;
-    // creates snapshot that is a tree based on properties in fiberRoot object
-    componentActionsRecord.clear();
-    snapShot.tree = createTree(current);
-  }
-  // sends the updated tree back
-  sendSnapshot(snapShot, mode);
-}