mirror of https://github.com/sveltejs/svelte
fix: keep flushing new eager effects (#18102)
The previous code "swallowed" new additions to the array of eager effects that happened while flushing since `eager_flush` did not clear the array before running, only afterwards. Now it clears the beforehand, causing newly added eager effects to run, too. An example where this can happen is `$state.eager` and `$effect.pending` in combination: first `$state.eager` is flushed, then due to `flushSync` the `queue_micro_task` inside `boundary.js` that flushes `$effect.pending` is triggered synchronously, adding new entries to the `eager_versions` array. If they're only cleared at the end of `eager_flush`, new entries are swallowed. Related to #18095 (but not fixing it yet)pull/18111/head
parent
4a50e8ea3b
commit
273f1a85a4
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: keep flushing new eager effects
|
||||
@ -0,0 +1,35 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [increment, shift] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>increment</button>
|
||||
<button>shift</button>
|
||||
1
|
||||
<p>pending: 1</p>
|
||||
<p>loading...</p>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>increment</button>
|
||||
<button>shift</button>
|
||||
1
|
||||
<p>pending: 0</p>
|
||||
<p>1</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
let value = $state(0);
|
||||
let queued = [];
|
||||
|
||||
function delayed(v) {
|
||||
if (!v) return v;
|
||||
return new Promise((resolve) => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => value++}>increment</button>
|
||||
<button onclick={() => queued.shift()?.()}>shift</button>
|
||||
|
||||
{$state.eager(value)}
|
||||
|
||||
{#if 1}
|
||||
<p>pending: {$effect.pending()}</p>
|
||||
|
||||
{@const tmp = await delayed(value)}
|
||||
{#if $effect.pending() > 0}
|
||||
<p>loading...</p>
|
||||
{:else}
|
||||
<p>{tmp}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
Loading…
Reference in new issue