Turbo drive page reload on backend changes.

[mtomov]

Currently, vite does a full page refresh when receiving a full-reload websocket message from the server. This has a jarring effect on the page, as it needs to wait for the JS to load, etc..

I was thinking if we could use Turbo to just bring the new html in, and replace the body instead of location.reload().

Managed to get it working, and our team has been using for a few weeks now. You could even use it when making changes to .rb models, such as components. Just configure the file patterns using the FullReload plugin.

Add to your main entrypoint, such as application.js

if (import.meta.hot) {
  import.meta.hot.on("vite:beforeFullReload", (payload) => {
    // Hack to skip the reload of the page
    // See https://github.com/vitejs/vite/blob/f402cd278c861e6351b27966d4f98bbb8bc34673/packages/vite/src/client/client.ts#L229
    payload.path = "wont_match_current_path.html"

    Turbo.cache.clear()

    // Maintain scroll position
    const scrollTop = document.documentElement.scrollTop
    addEventListener(
      "turbo:visit",
      () => {
        document.documentElement.scrollTop = scrollTop
      },
      { once: true }
    )

    Turbo.visit(location.pathname, { action: "replace" })
  })
}

I thought I need to add a setTimeout around Turbo.visit to give templates time to regenerate, but after removing it, it still seems to work.

Would love to wrap this in a plugin. I took a look at the documentation, and it seems like I'd need to use transform to add this additional frontend code to one of the files. If anyone has something more concrete as a base, would be interested to learn.