Preserving Web Component state with `hx-preserve` on browser navigation about htmx HOT 1 OPEN

Okay, so I found out that other SPA routers are simply overriding the browser's window.onpopstate callback function to manipulate the DOM manually. And you can obviously do that, too, and then simply call htmx's ajax() function to mimic the behavior of hx-boost, like so:

window.onpopstate = () => htmx.ajax("GET", window.location.pathname);

I created another CodeSandbox example with this solution for demonstration purposes.

Another approach I found is to use the experimental Navigation API. Using this, it is possible to drop hx-boost entirely and just listen to the navigate event of this API, like so:

window.navigation.addEventListener("navigate", (event) => {
    if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) {
        return;
    }

    event.intercept({
        async handler() {
            const url = new URL(event.destination.url);
            await htmx.ajax("GET", url.pathname);
        },
    });
});

However, as of right now the Navigation API is not supported by Firefox and Safari. So it's only really an option in the future.

Now, the solution to this problem isn't complicated, but it actually wasn't that easy to find (at least for me), so it may be nice to have this functionality built into htmx in some form or another or at least have the docs mention it somewhere.

from htmx.