bug: JS components stop working once Astro View transitions are enabled

[bamanczak]

What version of FlyonUI are you using?

2.0.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://codesandbox.io/p/github/bamanczak/flyonui-astro-integration/main?import=true

Describe your issue

Steps to reproduce

1. Enable view Transitions (https://docs.astro.build/en/guides/view-transitions/) in Flyonui + astro starter (https://github.com/themeselection/flyonui-astro-integration)
2. npm run dev
3. Open localhost
4. Switch pages

Actual result
On first page view all components work as expected
once I navigate to a different page, JS components stop working

Expected results
everything works always :)

Visible in codesandbox: https://codesandbox.io/p/github/bamanczak/flyonui-astro-integration/main?import=true
Based on fork with just 1 commit ahead of the original main https://github.com/bamanczak/flyonui-astro-integration

[github-actions]

Hi @bamanczak

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @bamanczak ,

The issue you're encountering appears to be related to the use of ClientRouter in your project. Essentially, when the router changes due to a link transition, the page refreshes, and the autoInit method is triggered by default.
However, since you're utilizing ClientRouter, you need to explicitly call the autoInit method to initialize the necessary components.
To address this, please add the following script to the src/layouts/Layout.astro page:

<script>
  document.addEventListener('astro:page-load', () => {
    setTimeout(() => {
      if (window.HSStaticMethods && typeof window.HSStaticMethods.autoInit === 'function') {
        window.HSStaticMethods.autoInit();
      }
    }, 100);
  });
</script>

This approach ensures that the autoInit method is reliably called after each route transition, allowing your components to function as expected.

~Best regards,

[bamanczak]

Thank you @yagnikvamja . This approach indeed fixes my issue!