Custom rendering is incompatible with caching

[palkan]

Turbo version: 7.3.0

I tried using Turbo Drive with morphdom and encountered an issue with restoration visits ("Back" button).

Given the basic morphdom setup as per handbook:

import morphdom from "morphdom"

addEventListener("turbo:before-render", (event) => {
  event.detail.render = (currentElement, newElement) => {
    morphdom(currentElement, newElement)
  }
})

We see that going back always shows an incorrect page (it's lagging one page behind). I did some debugging and nailed down the problem—we call snapshot.clone() on the next tick, and it happens that during the next tick the document.body has been already morphed but still refers to the same DOM element as the one that is connected to the snapshot object; hence, calling clone() actually clones the new, updated DOM, not the previous version (as it should):

turbo/src/core/drive/page_view.ts

Line 50 in da647a6

await nextEventLoopTick()

This makes using morphdom (or any other custom rendering mechanism that preserves document.body) incompatible with caching.

The workaround I found is to add the same next tick hack to the render function:

addEventListener("turbo:before-render", (event) => {
  event.detail.render = async (currentElement, newElement) => {
    await new Promise((resolve) => setTimeout(() => resolve(), 0));

    morphdom(currentElement, newElement)
  }
})

That seems to work but doesn't look like a robust solution.

[s3ththompson]

I ran into the same issue and added the same (temporary) fix. If this fix is deterministic, it would be nice if it was handled internally. If it's not deterministic, then it seems like the turbo:before-render hook itself needs to be rethought since this behavior is definitely expected...

I also ran into a related issue: usually replacing DOM elements in the render function disconnects and reconnects Stimulus controllers (since the intersection observer registers the old and new DOM nodes changing). I had some Stimulus logic that relied on controllers reconnecting after every render. Once I added morphdom, I had to manually manage this lifecycle since the DOM nodes themselves don't change. This isn't necessarily something that can be handled internally by Turbo, but at the very least, it seems like it might be worth calling out in the documentation.

This is what my render function ended up looking like:

const application = Application.start();

async function nextEventLoopTick() {
  return new Promise((resolve) => setTimeout(() => resolve(), 0));
}

addEventListener("turbo:before-render", (event) => {
  event.detail.render = async (currentElement, newElement) => {
    await nextEventLoopTick();

    application.controllers.map((controller) => controller.disconnect());
    await nextEventLoopTick();

    morphdom(currentElement, newElement);
    await nextEventLoopTick();

    application.controllers.map((controller) => controller.connect());
  };
});