Using Swup with Astro and Alpinejs

[layout-ch]

Describe your problem 🧐

Hey there, I'm in a bit of a pickle and could use some help. So, I'm coming from BarbaJS and want to use Swup for my future clients. I've been digging through support tickets and saw that AlpineJS is the way to go with Astro - it's supposed to make handling JavaScript lifecycles a breeze. Never used it before, but I'm giving it a shot.

I whipped up a quick demo on my site to test things out. It's just a simple animation where the title on the about page spins when you hover over it. Here's the weird part: it works fine when I load the about page directly, but if I start from the home page and navigate to about, the JavaScript shits the bed. I'm getting an "Alpine expression error" saying "test is not defined" (test is what I named the thing).

I'm using Astro with Motion One for animations, and I'm trying to make this work with AlpineJS. Any ideas on how to get this working smoothly?

---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
---

<Layout title="Welcome to Astro.">
  <main id="home" x-data="test">
    <h1 class="title">WELCOME TO INDEX</h1>

    <ul role="list" class="link-card-grid">
      <Card href="/about" title="ABOUT" body="" />
    </ul>
  </main>
</Layout>

<script>
  //@ts-nocheck

  document.addEventListener("alpine:init", () => {
    Alpine.data("test", () => ({
      init() {
        const title = document.querySelector("#home h1");
        title.classList.add("hoverable");
        let animation = animate(
          "#home h1",
          { rotate: 360 },
          { duration: 16, easing: "linear", repeat: Infinity, autoplay: false }
        );

        title.addEventListener("mouseenter", () => {
          animation.play();
        });

        title.addEventListener("mouseleave", () => {
          animation.pause();
        });
      },
    }));
  });
</script>

What is your question? 🙋‍♀️

How can I get this AlpineJS hover animation to work properly when navigating between pages with Swup? I'm aiming for something neat and optimized that just works, you know? If you could throw some example code my way on how to set this up correctly with AlpineJS, that'd be awesome. I'm new to this whole AlpineJS thing, so any tips would be much appreciated.

URL to minimal reproduction 🔗

https://codesandbox.io/p/github/layout-ch/tech-stack-test/main?import=true&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm10wkiwd00063b6iyguchdlw%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm10wkiwd00023b6ijj6isnlx%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm10wkiwd00043b6ircn51qyy%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm10wkiwd00053b6i0m6cyy4h%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm10wkiwd00023b6ijj6isnlx%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm10wkiwd00013b6iczmlf34c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cm10wkiwd00023b6ijj6isnlx%2522%252C%2522activeTabId%2522%253A%2522cm10wkiwd00013b6iczmlf34c%2522%257D%252C%2522cm10wkiwd00053b6i0m6cyy4h%2522%253A%257B%2522id%2522%253A%2522cm10wkiwd00053b6i0m6cyy4h%2522%252C%2522activeTabId%2522%253A%2522cm10wku2x000s3b6iwr7gouu2%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522cm10wkkam000d3b6ijdmb8r76%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522ENV_SETUP%2522%252C%2522id%2522%253A%2522cm10wku2x000s3b6iwr7gouu2%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm10wkiwd00043b6ircn51qyy%2522%253A%257B%2522id%2522%253A%2522cm10wkiwd00043b6ircn51qyy%2522%252C%2522activeTabId%2522%253A%2522cm10wkiwd00033b6ixvy8enbm%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm10wkiwd00033b6ixvy8enbm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522NEW_TERMINAL%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cm10wknui000k3b6ivs708xpa%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

The simplest way of solving this would be by registering the component in the same file as the Alpine init code. Since Astro loads scripts asynchronously, it's hard to guarantee that the component is defined before the dom element is encounted by Alpine.

import Alpine from 'alpinejs'
import test from './alpine-components/test.js'
 
Alpine.data('test', test)
 
Alpine.start()

[layout-ch]

Hey Daun, thanks for the reply ! So if I wanna use Alpine.js with astro and swup I need to have all of the components in one single file?

[daun]

You can also have each component in a separate file and import them into your main js bundle for registering it. See the example above. The test component isn't defined in the main script, but in test.js. That way, you can still organize your components however you want.

[layout-ch]

Got it. I'll define components in separate files, not in .astro components. Last question: Do Alpine.js components with SWUP automatically unmount and clean up? Specifically, are event listeners and reactive bindings properly removed to prevent memory leaks during navigation? (sorry for asking so much questions that are not directly linked to SWUP but I wanna use SWUP the right way and its helping a lot 🙏🏼)

[daun]

Great question about the listeners. As far as I know, Alpine automatically removes event listeners and bindings when the element is removed from the dom. If you need to do some manual cleanup (custom listeners, timeouts, intervals), you can define a destroy function that gets called before the node is removed.

[layout-ch]

Okay great thanks 🙏🏼