fix: back & forward didn't track history correctly

roxiness · Mar 25, 2024 · c40b0ed · c40b0ed
1 parent 8bcea2e
commit c40b0ed
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/lib/runtime/Route/Route.js b/lib/runtime/Route/Route.js
@@ -25,6 +25,11 @@ export class Route {
         redirect: null,
     }
 
+    /** @type {Route} */
+    prevRoute
+    /** @type {Route} */
+    nextRoute
+
     /**
      * @param {Router} router
      * @param {string} url

diff --git a/lib/runtime/Router/Router.js b/lib/runtime/Router/Router.js
@@ -316,12 +316,12 @@ export class Router {
         // fix null state
         state = state || {}
 
-        const oldRoute = this.history.get(state.id)
+        const stackedRoute = this.history.get(state.id)
 
-        if (oldRoute?.meta.history) {
-            oldRoute.mode = 'popState'
-            oldRoute.state.cached = true
-            this.setActiveRoute(oldRoute)
+        if (stackedRoute?.meta.history) {
+            stackedRoute.mode = 'popState'
+            stackedRoute.state.cached = true
+            this.setActiveRoute(stackedRoute, null)
             return true
         }
 
@@ -356,7 +356,7 @@ export class Router {
             // pending route could have changed while awaiting route.loadRoute() above
             if (this.pendingRoute.get() === route) this.pendingRoute.set(null)
 
-            if (didLoadRoute) this.setActiveRoute(route)
+            if (didLoadRoute) this.setActiveRoute(route, stackedRoute)
 
             // TODO Wait a tick for component rendering. There's probably be a better way to handle this.
             await new Promise(resolve => setTimeout(resolve))
@@ -365,7 +365,12 @@ export class Router {
         }
     }
 
-    setActiveRoute(route) {
+    /**
+     *
+     * @param {Route} route
+     * @param {Route} stackedRoute the route that was stacked in history with the same id
+     */
+    setActiveRoute(route, stackedRoute) {
         // the route made it through all pretasks, lets set it to active
         this.log.debug('set active route', this) // ROUTIFY-DEV-ONLY
 
@@ -375,6 +380,14 @@ export class Router {
 
         // lastRoute can't be the last entry in history, since we could be navigating back
         this.lastRoute = this.activeRoute.get()
+
+        if (route.mode !== 'popState' && this.lastRoute) {
+            this.lastRoute.nextRoute = route
+            route.prevRoute = this.lastRoute
+        } else if (stackedRoute) {
+            route.nextRoute = stackedRoute.nextRoute
+            route.prevRoute = stackedRoute.prevRoute
+        }
         this.activeRoute.set(route)
 
         this.afterUrlChange.run({
@@ -423,9 +436,13 @@ export class Router {
         this.go(1)
     }
     go(count) {
-        const history = [...this.history.values()]
-        const index = history.findIndex(r => r === this.activeRoute.get())
-        const newRoute = history[index + count]
+        const prop = count > 0 ? 'nextRoute' : 'prevRoute'
+        let newRoute = this.activeRoute.get()
+        while (count) {
+            newRoute = newRoute[prop]
+            count += count > 0 ? -1 : 1
+        }
+        if (!newRoute) return
         this._setUrl(newRoute.url, 'popState', false, newRoute.state)
     }
 }