added documentation for createTree, statePropExtractor, filterConditions

Author: ngoczwolinski

src/README.md

@@ -45,18 +45,18 @@ src/
 │   │                             # Focus especially on linkFiber, timeJump, tree, and helpers
 │   ├── __tests__/                #
 │   ├── controllers/              #
-│       ├── createComponentActionsRecord.ts #
-│       ├── createTree.ts         #
-│       ├── statePropExtractor.ts #
-│       ├── throttle.ts           #
+│       ├── createComponentActionsRecord.ts # Update the componentActionsRecord with new bound state-update methods
+│       ├── createTree.ts         # Construct a tree snapshot from the FiberRoot tree given by ReactFiber.
+│       ├── statePropExtractor.ts # Helper functions to extract & format prop, state, and context data
+│       ├── throttle.ts           # 
 │       ├── timeJump.ts           # Rerenders DOM based on snapshot from background script
 │   ├── models/
 │       ├── filterConditions.ts   #
 │       ├── masterState.ts        # Component action record interface
 │       ├── routes.ts             # Interfaces with the browser history stack
 │       ├── tree.ts               # Custom structure to send to background
 │   ├── routers/
-│       ├── linkFiber.ts          #
+│       ├── linkFiber.ts          # Check for all requirement to start Reactime and  
 │       ├── snapShot.ts           #
 │   ├── types/                    # Typescript interfaces
 │   ├── index.ts                  # Starting point for backend functionality

src/backend/__tests__/linkFiber.test.ts

@@ -12,15 +12,14 @@ import {
   mixComponents,
   mixPayload,
 } from './ignore/stateComponents-testcases';
-import { Snapshot, Status, FiberRoot } from '../types/backendTypes';
+import { Status, FiberRoot } from '../types/backendTypes';
 import Tree from '../models/tree';
 import { DevTools } from '../types/linkFiberTypes';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import fs from 'fs';
 
 describe('linkFiber', () => {
-  let snapshot: Snapshot;
   let mode: Status;
   let linkFiber: () => Promise<void>;
   let linkFiberDelayed: (resolve: any) => NodeJS.Timeout;
@@ -46,18 +45,14 @@ describe('linkFiber', () => {
   });
 
   beforeEach(() => {
-    // Create snapshot and mode objects
-    snapshot = {
-      tree: new Tree('root', 'root'),
-    };
     mode = {
       jumping: false,
     };
     // Initialize Fiber Root:
     fiberRoot = { current: root };
 
     // Initialize linkFiber
-    linkFiber = linkFiberInitialization(snapshot, mode);
+    linkFiber = linkFiberInitialization(mode);
     // Since linkFiber invoke a throttle function that get delay for 70 ms, between each test, linkFiber need to be delayed for 75 ms to ensure no overlapping async calls.
     linkFiberDelayed = (resolve) => setTimeout(async () => resolve(await linkFiber()), DELAY);
 

src/backend/controllers/createTree.ts

@@ -32,7 +32,7 @@ import {
  * @param currentFiberNode A Fiber object
  * @return An instance of a Tree object
  */
-// TODO: Not sure why the ritd need to be outside of the createTree function. Want to put inside, but in case this need to be keep track for front end.
+// TODO: Not sure why the ritd need to be outside of the _createTree function. Want to put inside, but in case this need to be keep track for front end.
 export default function createTree(currentFiberNode: Fiber): Tree {
   let rtidCounter = 0;
   return _createTree(currentFiberNode, new Tree('root', 'root'));

src/backend/controllers/statePropExtractors.ts

@@ -1,7 +1,7 @@
 const acorn = require('acorn');
 const jsx = require('acorn-jsx');
 const JSXParser = acorn.Parser.extend(jsx());
-import { HookStates, HookStateItem, Fiber } from '../types/backendTypes';
+import { HookStateItem, Fiber } from '../types/backendTypes';
 import { exclude } from '../models/filterConditions';
 
 type ReactimeData = {

src/backend/index.ts

@@ -10,20 +10,15 @@ import timeJumpInitialization from './controllers/timeJump';
 import { Snapshot, Status, MsgData } from './types/backendTypes';
 import routes from './models/routes';
 
-// -------------------------INITIALIZE SNAPSHOT & MODE--------------------------
-/** The snapshot of the current ReactFiber tree */
-const snapShot: Snapshot = {
-  tree: null,
-};
-
+// -------------------------INITIALIZE MODE--------------------------
 /** Indicate if mode is jumping/not jumping or navigating during jumping */
 const mode: Status = {
   jumping: false,
 };
 
 // ---------------------INITIALIZE LINKFIBER & TIMEJUMP-------------------------
 // linkFiber is now assigned the default ASYNC function exported from the file linkFiber.ts
-const linkFiber = linkFiberInitialization(snapShot, mode);
+const linkFiber = linkFiberInitialization(mode);
 // timeJump is now assigned the default ASYNC function exported from the file timeJump.ts
 const timeJump = timeJumpInitialization(mode);
 

src/backend/models/filterConditions.ts

@@ -2,31 +2,7 @@ import {
   FunctionComponent,
   ClassComponent,
   IndeterminateComponent, // Before we know whether it is function or class
-  HostRoot, // Root of a host tree. Could be nested inside another node.
-  HostPortal, // A subtree. Could be an entry point to a different renderer.
-  /**
-   * Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
-   */
-  HostComponent, // has stateNode of html elements
-  HostText,
-  Fragment,
-  Mode,
-  ContextConsumer,
   ContextProvider,
-  ForwardRef,
-  Profiler,
-  SuspenseComponent,
-  MemoComponent,
-  SimpleMemoComponent, // A higher order component where if the component renders the same result given the same props, react skips rendering the component and uses last rendered result. Has memoizedProps/memoizedState but no stateNode
-  LazyComponent,
-  IncompleteClassComponent,
-  DehydratedFragment,
-  SuspenseListComponent,
-  FundamentalComponent,
-  ScopeComponent,
-  Block,
-  OffscreenComponent,
-  LegacyHiddenComponent,
   WorkTag,
 } from '../types/backendTypes';
 
@@ -72,11 +48,10 @@ export const remixDefaultComponents = new Set([
   'Scripts',
   'LiveReload2',
 ]);
-
-export /**
+/**
  * A set of excluded props and variable name
  */
-const exclude = new Set([
+export const exclude = new Set([
   'alternate',
   'basename',
   'baseQueue',

src/backend/routers/linkFiber.ts

@@ -23,28 +23,25 @@ const MIN_TIME_BETWEEN_UPDATE = 70;
  * @param mode - mode is jumping/not jumping or navigating during jumping
  * @param snapShot - the tree snapshot to send to Front End or obtained from Front End during timeJump
  */
-const throttledUpdateSnapshot = throttle(
-  async (fiberRoot: FiberRoot, mode: Status, snapShot: Snapshot) => {
-    // If not jumping
-    if (!mode.jumping) {
-      // Update and Send SnapShot tree to front end
-      updateAndSendSnapShotTree(snapShot, fiberRoot);
-    }
+const throttledUpdateSnapshot = throttle(async (fiberRoot: FiberRoot, mode: Status) => {
+  // If not jumping
+  if (!mode.jumping) {
+    // Update and Send SnapShot tree to front end
+    updateAndSendSnapShotTree(fiberRoot);
+  }
 
-    // If navigating to another route during jumping:
-    else if (mode.navigating) {
-      // Reset the array containing update methods:
-      componentActionsRecord.clear();
-      // Obtain new update methods for the current route:
-      const { current } = fiberRoot;
-      createComponentActionsRecord(current);
-      // Invoke timeJump, which is stored in mode.navigating, to update React Application FiberTree based on the snapshotTree
-      await mode.navigating();
-    }
-    // NOTE: if not navigating during jumping, timeJump is invoked in index.ts file.
-  },
-  MIN_TIME_BETWEEN_UPDATE,
-);
+  // If navigating to another route during jumping:
+  else if (mode.navigating) {
+    // Reset the array containing update methods:
+    componentActionsRecord.clear();
+    // Obtain new update methods for the current route:
+    const { current } = fiberRoot;
+    createComponentActionsRecord(current);
+    // Invoke timeJump, which is stored in mode.navigating, to update React Application FiberTree based on the snapshotTree
+    await mode.navigating();
+  }
+  // NOTE: if not navigating during jumping, timeJump is invoked in index.ts file.
+}, MIN_TIME_BETWEEN_UPDATE);
 
 /**
  * @function linkFiber - linkFiber contains core module functionality, exported as an anonymous function, perform the following logic:
@@ -58,7 +55,7 @@ const throttledUpdateSnapshot = throttle(
  * @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
  */
-export default function linkFiber(snapShot: Snapshot, mode: Status): () => Promise<void> {
+export default function linkFiber(mode: Status): () => Promise<void> {
   /** A boolean value indicate if the target React Application is visible */
   let isVisible: boolean = true;
   /**
@@ -115,7 +112,7 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => Promi
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
 
     // ----------INITIALIZE THE TREE SNAP SHOT ON CHROME EXTENSION--------------
-    await throttledUpdateSnapshot(fiberRoot, mode, snapShot); // only runs on start up
+    await throttledUpdateSnapshot(fiberRoot, mode); // only runs on start up
 
     // --------MONKEY PATCHING THE onCommitFiberRoot FROM REACT DEV TOOL--------
     // React has inherent methods that are called with react fiber
@@ -131,7 +128,7 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => Promi
         // Obtain the updated FiberRootNode, after the target React application re-renders
         const fiberRoot = args[1];
         // If the target React application is visible, send a request to update the snapShot tree displayed on Chrome Extension
-        if (isVisible) throttledUpdateSnapshot(fiberRoot, mode, snapShot);
+        if (isVisible) throttledUpdateSnapshot(fiberRoot, mode);
         // After our added work is completed we invoke the original onComitFiberRoot function
         return onCommitFiberRoot(...args);
       };

src/backend/routers/snapShot.ts

@@ -1,5 +1,4 @@
-import { Snapshot, Status, FiberRoot } from '../types/backendTypes';
-// passes the data down to its components
+import { Snapshot, FiberRoot } from '../types/backendTypes';
 import componentActionsRecord from '../models/masterState';
 import routes from '../models/routes';
 import createTree from '../controllers/createTree';
@@ -13,22 +12,16 @@ import createTree from '../controllers/createTree';
  * @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 updateAndSendSnapShotTree(snapshot: Snapshot, fiberRoot: FiberRoot): void {
+export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): 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
+  // Clear all of the legacy actions from old fiber tree because we are about to create a new one
   componentActionsRecord.clear();
-  // Calls the createTree function which creates the new Fiber tree and adds it to tree property on the snapShot object
-  snapshot.tree = createTree(current);
-  // Make a deep copy of the tree:
-  const payload = snapshot.tree;
+  // Calls the createTree function which creates the new snapshot tree and store new state update method to compoenActionsRecord
+  /** The snapshot of the current ReactFiber tree */
+  const payload = createTree(current);
   // Save the current window url to route
   payload.route = routes.addRoute(window.location.href);
-  // console.log('send snapshot', {
-  //   payload: payload.children[0],
-  //   componentAction: componentActionsRecord.getAllComponents(),
-  // });
-
   // method safely enables cross-origin communication between Window objects;
   // e.g., between a page and a pop-up that it spawned, or between a page
   // and an iframe embedded within it.

src/backend/types/backendTypes.ts

@@ -81,16 +81,12 @@ export interface ComponentData {
  * @member component - contains bound dispatch method to update state of the current functional component
  */
 export interface HookStateItem {
+  /** states within the current functional component */
   state: any;
+  /** an object contains bound dispatch method to update state of the current functional component */
   component: any;
 }
 
-/**
- * HookeStates is an array of HookeStateItem
- * Each HookStateItem is an object with state & component properties
- */
-export type HookStates = Array<HookStateItem>;
-
 export type WorkTag =
   | 0
   | 1