Improved robustness of react-router logic. Reactime can now reliably time travel through a react-router application even in situations where the history branches. This is achieved via the rebuildHistory method on the Routes 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

@@ -94,7 +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);
+  payload.route = routes.addRoute(window.location.href);
   // if it's Recoil - run different actions
   if (isRecoil) {
     // getRecoilState()

src/backend/routes.ts

@@ -1,27 +1,57 @@
+/* eslint-disable max-classes-per-file */
+
+class Route {
+  url: string;
+
+  id: number;
+
+  constructor(url: string, id: number) {
+    this.url = url;
+    this.id = id;
+  }
+}
+
 class Routes {
-  values: string[] = [];
+  values: Route[] = [new Route(null, null)];
 
   id = 0;
 
-  current: number | null = null;
+  current: number | null = 0;
 
-  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);
+  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) {
+        this.rebuildHistory(url);
       }
+
+      route = new Route(url, (this.id += 1));
+      this.values.push(route);
+
+      this.current = this.values.length - 1;
+    }
+
+    return route;
+  }
+
+  rebuildHistory(url: string): void {
+    window.history.replaceState('', '', this.values[this.current + 1].url);
+
+    for (let i = this.current + 2; i < this.values.length; i += 1) {
+      window.history.pushState('', '', this.values[i].url);
     }
 
-    this.current = this.values.length - 1;
-    return url;
+    window.history.pushState('', '', url);
   }
 
-  navigate(url: string): boolean {
+  navigate(route: Route): boolean {
     let targetIndex: number | null = null;
-    for (let i = 0; i < this.values.length; i++) {
-      if (this.values[i] === url) targetIndex = i;
+
+    for (let i = 0; i < this.values.length; i += 1) {
+      if (this.values[i].url === route.url && this.values[i].id === route.id) {
+        targetIndex = i;
+      }
     }
 
     const delta: number = targetIndex - this.current;

src/backend/timeJump.ts

@@ -86,7 +86,7 @@ export default (origin, mode) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;
     if (firstCall) circularComponentTable.clear();
-    const navigating: boolean = routes.navigate(target.url);
+    const navigating: boolean = routes.navigate(target.route);
     if (navigating) {
       addEventListener('popstate', event => {
         jump(target);

src/backend/tree.ts

@@ -61,7 +61,7 @@ class Tree {
 
   recoilDomNode: any;
 
-  url: string;
+  route: {};
 
   // 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