Reload page on boosted elements when assets change

[antonisgkamitsios]

The idea came to me after watching turbo's data-turbo-track="reload" feature. The idea behind it is if for some reason the server has generated new assets (js/css) and they are critical for our application we should reload the page so the user will see the last version (in case of css the merge algorithm from the htmx Head Tag Support Extension will probably do just fine but in case of js you might not need the old script to me removed and a new one to be loaded). I would like to hear your opinion if this is something that makes sense to be added in the htmx Head Tag Support Extension. I have been working on a prototype on a side project of mine the code looks like this.

const ASSETS_SELECTOR = `[data-track="reload"]`;

/**
 * assetWatcher listens to all htmx:beforeSwap events and checks if the current head's
 * elements tagged with `data-track="reload"` are equal with the response's head element tagged
 * with this attribute.
 * This is to make sure that we have the most current version of an asset in a case we are already on a page
 * and we click on a boosted link
 */
function assetsWatcher() {
  const stopSwapAndReload = (e: CustomEvent<HTMXBeforeSwapDetail>) => {
    e.detail.shouldSwap = false;
    window.location.href = e.detail.xhr.responseURL;
  };

  document.addEventListener('htmx:beforeSwap', (e: CustomEvent<HTMXBeforeSwapDetail>) => {
    if (!e.detail.boosted) {
      return;
    }

    const newHead = parseHTML(e.detail.serverResponse).querySelector('head');

    if (!newHead) {
      return;
    }

    const currentHead = document.querySelector('head')!;

    const currentSrcToAssetNodes = new Map<string, Element>();
    currentHead.querySelectorAll(ASSETS_SELECTOR).forEach((el) => {
      currentSrcToAssetNodes.set(el.outerHTML, el);
    });
    const responseTrackAssets = Array.from(newHead.querySelectorAll(ASSETS_SELECTOR));

    if (currentSrcToAssetNodes.size !== responseTrackAssets.length) {
      stopSwapAndReload(e);
      return;
    }

    for (let i = 0; i < responseTrackAssets.length; i++) {
      if (!currentSrcToAssetNodes.has(responseTrackAssets[i].outerHTML)) {
        stopSwapAndReload(e);
        return;
      }
    }
  });
}
export { assetsWatcher };