Render issue when using Astro View Transitions

[michaelfester]

Describe the bug

Reported by email:

I did just run into one issue with @markprompt/web package specifically. I just enabled View Transitions that Astro just released and the web component isn't playing nicely with them. The search does not get re-rendered after the SPA- page navigation.

The preact package works just fine, I've attached videos of the behaviour. You can see the issue on our live page https://threlte.xyz/docs/reference/extras/getting-started after opening search, then navigating to another page and opening the search again.
Our component is written in svelte, but I've also tried including the most basic markprompt component via raw <script> tags and the issue persisted.

What I think is happening is:

• markprompt/web is somehow limited to 1 component instance render per page load
• since we use View Transitions (effectively SPA) - the reload never happens
• initial divContainer gets replaced with newDivContainer
• markprompt uses global scope, so the reference to original container never gets cleared so a new render does not happen

Since we use Astro, we can combine Svelte+React on the same page, but it'd be the only react component on our page so it's something I wanted to avoid (not a big deal though). If my understanding of the issue is correct, then an API solution like this could work well:

a - boolean to always trigger reload when constructor is called
b - callback based on internals you expose
c - markprompt constructor returns an object with a .reload() function

We are probably going to build our own search component soon, I just didn't have the time for it. Since we're a 3D library, I wanted a pet assistant with some cool micro interactions etc, like MS Word's old Clippy - there was even a very early prototype but juicy animated 3D interactions take some time :)