Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro islands not reactive when used within slots that are passed props #8212

Closed
1 task
salami-art opened this issue Aug 24, 2023 · 0 comments · Fixed by #10219
Closed
1 task

Astro islands not reactive when used within slots that are passed props #8212

salami-art opened this issue Aug 24, 2023 · 0 comments · Fixed by #10219
Assignees
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) pkg: integration Related to any renderer integration (scope)

Comments

@salami-art
Copy link

What version of astro are you using?

2.10.12

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

As you can see in the repro link, when adding an astro island within a slot that is passed props ( i.e. <WithSlot>{(foo) => <Demo client:load />}</WithSlot>), the client scripts responsible for making the island reactive ( in my case, svelte.js ) are not downloaded and the island is not "reactive" ( it keeps whatever is rendered on the server and cannot become reactive on the client ).

The issue only occurs when the island within the slot is the only island on the page, if another instance of the same island is added outside the slot, the one within the slot will become reactive as well, because islands outside the slot will trigger the client scripts to be downloaded.

What's the expected result?

I expect astro islands to work normally inside slots, even if I'm not adding more islands outside the slots

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-w2ovbf-6tozmd?file=src%2Fpages%2Findex.astro,src%2Fcomponents%2FDemo.svelte

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Aug 24, 2023
@natemoo-re natemoo-re added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Aug 24, 2023
@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Aug 24, 2023
@natemoo-re natemoo-re added pkg: integration Related to any renderer integration (scope) needs triage Issue needs to be triaged and removed needs triage Issue needs to be triaged labels Aug 24, 2023
@matthewp matthewp self-assigned this Feb 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) pkg: integration Related to any renderer integration (scope)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants