Skip to content

Commit b7e7034

Browse files
committed
Merge remote-tracking branch 'origin/main' into derived-reactions-maybe-dirty-marked
2 parents 863f6c1 + fd08cb0 commit b7e7034

File tree

4 files changed

+51
-0
lines changed

4 files changed

+51
-0
lines changed

.changeset/flat-points-kick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect

packages/svelte/src/internal/client/runtime.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -688,6 +688,13 @@ export function flushSync(fn) {
688688
flush_tasks();
689689

690690
if (queued_root_effects.length === 0) {
691+
// this would be reset in `flush_queued_root_effects` but since we are early returning here,
692+
// we need to reset it here as well in case the first time there's 0 queued root effects
693+
is_flushing = false;
694+
last_scheduled_effect = null;
695+
if (DEV) {
696+
dev_effect_stack = [];
697+
}
691698
return /** @type {T} */ (result);
692699
}
693700

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ok, test } from '../../test';
2+
3+
export default test({
4+
async test({ assert, target }) {
5+
const btn = target.querySelector('button');
6+
const main = target.querySelector('main');
7+
ok(main);
8+
console.log(main.innerHTML);
9+
assert.htmlEqual(main.innerHTML, `<div>true</div>`);
10+
// we don't want to use flush sync (or tick that use it inside) since we are testing that calling `flushSync` once
11+
// when there are no scheduled effects does not cause reactivity to break
12+
btn?.click();
13+
await Promise.resolve();
14+
assert.htmlEqual(main.innerHTML, `<div>false</div> <div>false</div>`);
15+
}
16+
});
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
import { flushSync } from 'svelte'
3+
4+
let flag = $state(true)
5+
let test = $state(true);
6+
</script>
7+
8+
<button onclick={()=>{
9+
flushSync(() => {
10+
test = !test
11+
})
12+
13+
flag = !flag;
14+
}}>switch</button>
15+
16+
<main>
17+
<div>{flag}</div>
18+
19+
{#if !flag}
20+
<div>{test} </div>
21+
{/if}
22+
</main>
23+

0 commit comments

Comments
 (0)