scheduling

Author: dummdidumm

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);
 	}
 

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,27 +56,14 @@ 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 = [];
 
 /** @type {Effect | null} */
 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;
 }

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(

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();

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(

packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js

@@ -5,15 +5,16 @@ 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();
 		});
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
-		raf.tick(100);
+		raf.tick(101);
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
 	}

packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js

@@ -5,15 +5,16 @@ 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();
 		});
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
-		raf.tick(100);
+		raf.tick(101);
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
 	}