htmx-astro-view-transition

hx-astro-view-transition.js

htmx.defineExtension("hx-astro-view-transition", {
  onEvent: function (name, evt: any) {
    if (name === "htmx:afterRequest") {
      const attributes = evt.target.attributes;
      const viewTransitionTarget =
        attributes["hx-view-transition"]?.value;
      if (!viewTransitionTarget) {
        console.log(evt);
        return;
      }
      const a = document.createElement("a");
      a.href = viewTransitionTarget;
      console.count(viewTransitionTarget);
      document.body.appendChild(a);
      a.dispatchEvent(
        new PointerEvent("mouseenter", {
          bubbles: true,
          cancelable: true,
        }),
      );
      a.dispatchEvent(
        new PointerEvent("click", {
          bubbles: true,
          cancelable: true,
        }),
      );
    }
  },
});
// Runs on view transitions navigation + process the new HTML
document.addEventListener("astro:after-swap", () =>
  htmx.process(document),
);