breaking: removed deferred event updates (#11855)

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);
 		}
 	}
 
@@ -182,42 +181,41 @@ export function handle_event_propagation(handler_element, event) {
 		 * @type {unknown[]}
 		 */
 		var other_errors = [];
-		yield_event_updates(() => {
-			while (current_target !== null) {
-				/** @type {null | Element} */
-				var parent_element =
-					current_target.parentNode || /** @type {any} */ (current_target).host || null;
-
-				try {
-					// @ts-expect-error
-					var delegated = current_target['__' + event_name];
-
-					if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
-						if (is_array(delegated)) {
-							var [fn, ...data] = delegated;
-							fn.apply(current_target, [event, ...data]);
-						} else {
-							delegated.call(current_target, event);
-						}
-					}
-				} catch (error) {
-					if (throw_error) {
-						other_errors.push(error);
+		while (current_target !== null) {
+			/** @type {null | Element} */
+			var parent_element =
+				current_target.parentNode || /** @type {any} */ (current_target).host || null;
+
+			try {
+				// @ts-expect-error
+				var delegated = current_target['__' + event_name];
+
+				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
+					if (is_array(delegated)) {
+						var [fn, ...data] = delegated;
+						fn.apply(current_target, [event, ...data]);
 					} else {
-						throw_error = error;
+						delegated.call(current_target, event);
 					}
 				}
-				if (
-					event.cancelBubble ||
-					parent_element === handler_element ||
-					parent_element === null ||
-					current_target === handler_element
-				) {
-					break;
+			} catch (error) {
+				if (throw_error) {
+					other_errors.push(error);
+				} else {
+					throw_error = error;
 				}
-				current_target = parent_element;
 			}
-		});
+			if (
+				event.cancelBubble ||
+				parent_element === handler_element ||
+				parent_element === null ||
+				current_target === handler_element
+			) {
+				break;
+			}
+			current_target = parent_element;
+		}
+
 		if (throw_error) {
 			for (let error of other_errors) {
 				// Throw the rest of the errors, one-by-one on a microtask