chore: simplify flushing (#15348)

Rich-Harris · web-flow · commit 51337f22bddc · 2025-02-24T08:49:33.000-05:00
* this appears to be unnecessary * DRY out * this doesnt appear to do anything useful * simplify * remove unused if block * simplify, make non-recursive * unused * DRY * simplify * tidy up * simplify * changeset * unused * Revert "changeset" This reverts commit 946e00d. * make flush_sync non-recursive * fix flushSync types * fix * unused * simplify * tidy up * tidy up * present unnecessary microtasks, avoid flushing if no function provided * simplify
diff --git a/.changeset/violet-camels-heal.md b/.changeset/violet-camels-heal.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: update types and inline docs for flushSync
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
@@ -20,12 +20,12 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			assert($.get(computed5) === 6);
 			for (let i = 0; i < 1000; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(computed5) === 6);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
@@ -25,12 +25,12 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			counter = 0;
 			for (let i = 0; i < 50; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(last) === i + 50);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
@@ -25,12 +25,12 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			counter = 0;
 			for (let i = 0; i < iter; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(current) === len + i);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
@@ -28,13 +28,13 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			assert($.get(sum) === 2 * width);
 			counter = 0;
 			for (let i = 0; i < 500; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(sum) === (i + 1) * width);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
@@ -22,13 +22,13 @@ function setup() {
 		destroy,
 		run() {
 			for (let i = 0; i < 10; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(heads[i], i);
 				});
 				assert($.get(splited[i]) === i + 1);
 			}
 			for (let i = 0; i < 10; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(heads[i], i * 2);
 				});
 				assert($.get(splited[i]) === i * 2 + 1);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
@@ -25,13 +25,13 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			assert($.get(current) === size);
 			counter = 0;
 			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(current) === i * size);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
@@ -38,13 +38,13 @@ function setup() {
 		destroy,
 		run() {
 			const constant = count(width);
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			assert($.get(sum) === constant);
 			counter = 0;
 			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 				assert($.get(sum) === constant - width + i * width);
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
@@ -25,13 +25,13 @@ function setup() {
 	return {
 		destroy,
 		run() {
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(head, 1);
 			});
 			assert($.get(current) === 40);
 			counter = 0;
 			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
+				$.flush(() => {
 					$.set(head, i);
 				});
 			}
diff --git a/benchmarking/benchmarks/reactivity/mol_bench.js b/benchmarking/benchmarks/reactivity/mol_bench.js
@@ -51,11 +51,11 @@ function setup() {
 		 */
 		run(i) {
 			res.length = 0;
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(B, 1);
 				$.set(A, 1 + i * 2);
 			});
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(A, 2 + i * 2);
 				$.set(B, 2);
 			});
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -312,7 +312,7 @@ export function client_component(analysis, options) {
 
 			const setter = b.set(key, [
 				b.stmt(b.call(b.id(name), b.id('$$value'))),
-				b.stmt(b.call('$.flush_sync'))
+				b.stmt(b.call('$.flush'))
 			]);
 
 			if (analysis.runes && binding.initial) {
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
@@ -1,7 +1,7 @@
 /** @import { ComponentContext, ComponentContextLegacy } from '#client' */
 /** @import { EventDispatcher } from './index.js' */
 /** @import { NotFunction } from './internal/types.js' */
-import { flush_sync, untrack } from './internal/client/runtime.js';
+import { untrack } from './internal/client/runtime.js';
 import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
@@ -206,15 +206,7 @@ function init_update_callbacks(context) {
 	return (l.u ??= { a: [], b: [], m: [] });
 }
 
-/**
- * Synchronously flushes any pending state changes and those that result from it.
- * @param {() => void} [fn]
- * @returns {void}
- */
-export function flushSync(fn) {
-	flush_sync(fn);
-}
-
+export { flushSync } from './internal/client/runtime.js';
 export { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
 export { tick, untrack } from './internal/client/runtime.js';
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -3,7 +3,7 @@ import { DEV } from 'esm-env';
 import { is_promise } from '../../../shared/utils.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
 import { internal_set, mutable_source, source } from '../../reactivity/sources.js';
-import { flush_sync, set_active_effect, set_active_reaction } from '../../runtime.js';
+import { flushSync, set_active_effect, set_active_reaction } from '../../runtime.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
 import { UNINITIALIZED } from '../../../../constants.js';
@@ -105,7 +105,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 
 				// without this, the DOM does not update until two ticks after the promise
 				// resolves, which is unexpected behaviour (and somewhat irksome to test)
-				flush_sync();
+				flushSync();
 			}
 		}
 	}
diff --git a/packages/svelte/src/internal/client/dom/task.js b/packages/svelte/src/internal/client/dom/task.js
@@ -6,58 +6,55 @@ const request_idle_callback =
 		? (/** @type {() => void} */ cb) => setTimeout(cb, 1)
 		: requestIdleCallback;
 
-let is_micro_task_queued = false;
-let is_idle_task_queued = false;
-
 /** @type {Array<() => void>} */
-let current_queued_micro_tasks = [];
+let micro_tasks = [];
+
 /** @type {Array<() => void>} */
-let current_queued_idle_tasks = [];
+let idle_tasks = [];
 
-function process_micro_tasks() {
-	is_micro_task_queued = false;
-	const tasks = current_queued_micro_tasks.slice();
-	current_queued_micro_tasks = [];
+function run_micro_tasks() {
+	var tasks = micro_tasks;
+	micro_tasks = [];
 	run_all(tasks);
 }
 
-function process_idle_tasks() {
-	is_idle_task_queued = false;
-	const tasks = current_queued_idle_tasks.slice();
-	current_queued_idle_tasks = [];
+function run_idle_tasks() {
+	var tasks = idle_tasks;
+	idle_tasks = [];
 	run_all(tasks);
 }
 
 /**
  * @param {() => void} fn
  */
 export function queue_micro_task(fn) {
-	if (!is_micro_task_queued) {
-		is_micro_task_queued = true;
-		queueMicrotask(process_micro_tasks);
+	if (micro_tasks.length === 0) {
+		queueMicrotask(run_micro_tasks);
 	}
-	current_queued_micro_tasks.push(fn);
+
+	micro_tasks.push(fn);
 }
 
 /**
  * @param {() => void} fn
  */
 export function queue_idle_task(fn) {
-	if (!is_idle_task_queued) {
-		is_idle_task_queued = true;
-		request_idle_callback(process_idle_tasks);
+	if (idle_tasks.length === 0) {
+		request_idle_callback(run_idle_tasks);
 	}
-	current_queued_idle_tasks.push(fn);
+
+	idle_tasks.push(fn);
 }
 
 /**
  * Synchronously run any queued tasks.
  */
 export function flush_tasks() {
-	if (is_micro_task_queued) {
-		process_micro_tasks();
+	if (micro_tasks.length > 0) {
+		run_micro_tasks();
 	}
-	if (is_idle_task_queued) {
-		process_idle_tasks();
+
+	if (idle_tasks.length > 0) {
+		run_idle_tasks();
 	}
 }
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -139,7 +139,7 @@ export {
 	get,
 	safe_get,
 	invalidate_inner_signals,
-	flush_sync,
+	flushSync as flush,
 	tick,
 	untrack,
 	exclude_from_object,
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -6,15 +6,12 @@ import {
 	update_effect,
 	get,
 	is_destroying_effect,
-	is_flushing_effect,
 	remove_reactions,
 	schedule_effect,
 	set_active_reaction,
 	set_is_destroying_effect,
-	set_is_flushing_effect,
 	set_signal_status,
 	untrack,
-	skip_reaction,
 	untracking
 } from '../runtime.js';
 import {
@@ -118,17 +115,12 @@ function create_effect(type, fn, sync, push = true) {
 	}
 
 	if (sync) {
-		var previously_flushing_effect = is_flushing_effect;
-
 		try {
-			set_is_flushing_effect(true);
 			update_effect(effect);
 			effect.f |= EFFECT_RAN;
 		} catch (e) {
 			destroy_effect(effect);
 			throw e;
-		} finally {
-			set_is_flushing_effect(previously_flushing_effect);
 		}
 	} else if (fn !== null) {
 		schedule_effect(effect);
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -14,8 +14,6 @@ import {
 	derived_sources,
 	set_derived_sources,
 	check_dirtiness,
-	set_is_flushing_effect,
-	is_flushing_effect,
 	untracking
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
@@ -202,22 +200,18 @@ export function internal_set(source, value) {
 
 		if (DEV && inspect_effects.size > 0) {
 			const inspects = Array.from(inspect_effects);
-			var previously_flushing_effect = is_flushing_effect;
-			set_is_flushing_effect(true);
-			try {
-				for (const effect of inspects) {
-					// Mark clean inspect-effects as maybe dirty and then check their dirtiness
-					// instead of just updating the effects - this way we avoid overfiring.
-					if ((effect.f & CLEAN) !== 0) {
-						set_signal_status(effect, MAYBE_DIRTY);
-					}
-					if (check_dirtiness(effect)) {
-						update_effect(effect);
-					}
+
+			for (const effect of inspects) {
+				// Mark clean inspect-effects as maybe dirty and then check their dirtiness
+				// instead of just updating the effects - this way we avoid overfiring.
+				if ((effect.f & CLEAN) !== 0) {
+					set_signal_status(effect, MAYBE_DIRTY);
+				}
+				if (check_dirtiness(effect)) {
+					update_effect(effect);
 				}
-			} finally {
-				set_is_flushing_effect(previously_flushing_effect);
 			}
+
 			inspect_effects.clear();
 		}
 	}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
diff --git a/packages/svelte/tests/store/test.ts b/packages/svelte/tests/store/test.ts
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: update types and inline docs for flushSync