View Transitions reloading JS (not persisting)

[Brian-McBride]

Astro Info

Astro                    v3.4.0
Node                     v20.5.1
System                   macOS (arm64)
Package Manager          unknown
Output                   hybrid
Adapter                  @astrojs/node
Integrations             @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I just created a new Astro project. Very simple:
https://github.com/Brian-McBride/astro-persist-failure

In this example, there are a few pages. Each shares a navigation react component.

Visually, things are working ok. However, each time a page loads, it completely re-runs the Javascript from the React component. This seems to be when the client is set to "only." By re-run, this includes all the JS. I am not just talking about the component.

---
import Nav from '../components/Nav';
import Layout from '../layouts/Layout.astro';
---

<Layout title="Page One">
  <main class="flex flex-col items-center justify-center p-4 gap-4">
    <Nav client:only="react" transition:persist="Nav" />
    <h1 class="text-2xl text-blue-800 dark:text-blue-200">Home Page</h1>
  </main>
</Layout>

If I set it to <Nav client:load ... /> it seems to work more as expected. I should only have javascript run once, even on a page transition, if the component is set to persist.

What's the expected result?

The JS should only execute once when persisting.

Link to Minimal Reproducible Example

https://github.com/Brian-McBride/astro-persist-failure

Participation

• I am willing to submit a pull request for this issue.

[martrapp]

Hi @Brian-McBride, thanks for your minimal example!
The effect you are observing only occurs in DEV mode.
With the production build, you will only see a single initialization of the component on first load.

The effect you are observing is due to a feature introduced in Astro 3.3.3.
In DEV mode, additional instances of the client:only components are created in a separate module loader to figure out which stylesheets need to be persisted along with the component.
Therefore, the log statements you see during the transition are not from your persisted component, but from these probes. Whatever happens on the client side during the creation of these additional components should be isolated in that other loader. However, you may indeed observe more requests to the server and additional log statements.

I'm sorry if this has caused confusion. Do you have any technical issues arising from the new approach that we can help with?

[martrapp]

@Brian-McBride we have now silenced the console to get rid of the irritating messages while we look for client-only stylesheets.

[Brian-McBride]

So, what I have going on is that I have an island that persists. Well, a number of them. Each is a slice of "state" using nanostores and for more complex logic, xstate.

What I am seeing is that all these are getting re-init on the client on route change. I have a site with an app in it. The app part, I want to be pretty SPA/PWA style.

I think I am hearing that the stylesheet is running the JS on each page transition but completely sandboxed? I ask as the nanostores library drops stuff on the Global object for, well, global access.

[martrapp]

@Brian-McBride What you are experiencing may be effects of the way transition:persist works: the persisted elements will be moved from the old DOM to the new DOM during transitions. They will be unmounted from one DOM and then be mounted into another DOM. The states of the persisted elements should not change. Do your componets use react mounting lifecycle methods?

Please try again with Astro 3.4.1.
What exactly are the negative effects you are noticing?
Could you provide another example that illustrates the issues with state?