Async component rendering bug with #each
#17074
Development PRs
Fixes #17074
When items are temporarily removed while async work is pending, the items can be added to skipped_effects but are not deleted later.
This is my first contribution so any feedback is appreciated and I'm happy to fix anything that needs changing.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
As noted in #17126, each blocks are a little buggy when there's async stuff involved. #16977 fixed a bunch of stuff around async blocks/branches, but excluded each blocks because, well, they're complicated. But the time has come to deal with it.
As the commit messages suggest this is very WIP — a bunch of tests are failing, and while it fixes part of the problem (item effects and the fallback effect both need to be created immediately inside the block effect, not later upon commit), it doesn't yet fix the problems relating to overlapping async batches. But I thought I'd open the PR in this unfinished state anyway. Pleasingly, so far it's a net reduction in code and complexity.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
The rendered state doesn't update. Not sure what the exact issue is.
Reproduction
<script>
let value = $state("Apple");
const foo = $derived(await value);
const bar = $derived(foo === value && [0]);
</script>
<select bind:value>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
{#each bar}
Selected fruit: {value}
{/each}Logs
System Info
Svelte playgroundSeverity
annoyance
Info
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)