Update createTree

Author: ngoczwolinski

src/backend/controllers/createTree.ts

@@ -1,25 +1,21 @@
-// import typescript types
+// --------------------------START OF IMPORT------------------------------------
 import {
-  // object with tree structure
-  Fiber,
-  ComponentData,
-} from '../types/backendTypes';
+  getHooksNames,
+  getHooksStateAndUpdateMethod,
+  // getStateAndContextData, //COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT
+  filterAndFormatData,
+} from './statePropExtractors';
+
+import { Fiber, ComponentData } from '../types/backendTypes';
 import {
   FunctionComponent,
   ClassComponent,
-  IndeterminateComponent, // Before we know whether it is function or class
+  IndeterminateComponent,
   ContextProvider,
 } from '../types/backendTypes';
-// import function that creates a tree
+
 import Tree from '../models/tree';
-// passes the data down to its components
 import componentActionsRecord from '../models/masterState';
-import {
-  getHooksNames,
-  getHooksStateAndUpdateMethod,
-  // getStateAndContextData, //COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT
-  filterAndFormatData,
-} from './statePropExtractors';
 import {
   nextJSDefaultComponent,
   remixDefaultComponents,
@@ -54,7 +50,6 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       sibling,
       stateNode,
       child,
-      // with memoizedState we can grab the root type and construct an Abstract Syntax Tree from the hooks structure using Acorn in order to extract the hook getters and match them with their corresponding setters in an object
       memoizedState,
       memoizedProps,
       elementType,
@@ -63,33 +58,17 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       actualStartTime,
       selfBaseDuration,
       treeBaseDuration,
-      _debugHookTypes,
+      // _debugHookTypes, //COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT
     } = currentFiberNode;
 
     // Obtain component name:
     let componentName =
       elementType?._context?.displayName || //For ContextProvider
       elementType?._result?.name || //For lazy Component
       elementType?.render?.name ||
-      elementType?.name ||
+      elementType?.name || //For Functional/Class Component
       'nameless';
 
-    // console.log('CREATE TREE', {
-    //   currentFiberNode,
-    //   tag,
-    //   // elementType,
-    //   componentName:
-    //     elementType?._context?.displayName || //For ContextProvider
-    //     elementType?._result?.name || //For lazy Component
-    //     elementType?.render?.name ||
-    //     elementType?.name ||
-    //     elementType,
-    //   // memoizedProps,
-    //   // memoizedState,
-    //   // stateNode,
-    //   // dependencies,
-    //   // _debugHookTypes,
-    // });
     // --------------------FILTER COMPONENTS/FIBER NODE-------------------------
     /**
      * For the snapshot tree,
@@ -193,13 +172,11 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
     // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
     if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) {
-      // Save component's state and setState() function to our record for future
-      // time-travel state changing. Add record index to snapshot so we can retrieve.
+      // Save component's state and setState() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
       componentData.index = componentActionsRecord.saveNew(stateNode);
       // Save state information in componentData.
       componentData.state = stateNode.state;
       // Passess to front end
-      // TODO: Refactor this, this is currently being used for Tree & Diff tabs
       newState = componentData.state;
     }
 
@@ -208,16 +185,12 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     if (
       (tag === FunctionComponent ||
         tag === IndeterminateComponent ||
-        //TODO: Need to figure out why we need context provider
+        //TODO: Need reasoning for why we evaluate context provider
         tag === ContextProvider) &&
       memoizedState
     ) {
       if (memoizedState.queue) {
         try {
-          // Hooks states are stored as a linked list using memoizedState.next,
-          // so we must traverse through the list and get the states.
-          // We then store them along with the corresponding memoizedState.queue,
-          // which includes the dispatch() function we use to change their state.
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
           const hooksNames = getHooksNames(elementType.toString());
           // Intialize state & index:

src/backend/types/backendTypes.ts

@@ -64,9 +64,8 @@ export interface ComponentData {
 }
 
 /**
- * @type HookStateItem
- * @member state -
- * @member component -
+ * @member state - states within the current functional component
+ * @member component - contains bound dispatch method to update state of the current functional component
  */
 export interface HookStateItem {
   state: any;
@@ -108,9 +107,12 @@ export type WorkTag =
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
-export const IndeterminateComponent = 2; // Before we know whether it is function or class
-export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
-export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
+/** Before we know whether it is function or class */
+export const IndeterminateComponent = 2; 
+/** Root of a host tree. Could be nested inside another node. */
+export const HostRoot = 3; 
+/** A subtree. Could be an entry point to a different renderer. */
+export const HostPortal = 4;
 /**
  * Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
  */
@@ -142,94 +144,79 @@ export const LegacyHiddenComponent = 24;
  * @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 elementType  - The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type). For class/functional component, elmementType stores the function definition.
  * @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 stateNode - The local state associated with this fiber. For classComponent, stateNode contains current state and the bound update methods of the component
  * @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;
-
-  // Unique identifier of this child.
-  // key: null | string;
-
-  // The value of element.type which is used to preserve the identity during
-  // reconciliation of this child.
-  elementType: any;
-
-  // The resolved function/class/ associated with this fiber.
-  // type: any;
-
-  // The local state associated with this fiber.
-  stateNode: any;
-
-  // Conceptual aliases
-  // parent : Instance -> return The parent happens to be the same as the
-  // return fiber since we've merged the fiber and instance.
-
-  // Remaining fields belong to Fiber
+  /**
+   * Time spent rendering this Fiber and its descendants for the current update.
+   *
+   * This tells us how well the tree makes use of sCU for memoization. It is reset to 0 each time we render and only updated when we don't bailout.
+   *
+   * This field is only set when the enableProfilerTimer flag is enabled.
+   */
+  actualDuration?: number;
 
-  // The Fiber to return to after finishing processing this one.
-  // This is effectively the parent, but there can be multiple parents (two)
-  // so this is only the parent of the thing we're currently processing.
-  // It is conceptually the same as the return address of a stack frame.
-  // return: Fiber | null,
+  /**
+   * If the Fiber is currently active in the "render" phase, this marks the time at which the work began.
+   *
+   * This field is only set when the enableProfilerTimer flag is enabled.
+   */
+  actualStartTime?: number;
 
   // Singly Linked List Tree Structure.
+  /** Pointer to the first child. */
   child: Fiber | null;
-  sibling: Fiber | null;
-  // index: number;
 
-  // Input is the data coming into process this fiber. Arguments. Props.
-  // pendingProps: any, // This type will be more specific once we overload the tag.
-  // memoizedProps: any, // The props used to create the output.
+  /**
+   * The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type).
+   *
+   * For class/functional component, elmementType stores the function definition.
+   */
+  elementType: any;
 
-  // The state used to create the output
+  /** The current props of the component associated with the current Fiber node. */
   memoizedState: any;
 
+  /** The current state of the component associated with the current Fiber node. */
   memoizedProps: any;
 
-  // Singly linked list fast path to the next fiber with side-effects.
-  // nextEffect: Fiber | null,
-
-  // This is a pooled version of a Fiber. Every fiber that gets updated will
-  // eventually have a pair. There are cases when we can clean up pairs to save
-  // memory if we need to.
-  // alternate: Fiber | null,
+  /**
+   * Duration of the most recent render time for this Fiber. This value is not updated when we bailout for memoization purposes.
+   *
+   * This field is only set when the enableProfilerTimer flag is enabled.
+   */
+  selfBaseDuration?: number;
 
-  // Time spent rendering this Fiber and its descendants for the current update.
-  // This tells us how well the tree makes use of sCU for memoization.
-  // It is reset to 0 each time we render and only updated when we don't bailout.
-  // This field is only set when the enableProfilerTimer flag is enabled.
-  actualDuration?: number;
+  // Singly Linked List Tree Structure.
+  /**  Pointer to next sibling */
+  sibling: Fiber | null;
 
-  // If the Fiber is currently active in the "render" phase,
-  // This marks the time at which the work began.
-  // This field is only set when the enableProfilerTimer flag is enabled.
-  actualStartTime?: number;
+  /**
+   * The local state associated with this fiber.
+   *
+   * For classComponent, stateNode contains current state and the bound update methods of the component.
+   */
+  stateNode: any;
 
-  // Duration of the most recent render time for this Fiber.
-  // This value is not updated when we bailout for memoization purposes.
-  // This field is only set when the enableProfilerTimer flag is enabled.
-  selfBaseDuration?: number;
+  /** The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements). */
+  tag: WorkTag;
 
-  // Sum of base times for all descendants of this Fiber.
-  // This value bubbles up during the "complete" phase.
-  // This field is only set when the enableProfilerTimer flag is enabled.
+  /**
+   * Sum of base times for all descendants of this Fiber. This value bubbles up during the "complete" phase.
+   *
+   * This field is only set when the enableProfilerTimer flag is enabled.
+   */
   treeBaseDuration?: number;
 
-  // dependencies: any;
-
+  /** An array of hooks used for debugging purposes. */
   _debugHookTypes: string[] | null;
 };