diff --git a/src/observers/cache_observer.ts b/src/observers/cache_observer.ts index 23978997b..73d7707f7 100644 --- 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 = ((_event: TurboBeforeCacheEvent) => { - const staleElements = [...document.querySelectorAll('[data-turbo-cache="false"]')] - - for (const element of staleElements) { + removeTemporaryElements = ((_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 index 57c8da4e8..5ad72b190 100644 --- a/src/tests/fixtures/cache_observer.html +++ b/src/tests/fixtures/cache_observer.html @@ -9,7 +9,8 @@

Cache Observer

-
Rendering
+
data-turbo-temporary
+
data-turbo-cache=false

rendering

diff --git a/src/tests/functional/cache_observer_tests.ts b/src/tests/functional/cache_observer_tests.ts index 0b61fc7ee..99441d6ae 100644 --- 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") })