svelte {@html} not reactive since Astro view transitions enabled

[mef]

Astro Info

Astro                    v4.5.17
Node                     v20.6.1
System                   Linux (x64)
Package Manager          unknown
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/svelte
                         astrojs-service-worker

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

N/A

Describe the Bug

The @html svelte directive is not reactive when Astro view transitions are enabled.

This happens for a variable someVariable getting its value from a Svelte store. A component displaying someVariable is used across multiple pages.

{@html someVariable} is correctly updated whenever `someVariable changes in a page.

However, when navigating across pages, which contain the component, {@html someVariable} is not shown in the destination page. If I swap it with a {someVariable}, then the correct content is displayed.

The problematic code was working perfectly fine with Astro 2.x, before view transitions were activated (i.e. with full page navigation).

What's the expected result?

{@html someVariable} correctly renders the variable content after navigating to the page via a hyperlink, when astro view transitions are enabled.

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/mutable-sky-59glz7?file=%2FREADME.md

Participation

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

[matthewp]

I think your devbox is private. Please make it public or use one of these templates: https://astro.new/latest

[github-actions]

Hello @mef. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[mef]

I think your devbox is private. Please make it public or use one of these templates: https://astro.new/latest

Thanks, indeed, the URL was incorrect. I just edited the post to include the correct one.

[matthewp]

Thanks

[matthewp]

@mef What am I missing? It appears to be working.

Area.mp4

[mef]

@matthewp you are correct, the provided code works as expected right now.

I am really confused, as when I wrote this reproduction scenario it showed the buggy behaviour. Apologies for the mix-up and the time wasted.

The problem is still present inside my production code, but I have not been able to isolate the minimal part displaying the issue.

I propose that we close this issue, I'll refactor my code some day to generate the html in a svelte component rather than inside a Javascript string + @html.

Thanks for your patience and support.

[martrapp]

Closed as suggested by @mef in the previous comment