#After adding transition to layout all components script was disabling

1 messages · Page 1 of 1 (latest)

vagrant boltBOT
#

Hi @graceful trout. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It seems that after adding view transitions to your layout, the scripts in your components stopped working. This is a known behavior when using Astro's view transitions. Let me explain why this happens and how you can address it.

When you add view transitions to an Astro project, some scripts may no longer re-run after page navigation as they did with full-page browser refreshes. This is because of how Astro handles script execution during client-side routing.

To ensure your scripts run as expected with view transitions, you need to make some adjustments. Here are a few ways to address this issue:

  1. Use event listeners for lifecycle events:
    Wrap your script in an event listener for astro:page-load. This event runs at the end of page navigation, ensuring your script executes after each navigation. Here's an example:

    <script>
document.addEventListener('astro:page-load', () => {
  // Your script code here
});
</script>

  2. Use the data-astro-rerun attribute:
    For inline scripts that you want to re-execute after every transition, add the data-astro-rerun property. This is only available for inline scripts:

    <script is:inline data-astro-rerun>
  // Your script code here
</script>

  3. Check for global state:
    If your script sets up a global state, you need to account for the fact that the script might execute more than once:

    <script is:inline>
  if (!window.SomeGlobal) {
    window.SomeGlobal = {} // Initialize your global state
  }
</script>

In your specific case, you might want to modify your script inclusion like this:

<script is:inline data-astro-rerun>
  // Include your script content here instead of using src
</script>

Or, if you prefer keeping your script in a separate file:

# 
<script>
document.addEventListener('astro:page-load', () => {
  // Load and execute your script here
  const script = document.createElement('script');
  script.src = "../assets/js/main.js";
  document.body.appendChild(script);
});
</script>

These adjustments should help ensure that your scripts run properly with view transitions enabled.

For more detailed information on script behavior with view transitions, you can refer to the Astro documentation on Script behavior with view transitions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@graceful trout Kapa.ai is still learning and improving, please let me know how I did by reacting below.

graceful trout
#

I have component in header and after transition it's not work
<button id="theme-toggle" class="btn p-2">
<svg id="theme-icon" width="24" height="24">
<use xlink:href="#icon-day"></use>
</svg>
</button>

<script is:inline data-astro-rerun>
document.addEventListener('astro:page-load', () => {

function toggleTheme() {
    const body = document.body
    const currentTheme = body.getAttribute('data-bs-theme') || 'dark'
    const newTheme = currentTheme === 'light' ? 'dark' : 'light'

    body.setAttribute('data-bs-theme', newTheme)
    localStorage.setItem('theme', newTheme)
    updateIcon(newTheme)
}

function updateIcon(theme) {
    const icon = document.getElementById('theme-icon')
    const iconUse = icon.querySelector('use')
    iconUse.setAttribute('xlink:href', theme === 'dark' ? '#icon-night' : '#icon-day')
}

document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'dark'
    document.body.setAttribute('data-bs-theme', savedTheme)
    updateIcon(savedTheme)

    document.getElementById('theme-toggle').addEventListener('click', toggleTheme)
})

})
</script>