updating notes to backend

Author: Zachary Freeman

demo-app/src/client/Components/Nav.tsx

@@ -13,9 +13,9 @@ function Nav() {
       <Link className='link' to='/buttons'>
         Counter
       </Link>
-      <Link className='link' to='/test'>
+      {/* <Link className='link' to='/test'>
         Test
-      </Link>
+      </Link> */}
     </div>
   );
 }

src/backend/controllers/timeJump.ts

@@ -66,6 +66,7 @@ async function initiateJump(target, mode): Promise<void> {
   updateTreeState(target).then(() => {
     document.body.onmouseover = () => {
       mode.jumping = false;
+      console.log('mouseover');
     };
   });
 }

src/backend/models/masterState.ts

@@ -4,24 +4,35 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 
+/**
+ * @type ComponentAction - an array of actions that can be performed on a component
+ */
 type ComponentAction = any[];
 
-// HookState is an array that contains a "component" for
-// every single state change that occurs in the app
+// The HookState data structure is an array that holds the current value of a hook's state, as well as a dispatch function that is used to update that state.
 // Information on these components include ComponentData as well as state
 // For class components, there will be one "component" for each snapshot
 // For functional components that utilize Hooks, there will be one "component"
 // for each setter/getter every time we have a new snapshot
 let componentActionsRecord: ComponentAction = [];
+// index keeps track of the current position in the array
 let index: number;
 index = 0;
 
 export default {
+  /**
+   * @function clear - Clears componentActionsRecord
+   */
   clear: () => {
     componentActionsRecord = [];
     index = 0;
   },
-  // Adds new component to ComponentActionsRecord
+
+  /**
+   * @function saveNew - Adds a new component to the componentActionsRecord array and returns its index.
+   * @param component
+   * @returns number
+   */
   saveNew: (component): number => {
     componentActionsRecord[index] = component;
     index++;
@@ -30,23 +41,23 @@ export default {
   },
   // ----------------------------CLASS COMPONENT--------------------------------
   /**
-   * This function is used for stateful Class Component to retrieve an object that has the bound setState method
+   * @function getComponentByIndex - This function is used for stateful Class Component to retrieve an object that has the bound setState method
    * @param inputIndex - index of component inside `componentActionsRecord` coming from `timeJump.ts`
    * @returns - an object containing the bound setState method
    */
   getComponentByIndex: (inputIndex: number): any | undefined => componentActionsRecord[inputIndex],
 
   //---------------------------FUNCTIONAL COMPONENT-----------------------------
   /**
-   * This function is used for Functional Component to retrieve an array of objects that have the bound dispatch methods.
+   * @function getComponentByIndexHooks - This function is used for Functional Component to retrieve an array of objects that have the bound dispatch methods.
    * @param inputIndex - index of component inside `componentActionsRecord` coming from `timeJump.ts`
    * @returns - an array of objects containing the bound dispatch methods
    */
   getComponentByIndexHooks: (inputIndex: Array<number> = []): any[] | undefined =>
     inputIndex.map((index) => componentActionsRecord[index]),
   // ----------------------------------DEBUGGING--------------------------------
   /**
-   * This method is used for debugging purpose to access the array of setState/dispatch methods
+   * @function getAllComponents - This method is used for debugging purpose to access the array of setState/dispatch methods
    * @returns - an array of objects containing the bound methods for updating state
    */
   getAllComponents: (): any[] => componentActionsRecord,

src/backend/models/tree.ts

@@ -7,9 +7,12 @@
 /* eslint-disable no-param-reassign */
 import { Route } from './routes';
 
-let copyInstances = 0; // Tells you if we have already made a copy of current tree??
-const circularComponentTable = new Set<Tree>(); // Keeps track of the nodes added to the tree
-let componentNames = {}; // {componentName: frequency of use} => component name as a key and it's frequency of use as its value
+// The circularComponentTable is used to handle circular references in the state object. It keeps tracks of the components that have already been serialized. When a component is encountered for the first time, it is added to the table along with a unique identifier. If the same component is encountered again, the identifier is used to reference the previously serialized component in the output instead of serializing it again, thus avoiding the infinite loop.
+const circularComponentTable = new Set<Tree>();
+// Used to keep track of which objects have already been copied during the serialization process. This is necessary to handle circular references correctly. When an object is serialized, all its properties are copied to the serialized object. If an object property is an object itself, it needs to be serialized recursively. However, if the object being serialized has already been serialized before, it should not be serialized again to prevent an infinite loop.
+let copyInstances = 0;
+// ComponentNames is used to store a mapping between a component's unique identifier and its name. This mapping is used to reconstruct the component instances during deserialization.
+let componentNames = {};
 
 // Functions dont serialize properly so we need to scrub for that
 export function scrubUnserializableMembers(tree: Tree): Tree {
@@ -20,6 +23,11 @@ export function scrubUnserializableMembers(tree: Tree): Tree {
 }
 
 // Making a deep clone of state becuase we want to make a copy
+/**
+ * @function serializeState - In the context of React, state is often used to store data that determines the behavior and appearance of a component. By serializing the state, we can preserve the component's data across page refreshes, server-side rendering, and other transitions. Additionally, by serializing the state and passing it to a child component, we can create a deep clone of the state, which allows the child component to manipulate the state without affecting the original component. This is useful in situations where we want to keep the state of the parent component immutable, but still allow child components to modify a copy of the state.
+ * @param state - Object that contains the current state of the application or system that needs to be serialized.
+ * @returns
+ */
 export function serializeState(state) {
   try {
     // makes a deep clone
@@ -33,15 +41,14 @@ export function serializeState(state) {
 /**
  * This is the current snapshot that is being sent to the snapshots array.
  * Creates a Tree
- * @param state - {string| {}} - the tree's current state
- * @param name - {string} - the tree's name
- * @param componentData - {props: {}} - Data in the component tree
- * @param chilren - {(Tree | string)[]} - An array of children nodes
- * @param parent - {Tree} - the parent node
- * @param isExpanded - {boolean}
- * @param rtid - {any}
- * @param route -
- * @parent generates a new tree (recursive call)
+ * @param state - the current state of the component represented by this node.
+ * @param name - the name of the component represented by this node.
+ * @param componentData - an object containing the props of the component represented by this node.
+ * @param chilren - an array of child nodes.
+ * @param parent -  a reference to the parent node.
+ * @param isExpanded - a boolean value indicating whether the node is expanded in the UI.
+ * @param rtid - a unique identifier for the node.
+ * @param route - an object representing the route associated with the node.
  */
 class Tree {
   state: string | {};
@@ -87,6 +94,11 @@ class Tree {
   }
 
   // Returns a unique name ready to be used for when new components gets added to the tree
+  /**
+   * @function checkForDuplicates - Generates a unique name for a component that is being added to the component tree
+   * @param name
+   * @returns
+   */
   checkForDuplicates(name: string): string {
     // check for empty name
     if (name === '' && typeof this.rtid === 'string') {

src/backend/reactFiberForDummies.ts

@@ -30,19 +30,20 @@ interface ReactElement {
  */
 
 interface FiberNode {
-  element: ReactElement;
+  element: ReactElement | null;
   parent: FiberNode | null;
   child: FiberNode | null;
   sibling: FiberNode | null;
   alternate: FiberNode | null;
   effectTag: string | null;
   effects?: FiberNode[];
+  stateNode: any;
 }
 
 /**
- *
- * @param element
- * @param parent
+ * @function createFiberNode - Responsible for creating a new Fiber Node. A Fiber node is an object that represents a React element in the reconciliation process. It contains information about the element, its parent, and its children as well other data
+ * @param element - React element that represents the component or DOM node that the fiber will represent. It is an object that contains information about the type of element, its props, its children, etc.
+ * @param parent - The fiber node that represents the parent component of the element. It is used to link the new fiber node to the fiber tree by setting its parent property to the parent fiber node
  * @returns
  */
 const createFiberNode = (element: ReactElement, parent: FiberNode | null): FiberNode => {
@@ -53,11 +54,16 @@ const createFiberNode = (element: ReactElement, parent: FiberNode | null): Fiber
     sibling: null,
     alternate: null,
     effectTag: null,
+    stateNode: null,
   };
 };
 
-// Fiber Reconciliation
-const reconcile = (parentFiber: FiberNode, children: any[]) => {
+/**
+ * @function reconcile - The purpose of the reconcile function is to reconcile the children array with the parentFiber node. In other words, it creates a fiber tree that reflects the current state of the React element tree
+ * @param parentFiber - The fiber node of the parent element in the tree
+ * @param children - An array of child elements (React elements) that belong to the parent element
+ */
+const reconcile = (parentFiber: FiberNode, children: any[]): void => {
   // checks to see if the parent fiber has an alternate fiber and if it does, it sets oldFiber to its child
   // If there is an alternate fiber for the parent fiber, it means that there was a previous version of the fiber tree that was reconciled, and oldFiber is set to its child fiber so that it can compared to the new children in the current version of the tree
   let oldFiber = parentFiber.alternate && parentFiber.alternate.child;
@@ -66,20 +72,81 @@ const reconcile = (parentFiber: FiberNode, children: any[]) => {
   let prevFiber: FiberNode | null = null; // used to keep track of the last fiber that was process in the loop
 
   while (index < children.length || !oldFiber) {
-    const element = children[index];
+    const reactElement = children[index];
     // see if same type
-    let sameType = oldFiber && element && element.type === oldFiber.element.type;
-    // if same type is founf, create a newFiber
+    let sameType = oldFiber && reactElement && reactElement.type === oldFiber.element.type;
+    // if same type is found, create a newFiber
     if (sameType) {
       newFiber = {
-        element,
+        element: reactElement,
         child: null,
         sibling: null,
         parent: parentFiber,
         alternate: oldFiber,
         effectTag: 'UPDATE',
+        stateNode: oldFiber.stateNode,
       };
+    } else {
+      if (reactElement) {
+        newFiber = createFiberNode(reactElement, parentFiber);
+        newFiber.effectTag = 'PLACEMENT';
+
+        if (typeof reactElement.type === 'function') {
+          newFiber.stateNode = new (reactElement.type as any)(reactElement.props);
+        } else {
+          newFiber.stateNode = document.createElement(reactElement.type as string);
+        }
+      }
+
+      if (oldFiber) {
+        oldFiber.effectTag = 'DELETION';
+        parentFiber.effects = parentFiber.effects || [];
+        parentFiber.effects.push(oldFiber);
+      }
     }
+
+    oldFiber === null ? null : oldFiber.sibling;
+    // this block of code if responsible for  creating a singly linked list of child nodes for the parent element, where each node has a child property pointing to its first child node and a sibling property pointing to its next sibling
+    if (index === 0) {
+      parentFiber.child = newFiber;
+    } else if (reactElement) {
+      prevFiber!.sibling = newFiber;
+    }
+
+    prevFiber = newFiber;
+    index++;
   }
 };
-// Perform updates to DOM
+
+/**
+ * @function commitRoot - Responsible for committing the changes made to the DOM during the reconcilation phase
+ * @param rootFiber - Root of the fiber tree. It contains information about the element and changes that need to be made to the DOM
+ */
+const commitRoot = (rootFiber: FiberNode) => {
+  if (!rootFiber) return;
+  rootFiber.effects?.forEach((fiber) => {
+    if (fiber.effectTag === 'PLACEMENT') {
+      // place existing element
+    } else if (fiber.effectTag === 'UPDATE') {
+      // update existing element
+    } else if (fiber.effectTag === 'DELETION') {
+      // remove element from DOM
+    }
+  });
+};
+
+/**
+ * @function render - Creates a root fiber which is the top-level fiber that represents the root of the React element ree.
+ * @param element - The react element that you want to render into the container. It represents the root of your component tree
+ * @param container - The DOM element that you want to render your React element into. It is typically a <div>
+ */
+const render = (element: ReactElement, container: HTMLElement) => {
+  const rootFiber: FiberNode = createFiberNode(element, null);
+  rootFiber.element = container as any as ReactElement; // cast container to ReactElement
+  const workInProgressRootFiber: FiberNode = {
+    ...rootFiber,
+    alternate: rootFiber,
+  };
+  reconcile(workInProgressRootFiber, element.props.children);
+  commitRoot(workInProgressRootFiber);
+};

src/backend/routers/linkFiber.ts

@@ -36,14 +36,14 @@ declare global {
 }
 
 /**
- * linkFiber contains core module functionality, exported as an anonymous function, perform the following logic:
+ * @function linkFiber - linkFiber contains core module functionality, exported as an anonymous function, perform the following logic:
  * 1. Check if React Dev Tool is installed.
  * 2. Check if the target application (on the browser) is a valid react application.
  * 3. Initiate a event listener for visibility update of the target React Applicaiton.
- * 4. Obtain the initial fiberRootNode, which is the root node of a tree of React component.
- * 5. Initialize the tree snapShot on Chrome Extension.
+ * 4. Obtain the initial fiberRootNode, which is the root node of the fiber tree
+ * 5. Initialize the fiber tree snapShot on Chrome Extension.
  * 6. Monkey patching the onCommitFiberRoot from REACT DEV TOOL to obtain updated data after React Applicaiton is re-rendered.
- * @param snapShot The current snapshot
+ * @param snapShot The current snapshot (i.e fiber tree)
  * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * @return a function to be invoked by index.js that initiates snapshot monitoring
  */
@@ -53,8 +53,9 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
    */
   let isVisible: boolean = true;
   /**
-   * 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.
+   * Every React application has one or more DOM elements that act as containers. React creates a fiber root object for each of those containers.
+   * This fiber root is where React holds reference to a fiber tree
+   * The `fiberRootNode`, which is the root node of the fiber tree is stored in the current property of the fiber root object
    */
   let fiberRoot: FiberRoot;
   /**
@@ -76,6 +77,8 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     // Obtain React Devtools Object:
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const { onCommitFiberRoot } = devTools;
+    console.log('onCommit..', onCommitFiberRoot);
     // If React Devtools is not installed, object will be undefined.
     if (!devTools) {
       return;

src/backend/routers/snapShot.ts

@@ -6,11 +6,11 @@ import createTree from '../controllers/createTree/createTree';
 
 // ---------------------------UPDATE TREE SNAP SHOT-----------------------------
 /**
- * - Create a new `snapShot` tree with the provided `fiberRoot`. This runs after every Fiber commit.
+ * @function updateSnapShotTree - Creates a new `snapShot` fiber 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 snapShot The current snapshot of the fiber tree
  * @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.
+ * @param fiberRoot The `fiberRootNode`, which is the root node of the fiber tree is stored in the current property of the fiber root object which we can use to traverse the tree
  */
 // updating tree depending on current mode on the panel (pause, etc)
 export default function updateSnapShotTree(
@@ -20,17 +20,18 @@ export default function updateSnapShotTree(
 ): void {
   // this is the currently active root fiber(the mutable root of the tree)
   const { current } = fiberRoot;
+  // clear all of the legacy actions from old fiber tree becuase we are about to create a new one
   componentActionsRecord.clear();
-  // creates snapshot that is a tree based on properties in fiberRoot object
+  // calls the createTree function which creates the new Fiber tree and adds it to tree property on the snapShot object
   snapShot.tree = createTree(current);
   // sends the updated tree back
   sendSnapshot(snapShot, mode);
 }
 
 // -------------------SEND TREE SNAP SHOT TO FRONT END--------------------------
 /**
- * Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
- * @param snapShot The current snapshot
+ * @function sendSnapshot - Gets a copy of the current snapShot.tree and posts a recordSnap message to the window
+ * @param snapShot The current snapshot of the fiber tree that is shown in the extension
  * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * @return void
  *