Created an HTMX extension for astro 3.0 view transition #1761

AceCodePt · 2023-09-04T16:26:58Z

My Take: Why?

This is my way to thanks HTMX for making my life much easier.
I would like to make HTMX more relevant in this modern framework based era.
I also think that having some sense of animations to HTMX looks pretty. (I couldn't find one that did the same using HTMX)

How?

This is currently how the extension is defined.
You can copy and paste or use a gist.

<script>
      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) {
              return;
            }
            const a = document.createElement("a");
            a.href = 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
      document.addEventListener("astro:after-swap", () =>
        htmx.process(document),
      );
    </script>

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");

AceCodePt changed the title ~~I created an extension for astro 3.0 view transition~~ I created an HTMX extension for astro 3.0 view transition Sep 4, 2023

AceCodePt changed the title ~~I created an HTMX extension for astro 3.0 view transition~~ Created an HTMX extension for astro 3.0 view transition Sep 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Created an HTMX extension for astro 3.0 view transition #1761

Created an HTMX extension for astro 3.0 view transition #1761

AceCodePt commented Sep 4, 2023 •

edited

Loading

Created an HTMX extension for astro 3.0 view transition #1761

Created an HTMX extension for astro 3.0 view transition #1761

Comments

AceCodePt commented Sep 4, 2023 • edited Loading

My Take: Why?

How?

Note: if you are using SSR

AceCodePt commented Sep 4, 2023 •

edited

Loading