Allow customizing the delay for InstantClick behavior

hotwired · Feb 5, 2024 · 263365b · 263365b
1 parent f4bbb77
commit 263365b
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 7 deletions.
diff --git a/src/core/drive/prefetch_cache.js b/src/core/drive/prefetch_cache.js
@@ -10,14 +10,16 @@ class PrefetchCache {
     }
   }
 
-  setLater(url, request, ttl) {
+  setLater(url, request, ttl, delay) {
     this.clear()
 
-    this.#prefetchTimeout = setTimeout(() => {
-      request.perform()
-      this.set(url, request, ttl)
-      this.#prefetchTimeout = null
-    }, PREFETCH_DELAY)
+    if (delay === "0") {
+      this.#setNow(url, request, ttl)
+    } else {
+      delay = Number(delay) || PREFETCH_DELAY
+
+      this.#enqueue(url, request, ttl, delay)
+    }
   }
 
   set(url, request, ttl) {
@@ -28,6 +30,18 @@ class PrefetchCache {
     if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout)
     this.#prefetched = null
   }
+
+  #enqueue(url, request, ttl, delay) {
+    this.#prefetchTimeout = setTimeout(() => {
+      this.#setNow(url, request, ttl)
+      this.#prefetchTimeout = null
+    }, delay)
+  }
+
+  #setNow(url, request, ttl) {
+    request.perform()
+    this.set(url, request, ttl)
+  }
 }
 
 export const cacheTtl = 10 * 1000

diff --git a/src/observers/link_prefetch_observer.js b/src/observers/link_prefetch_observer.js
@@ -76,7 +76,9 @@ export class LinkPrefetchObserver {
           target
         )
 
-        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl)
+        const delay = link.dataset.turboPrefetchDelay || getMetaContent("turbo-prefetch-delay")
+
+        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl, delay)
 
         link.addEventListener("mouseleave", () => prefetchCache.clear(), { once: true })
       }

diff --git a/src/tests/fixtures/hover_to_prefetch.html b/src/tests/fixtures/hover_to_prefetch.html
@@ -14,6 +14,9 @@
       <span>Hover to prefetch me</span>
     </a>
     <a href="/src/tests/fixtures/prefetched.html" id="anchor_with_turbo_stream" data-turbo-stream>Hover to prefetch me</a>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_with_custom_delay" data-turbo-prefetch-delay="300">Hover to prefetch me</a>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_with_zero_delay" data-turbo-prefetch-delay="0">Hover to prefetch me</a>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_with_invalid_delay" data-turbo-prefetch-delay="bad">Hover to prefetch me</a>
     <div data-turbo="false">
       <a href="/src/tests/fixtures/prefetched.html" id="anchor_with_turbo_false_parent">Won't prefetch when hovering me</a>
     </div>

diff --git a/src/tests/fixtures/hover_to_prefetch_with_delay_on_meta_tag.html b/src/tests/fixtures/hover_to_prefetch_with_delay_on_meta_tag.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hover to Prefetch</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <meta name="turbo-prefetch" content="true" />
+    <meta name="turbo-prefetch-delay" content="300" />
+  </head>
+
+  <body>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch">Hover to prefetch me</a>
+  </body>
+</html>
diff --git a/src/tests/fixtures/hover_to_prefetch_with_invalid_delay_on_meta_tag.html b/src/tests/fixtures/hover_to_prefetch_with_invalid_delay_on_meta_tag.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hover to Prefetch</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <meta name="turbo-prefetch" content="true" />
+    <meta name="turbo-prefetch-delay" content="bad" />
+  </head>
+
+  <body>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch">Hover to prefetch me</a>
+  </body>
+</html>
diff --git a/src/tests/fixtures/hover_to_prefetch_with_zero_delay_on_meta_tag.html b/src/tests/fixtures/hover_to_prefetch_with_zero_delay_on_meta_tag.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hover to Prefetch</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <meta name="turbo-prefetch" content="true" />
+    <meta name="turbo-prefetch-delay" content="0" />
+  </head>
+
+  <body>
+    <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch">Hover to prefetch me</a>
+  </body>
+</html>
diff --git a/src/tests/functional/link_prefetch_observer_tests.js b/src/tests/functional/link_prefetch_observer_tests.js
@@ -188,6 +188,93 @@ test("it prefetches links with a delay", async ({ page }) => {
   assertRequestMade(requestMade)
 })
 
+test("it allows to customize the delay with a data-turbo-prefetch-delay attribute", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_with_custom_delay")
+  await sleep(200)
+
+  assertRequestNotMade(requestMade)
+
+  await sleep(150)
+
+  assertRequestMade(requestMade)
+})
+
+test("it allows to customize the delay with a turbo-prefetch-delay a meta tag", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch_with_delay_on_meta_tag.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_for_prefetch")
+
+  await sleep(200)
+
+  assertRequestNotMade(requestMade)
+
+  await sleep(150)
+
+  assertRequestMade(requestMade)
+})
+
+test("it prefetches immediately with a data-turbo-prefetch-delay attribute set to 0", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_with_zero_delay")
+
+  assertRequestMade(requestMade)
+})
+
+test("it prefetches immediately with a turbo-prefetch-delay meta tag set to 0", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch_with_zero_delay_on_meta_tag.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_for_prefetch")
+
+  assertRequestMade(requestMade)
+})
+
+test("it prefetches immediately with a data-turbo-prefetch-delay attribute set to an invalid value", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_with_invalid_delay")
+  await sleep(75)
+
+  assertRequestNotMade(requestMade)
+
+  await sleep(100)
+
+  assertRequestMade(requestMade)
+})
+
+test("it prefetches immediately with a turbo-prefetch-delay meta tag set to an invalid value", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch_with_invalid_delay_on_meta_tag.html" })
+
+  let requestMade = false
+  page.on("request", async (request) => (requestMade = true))
+
+  await page.hover("#anchor_for_prefetch")
+  await sleep(75)
+
+  assertRequestNotMade(requestMade)
+
+  await sleep(100)
+
+  assertRequestMade(requestMade)
+})
+
 test("it cancels the prefetch request if the link is no longer hovered", async ({ page }) => {
   await goTo({ page, path: "/hover_to_prefetch.html" })