Restructure backend folder

Author: ngoczwolinski

src/backend/linkFiber.ts renamed to src/backend/controllers/createTree/index.ts

@@ -1,30 +1,8 @@
-/* eslint-disable guard-for-in */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable max-len */
-/* eslint-disable indent */
-/* eslint-disable brace-style */
-/* eslint-disable comma-dangle */
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable func-names */
-/* eslint-disable no-use-before-define */
-/* eslint-disable no-param-reassign */
-/* eslint-disable-next-line no-mixed-operators */
-
 // import typescript types
 import {
-  // tree
-  Snapshot,
-  // jump, pause
-  Status,
-  // array of state and component
-  HookStates,
   // object with tree structure
   Fiber,
-  // object with tree structure
-  FiberRoot,
-} from './types/backendTypes';
-import { DevTools } from './types/linkFiberTypes';
+} from '../../types/backendTypes';
 import {
   FunctionComponent,
   ClassComponent,
@@ -54,30 +32,17 @@ import {
   Block,
   OffscreenComponent,
   LegacyHiddenComponent,
-} from './types/backendTypes';
+} from '../../types/backendTypes';
 // import function that creates a tree
-import Tree from './tree';
+import Tree from '../../models/tree';
 // passes the data down to its components
-import componentActionsRecord from './masterState';
-import updateSnapShotTree from './snapShot';
-
-// throttle returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms
-// getHooksNames - helper function to grab the getters/setters from `elementType`
-import { throttle } from './helpers';
+import componentActionsRecord from '../../models/masterState';
 import {
   getHooksNames,
   getHooksStateAndUpdateMethod,
   getStateAndContextData,
   filterAndFormatData,
-} from './statePropsExtractors';
-
-// Set global variables to use in exported module and helper functions
-declare global {
-  interface Window {
-    __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevTools;
-    __REDUX_DEVTOOLS_EXTENSION__?: any;
-  }
-}
+} from '../../controllers/createTree/statePropExtractors';
 
 // -------------------------CREATE TREE TO SEND TO FRONT END--------------------
 /**
@@ -95,7 +60,7 @@ declare global {
 // 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.
 let rtidCounter = 0;
 
-export function createTree(
+export default function createTree(
   currentFiberNode: Fiber,
   circularComponentTable: Set<Fiber> = new Set(),
   tree: Tree = new Tree('root', 'root'),
@@ -366,114 +331,3 @@ export function createTree(
   // -------------RETURN THE TREE OUTPUT & PASS TO FRONTEND FOR RENDERING-------
   return tree;
 }
-
-/**
- * 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.
- * 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 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): () => void {
-  /**
-   * A boolean value indicate if the target React Application is visible
-   */
-  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.
-   */
-  let fiberRoot: FiberRoot;
-  /**
-   * @constant MIN_TIME_BETWEEN_UPDATE - The minimum time (ms) between each re-render/update of the snapShot tree being displayed on the Chrome Extension.
-   */
-  const MIN_TIME_BETWEEN_UPDATE = 10;
-  /**
-   * @function throttledUpdateSnapshot - a function that will wait for at least MIN_TIME_BETWEEN_UPDATE ms, before updating the tree snapShot being displayed on the Chrome Extension.
-   */
-  const throttledUpdateSnapshot = throttle((fiberRoot) => {
-    updateSnapShotTree(snapShot, mode, fiberRoot);
-  }, MIN_TIME_BETWEEN_UPDATE);
-
-  // Return a function to be invoked by index.js that initiates snapshot monitoring
-  // TODO: Convert this into async/await & add try/catch
-
-  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
-    // Obtain React Devtools Object:
-    const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    // If React Devtools is not installed, object will be undefined.
-    if (!devTools) {
-      return;
-    }
-    // If React Devtools is installed, send a message to front end.
-    window.postMessage(
-      {
-        action: 'devToolsInstalled',
-        payload: 'devToolsInstalled',
-      },
-      '*',
-    );
-
-    // --------------------CHECK VALID REACT APPLICATION------------------------
-    // Obtain React Application information:
-    const reactInstance = devTools.renderers.get(1);
-    // If target application is not a React App, this will return undefined.
-    if (!reactInstance) {
-      return;
-    }
-    // If target application is a React App, send a message to front end.
-    window.postMessage(
-      {
-        action: 'aReactApp',
-        payload: 'aReactApp',
-      },
-      '*',
-    );
-    // --------------INITIATE EVENT LISTENER FOR VISIBILITY CHANGE--------------
-    /**
-     * Initiate an event listener for when there is a change to the visibility of the react target application (the browser tab)
-     * @example If tic-tac-toe demo app is loaded on a tab with localhost:8080, whenever user switch tab or switch to another software => 'visibilityChange' => invoke the callback to update doWork boolean value
-     */
-    document.addEventListener('visibilitychange', () => {
-      // Hidden property = background tab/minimized window
-      isVisible = !document.hidden;
-    });
-
-    // ---------OBTAIN THE INITIAL FIBEROOTNODE FROM REACT DEV TOOL-------------
-    // Obtain the FiberRootNode, which is the first value in the FiberRoot Set:
-    fiberRoot = devTools.getFiberRoots(1).values().next().value;
-    console.log('linkFiber', { fiberRoot });
-
-    // ----------INITIALIZE THE TREE SNAP SHOT ON CHROME EXTENSION--------------
-    throttledUpdateSnapshot(fiberRoot); // only runs on start up
-
-    // --------MONKEY PATCHING THE onCommitFiberRoot FROM REACT DEV TOOL--------
-    // React has inherent methods that are called with react fiber
-    // One of which is the onCommitFiberRoot method, which is invoked after the React application re-render its component(s).
-    // we attach new functionality without compromising the original work that onCommitFiberRoot does
-    /**
-     * @param onCommitFiberRoot -  is a callback provided by React that is automatically invoked by React Fiber after the target React application re-renders its components. This callback is used by REACT DEV TOOL to receive updated data about the component tree and its state. See {@link https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8}
-     * @returns an anonymous function, which will have the same parameters as onCommitFiberRoot and when invoked will update the fiberRoot value & post a request to update the snapShot tree on Chrome Extension
-     */
-    function addOneMoreStep(onCommitFiberRoot: DevTools['onCommitFiberRoot']) {
-      return function (...args: Parameters<typeof onCommitFiberRoot>) {
-        // eslint-disable-next-line prefer-destructuring
-        // Obtain the updated FiberRootNode, after the target React application re-renders
-        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);
-        // After our added work is completed we invoke the original onComitFiberRoot function
-        return onCommitFiberRoot(...args);
-      };
-    }
-    // Money Patching the onCommitFiberRoot method from REACT DEV TOOL
-    devTools.onCommitFiberRoot = addOneMoreStep(devTools.onCommitFiberRoot);
-  };
-}

src/backend/statePropsExtractors.ts renamed to src/backend/controllers/createTree/statePropExtractors.ts

@@ -6,7 +6,7 @@ import {
   HookStates,
   // object with tree structure
   Fiber,
-} from './types/backendTypes';
+} from '../../types/backendTypes';
 // TODO: Determine what Component Data Type we are sending back for state, context, & props
 type ReactimeData = {
   [key: string]: any;
@@ -126,8 +126,8 @@ export function filterAndFormatData(
 }
 // ------------------------FILTER STATE & CONTEXT DATA--------------------------
 /**
- * This function is used to trim the state data of a component.
- * All propperty name that are in the central exclude list would be trimmed off.
+ * This function is used to filter the state data of a component.
+ * All propperty name that are in the central `exclude` list would be filtered out.
  * If passed in memoizedState is a not an object (a.k.a a primitive type), a default name would be provided.
  * @param memoizedState - The current state of the component associated with the current Fiber node.
  * @param _debugHookTypes - An array of hooks used for debugging purposes.

src/backend/helpers.ts renamed to src/backend/controllers/throttle.ts

@@ -7,22 +7,19 @@
 /* eslint-disable linebreak-style */
 /* eslint-disable no-inner-declarations, no-loop-func */
 
-import { string } from 'prop-types';
-
 // eslint-disable-next-line import/newline-after-import
 
-
 /**
  * @method throttle
  * @param callback A function to throttle
  * @param MIN_TIME_BETWEEN_UPDATE A number of milliseconds to use as throttling interval
  * @returns A function that limits input function, `callback`, from being called more than once every `MIN_TIME_BETWEEN_UPDATE` milliseconds
  *
  */
-export const throttle = (
+export default function throttle(
   callback: (...args: any) => void,
   MIN_TIME_BETWEEN_UPDATE: number,
-): Function => {
+): Function {
   // Initialize boolean flags for callback, throttledFunc
   /**
    * A boolean variable tracking if MIN_TIME_BETWEEN_UPDATE has passed
@@ -91,5 +88,4 @@ export const throttle = (
       }
     }
   };
-};
-
+}

src/backend/timeJump.ts renamed to src/backend/controllers/timeJump.ts

@@ -1,10 +1,10 @@
-import routes from './routes';
+import routes from '../models/routes';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable max-len */
 /* eslint-disable no-param-reassign */
-import componentActionsRecord from './masterState';
+import componentActionsRecord from '../models/masterState';
 const circularComponentTable = new Set();
 
 /**

src/backend/index.ts

@@ -9,8 +9,8 @@
  */
 // regenerator runtime supports async functionality
 import 'regenerator-runtime/runtime';
-import linkFiberStart from './linkFiber';
-import timeJumpStart from './timeJump';
+import linkFiberStart from './routers/linkFiber';
+import timeJumpStart from './controllers/timeJump';
 import { Snapshot, Status, MsgData } from './types/backendTypes';
 
 // * State snapshot object initialized here