allow customizing the element that Drive replaces

While most of the time, replacing `<body>` makes perfect sense, when working with 3rd party integrations (i.e. Stripe), there are elements injected just before the closing `</body>` tag that should not be removed between page visits. There is more detail on this issue, particularly with injected `<iframe>` elements in hotwired#305 (comment). Now, if someone wants to customize the element that is replaced by Drive, they can add `data-turbo-drive-body` to an element, and only that element will be replaced between visits.
agrobbin · Jul 14, 2022 · 05f3aa1 · 05f3aa1
1 parent 98cdc40
commit 05f3aa1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/core/drive/page_renderer.ts b/src/core/drive/page_renderer.ts
@@ -1,6 +1,7 @@
 import { Renderer } from "../renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { ReloadReason } from "../native/browser_adapter"
+import { nextEventLoopTick } from "../../util"
 
 export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   get shouldRender() {
@@ -104,9 +105,14 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     }
   }
 
-  assignNewBody() {
+  async assignNewBody() {
+    await nextEventLoopTick()
+
     if (document.body && this.newElement instanceof HTMLBodyElement) {
-      document.body.replaceWith(this.newElement)
+      const currentBody = this.findBodyElement(document.body)
+      const newBody = this.findBodyElement(this.newElement)
+
+      currentBody.replaceWith(newBody)
     } else {
       document.documentElement.appendChild(this.newElement)
     }
@@ -131,4 +137,12 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   get newBodyScriptElements() {
     return this.newElement.querySelectorAll("script")
   }
+
+  // Private
+
+  findBodyElement(body: HTMLBodyElement | Element) {
+    if (!this.currentSnapshot.bodyElementId) return body
+
+    return body.querySelector(`#${this.currentSnapshot.bodyElementId}`) || body
+  }
 }
diff --git a/src/core/drive/page_snapshot.ts b/src/core/drive/page_snapshot.ts
@@ -52,6 +52,10 @@ export class PageSnapshot extends Snapshot<HTMLBodyElement> {
     return this.getSetting("visit-control") != "reload"
   }
 
+  get bodyElementId() {
+    return this.getSetting("body")
+  }
+
   // Private
 
   getSetting(name: string) {