Support Directional View Transitions

src/core/drive/visit.js

@@ -92,6 +92,7 @@ export class Visit {
     this.shouldCacheSnapshot = shouldCacheSnapshot
     this.acceptsStreamResponse = acceptsStreamResponse
     this.direction = direction || Direction[action]
+    this.viewTransitionDirection = this.calculateViewTransitionDirection()
   }
 
   get adapter() {
@@ -430,6 +431,16 @@ export class Visit {
       delete this.frame
     }
   }
+
+  calculateViewTransitionDirection() {
+    const originalVisitDirection = this.restorationData.direction === "back" ? "back" : "forward"
+
+    if (this.direction === "forward") {
+      return originalVisitDirection
+    } else {
+      return originalVisitDirection === "forward" ? "back" : "forward"
+    }
+  }
 }
 
 function isSuccessful(statusCode) {

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)
 
@@ -250,8 +254,9 @@ export class Session {
   followedLinkToLocation(link, location) {
     const action = this.getActionForLink(link)
     const acceptsStreamResponse = link.hasAttribute("data-turbo-stream")
+    const direction = link.getAttribute("data-turbo-visit-direction")
 
-    this.visit(location.href, { action, acceptsStreamResponse })
+    this.visit(location.href, { action, acceptsStreamResponse, direction })
   }
 
   // Navigator delegate
@@ -270,7 +275,7 @@ export class Session {
   visitStarted(visit) {
     if (!visit.acceptsStreamResponse) {
       markAsBusy(document.documentElement)
-      this.view.markVisitDirection(visit.direction)
+      this.view.markVisitDirection(visit.viewTransitionDirection)
     }
     extendURLWithDeprecatedProperties(visit.location)
     if (!visit.silent) {