Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add [method] and [scroll] attributes for Refresh Stream #1208

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/core/drive/navigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export class Navigator {
} else {
await this.view.renderPage(snapshot, false, true, this.currentVisit)
}
if(!snapshot.shouldPreserveScrollPosition) {
if (snapshot.refreshScroll !== "preserve") {
this.view.scrollToTop()
}
this.view.clearSnapshotCache()
Expand Down
8 changes: 4 additions & 4 deletions src/core/drive/page_snapshot.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ export class PageSnapshot extends Snapshot {
return this.headSnapshot.getMetaValue("view-transition") === "same-origin"
}

get shouldMorphPage() {
return this.getSetting("refresh-method") === "morph"
get refreshMethod() {
return this.getSetting("refresh-method")
}

get shouldPreserveScrollPosition() {
return this.getSetting("refresh-scroll") === "preserve"
get refreshScroll() {
return this.getSetting("refresh-scroll")
}

// Private
Expand Down
6 changes: 4 additions & 2 deletions src/core/drive/page_view.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ export class PageView extends View {
}

renderPage(snapshot, isPreview = false, willRender = true, visit) {
const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage
const refreshMethod = visit?.refresh?.method || this.snapshot.refreshMethod
const shouldMorphPage = this.isPageRefresh(visit) && refreshMethod === "morph"
const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer

const renderer = new rendererClass(this.snapshot, snapshot, rendererClass.renderElement, isPreview, willRender)
Expand Down Expand Up @@ -60,7 +61,8 @@ export class PageView extends View {
}

shouldPreserveScrollPosition(visit) {
return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition
const refreshScroll = visit?.refresh?.scroll || this.snapshot.refreshScroll
return this.isPageRefresh(visit) && refreshScroll === "preserve"
}

get snapshot() {
Expand Down
7 changes: 5 additions & 2 deletions src/core/drive/visit.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ const defaultOptions = {
willRender: true,
updateHistory: true,
shouldCacheSnapshot: true,
acceptsStreamResponse: false
acceptsStreamResponse: false,
refresh: {}
}

export const TimingMetric = {
Expand Down Expand Up @@ -72,7 +73,8 @@ export class Visit {
updateHistory,
shouldCacheSnapshot,
acceptsStreamResponse,
direction
direction,
refresh
} = {
...defaultOptions,
...options
Expand All @@ -92,6 +94,7 @@ export class Visit {
this.shouldCacheSnapshot = shouldCacheSnapshot
this.acceptsStreamResponse = acceptsStreamResponse
this.direction = direction || Direction[action]
this.refresh = refresh
}

get adapter() {
Expand Down
5 changes: 3 additions & 2 deletions src/core/session.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,11 @@ export class Session {
}
}

refresh(url, requestId) {
refresh(url, options = {}) {
const { method, requestId, scroll } = options
const isRecentRequest = requestId && this.recentRequests.has(requestId)
if (!isRecentRequest && !this.navigator.currentVisit) {
this.visit(url, { action: "replace", shouldCacheSnapshot: false })
this.visit(url, { action: "replace", shouldCacheSnapshot: false, refresh: { method, scroll } })
}
}

Expand Down
6 changes: 5 additions & 1 deletion src/core/streams/stream_actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ export const StreamActions = {
},

refresh() {
session.refresh(this.baseURI, this.requestId)
const method = this.getAttribute("method")
const requestId = this.requestId
const scroll = this.getAttribute("scroll")

session.refresh(this.baseURI, { method, requestId, scroll })
}
}
19 changes: 19 additions & 0 deletions src/tests/functional/page_refresh_tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,13 @@ test("uses morphing to update remote frames marked with refresh='morph'", async
await expect(page.locator("#refresh-reload")).toHaveText("Loaded reloadable frame")
})

test("overrides the meta value to render with replace when the Turbo Stream has [method=replace] attribute", async ({ page }) => {
await page.goto("/src/tests/fixtures/page_refresh.html")

await page.evaluate(() => document.body.insertAdjacentHTML("beforeend", `<turbo-stream action="refresh" method="replace"></turbo-stream>`))
await nextEventNamed(page, "turbo:render", { renderMethod: "replace" })
})

test("don't refresh frames contained in [data-turbo-permanent] elements", async ({ page }) => {
await page.goto("/src/tests/fixtures/page_refresh.html")

Expand Down Expand Up @@ -242,6 +249,18 @@ test("it preserves the scroll position when the turbo-refresh-scroll meta tag is
await assertPageScroll(page, 10, 10)
})

test("overrides the meta value to reset the scroll position when the Turbo Stream has [scroll=reset] attribute", async ({ page }) => {
await page.goto("/src/tests/fixtures/page_refresh.html")

await page.evaluate(() => window.scrollTo(10, 10))
await assertPageScroll(page, 10, 10)

await page.evaluate(() => document.body.insertAdjacentHTML("beforeend", `<turbo-stream action="refresh" scroll="reset"></turbo-stream>`))
await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })

await assertPageScroll(page, 0, 0)
})

test("it does not preserve the scroll position on regular 'advance' navigations, despite of using a 'preserve' option", async ({ page }) => {
await page.goto("/src/tests/fixtures/page_refresh.html")

Expand Down
Loading