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 · 3934d8d · 3934d8d
1 parent 98cdc40
commit 3934d8d
Showing 1 changed file with 14 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,10 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   get newBodyScriptElements() {
     return this.newElement.querySelectorAll("script")
   }
+
+  // Private
+
+  findBodyElement(body: HTMLBodyElement | Element) {
+    return body.querySelector("[data-turbo-drive-body]") || body
+  }
 }