Hot reloading index.html?

[simonbuchan]

I'm doing this trick in a prototype:

<div data-hook="foo-list" data-item="foo-item">Loading...</div>
<template id="foo-item">
  $bar
</template

// real code handles cleaning up
hooks.add("foo-list", (node) => {
  const item = template(node.datalist.item);
  watch(foos$, (foos) => {
    node.replaceChildren(...foos.map(item));
  });
});

Which works shockingly well with minimal code, just a MutationObserver and a root.querySelectorAll("not:(template) [data-hook]") and a bit of cleanup handling really, except that if I start messing with the HTML Vite (reasonably) reloads the whole page, where in this case it could simply swap out the content with something like document.replaceChildren() modulo script tags and the like.

The handleHotReload plugin hook does get .html updates, but returning [] doesn't disable the vite:full-reload event getting sent so this turns into #5763 . Is there any other option I'm missing here?

[simonbuchan]

So far I have a workaround based on throwing from vite:full-reload suggested in that issue, that seems to work ok but it's pretty gross:

if (import.meta.hot) {
  const preventHotReload = Symbol("prevent-hot-reload");
  import.meta.on("vite:beforeFullReload", ({ path }) => {
    if (path?.endsWith(".html")) {
      console.info("preventing hot reload");
      throw preventHotReload;
    }
  });
  // suppress error message
  addEventListener("unhandledrejection", (event) => {
    if (event.reason === preventHotReload) {
      event.preventDefault();
    }
  });

  // hot reload html
  import.meta.on("my:html-update", ({ content }) => {
    // dumbass approach
    const newDocument = new DOMParser().parseFromString(content, "text/html");
    document.body.replaceWith(newDocument.body);
  });

  // hot reload hooks...
}