Event turbo:before-render is fired twice, unless caching is disabled. about turbo HOT 7 OPEN

With Turbo 8.0.0.beta.2 it was possible to check event.detail.isPreview to handle no-cache and cache renderings, I wonder if now there is another way

from turbo.

@mdesantis thanks a lot for your input.
This property is not there anymore, but data-turbo-preview attribute is still there.

from turbo.

@mdesantis - yep, seems to work for now.
But in this particular case (animated transitions) supporting caching adds substantial challenges of it's own, and ignoring it is practically impossible

from turbo.

Ohhh. Yep, that works - thanks!

from turbo.

I see, so this is the workaround nowadays:

addEventListener("turbo:before-render", (event) => {
  event.detail.render = (currentElement, newElement) => {
    if (document.documentElement.hasAttribute("data-turbo-preview"))
      console.log('cache')
    else
      console.log('no cache')
  }
})

I wish Turbo exposed a stable API for this, so we don't have to cross the fingers every library update :D

from turbo.

Looks like the isPreview property got reverted here: bb735bf , although the docs still reference it here: https://turbo.hotwired.dev/reference/events#turbo%3Abefore-render

The alternative seems pretty unwieldy - you need to override event.detail.render? So really you'd need something like this:

document.addEventListener("turbo:before-render", function (e) {
  let ogRender = e.detail.render;
  e.detail.render = (...args: any[]) => {
    if (document.documentElement.hasAttribute("data-turbo-preview")) {
      console.log("preview");
    } else {
      console.log("no preview");
    }
    return ogRender(...args);
  };
});

from turbo.

You don't need to override event.detail.render() at all; this should work at the start of a turbo:before-render handler:

// Don't do anything if this is a cached preview being shown.
if (event.target.hasAttribute('data-turbo-preview') === true) {
  return;
}

from turbo.