replace nextAnimationFrame by nextMicroTask

src/core/index.js

@@ -1,11 +1,13 @@
 import { Session } from "./session"
+import { Cache } from "./cache"
 import { PageRenderer } from "./drive/page_renderer"
 import { PageSnapshot } from "./drive/page_snapshot"
 import { FrameRenderer } from "./frames/frame_renderer"
 import { FormSubmission } from "./drive/form_submission"
 
 const session = new Session()
-const { cache, navigator } = session
+const cache = new Cache(session)
+const { navigator } = session
 export { navigator, session, cache, PageRenderer, PageSnapshot, FrameRenderer }
 
 export { StreamActions } from "./streams/stream_actions"

src/core/session.js

@@ -16,7 +16,6 @@ import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markA
 import { PageView } from "./drive/page_view"
 import { FrameElement } from "../elements/frame_element"
 import { Preloader } from "./drive/preloader"
-import { Cache } from "./cache"
 
 export class Session {
   navigator = new Navigator(this)
@@ -34,7 +33,6 @@ export class Session {
   formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement)
   frameRedirector = new FrameRedirector(this, document.documentElement)
   streamMessageRenderer = new StreamMessageRenderer()
-  cache = new Cache()
 
   drive = true
   enabled = true

src/elements/stream_element.js

@@ -1,5 +1,5 @@
 import { StreamActions } from "../core/streams/stream_actions"
-import { nextAnimationFrame } from "../util"
+import { nextRepaint } from "../util"
 
 // <turbo-stream action=replace target=id><template>...
 
@@ -43,7 +43,7 @@ export class StreamElement extends HTMLElement {
       const event = this.beforeRenderEvent
 
       if (this.dispatchEvent(event)) {
-        await nextAnimationFrame()
+        nextRepaint()
         await event.detail.render(this)
       }
     })())

src/tests/unit/stream_element_tests.js

@@ -1,5 +1,5 @@
 import { StreamElement } from "../../elements"
-import { nextAnimationFrame } from "../../util"
+import { nextRepaint } from "../../util"
 import { DOMTestCase } from "../helpers/dom_test_case"
 import { assert } from "@open-wc/testing"
 
@@ -34,13 +34,13 @@ test("action=append", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo Streams")
   assert.isNull(element.parentElement)
 
   subject.append(element2)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo Streams and more")
   assert.isNull(element2.parentElement)
@@ -56,13 +56,13 @@ test("action=append with children ID already present in target", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo First tail1 ")
   assert.isNull(element.parentElement)
 
   subject.append(element2)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo  tail1 New First Second tail2 ")
 })
@@ -73,13 +73,13 @@ test("action=prepend", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Streams Hello Turbo")
   assert.isNull(element.parentElement)
 
   subject.append(element2)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "and more Streams Hello Turbo")
   assert.isNull(element.parentElement)
@@ -95,13 +95,13 @@ test("action=prepend with children ID already present in target", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "First tail1 Hello Turbo")
   assert.isNull(element.parentElement)
 
   subject.append(element2)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "New First Second tail2  tail1 Hello Turbo")
 })
@@ -111,7 +111,7 @@ test("action=remove", async () => {
   assert.ok(subject.find("#hello"))
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.notOk(subject.find("#hello"))
   assert.isNull(element.parentElement)
@@ -123,7 +123,7 @@ test("action=replace", async () => {
   assert.ok(subject.find("div#hello"))
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
   assert.notOk(subject.find("div#hello"))
@@ -136,7 +136,7 @@ test("action=update", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.textContent, "Goodbye Turbo")
   assert.isNull(element.parentElement)
@@ -147,7 +147,7 @@ test("action=after", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.nextSibling?.textContent, "After Turbo")
   assert.ok(subject.find("div#hello"))
@@ -160,7 +160,7 @@ test("action=before", async () => {
   assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
 
   subject.append(element)
-  await nextAnimationFrame()
+  await nextRepaint()
 
   assert.equal(subject.find("#hello")?.previousSibling?.textContent, "Before Turbo")
   assert.ok(subject.find("div#hello"))

src/util.js

@@ -43,6 +43,14 @@ export function dispatch(eventName, { target, cancelable, detail } = {}) {
   return event
 }
 
+export async function nextRepaint() {
+  if (document.visibilityState === "hidden") {
+    await nextEventLoopTick()
+  } else {
+    await nextAnimationFrame()
+  }
+}
+
 export function nextAnimationFrame() {
   return new Promise((resolve) => requestAnimationFrame(() => resolve()))
 }