hotwired · kevinmcconnell · Jun 27, 2023 · Jun 23, 2023
diff --git a/src/core/drive/page_snapshot.ts b/src/core/drive/page_snapshot.ts
@@ -56,17 +56,21 @@ export class PageSnapshot extends Snapshot<HTMLBodyElement> {
   }
 
   get isPreviewable() {
-    return this.cacheControlValue != "no-preview"
+    return this.cacheControlValue != "no-preview" && !this.prefersViewTransitions
   }
 
   get isCacheable() {
-    return this.cacheControlValue != "no-cache"
+    return this.cacheControlValue != "no-cache" && !this.prefersViewTransitions
   }
 
   get isVisitable() {
     return this.getSetting("visit-control") != "reload"
   }
 
+  get prefersViewTransitions() {
+    return this.headSnapshot.getMetaValue("view-transition") === "same-origin"
+  }
+
   // Private
 
   getSetting(name: string) {

diff --git a/src/core/drive/page_view.ts b/src/core/drive/page_view.ts
@@ -4,6 +4,7 @@ import { ErrorRenderer } from "./error_renderer"
 import { PageRenderer } from "./page_renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { SnapshotCache } from "./snapshot_cache"
+import { withViewTransition } from "./view_transitions"
 import { Visit } from "./visit"
 
 export type PageViewRenderOptions = ViewRenderOptions<HTMLBodyElement>
@@ -20,13 +21,16 @@ export class PageView extends View<HTMLBodyElement, PageSnapshot, PageViewRender
   forceReloaded = false
 
   renderPage(snapshot: PageSnapshot, isPreview = false, willRender = true, visit?: Visit) {
+    const shouldTransition = this.snapshot.prefersViewTransitions && snapshot.prefersViewTransitions
     const renderer = new PageRenderer(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender)
+
     if (!renderer.shouldRender) {
       this.forceReloaded = true
     } else {
       visit?.changeHistory()
     }
-    return this.render(renderer)
+
+    return withViewTransition(shouldTransition, () => this.render(renderer))
   }
 
   renderError(snapshot: PageSnapshot, visit?: Visit) {

diff --git a/src/core/drive/view_transitions.ts b/src/core/drive/view_transitions.ts
@@ -0,0 +1,17 @@
+declare global {
+  type ViewTransition = {
+    finished: Promise<void>
+  }
+
+  interface Document {
+    startViewTransition?(callback: () => void): ViewTransition
+  }
+}
+
+export function withViewTransition(shouldTransition: boolean, callback: () => Promise<void>): Promise<void> {
+  if (shouldTransition && document.startViewTransition) {
+    return document.startViewTransition(callback).finished
+  } else {
+    return callback()
+  }
+}
diff --git a/src/tests/fixtures/transitions/left.html b/src/tests/fixtures/transitions/left.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Left</title>
+    <meta name="view-transition" content="same-origin" />
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+
+    <style>
+      .square {
+        display: block;
+        width: 100px;
+        height: 100px;
+        border-radius: 6px;
+        background-color: blue;
+        view-transition-name: square;
+      }
+
+      .square.right {
+        margin-left: auto;
+      }
+    </style>
+  </head>
+
+  <body style="background-color: orange">
+    <h1>Left</h1>
+    <p><a id="go-right" href="/src/tests/fixtures/transitions/right.html">go right</a></p>
+    <div class="square"></div>
+    <p><a id="go-other" href="/src/tests/fixtures/transitions/other.html">go other</a></p>
+  </body>
+</html>
diff --git a/src/tests/fixtures/transitions/other.html b/src/tests/fixtures/transitions/other.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Other</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+  </head>
+
+  <body style="background-color: yellow">
+    <h1>Other</h1>
+    <p><a id="go-left" href="/src/tests/fixtures/transitions/left.html">go left</a></p>
+  </body>
+</html>
diff --git a/src/tests/fixtures/transitions/right.html b/src/tests/fixtures/transitions/right.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Right</title>
+    <meta name="view-transition" content="same-origin" />
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+
+    <style>
+      .square {
+        display: block;
+        width: 100px;
+        height: 100px;
+        border-radius: 6px;
+        background-color: blue;
+        view-transition-name: square;
+      }
+
+      .square.right {
+        margin-left: auto;
+      }
+    </style>
+  </head>
+
+  <body style="background-color: red">
+    <h1>Right</h1>
+    <p><a id="go-left" href="/src/tests/fixtures/transitions/left.html">go left</a></p>
+    <div class="square right"></div>
+  </body>
+</html>
diff --git a/src/tests/functional/drive_view_transition_tests.ts b/src/tests/functional/drive_view_transition_tests.ts
@@ -0,0 +1,30 @@
+import { test } from "@playwright/test"
+import { assert } from "chai"
+import { nextBody } from "../helpers/page"
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/src/tests/fixtures/transitions/left.html")
+
+  await page.evaluate(`
+    document.startViewTransition = (callback) => {
+      window.startViewTransitionCalled = true
+      callback()
+    }
+  `)
+})
+
+test("navigating triggers the view transition", async ({ page }) => {
+  await page.locator("#go-right").click()
+  await nextBody(page)
+
+  const called = await page.evaluate(`window.startViewTransitionCalled`)
+  assert.isTrue(called)
+})
+
+test("navigating does not trigger a view transition when meta tag not present", async ({ page }) => {
+  await page.locator("#go-other").click()
+  await nextBody(page)
+
+  const called = await page.evaluate(`window.startViewTransitionCalled`)
+  assert.isUndefined(called)
+})