From 7325fcca1debbc6282810236f937bdfd6e0bcb93 Mon Sep 17 00:00:00 2001
From: Manuel Puyol <manuelpuyol@github.com>
Date: Fri, 28 Oct 2022 15:22:10 -0500
Subject: [PATCH] Allow users to define an async custom render function

---
 src/core/bardo.ts                       |  4 ++--
 src/core/drive/page_renderer.ts         | 12 +++++-----
 src/core/renderer.ts                    |  4 ++--
 src/tests/functional/rendering_tests.ts | 30 +++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/core/bardo.ts b/src/core/bardo.ts
index 3847304ff..bd6b191f0 100644
--- a/src/core/bardo.ts
+++ b/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()
   }
 
diff --git a/src/core/drive/page_renderer.ts b/src/core/drive/page_renderer.ts
index 08793f232..4132163de 100644
--- a/src/core/drive/page_renderer.ts
+++ b/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() {
diff --git a/src/core/renderer.ts b/src/core/renderer.ts
index 5e199999c..41b7585fe 100644
--- a/src/core/renderer.ts
+++ b/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() {
diff --git a/src/tests/functional/rendering_tests.ts b/src/tests/functional/rendering_tests.ts
index e95d67e1a..001429958 100644
--- a/src/tests/functional/rendering_tests.ts
+++ b/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)