Update the history before rendering promoted frames

src/core/drive/visit.ts

@@ -6,7 +6,7 @@ import { getAnchor } from "../url"
 import { Snapshot } from "../snapshot"
 import { PageSnapshot } from "./page_snapshot"
 import { Action } from "../types"
-import { uuid } from "../../util"
+import { getHistoryMethodForAction, uuid } from "../../util"
 import { PageView } from "./page_view"
 
 export interface VisitDelegate {
@@ -45,13 +45,16 @@ export type VisitOptions = {
   response?: VisitResponse
   visitCachedSnapshot(snapshot: Snapshot): void
   willRender: boolean
+  updateHistory: boolean
+  restorationIdentifier?: string
 }
 
 const defaultOptions: VisitOptions = {
   action: "advance",
   historyChanged: false,
   visitCachedSnapshot: () => {},
   willRender: true,
+  updateHistory: true,
 }
 
 export type VisitResponse = {
@@ -75,6 +78,7 @@ export class Visit implements FetchRequestDelegate {
   readonly timingMetrics: TimingMetrics = {}
   readonly visitCachedSnapshot: (snapshot: Snapshot) => void
   readonly willRender: boolean
+  readonly updateHistory: boolean
 
   followedRedirect = false
   frame?: number
@@ -99,10 +103,11 @@ export class Visit implements FetchRequestDelegate {
     this.location = location
     this.restorationIdentifier = restorationIdentifier || uuid()
 
-    const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, willRender } = {
-      ...defaultOptions,
-      ...options,
-    }
+    const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, willRender, updateHistory } =
+      {
+        ...defaultOptions,
+        ...options,
+      }
     this.action = action
     this.historyChanged = historyChanged
     this.referrer = referrer
@@ -111,6 +116,7 @@ export class Visit implements FetchRequestDelegate {
     this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action)
     this.visitCachedSnapshot = visitCachedSnapshot
     this.willRender = willRender
+    this.updateHistory = updateHistory
     this.scrolled = !willRender
   }
 
@@ -171,9 +177,9 @@ export class Visit implements FetchRequestDelegate {
   }
 
   changeHistory() {
-    if (!this.historyChanged) {
+    if (!this.historyChanged && this.updateHistory) {
       const actionForHistory = this.location.href === this.referrer?.href ? "replace" : this.action
-      const method = this.getHistoryMethodForAction(actionForHistory)
+      const method = getHistoryMethodForAction(actionForHistory)
       this.history.update(method, this.location, this.restorationIdentifier)
       this.historyChanged = true
     }

src/core/frames/frame_controller.ts

@@ -7,7 +7,14 @@ import {
 import { FetchMethod, FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer"
-import { clearBusyState, getAttribute, parseHTMLDocument, markAsBusy } from "../../util"
+import {
+  clearBusyState,
+  getAttribute,
+  parseHTMLDocument,
+  markAsBusy,
+  uuid,
+  getHistoryMethodForAction,
+} from "../../util"
 import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
 import { ViewDelegate } from "../view"
@@ -17,7 +24,7 @@ import { FrameView } from "./frame_view"
 import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
 import { FrameRenderer } from "./frame_renderer"
 import { session } from "../index"
-import { isAction } from "../types"
+import { isAction, Action } from "../types"
 
 export class FrameController
   implements
@@ -41,13 +48,17 @@ export class FrameController
   private connected = false
   private hasBeenLoaded = false
   private ignoredAttributes: Set<FrameElementObservedAttribute> = new Set()
+  private action?: Action
+  private frame?: FrameElement
+  readonly restorationIdentifier: string
 
   constructor(element: FrameElement) {
     this.element = element
     this.view = new FrameView(this, this.element)
     this.appearanceObserver = new AppearanceObserver(this, this.element)
     this.linkInterceptor = new LinkInterceptor(this, this.element)
     this.formInterceptor = new FormInterceptor(this, this.element)
+    this.restorationIdentifier = uuid()
   }
 
   connect() {
@@ -126,6 +137,7 @@ export class FrameController
         const snapshot = new Snapshot(await this.extractForeignFrameElement(body))
         const renderer = new FrameRenderer(this.view.snapshot, snapshot, false, false)
         if (this.view.renderPromise) await this.view.renderPromise
+        this.changeHistory()
         await this.view.render(renderer)
         this.complete = true
         session.frameRendered(fetchResponse, this.element)
@@ -277,9 +289,10 @@ export class FrameController
   }
 
   private proposeVisitIfNavigatedWithAction(frame: FrameElement, element: Element, submitter?: HTMLElement) {
-    const action = getAttribute("data-turbo-action", submitter, element, frame)
+    this.action = getAttribute("data-turbo-action", submitter, element, frame) as Action
+    this.frame = frame
 
-    if (isAction(action)) {
+    if (isAction(this.action)) {
       const { visitCachedSnapshot } = new SnapshotSubstitution(frame)
       frame.delegate.fetchResponseLoaded = (fetchResponse: FetchResponse) => {
         if (frame.src) {
@@ -288,16 +301,25 @@ export class FrameController
           const response = { statusCode, redirected, responseHTML }
 
           session.visit(frame.src, {
-            action,
+            action: this.action,
             response,
             visitCachedSnapshot,
             willRender: false,
+            updateHistory: false,
+            restorationIdentifier: this.restorationIdentifier,
           })
         }
       }
     }
   }
 
+  changeHistory() {
+    if (this.action && this.frame) {
+      const method = getHistoryMethodForAction(this.action)
+      session.history.update(method, expandURL(this.frame.src as string), this.restorationIdentifier)
+    }
+  }
+
   private findFrameElement(element: Element, submitter?: HTMLElement) {
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
     return getFrameElementById(id) ?? this.element

src/core/native/browser_adapter.ts

@@ -24,7 +24,7 @@ export class BrowserAdapter implements Adapter {
   }
 
   visitProposedToLocation(location: URL, options?: Partial<VisitOptions>) {
-    this.navigator.startVisit(location, uuid(), options)
+    this.navigator.startVisit(location, options?.restorationIdentifier || uuid(), options)
   }
 
   visitStarted(visit: Visit) {

src/tests/fixtures/tabs.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tabs</title>
+    <script src="/dist/turbo.es2017-umd.js"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <h1>Tabs</h1>
+
+    <turbo-frame id="tab-content" data-turbo-action="advance">
+      <div>
+        <a id="drive_enabled" href="/src/tests/fixtures/tabs.html">Tab 1</a>
+        <a id="drive_enabled" href="/src/tests/fixtures/tabs/two.html">Tab 2</a>
+        <a id="drive_enabled" href="/src/tests/fixtures/tabs/three.html">Tab 3</a>
+      </div>
+
+      One
+    </turbo-frame>
+  </body>
+</html>

src/tests/fixtures/tabs/three.html

@@ -0,0 +1,9 @@
+<turbo-frame id="tab-content" data-turbo-action="advance">
+  <div>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs.html">Tab 1</a>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs/two.html">Tab 2</a>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs/three.html">Tab 3</a>
+  </div>
+
+  Three
+</turbo-frame>

src/tests/fixtures/tabs/two.html

@@ -0,0 +1,9 @@
+<turbo-frame id="tab-content" data-turbo-action="advance">
+  <div>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs.html">Tab 1</a>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs/two.html">Tab 2</a>
+    <a id="drive_enabled" href="/src/tests/fixtures/tabs/three.html">Tab 3</a>
+  </div>
+
+  Two
+</turbo-frame>

src/util.ts

@@ -1,3 +1,5 @@
+import { Action } from "./core/types"
+
 export type DispatchOptions = {
   target: EventTarget
   cancelable: boolean
@@ -92,3 +94,13 @@ export function clearBusyState(...elements: Element[]) {
     element.removeAttribute("aria-busy")
   }
 }
+
+export function getHistoryMethodForAction(action: Action) {
+  switch (action) {
+    case "replace":
+      return history.replaceState
+    case "advance":
+    case "restore":
+      return history.pushState
+  }
+}