hotwired · dhh · Jul 12, 2021 · Jul 12, 2021
diff --git a/src/core/drive/visit.ts b/src/core/drive/visit.ts
@@ -362,7 +362,7 @@ export class Visit implements FetchRequestDelegate {
     await new Promise<void>(resolve => {
       this.frame = requestAnimationFrame(() => resolve())
     })
-    callback()
+    await callback()
     delete this.frame
     this.performScroll()
   }

diff --git a/src/core/frames/frame_controller.ts b/src/core/frames/frame_controller.ts
@@ -210,8 +210,8 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
 
   // View delegate
 
-  viewWillRenderSnapshot(snapshot: Snapshot, isPreview: boolean) {
-
+  allowsImmediateRender(snapshot: Snapshot, resume: (value: any) => void) {
+    return true
   }
 
   viewRenderedSnapshot(snapshot: Snapshot, isPreview: boolean) {

diff --git a/src/core/session.ts b/src/core/session.ts
@@ -193,8 +193,9 @@ export class Session implements FormSubmitObserverDelegate, HistoryDelegate, Lin
     this.notifyApplicationBeforeCachingSnapshot()
   }
 
-  viewWillRenderSnapshot({ element }: PageSnapshot, isPreview: boolean) {
-    this.notifyApplicationBeforeRender(element)
+  allowsImmediateRender({ element }: PageSnapshot, resume: (value: any) => void) {
+    const event = this.notifyApplicationBeforeRender(element, resume)
+    return !event.defaultPrevented
   }
 
   viewRenderedSnapshot(snapshot: PageSnapshot, isPreview: boolean) {
@@ -234,8 +235,8 @@ export class Session implements FormSubmitObserverDelegate, HistoryDelegate, Lin
     return dispatch("turbo:before-cache")
   }
 
-  notifyApplicationBeforeRender(newBody: HTMLBodyElement) {
-    return dispatch("turbo:before-render", { detail: { newBody }})
+  notifyApplicationBeforeRender(newBody: HTMLBodyElement, resume: (value: any) => void) {
+    return dispatch("turbo:before-render", { detail: { newBody, resume }, cancelable: true })
   }
 
   notifyApplicationAfterRender() {

diff --git a/src/core/view.ts b/src/core/view.ts
@@ -3,7 +3,7 @@ import { Snapshot } from "./snapshot"
 import { Position } from "./types"
 
 export interface ViewDelegate<S extends Snapshot> {
-  viewWillRenderSnapshot(snapshot: S, isPreview: boolean): void
+  allowsImmediateRender(snapshot: S, resume: (value: any) => void): boolean
   viewRenderedSnapshot(snapshot: S, isPreview: boolean): void
   viewInvalidated(): void
 }
@@ -13,6 +13,7 @@ export abstract class View<E extends Element, S extends Snapshot<E> = Snapshot<E
   readonly element: E
   renderer?: R
   abstract readonly snapshot: S
+  private resolveRenderPromise = (value: any) => {}
 
   constructor(delegate: D, element: E) {
     this.delegate = delegate
@@ -54,7 +55,11 @@ export abstract class View<E extends Element, S extends Snapshot<E> = Snapshot<E
       try {
         this.renderer = renderer
         this.prepareToRenderSnapshot(renderer)
-        this.delegate.viewWillRenderSnapshot(snapshot, isPreview)
+
+        const renderInterception = new Promise(resolve => this.resolveRenderPromise = resolve)
+        const immediateRender = this.delegate.allowsImmediateRender(snapshot, this.resolveRenderPromise)
+        if (!immediateRender) await renderInterception
+
         await this.renderSnapshot(renderer)
         this.delegate.viewRenderedSnapshot(snapshot, isPreview)
         this.finishRenderingSnapshot(renderer)

diff --git a/src/tests/fixtures/pausable_rendering.html b/src/tests/fixtures/pausable_rendering.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Turbo</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+    <script type="module">
+      addEventListener('turbo:before-render', function(event) {
+        event.preventDefault()
+        if (confirm('Continue rendering?')) {
+          event.detail.resume()
+        } else {
+          alert('Rendering aborted')
+        }
+      })
+    </script>
+  </head>
+  <body>
+    <section>
+      <h1>Pausable Rendering</h1>
+      <p><a id="link" href="/src/tests/fixtures/one.html">Link</a></p>
+    </section>
+  </body>
+</html>
diff --git a/src/tests/functional/index.ts b/src/tests/functional/index.ts
@@ -6,6 +6,7 @@ export * from "./frame_tests"
 export * from "./import_tests"
 export * from "./loading_tests"
 export * from "./navigation_tests"
+export * from "./pausable_rendering_tests"
 export * from "./rendering_tests"
 export * from "./scroll_restoration_tests"
 export * from "./stream_tests"

diff --git a/src/tests/functional/pausable_rendering_tests.ts b/src/tests/functional/pausable_rendering_tests.ts
@@ -0,0 +1,35 @@
+import { TurboDriveTestCase } from "../helpers/turbo_drive_test_case"
+
+export class PausableRenderingTests extends TurboDriveTestCase {
+  async setup() {
+    await this.goToLocation("/src/tests/fixtures/pausable_rendering.html")
+  }
+
+  async "test pauses and resumes rendering"() {
+    await this.clickSelector("#link")
+
+    await this.nextBeat
+    this.assert.strictEqual(await this.getAlertText(), 'Continue rendering?')
+    await this.acceptAlert()
+
+    const h1 = await this.querySelector("h1")
+    this.assert.equal(await h1.getVisibleText(), "One")
+  }
+
+  async "test aborts rendering"() {
+    await this.clickSelector("#link")
+
+    await this.nextBeat
+    this.assert.strictEqual(await this.getAlertText(), 'Continue rendering?')
+    await this.dismissAlert()
+
+    await this.nextBeat
+    this.assert.strictEqual(await this.getAlertText(), 'Rendering aborted')
+    await this.acceptAlert()
+
+    const h1 = await this.querySelector("h1")
+    this.assert.equal(await h1.getVisibleText(), "Pausable Rendering")
+  }
+}
+
+PausableRenderingTests.registerSuite()
diff --git a/src/tests/helpers/functional_test_case.ts b/src/tests/helpers/functional_test_case.ts
@@ -129,4 +129,16 @@ export class FunctionalTestCase extends InternTestCase {
   get hash(): Promise<string> {
     return this.evaluate(() => location.hash)
   }
+
+  async acceptAlert(): Promise<void> {
+    return this.remote.acceptAlert()
+  }
+
+  async dismissAlert(): Promise<void> {
+    return this.remote.dismissAlert()
+  }
+
+  async getAlertText(): Promise<string> {
+    return this.remote.getAlertText()
+  }
 }