Deprecate [data-turbo-cache=false] in favor of [data-turbo-temporary] (…

…#871) Renames the `[data-turbo-cache=false]` attribute (used to denote temporary elements that should be removed before caching) to `[data-turbo-temporary]` for better similarity with `[data-turbo-permanent]`, its conceptual opposite. This is a superficial change, but worth it in terms of cohesion, I think. The pairing of "temporary" with "permanent" is just too good to ignore. Also, given the existence of `turbo-cache-*` as the namespace for page-level cache control, a unique name is less likely to confuse. References: - #238
hotwired · Feb 15, 2023 · e013072 · e013072
1 parent 3351d38
commit e013072
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/src/observers/cache_observer.ts b/src/observers/cache_observer.ts
@@ -1,27 +1,44 @@
 import { TurboBeforeCacheEvent } from "../core/session"
 
 export class CacheObserver {
+  readonly selector: string = "[data-turbo-temporary]"
+  readonly deprecatedSelector: string = "[data-turbo-cache=false]"
+
   started = false
 
   start() {
     if (!this.started) {
       this.started = true
-      addEventListener("turbo:before-cache", this.removeStaleElements, false)
+      addEventListener("turbo:before-cache", this.removeTemporaryElements, false)
     }
   }
 
   stop() {
     if (this.started) {
       this.started = false
-      removeEventListener("turbo:before-cache", this.removeStaleElements, false)
+      removeEventListener("turbo:before-cache", this.removeTemporaryElements, false)
     }
   }
 
-  removeStaleElements = <EventListener>((_event: TurboBeforeCacheEvent) => {
-    const staleElements = [...document.querySelectorAll('[data-turbo-cache="false"]')]
-
-    for (const element of staleElements) {
+  removeTemporaryElements = <EventListener>((_event: TurboBeforeCacheEvent) => {
+    for (const element of this.temporaryElements) {
       element.remove()
     }
   })
+
+  get temporaryElements() {
+    return [...document.querySelectorAll(this.selector), ...this.temporaryElementsWithDeprecation]
+  }
+
+  get temporaryElementsWithDeprecation() {
+    const elements = document.querySelectorAll(this.deprecatedSelector)
+
+    if (elements.length) {
+      console.warn(
+        `The ${this.deprecatedSelector} selector is deprecated and will be removed in a future version. Use ${this.selector} instead.`
+      )
+    }
+
+    return [...elements]
+  }
 }
diff --git a/src/tests/fixtures/cache_observer.html b/src/tests/fixtures/cache_observer.html
@@ -9,7 +9,8 @@
    <body>
      <section>
        <h1>Cache Observer</h1>
-       <div id="flash" data-turbo-cache="false">Rendering</div>
+       <div id="temporary" data-turbo-temporary>data-turbo-temporary</div>
+       <div id="temporary-with-deprecated-selector" data-turbo-cache="false">data-turbo-cache=false</div>
        <p><a id="link" href="/src/tests/fixtures/rendering.html">rendering</a></p>
    </body>
  </html>
diff --git a/src/tests/functional/cache_observer_tests.ts b/src/tests/functional/cache_observer_tests.ts
@@ -2,25 +2,36 @@ import { test } from "@playwright/test"
 import { assert } from "chai"
 import { hasSelector, nextBody } from "../helpers/page"
 
-test("test removes stale elements", async ({ page }) => {
+test("test removes temporary elements", async ({ page }) => {
   await page.goto("/src/tests/fixtures/cache_observer.html")
 
-  assert.equal(await page.textContent("#flash"), "Rendering")
+  assert.equal(await page.textContent("#temporary"), "data-turbo-temporary")
 
   await page.click("#link")
   await nextBody(page)
   await page.goBack()
   await nextBody(page)
 
-  assert.notOk(await hasSelector(page, "#flash"))
+  assert.notOk(await hasSelector(page, "#temporary"))
 })
 
-test("test following a redirect renders a [data-turbo-cache=false] element before the cache omits it", async ({
-  page,
-}) => {
+test("test removes temporary elements with deprecated turbo-cache=false selector", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/cache_observer.html")
+
+  assert.equal(await page.textContent("#temporary-with-deprecated-selector"), "data-turbo-cache=false")
+
+  await page.click("#link")
+  await nextBody(page)
+  await page.goBack()
+  await nextBody(page)
+
+  assert.notOk(await hasSelector(page, "#temporary-with-deprecated-selector"))
+})
+
+test("test following a redirect renders [data-turbo-temporary] elements before the cache removes", async ({ page }) => {
   await page.goto("/src/tests/fixtures/navigation.html")
   await page.click("#redirect-to-cache-observer")
   await nextBody(page)
 
-  assert.equal(await page.textContent("#flash"), "Rendering")
+  assert.equal(await page.textContent("#temporary"), "data-turbo-temporary")
 })