When performing a restoration visit, consider the original visit's direction and apply it appropriately according to whether traveling forward or backward in history stack.

This de-couples a visit's history direction from its view transition direction. Multi-page applications may now implement coherent view transitions using any combination of turbo links and the browser's back & forward buttons.

Author: jbarrieault

src/core/drive/history.js

@@ -87,8 +87,13 @@ export class History {
         this.location = new URL(window.location.href)
         const { restorationIdentifier, restorationIndex } = turbo
         this.restorationIdentifier = restorationIdentifier
-        const direction = restorationIndex > this.currentIndex ? "forward" : "back"
-        this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction)
+        const direction = this.restorationVisitDirection(restorationIdentifier, restorationIndex)
+
+        this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(
+          this.location,
+          restorationIdentifier,
+          direction
+        )
         this.currentIndex = restorationIndex
       }
     }
@@ -109,4 +114,16 @@ export class History {
   pageIsLoaded() {
     return this.pageLoaded || document.readyState == "complete"
   }
+
+  restorationVisitDirection(restorationIdentifier, restorationIndex) {
+    const historyDirection = restorationIndex > this.currentIndex ? "forward" : "back"
+    const originalVisitDirection =
+      this.restorationData[restorationIdentifier]?.direction === "back" ? "back" : "forward"
+
+    return historyDirection === "forward" ? originalVisitDirection : this.oppositeDirection(originalVisitDirection)
+  }
+
+  oppositeDirection(direction) {
+    return direction === "forward" ? "back" : "forward"
+  }
 }

src/core/index.js

@@ -34,6 +34,8 @@ export function registerAdapter(adapter) {
  * @param options Options to apply
  * @param options.action Type of history navigation to apply ("restore",
  * "replace" or "advance")
+ * @param options.direction Logical direction of the navigation, applies to
+ * view transitions ("forward", "back")
  * @param options.historyChanged Specifies whether the browser history has
  * already been changed for this visit or not
  * @param options.referrer Specifies the referrer of this visit such that

src/core/session.js

@@ -95,6 +95,10 @@ export class Session {
   visit(location, options = {}) {
     const frameElement = options.frame ? document.getElementById(options.frame) : null
 
+    if (["forward", "back"].includes(options.direction)) {
+      this.history.updateRestorationData({ direction: options.direction })
+    }
+
     if (frameElement instanceof FrameElement) {
       const action = options.action || getVisitAction(frameElement)