Merge with dev branch

Author: ngoczwolinski

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

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

src/backend/models/masterState.ts

@@ -3,27 +3,38 @@
 /* eslint-disable no-plusplus */
 /* 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 = {
   [url: string]: any[];
 };
 type ComponentActionRecord = ComponentAction[];
 
-// 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: ComponentActionRecord = [];
+// index keeps track of the current position in the array
 let index: number;
 index = 0;
 
 export default {
+  /**
+   * @function clear - Clears componentActionsRecord
+   */
   clear: () => {
     componentActionsRecord[window.location.href] = [];
     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[window.location.href].push(component);
     // componentActionsRecord[index] = component;
@@ -34,7 +45,7 @@ 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
    */
@@ -43,15 +54,15 @@ export default {
 
   //---------------------------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[window.location.href][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[window.location.href],

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

@@ -0,0 +1,152 @@
+/**
+ * @type
+ * @member type - The type of the element. Can be a string (for HTML/SVG tags), a function component (a function that returns a React element), or a class component (a class that extends React.Component and has a render() method).
+ * @member props - An object containing the properties passed to the element. These are the properties that are specified in JSX
+ * @member key - An optional key that can be used to identify an element in a list. This helps React determine which elements have changed when rendering a list.
+ * @member ref - An optional ref that can be used to get a reference to the element's underlying DOM node. This is useful for imperatively manipulating the DOM
+ * @member _owner - A reference to the component that created this element. This property is used for debugging purposes only and is not meant to be used in production code.
+ */
+
+interface ReactElement {
+  type: string | Function;
+  props: {
+    [key: string]: any;
+    children: ReactElement[];
+  };
+  key: string | null;
+  ref: any;
+  _owner: FiberNode | null;
+}
+
+/**
+ * @type
+ * @member element - This property holds the current element that the fiber represents in the render tree.
+ * @member parent - This property holds a reference to the parent fiber of the current fiber.
+ * @member child - This property holds a reference to the first child fiber of the current fiber.
+ * @member sibling - This property holds a reference to the next sibling fiber of the current fiber.
+ * @member alternate - This property holds a reference to the corresponding fiber in the previous render (i.e. the "old" fiber).
+ * @member effectTag - This property is used to describe the type of update that needs to be made to the DOM when the fiber is committed. It can be one of three values: "PLACEMENT" (for new elements), "UPDATE" (for updates to existing elements), or "DELETION" (for elements that need to be removed from the DOM).
+ * @member effects - This property is used to keep track of all the fibers that need to be updated, added, or removed from the DOM during the current commit phase. It is an array of fibers that have been marked with an effectTag other than null.
+ */
+
+interface FiberNode {
+  element: ReactElement | null;
+  parent: FiberNode | null;
+  child: FiberNode | null;
+  sibling: FiberNode | null;
+  alternate: FiberNode | null;
+  effectTag: string | null;
+  effects?: FiberNode[];
+  stateNode: any;
+}
+
+/**
+ * @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 => {
+  return {
+    element,
+    parent,
+    child: null,
+    sibling: null,
+    alternate: null,
+    effectTag: null,
+    stateNode: null,
+  };
+};
+
+/**
+ * @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;
+  let newFiber: FiberNode | null = null;
+  let index = 0; // used to keep track of the current index in the children array that is being processed
+  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 reactElement = children[index];
+    // see if same type
+    let sameType = oldFiber && reactElement && reactElement.type === oldFiber.element.type;
+    // if same type is found, create a newFiber
+    if (sameType) {
+      newFiber = {
+        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++;
+  }
+};
+
+/**
+ * @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

@@ -39,14 +39,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
  */
@@ -56,8 +56,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;
   /**
@@ -95,6 +96,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;