updateSnapShot interface to remove unfilteredTree prop, clean up unused var in linkFiber, added documentation for routes.ts

Author: ngoczwolinski

src/backend/index.ts

@@ -16,7 +16,6 @@ import { Snapshot, Status, MsgData } from './types/backendTypes';
 // * State snapshot object initialized here
 const snapShot: Snapshot = {
   tree: null,
-  unfilteredTree: null,
 };
 
 const mode: Status = {

src/backend/linkFiber.ts

@@ -59,13 +59,11 @@ import {
 import Tree from './tree';
 // passes the data down to its components
 import componentActionsRecord from './masterState';
-import routes from './routes';
 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, getHooksNames } from './helpers';
-import { any } from 'prop-types';
 
 // Set global variables to use in exported module and helper functions
 declare global {
@@ -76,7 +74,7 @@ declare global {
 }
 
 // TODO: Determine what Component Data Type we are sending back for state, context, & props
-type ComponentData = {
+type ReactimeData = {
   [key: string]: any;
 };
 
@@ -188,8 +186,8 @@ const exclude = new Set([
  */
 function convertDataToString(
   reactDevData: { [key: string]: any },
-  reactimeData: ComponentData = {},
-): ComponentData {
+  reactimeData: ReactimeData = {},
+): ReactimeData {
   for (const key in reactDevData) {
     // Skip keys that are in exclude set OR if there is no value at key
     // Falsy values such as 0, false, null are still valid value
@@ -225,7 +223,7 @@ function trimContextData(
   if (ignoreComponent.has(componentName)) return;
 
   // Initialize object to store state and context data of the component
-  const reactimeData: ComponentData = {};
+  const reactimeData: ReactimeData = {};
   // Initialize counter for the default naming. If user use reactHook, such as useState, react will only pass in the value, and not the variable name of the state.
   let stateCounter = 1;
   let refCounter = 1;

src/backend/routes.ts

@@ -23,80 +23,100 @@ class Routes {
   /**
    * @property A stack of visited routes that matches the browser history stack.
    */
-  values: Route[] = [new Route(null, null)];
+  // TODO: Think about how to remove this dummy URL
+  routeHistory: Route[] = [new Route('dummyURL', 0)];
 
   /**
-   * @property Used to assign unique ids to routes in the values stack in case the same route is added to the stack more than once.
+   * @property Used to assign unique ids to routes in the `routeHistory` stack in case the same route is added to the stack more than once.
    */
   id = 0;
 
   /**
-   * @property The index of the current route in the values stack.
+   * @property The index of the current route in the `routeHistory` stack.
    */
-  current: number | null = 0;
+  current = 0;
 
   /**
    * @method addRoute
    * @param url - A url string.
    * @returns Either the current route if the user has not navigated away from it or a new instance of a route constructed from the url.
    *
-   * Ensures that the values stack always matches the browser history stack.
+   * Ensures that the `routeHistory` stack always matches the browser history stack.
    */
 
   addRoute(url: string): Route {
-    let route: Route = this.values[this.current];
-
-    if (this.values[this.current].url !== url) {
-      if (this.current !== this.values.length - 1) {
+    // Obtain the last visited route within routeHistory stack
+    let route: Route = this.routeHistory[this.current];
+
+    // If the passed in window url does not match with the last visited route
+    // => user has navigated to another route
+    if (this.routeHistory[this.current].url !== url) {
+      // If the last visited index is not the last position in routeHistory stack. This happens when user use the timeJump functionality.
+      // => Rebuild the browserHistory
+      if (this.current !== this.routeHistory.length - 1) {
+        console.log('Rebuild browser history');
         this.rebuildHistory(url);
       }
-
+      // Create a new route instance from the passed in url.
       route = new Route(url, (this.id += 1));
-      this.values.push(route);
-
-      this.current = this.values.length - 1;
+      // Push the new route to routeHistory stack.
+      this.routeHistory.push(route);
+      // Update the last visited index.
+      this.current = this.routeHistory.length - 1;
     }
-
+    console.log('Route History', this.routeHistory, this.current);
+    console.log('History length', window.history.length);
     return route;
   }
 
   /**
    * @method rebuildHistory
    * @param url - A url string.
    *
-   * Rebuilds the browser history stack using the copy of the stack maintained in the values stack. https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState, https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+   * Rebuilds the browser history stack using the copy of the stack maintained in the `routeHistory` stack. https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState, https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
    */
   private rebuildHistory(url: string): void {
-    window.history.replaceState('', '', this.values[this.current + 1].url);
+    window.history.replaceState('', '', this.routeHistory[this.current + 1].url);
 
-    for (let i = this.current + 2; i < this.values.length; i += 1) {
-      window.history.pushState('', '', this.values[i].url);
+    for (let i = this.current + 2; i < this.routeHistory.length; i += 1) {
+      window.history.pushState('', '', this.routeHistory[i].url);
     }
 
     window.history.pushState('', '', url);
   }
 
   /**
    * @method navigate
-   * @param route - The target route in the values stack that is being navigated to.
+   * @param route - The target route in the `routeHistory` stack that is being navigated to.
    * @returns A boolean indicating whether or not a new route was navigated to.
    *
    * Invokes history.go passing in the delta between the current route and the target route. https://developer.mozilla.org/en-US/docs/Web/API/History/go
    */
   navigate(route: Route): boolean {
-    let targetIndex: number | null = null;
+    let targetIndex: number | undefined;
 
-    for (let i = 0; i < this.values.length; i += 1) {
-      if (this.values[i].url === route.url && this.values[i].id === route.id) {
+    // Loop through the routeHistory stack
+    for (let i = 0; i < this.routeHistory.length; i += 1) {
+      // If within the route history, found a match of url & id from the passed in route, update `targetIndex`
+      if (this.routeHistory[i].url === route.url && this.routeHistory[i].id === route.id) {
         targetIndex = i;
       }
     }
 
+    if (typeof targetIndex === 'undefined') {
+      throw Error('Error at Routes.navigage: targetIndex is undefined');
+    }
+    /**
+     * The position in the window history to which you want to move, relative to the current page. A negative value moves backwards, a positive value moves forwards.
+     */
     const delta: number = targetIndex - this.current;
 
+    // Update the position within routeHistory stack
     this.current += delta;
 
+    // if delta != 0 => need to navigate to another page
     if (delta !== 0) {
+      // Navigate to that page based on delta steps
       window.history.go(delta);
       return true;
     }

src/backend/timeJump.ts

@@ -3,10 +3,14 @@ import routes from './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';
+const circularComponentTable = new Set();
+
 /**
  * This file contains necessary functionality for time-travel feature
  *
- * It exports an anonymous
+ * Default Export:
  * @function timeJump
  * @param origin The latest snapshot, linked to the fiber (changes to origin will change app)
  * @param mode The current mode (i.e. jumping, time-traveling, or paused)
@@ -15,15 +19,10 @@ import routes from './routes';
  * The target snapshot portrays some past state we want to travel to.
  * `jump` recursively sets state for any stateful components.
  */
-
-/* eslint-disable no-param-reassign */
-import componentActionsRecord from './masterState';
-
-const circularComponentTable = new Set();
-export default (mode) => {
+export default function timeJump(mode) {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
-  function jump(target) {
+  function jump(target): void {
     if (!target) return;
     if (target.state === 'stateless') {
       target.children.forEach((child) => jump(child));
@@ -100,4 +99,4 @@ export default (mode) => {
       };
     }
   };
-};
+}

src/backend/types/backendTypes.ts

@@ -6,11 +6,9 @@ import Tree from '../tree';
 /**
  * @type Tree - The snapshot of the current tree
  * @member tree - {Tree} - The tree structure to send to front end
- * @member unfilteredTree - {null} - The current mode (i.e. jumping, time-traveling, or paused)
  */
 export interface Snapshot {
   tree: Tree;
-  unfilteredTree: null;
 }
 
 /**
@@ -245,7 +243,7 @@ export type Fiber = {
 
 /**
  * @type FiberRoot - The internal data structure that represents a fiberRootNode or the top-level node of a single component tree
- * 
+ *
  * FiberRoot data structure has several properties. For Reactime, we only access the `current` property which contains the tree structure made of `fiberNode`. Each `fiberNode` contains a component data in the React component tree.
  */
 export type FiberRoot = {