freekrai/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Add it to the body
<body hx-ext="hx-astro-view-transition">
An example
<form
        hx-post="/api/signIn"
        hx-view-transition="/"
        hx-swap="none"
      >
Note: if you are using SSR
You might want to add the following in the layout.astro:
Astro.response.headers.set(
  "Cache-Control",
  "no-cache, no-store, must-revalidate",
);
Astro.response.headers.set("Pragma", "no-cache");
Astro.response.headers.set("Expires", "0");

  
## 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),
);
	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),
	);