Allow users to define an async custom render function

src/core/bardo.ts

@@ -9,14 +9,14 @@ export class Bardo {
   readonly permanentElementMap: PermanentElementMap
   readonly delegate: BardoDelegate
 
-  static preservingPermanentElements(
+  static async preservingPermanentElements(
     delegate: BardoDelegate,
     permanentElementMap: PermanentElementMap,
     callback: () => void
   ) {
     const bardo = new this(delegate, permanentElementMap)
     bardo.enter()
-    callback()
+    await callback()
     bardo.leave()
   }
 

src/core/drive/page_renderer.ts

@@ -36,7 +36,7 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
 
   async render() {
     if (this.willRender) {
-      this.replaceBody()
+      await this.replaceBody()
     }
   }
 
@@ -67,10 +67,10 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     await newStylesheetElements
   }
 
-  replaceBody() {
-    this.preservingPermanentElements(() => {
+  async replaceBody() {
+    await this.preservingPermanentElements(async () => {
       this.activateNewBody()
-      this.assignNewBody()
+      await this.assignNewBody()
     })
   }
 
@@ -120,8 +120,8 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     }
   }
 
-  assignNewBody() {
-    this.renderElement(this.currentElement, this.newElement)
+  async assignNewBody() {
+    await this.renderElement(this.currentElement, this.newElement)
   }
 
   get newHeadStylesheetElements() {

src/core/renderer.ts

@@ -49,8 +49,8 @@ export abstract class Renderer<E extends Element, S extends Snapshot<E> = Snapsh
     }
   }
 
-  preservingPermanentElements(callback: () => void) {
-    Bardo.preservingPermanentElements(this, this.permanentElementMap, callback)
+  async preservingPermanentElements(callback: () => void) {
+    await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback)
   }
 
   focusFirstAutofocusableElement() {

src/tests/functional/rendering_tests.ts

@@ -114,6 +114,36 @@ test("test before-render event supports custom render function", async ({ page }
   assert.equal(await customRendered.textContent(), "Custom Rendered", "renders with custom function")
 })
 
+test("test before-render event supports async custom render function", async ({ page }) => {
+  await page.evaluate(() => {
+    const nextEventLoopTick = () =>
+      new Promise<void>((resolve) => {
+        setTimeout(() => resolve(), 0)
+      })
+
+    addEventListener("turbo:before-render", (event) => {
+      const { detail } = event as CustomEvent
+      const { render } = detail
+      detail.render = async (currentElement: HTMLBodyElement, newElement: HTMLBodyElement) => {
+        await nextEventLoopTick()
+
+        newElement.insertAdjacentHTML("beforeend", `<span id="custom-rendered">Custom Rendered</span>`)
+        render(currentElement, newElement)
+      }
+    })
+
+    addEventListener("turbo:load", () => {
+      localStorage.setItem("renderedElement", document.getElementById("custom-rendered")?.textContent || "")
+    })
+  })
+  await page.click("#same-origin-link")
+  await nextEventNamed(page, "turbo:load")
+
+  const renderedElement = await page.evaluate(() => localStorage.getItem("renderedElement"))
+
+  assert.equal(renderedElement, "Custom Rendered", "renders with custom function")
+})
+
 test("test wont reload when tracked elements has a nonce", async ({ page }) => {
   await page.click("#tracked-nonce-tag-link")
   await nextBody(page)