Adding comments on linkFiber & BackendTypes

Author: ngoczwolinski

src/backend/linkFiber.ts

@@ -35,10 +35,11 @@ import { throttle, getHooksNames } from './helpers';
 // Set global variables to use in exported module and helper functions
 declare global {
   interface Window {
-    __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
+    __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevTools;
     __REDUX_DEVTOOLS_EXTENSION__?: any;
   }
 }
+
 let fiberRoot = null;
 let doWork = true;
 const circularComponentTable = new Set();
@@ -84,7 +85,6 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
  * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * Middleware: Updates snap object with latest snapshot, using @sendSnapshot
  */
-
 // updating tree depending on current mode on the panel (pause, etc)
 function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
   // this is the currently active root fiber(the mutable root of the tree)
@@ -135,60 +135,60 @@ function traverseHooks(memoizedState: any): HookStates {
  * 3. Build a new state snapshot
  */
 // This runs after every Fiber commit. It creates a new snapshot
-const exclude = [
+const exclude = new Set([
   'alternate',
-  '_owner',
-  '_store',
-  'get key',
-  'ref',
-  '_self',
-  '_source',
-  'firstBaseUpdate',
-  'updateQueue',
-  'lastBaseUpdate',
-  'shared',
-  'responders',
-  'pending',
-  'lanes',
-  'childLanes',
-  'effects',
-  'memoizedState',
-  'pendingProps',
-  'lastEffect',
-  'firstEffect',
-  'tag',
-  'baseState',
   'baseQueue',
-  'dependencies',
+  'baseState',
+  'child',
+  'childLanes',
+  'children',
   'Consumer',
   'context',
-  '_currentRenderer',
-  '_currentRenderer2',
-  'mode',
-  'flags',
-  'nextEffect',
-  'sibling',
   'create',
   'deps',
-  'next',
+  'dependencies',
   'destroy',
-  'parentSub',
-  'child',
+  'effects',
+  'elementType',
+  'firstBaseUpdate',
+  'firstEffect',
+  'flags',
+  'get key',
   'key',
+  'lanes',
+  'lastBaseUpdate',
+  'lastEffect',
+  'memoizedState',
+  'mode',
+  'next',
+  'nextEffect',
+  'pending',
+  'parentSub',
+  'pendingProps',
+  'Provider',
+  'updateQueue',
+  'ref',
+  'responders',
   'return',
-  'children',
-  '$$typeof',
-  '_threadCount',
+  'shared',
+  'sibling',
+  'stateNode',
+  'tag',
+  'type',
   '_calculateChangedBits',
+  '_context',
+  '_currentRenderer',
+  '_currentRenderer2',
   '_currentValue',
   '_currentValue2',
-  'Provider',
-  '_context',
-  'stateNode',
-  'elementType',
-  'type',
-];
-
+  '_owner',
+  '_self',
+  '_source',
+  '_store',
+  '_threadCount',
+  '$$typeof',
+]);
+// -------------------CONVERT PROPT DATA TO STRING------------------------------
 // This recursive function is used to grab the state of children components
 // and push them into the parent componenent
 // react elements throw errors on client side of application - convert react/functions into string
@@ -197,22 +197,24 @@ function convertDataToString(newObj, oldObj, depth = 0) {
   for (const key in newObj) {
     if (typeof newObj[key] === 'function') {
       newPropData[key] = 'function';
-    } else if (exclude.includes(key) === true) {
+    } else if (exclude.has(key)) {
       newPropData[key] = 'reactFiber';
       return newPropData;
-    } else if (typeof newObj[key] === 'object' && exclude.includes(key) !== true) {
+    } else if (typeof newObj[key] === 'object' && !exclude.has(key)) {
       newPropData[key] =
         depth > 10
           ? 'convertDataToString reached max depth'
           : convertDataToString(newObj[key], null, depth + 1);
-    } else if (exclude.includes(key) !== true) {
+    } else if (!exclude.has(key)) {
       newPropData[key] = newObj[key];
     }
   }
   return newPropData;
 }
-// Every time a state change is made in the accompanying app, the extension creates a
-// Tree “snapshot” of the current state, and adds it to the current “cache” of snapshots in the extension
+// -------------------------CREATE TREE TO SEND TO FRONT END--------------------
+/**
+ * Every time a state change is made in the accompanying app, the extension creates a Tree “snapshot” of the current state, and adds it to the current “cache” of snapshots in the extension
+ */
 function createTree(
   currentFiber: Fiber,
   tree: Tree = new Tree('root', 'root'),
@@ -240,14 +242,15 @@ function createTree(
     _debugHookTypes,
   } = currentFiber;
 
-  // check to see if we can get the information we were looking for
-  // need to figure out what tag is
+  // Tag === 5 signify this is a React Fragment. Each JSX component return a React fragment
   if (tag === 5) {
     try {
+      // Ensure parent component has memoizedProps property
       if (
         memoizedProps.children &&
         memoizedProps.children[0]?._owner?.memoizedProps !== undefined
-      ) {
+        ) {
+        // Access the memoizedProps of the parent component
         const propsData = memoizedProps.children[0]._owner.memoizedProps;
         const newPropData = convertDataToString(
           propsData,
@@ -391,7 +394,6 @@ function createTree(
   }
   return tree;
 }
-type version = undefined | { version: string };
 /**
  * @interface DevTools - A global object provided by the React Developer Tools extension. It provides a set of methods that allow developers to inspect and manipulate React components in the browser.
  */
@@ -401,17 +403,22 @@ interface DevTools {
    */
   renderers: Map<1, undefined | { version: string }>;
   /**
-   * @method getFiberRoots - a method that return a fiber root {set}
-   * @param renderID - the ID of the node???
-   * @return A set of fiber root.
+   * @method getFiberRoots - get the Set of fiber roots that are currently mounted for the given rendererID. If not found, initalize a new empty Set at renderID key.
+   * @param renderID -  a unique identifier for a specific instance of a React renderer. When a React application is first mounted, it will receive a rendererID. This rendererID will remain the same for the entire lifecycle of the application, even if the state is updated and the components are re-rendered/unmounted/added. However, if the application is unmounted and re-mounted again, it will receive a new rendererID.
+   * @return A set of fiberRoot.
    */
-  getFiberRoots: (renderID: number) => Set<number>;
+  getFiberRoots: (rendererID: number) => Set<number>;
 
-  onCommitFiberRoot: any;
+  /**
+   * @method onCommitFiberRoot - After the state of a component in a React Application is updated, the virtual DOM will be updated. When a render has been commited for a root, onCommitFiberRoot will be invoked to determine if the component is being mounted, updated, or unmounted. After that, this method will send update information to the React DevTools to update its UI to reflect the change.
+   * @param rendererID -  a unique identifier for a specific instance of a React renderer
+   * @param root - root of the rendered tree (a.k.a the root of the React Application)
+   * @param priorityLevel
+   * @return void
+   */
+  onCommitFiberRoot: (rendererID: number, root: any, priorityLevel: any) => void;
 }
 
-interface ReactInstance {}
-
 /**
  * @method linkFiber
  * @param snap The current snapshot
@@ -426,28 +433,33 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     doWork = !document.hidden;
   }
   return () => {
+    // -------------------CHECK REACT DEVTOOL INSTALLATION----------------------
     // 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
-    const devTools: undefined | DevTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    // Obtain React Devtools Object:
+    const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     console.log('linkFiber.ts', { devTools });
-    // check if reactDev Tools is installed
+    // If React Devtools is not installed, object will be undefined.
     if (!devTools) {
       return;
     }
-    // if reactDev Tools is installed, send a message to front end
+    // If React Devtools is installed, send a message to front end.
     window.postMessage(
       {
         action: 'devToolsInstalled',
         payload: 'devToolsInstalled',
       },
       '*',
     );
-    // Obtain reaction application information. If target application is not a React App, this will return null.
+
+    // --------------------CHECK VALID REACT APPLICATION------------------------
+    // Obtain React Application information:
     const reactInstance = devTools.renderers.get(1);
-    // if no React Instance found then target is not a compatible app
+    // If target application is not a React App, this will return undefined.
     if (!reactInstance) {
       return;
     }
     // we may want to add try/catch
+    // If target application is a React App, send a message to front end.
     window.postMessage(
       {
         action: 'aReactApp',
@@ -462,9 +474,10 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     if (reactInstance && reactInstance.version) {
-      // Obtain the fiber
+      // Obtain the FiberRootNode, which is the first value in the FiberRoot Set:
       fiberRoot = devTools.getFiberRoots(1).values().next().value;
       console.log('LinkFiber', { fiberRoot });
+
       // React has inherent methods that are called with react fiber
       // we attach new functionality without compromising the original work that onCommitFiberRoot does
       const addOneMoreStep = function (original) {

src/backend/tree.ts

@@ -6,8 +6,8 @@
 /* eslint-disable no-console */
 /* eslint-disable no-param-reassign */
 
-// ~~ I dont like the fact that this are global variables ~~ - Zack
-let copyInstances = 0; // Tells you if we have already made a copy of current tree
+// ~~ I dont like the fact that these are global variables ~~ - Zack
+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
 
@@ -88,7 +88,7 @@ class Tree {
     if (name === '' && typeof this.rtid === 'string') {
       name = this.rtid.replace('fromLinkFiber', '');
     }
-    // if we are at root, then make sure componentNames is an empty
+    // if we are at root, then make sure componentNames is an empty object
     if (this.state === 'root') componentNames = {};
     // check for duplicate
     else if (componentNames[name] !== undefined) {
@@ -148,9 +148,9 @@ class Tree {
     }
     // creates copy of present node
     let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid);
-    // you want to get rid of the parentNode
+    // you want to get rid of the parentNode?? not sure why
     delete copy.parent;
-    // add to circulareComponentTable
+    // add to circularComponentTable
     circularComponentTable.add(this);
     // 
     copy = scrubUnserializableMembers(copy);

src/backend/types/backendTypes.ts

@@ -136,6 +136,25 @@ export const Block = 22;
 export const OffscreenComponent = 23;
 export const LegacyHiddenComponent = 24;
 
+/**
+ * @type Fiber - The Fiber data structure that React uses to represent a component tree.
+ * @member actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
+ * @member actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
+ * @member child - Pointer to the first child.
+ * @member dependencies - An array of values (such as state or props) that the current Fiber node depends on. This is used to determine whether the node needs to be re-rendered.
+ * @member elementType  - The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type). Example: div, h1,
+ * @member index - Index of the current Fiber node. Ex: if a div has 3 headings. The first child is heading with index = 0. The next sibling is a heading with index = 1 & the last sibling is a heading with index = 2.
+ * @member key - Unique identifier of this child, used to identify the node when rendering lists of components.
+ * @member memoizedProps - The current props of the component associated with the current Fiber node.
+ * @member memoizedState - The current state of the component associated with the current Fiber node.
+ * @member selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
+ * @member sibling - Pointer to next sibling
+ * @member stateNode - The local state associated with this fiber.
+ * @member tag - The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements).
+ * @member treeBaseDuration - The total base duration of the current Fiber node's subtree. This field is only set when the enableProfilerTimer flag is enabled.
+ * @member type - Same as elementType.
+ * @member _debugHookTypes - An array of hooks used for debugging purposes.
+ */
 export type Fiber = {
   // Tag identifying the type of fiber.
   tag: WorkTag;