Added routes.ts file which exports an instance of a custom Routes class. The routes class is imported by linkFiber where its addRoute method is invoked before sending a new snapshot to the frontend and by timeJump where its navigate method is invoked during time travel. Improved logic in timeJump that controls when mode.jumping switches back to false. Added url property to tree class.

Co-authored-by: Chris LeBrett <[email protected]>
Co-authored-by: Robby Tipton <[email protected]>
Co-authored-by: Joseph Park <[email protected]>
Co-authored-by: David Kim <[email protected]>
Co-authored-by: Kevin HoEun Lee <[email protected]>

Author: 5 people

src/backend/linkFiber.ts

@@ -28,6 +28,7 @@ import {
 import Tree from './tree';
 // passes the data down to its components ?
 import componentActionsRecord from './masterState';
+import routes from './routes';
 
 // 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`
@@ -93,6 +94,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     snap.tree = new Tree('root', 'root');
   }
   const payload = snap.tree.cleanTreeCopy();
+  payload.url = routes.addRoute(window.location.href);
   // if it's Recoil - run different actions
   if (isRecoil) {
     // getRecoilState()

src/backend/routes.ts

@@ -0,0 +1,39 @@
+class Routes {
+  values: string[] = [];
+
+  id = 0;
+
+  current: number | null = null;
+
+  addRoute(url: string): string {
+    if (this.values[this.values.length - 1] !== url) {
+      if (this.values.includes(url)) {
+        this.values.push((url += this.id++));
+      } else {
+        this.values.push(url);
+      }
+    }
+
+    this.current = this.values.length - 1;
+    return url;
+  }
+
+  navigate(url: string): boolean {
+    let targetIndex: number | null = null;
+    for (let i = 0; i < this.values.length; i++) {
+      if (this.values[i] === url) targetIndex = i;
+    }
+
+    const delta: number = targetIndex - this.current;
+
+    this.current += delta;
+
+    if (delta !== 0) {
+      window.history.go(delta);
+      return true;
+    }
+    return false;
+  }
+}
+
+export default new Routes();

src/backend/timeJump.ts

@@ -1,4 +1,5 @@
 import { Console } from 'console';
+import routes from './routes';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
@@ -85,9 +86,19 @@ export default (origin, mode) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;
     if (firstCall) circularComponentTable.clear();
-    jump(target);
-    setTimeout(() => {
-      mode.jumping = false;
-    }, 100);
+    const navigating: boolean = routes.navigate(target.url);
+    if (navigating) {
+      addEventListener('popstate', event => {
+        jump(target);
+        document.body.onmouseover = () => {
+          mode.jumping = false;
+        };
+      });
+    } else {
+      jump(target);
+      document.body.onmouseover = () => {
+        mode.jumping = false;
+      };
+    }
   };
-};
+};

src/backend/tree.ts

@@ -61,6 +61,8 @@ class Tree {
 
   recoilDomNode: any;
 
+  url: string;
+
   // Duplicate names: add a unique number ID
   // Create an object 'componentNames' to store each component name as a key and it's frequency of use as its value
   // When a new component is made on the tree, check if the new component's name already exists in 'componentNames' (possibly with the .hasOwnProperty method)