diff --git a/packages/svelte/src/internal/client/dom/task.js b/packages/svelte/src/internal/client/dom/task.js
index 48a2fbe660..b639555cd0 100644
--- a/packages/svelte/src/internal/client/dom/task.js
+++ b/packages/svelte/src/internal/client/dom/task.js
@@ -1,4 +1,5 @@
import { run_all } from '../../shared/utils.js';
+import { is_flushing_sync } from '../reactivity/batch.js';
// Fallback for when requestIdleCallback is not available
const request_idle_callback =
@@ -24,11 +25,15 @@ function run_idle_tasks() {
run_all(tasks);
}
+export function has_pending_tasks() {
+ return micro_tasks.length > 0 || idle_tasks.length > 0;
+}
+
/**
* @param {() => void} fn
*/
export function queue_micro_task(fn) {
- if (micro_tasks.length === 0) {
+ if (micro_tasks.length === 0 && !is_flushing_sync) {
queueMicrotask(run_micro_tasks);
}
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
index a6111f956a..e647f478be 100644
--- a/packages/svelte/src/internal/client/reactivity/batch.js
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -25,7 +25,7 @@ import {
update_effect
} from '../runtime.js';
import * as e from '../errors.js';
-import { flush_tasks } from '../dom/task.js';
+import { flush_tasks, has_pending_tasks, queue_micro_task } from '../dom/task.js';
import { DEV } from 'esm-env';
import { invoke_error_boundary } from '../error-handling.js';
import { old_values } from './sources.js';
@@ -56,19 +56,6 @@ export let batch_deriveds = null;
/** @type {Set<() => void>} */
export let effect_pending_updates = new Set();
-/** @type {Array<() => void>} */
-let tasks = [];
-
-function dequeue() {
- const task = /** @type {() => void} */ (tasks.shift());
-
- if (tasks.length > 0) {
- queueMicrotask(dequeue);
- }
-
- task();
-}
-
/** @type {Effect[]} */
let queued_root_effects = [];
@@ -76,7 +63,7 @@ let queued_root_effects = [];
let last_scheduled_effect = null;
let is_flushing = false;
-let is_flushing_sync = false;
+export let is_flushing_sync = false;
export class Batch {
/**
@@ -418,6 +405,8 @@ export class Batch {
if (this.#pending === 0) {
Batch.enqueue(() => {
+ this.activate();
+
for (const e of this.#dirty_effects) {
set_signal_status(e, DIRTY);
schedule_effect(e);
@@ -469,11 +458,7 @@ export class Batch {
/** @param {() => void} task */
static enqueue(task) {
- if (tasks.length === 0) {
- queueMicrotask(dequeue);
- }
-
- tasks.unshift(task);
+ queue_micro_task(task);
}
}
@@ -504,7 +489,7 @@ export function flushSync(fn) {
while (true) {
flush_tasks();
- if (queued_root_effects.length === 0) {
+ if (queued_root_effects.length === 0 && !has_pending_tasks()) {
current_batch?.flush();
// we need to check again, in case we just updated an `$effect.pending()`
@@ -690,5 +675,4 @@ export function suspend() {
*/
export function clear() {
batches.clear();
- tasks.length = 0;
}
diff --git a/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
index 7ad653433c..f1ca4eadbb 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
@@ -5,6 +5,8 @@ export default test({
async test({ assert, target }) {
const [b1, b2, b3] = target.querySelectorAll('button');
+ await Promise.resolve();
+
// not flushing means we wait a tick before showing the pending state ...
b2.click();
await Promise.resolve();
@@ -45,6 +47,7 @@ export default test({
);
// when not flushing ...
+ await Promise.resolve();
b3.click();
await Promise.resolve();
assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js b/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
index 88f1b1e961..d8da208599 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
export default test({
async test({ assert, target, logs }) {
const [b1, b2, b3, b4] = target.querySelectorAll('button');
+ await Promise.resolve();
b1.click();
await Promise.resolve();
b2.click();
diff --git a/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js b/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
index 11a645673a..e8574c3295 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
export default test({
async test({ assert, target, logs }) {
const [b1, b2] = target.querySelectorAll('button');
+ await Promise.resolve();
b1.click();
await Promise.resolve();
assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
index 9c741d2b8c..19f0c38227 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
@@ -5,7 +5,8 @@ export default test({
async test({ assert, target, raf }) {
const btn = target.querySelector('button');
- raf.tick(0);
+ // one tick to not be at 0. Else the flushSync would revert the in-transition which hasn't started, and directly remove the button
+ raf.tick(1);
flushSync(() => {
btn?.click();
@@ -13,7 +14,7 @@ export default test({
assert.htmlEqual(target.innerHTML, `Outside
`);
- raf.tick(100);
+ raf.tick(101);
assert.htmlEqual(target.innerHTML, `Outside
`);
}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
index 9c741d2b8c..19f0c38227 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
@@ -5,7 +5,8 @@ export default test({
async test({ assert, target, raf }) {
const btn = target.querySelector('button');
- raf.tick(0);
+ // one tick to not be at 0. Else the flushSync would revert the in-transition which hasn't started, and directly remove the button
+ raf.tick(1);
flushSync(() => {
btn?.click();
@@ -13,7 +14,7 @@ export default test({
assert.htmlEqual(target.innerHTML, `Outside
`);
- raf.tick(100);
+ raf.tick(101);
assert.htmlEqual(target.innerHTML, `Outside
`);
}