breaking: removed deferred event updates

Author: trueadm

.changeset/sixty-plants-cover.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: removed deferred event updates

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -4,7 +4,6 @@ import { stringify } from '../../../render.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
 import { get_proxied_value, is } from '../../../proxy.js';
-import { yield_event_updates } from '../../../runtime.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -19,9 +18,7 @@ export function bind_value(input, get_value, update) {
 			e.bind_invalid_checkbox_value();
 		}
 
-		yield_event_updates(() =>
-			update(is_numberlike_input(input) ? to_number(input.value) : input.value)
-		);
+		update(is_numberlike_input(input) ? to_number(input.value) : input.value);
 	});
 
 	render_effect(() => {
@@ -87,10 +84,10 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 				value = get_binding_group_value(binding_group, value, input.checked);
 			}
 
-			yield_event_updates(() => update(value));
+			update(value);
 		},
 		// TODO better default value handling
-		() => yield_event_updates(() => update(is_checkbox ? [] : null))
+		() => update(is_checkbox ? [] : null)
 	);
 
 	render_effect(() => {
@@ -131,7 +128,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 export function bind_checked(input, get_value, update) {
 	listen_to_event_and_reset_event(input, 'change', () => {
 		var value = input.checked;
-		yield_event_updates(() => update(value));
+		update(value);
 	});
 
 	if (get_value() == undefined) {
@@ -190,7 +187,7 @@ function to_number(value) {
  */
 export function bind_files(input, get_value, update) {
 	listen_to_event_and_reset_event(input, 'change', () => {
-		yield_event_updates(() => update(input.files));
+		update(input.files);
 	});
 	render_effect(() => {
 		input.files = get_value();

packages/svelte/src/internal/client/dom/elements/bindings/media.js

@@ -1,7 +1,6 @@
 import { hydrating } from '../../hydration.js';
 import { render_effect, effect } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
-import { yield_event_updates } from '../../../runtime.js';
 
 /** @param {TimeRanges} ranges */
 function time_ranges_to_array(ranges) {
@@ -36,7 +35,7 @@ export function bind_current_time(media, get_value, update) {
 		}
 
 		updating = true;
-		yield_event_updates(() => update(media.currentTime));
+		update(media.currentTime);
 	};
 
 	raf_id = requestAnimationFrame(callback);
@@ -61,9 +60,7 @@ export function bind_current_time(media, get_value, update) {
  * @param {(array: Array<{ start: number; end: number }>) => void} update
  */
 export function bind_buffered(media, update) {
-	listen(media, ['loadedmetadata', 'progress'], () =>
-		yield_event_updates(() => update(time_ranges_to_array(media.buffered)))
-	);
+	listen(media, ['loadedmetadata', 'progress'], () => update(time_ranges_to_array(media.buffered)));
 }
 
 /**
@@ -79,25 +76,23 @@ export function bind_seekable(media, update) {
  * @param {(array: Array<{ start: number; end: number }>) => void} update
  */
 export function bind_played(media, update) {
-	listen(media, ['timeupdate'], () =>
-		yield_event_updates(() => update(time_ranges_to_array(media.played)))
-	);
+	listen(media, ['timeupdate'], () => update(time_ranges_to_array(media.played)));
 }
 
 /**
  * @param {HTMLVideoElement | HTMLAudioElement} media
  * @param {(seeking: boolean) => void} update
  */
 export function bind_seeking(media, update) {
-	listen(media, ['seeking', 'seeked'], () => yield_event_updates(() => update(media.seeking)));
+	listen(media, ['seeking', 'seeked'], () => update(media.seeking));
 }
 
 /**
  * @param {HTMLVideoElement | HTMLAudioElement} media
  * @param {(seeking: boolean) => void} update
  */
 export function bind_ended(media, update) {
-	listen(media, ['timeupdate', 'ended'], () => yield_event_updates(() => update(media.ended)));
+	listen(media, ['timeupdate', 'ended'], () => update(media.ended));
 }
 
 /**
@@ -108,7 +103,7 @@ export function bind_ready_state(media, update) {
 	listen(
 		media,
 		['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
-		() => yield_event_updates(() => update(media.readyState))
+		() => update(media.readyState)
 	);
 }
 
@@ -132,7 +127,7 @@ export function bind_playback_rate(media, get_value, update) {
 		}
 
 		listen(media, ['ratechange'], () => {
-			if (!updating) yield_event_updates(() => update(media.playbackRate));
+			if (!updating) update(media.playbackRate);
 			updating = false;
 		});
 	});
@@ -150,7 +145,7 @@ export function bind_paused(media, get_value, update) {
 	var callback = () => {
 		if (paused !== media.paused) {
 			paused = media.paused;
-			yield_event_updates(() => update((paused = media.paused)));
+			update((paused = media.paused));
 		}
 	};
 
@@ -175,7 +170,7 @@ export function bind_paused(media, get_value, update) {
 					media.pause();
 				} else {
 					media.play().catch(() => {
-						yield_event_updates(() => update((paused = true)));
+						update((paused = true));
 					});
 				}
 			};
@@ -239,7 +234,7 @@ export function bind_muted(media, get_value, update) {
 
 	var callback = () => {
 		updating = true;
-		yield_event_updates(() => update(media.muted));
+		update(media.muted);
 	};
 
 	if (get_value() == null) {

packages/svelte/src/internal/client/dom/elements/bindings/navigator.js

@@ -1,4 +1,3 @@
-import { yield_event_updates } from '../../../runtime.js';
 import { listen } from './shared.js';
 
 /**
@@ -7,6 +6,6 @@ import { listen } from './shared.js';
  */
 export function bind_online(update) {
 	listen(window, ['online', 'offline'], () => {
-		yield_event_updates(() => update(navigator.onLine));
+		update(navigator.onLine);
 	});
 }

packages/svelte/src/internal/client/dom/elements/bindings/select.js

@@ -1,6 +1,6 @@
 import { effect } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
-import { untrack, yield_event_updates } from '../../../runtime.js';
+import { untrack } from '../../../runtime.js';
 import { is } from '../../../proxy.js';
 
 /**
@@ -90,7 +90,7 @@ export function bind_select_value(select, get_value, update) {
 			value = selected_option && get_option_value(selected_option);
 		}
 
-		yield_event_updates(() => update(value));
+		update(value);
 	});
 
 	// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated

packages/svelte/src/internal/client/dom/elements/bindings/size.js

@@ -1,5 +1,5 @@
 import { effect, render_effect } from '../../../reactivity/effects.js';
-import { untrack, yield_event_updates } from '../../../runtime.js';
+import { untrack } from '../../../runtime.js';
 
 /**
  * Resize observer singleton.
@@ -88,10 +88,7 @@ export function bind_resize_observer(element, type, update) {
 				? resize_observer_border_box
 				: resize_observer_device_pixel_content_box;
 
-	var unsub = observer.observe(
-		element,
-		/** @param {any} entry */ (entry) => yield_event_updates(() => update(entry[type]))
-	);
+	var unsub = observer.observe(element, /** @param {any} entry */ (entry) => update(entry[type]));
 	render_effect(() => unsub);
 }
 
@@ -104,7 +101,7 @@ export function bind_element_size(element, type, update) {
 	var unsub = resize_observer_border_box.observe(element, () => update(element[type]));
 
 	effect(() => {
-		yield_event_updates(() => untrack(() => update(element[type])));
+		update(element[type]);
 		return unsub;
 	});
 }

packages/svelte/src/internal/client/dom/elements/bindings/this.js

@@ -1,6 +1,6 @@
 import { STATE_SYMBOL } from '../../../constants.js';
 import { effect, render_effect } from '../../../reactivity/effects.js';
-import { untrack, yield_event_updates } from '../../../runtime.js';
+import { untrack } from '../../../runtime.js';
 import { queue_micro_task } from '../../task.js';
 
 /**
@@ -37,14 +37,12 @@ export function bind_this(element_or_component, update, get_value, get_parts) {
 
 			untrack(() => {
 				if (element_or_component !== get_value(...parts)) {
-					yield_event_updates(() => {
-						update(element_or_component, ...parts);
-						// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
-						// the previous position if it isn't already taken over by a different effect.
-						if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
-							update(null, ...old_parts);
-						}
-					});
+					update(element_or_component, ...parts);
+					// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
+					// the previous position if it isn't already taken over by a different effect.
+					if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
+						update(null, ...old_parts);
+					}
 				}
 			});
 		});

packages/svelte/src/internal/client/dom/elements/bindings/window.js

@@ -1,5 +1,4 @@
 import { effect, render_effect } from '../../../reactivity/effects.js';
-import { yield_event_updates } from '../../../runtime.js';
 import { listen } from './shared.js';
 
 /**
@@ -16,7 +15,7 @@ export function bind_window_scroll(type, get_value, update) {
 		clearTimeout(timeout);
 		timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
 
-		yield_event_updates(() => update(window[is_scrolling_x ? 'scrollX' : 'scrollY']));
+		update(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
 	};
 
 	addEventListener('scroll', target_handler, {
@@ -64,5 +63,5 @@ export function bind_window_scroll(type, get_value, update) {
  * @param {(size: number) => void} update
  */
 export function bind_window_size(type, update) {
-	listen(window, ['resize'], () => yield_event_updates(() => update(window[type])));
+	listen(window, ['resize'], () => update(window[type]));
 }

packages/svelte/src/internal/client/dom/elements/events.js

@@ -1,6 +1,5 @@
 import { render_effect } from '../../reactivity/effects.js';
 import { all_registered_events, root_event_handles } from '../../render.js';
-import { yield_event_updates } from '../../runtime.js';
 import { define_property, is_array } from '../../utils.js';
 import { hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
@@ -48,7 +47,7 @@ export function create_event(event_name, dom, handler, options) {
 			handle_event_propagation(dom, event);
 		}
 		if (!event.cancelBubble) {
-			return yield_event_updates(() => handler.call(this, event));
+			return handler.call(this, event);
 		}
 	}
 
@@ -204,7 +203,7 @@ export function handle_event_propagation(handler_element, event) {
 	}
 
 	try {
-		yield_event_updates(() => next(/** @type {Element} */ (current_target)));
+		next(/** @type {Element} */ (current_target));
 	} finally {
 		// @ts-expect-error is used above
 		event.__root = handler_element;

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

@@ -29,7 +29,6 @@ import { lifecycle_outside_component } from '../shared/errors.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
-export const FLUSH_YIELD = 2;
 
 // Used for DEV time error handling
 /** @param {WeakSet<Error>} value */
@@ -38,7 +37,6 @@ const handled_errors = new WeakSet();
 let current_scheduler_mode = FLUSH_MICROTASK;
 // Used for handling scheduling
 let is_micro_task_queued = false;
-let is_yield_task_queued = false;
 
 export let is_flushing_effect = false;
 export let is_destroying_effect = false;
@@ -599,29 +597,17 @@ function flush_queued_effects(effects) {
 
 function process_deferred() {
 	is_micro_task_queued = false;
-	is_yield_task_queued = false;
 	if (flush_count > 1001) {
 		return;
 	}
 	const previous_queued_root_effects = current_queued_root_effects;
 	current_queued_root_effects = [];
 	flush_queued_root_effects(previous_queued_root_effects);
-	if (!is_micro_task_queued && !is_yield_task_queued) {
+	if (!is_micro_task_queued) {
 		flush_count = 0;
 	}
 }
 
-async function yield_tick() {
-	// TODO: replace this with scheduler.yield when it becomes standard
-	await new Promise((fulfil) => {
-		requestAnimationFrame(() => {
-			setTimeout(fulfil, 0);
-		});
-		// In case of being within background tab, the rAF won't fire
-		setTimeout(fulfil, 100);
-	});
-}
-
 /**
  * @param {import('#client').Effect} signal
  * @returns {void}
@@ -632,11 +618,6 @@ export function schedule_effect(signal) {
 			is_micro_task_queued = true;
 			queueMicrotask(process_deferred);
 		}
-	} else if (current_scheduler_mode === FLUSH_YIELD) {
-		if (!is_yield_task_queued) {
-			is_yield_task_queued = true;
-			yield_tick().then(process_deferred);
-		}
 	}
 
 	var effect = signal;
@@ -735,19 +716,6 @@ function process_effects(effect, collected_effects) {
 	}
 }
 
-/**
- * @param {{ (): void; (): any; }} fn
- */
-export function yield_event_updates(fn) {
-	const previous_scheduler_mode = current_scheduler_mode;
-	try {
-		current_scheduler_mode = FLUSH_YIELD;
-		return fn();
-	} finally {
-		current_scheduler_mode = previous_scheduler_mode;
-	}
-}
-
 /**
  * Internal version of `flushSync` with the option to not flush previous effects.
  * Returns the result of the passed function, if given.
@@ -767,7 +735,6 @@ export function flush_sync(fn, flush_previous = true) {
 
 		current_scheduler_mode = FLUSH_SYNC;
 		current_queued_root_effects = root_effects;
-		is_yield_task_queued = false;
 		is_micro_task_queued = false;
 
 		if (flush_previous) {
@@ -795,7 +762,7 @@ export function flush_sync(fn, flush_previous = true) {
  * @returns {Promise<void>}
  */
 export async function tick() {
-	await yield_tick();
+	await Promise.resolve();
 	// By calling flush_sync we guarantee that any pending state changes are applied after one tick.
 	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
 	flush_sync();