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

Proposal: pass isPreview value into the event detail in render events #926

Merged
merged 1 commit into from Aug 24, 2023

Conversation

Matt-Yorkley
Copy link
Contributor

@Matt-Yorkley Matt-Yorkley commented May 24, 2023

Passes the renderer's isPreview attribute into the event detail on 'turbo:before-render' and 'turbo:render' events.

isPreview signifies whether the content currently being rendered is from the turbo cache or not, and this bit of information is very useful for any listeners that might want to act on those two events differently for cached or non-cached content.

Eg, the following listeners:

document.addEventListener("turbo:before-render", (event) => {
  console.log("turbo:before-render")
  console.log(event.detail)
})

document.addEventListener("turbo:render", (event) => {
  console.log("turbo:render")
  console.log(event.detail)
})

now produce these event details (when navigating to a page that has a cache entry, both events fire twice):
Screenshot from 2023-05-24 13-35-12

So it's now possible to do things like...

document.addEventListener("turbo:before-render", (event) => {
  if (event.detail.isPreview) {
    resetTheThings()
    modifyTurboCachedContent(event.detail.newBody)
  } else {
    modifyFinalContent(event.detail.body)
  }
})

…nd 'turbo:render' events.

isPreview signifies whether the content currently being rendered is from the turbo cache or not, and this bit of information is very useful for any listeners that might want to act on those two events differently for cached or non-cached content.
@afcapel afcapel merged commit 889ebe7 into hotwired:main Aug 24, 2023
@afcapel
Copy link
Collaborator

afcapel commented Aug 24, 2023

Looks good, thanks @Matt-Yorkley 👍

@domchristie
Copy link
Contributor

Could this be inferred from html[data-turbo-preview] attribute?:

document.addEventListener("turbo:before-render", () => {
  console.log("turbo:before-render")
  console.log(document.documentElement.hasAttribute('data-turbo-preview'))
})

document.addEventListener("turbo:render", () => {
  console.log("turbo:render")
  console.log(document.documentElement.hasAttribute('data-turbo-preview'))
})

@afcapel
Copy link
Collaborator

afcapel commented Oct 3, 2023

@Matt-Yorkley @domchristie is making a good point. Can you use data-turbo-preview instead?

@Matt-Yorkley
Copy link
Contributor Author

@Matt-Yorkley @domchristie is making a good point. Can you use data-turbo-preview instead?

Ah, I must have missed data-turbo-preview in the documentation. Yeah, @domchristie's comment about preferring to store state in the DOM sounds good #1007 (comment)

domchristie added a commit to domchristie/turbo that referenced this pull request Jan 9, 2024
It is not necessary to pass along isPreview through various methods in order to determine whether a render is a preview since that can be determined via the data-turbo-preview attribute. (As discussed in hotwired#926 (comment))
domchristie added a commit to domchristie/turbo that referenced this pull request Jan 9, 2024
It is not necessary to pass along isPreview through various methods in order to determine whether a render is a preview since that can be determined via the data-turbo-preview attribute. (As discussed in hotwired#926 (comment))
afcapel pushed a commit that referenced this pull request Jan 22, 2024
It is not necessary to pass along isPreview through various methods in order to determine whether a render is a preview since that can be determined via the data-turbo-preview attribute. (As discussed in #926 (comment))
afcapel added a commit to pfeiffer/turbo that referenced this pull request Jan 29, 2024
* origin/main:
  Introduce `turbo:{before-,}morph-{element,attribute}` events
  Turbo 8.0.0-beta.4
  Introduce data-turbo-track="dynamic" (hotwired#1140)
  Ensure that the turbo-frame header is not sent when the turbo-frame has a target of _top (hotwired#1138)
  Turbo 8.0.0-beta.3
  Fix attribute name (hotwired#1134)
  Add InstantClick behavior (hotwired#1101)
  Revert hotwired#926. (hotwired#1126)
  Keep Trix dynamic styles in the head (hotwired#1133)
  Remove unused stylesheets when navigating (hotwired#1128)
  Upgrade idiomorph to 0.3.0 (hotwired#1122)
  Debounce page refreshes triggered via Turbo streams
  Update copyright year to 2024 (hotwired#1118)
  Turbo 8.0.0-beta.2
  Set aria-busy on the form element during a form submission (hotwired#1110)
  Dispatch `turbo:before-fetch-{request,response}` during preloading (hotwired#1034)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants