breaking: event handlers + bindings now yield effect updates (#11706)

* breaking: delegated event handlers now yield effect updates

* tweak

* refactor

* refactor

* yield binding change events

* handle input event bindings

* more bindings

* more bindings

* more tests

* more tests

* address feedback

* address feedback

Author: trueadm

.changeset/popular-cameras-tie.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: event handlers + bindings now yield effect updates

packages/svelte/src/constants.js

@@ -36,6 +36,7 @@ export const RawTextElements = ['textarea', 'script', 'style', 'title'];
 export const DelegatedEvents = [
 	'beforeinput',
 	'click',
+	'change',
 	'dblclick',
 	'contextmenu',
 	'focusin',

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

@@ -4,6 +4,7 @@ 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_updates } from '../../../runtime.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -18,7 +19,7 @@ export function bind_value(input, get_value, update) {
 			e.bind_invalid_checkbox_value();
 		}
 
-		update(is_numberlike_input(input) ? to_number(input.value) : input.value);
+		yield_updates(() => update(is_numberlike_input(input) ? to_number(input.value) : input.value));
 	});
 
 	render_effect(() => {
@@ -84,10 +85,10 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 				value = get_binding_group_value(binding_group, value, input.checked);
 			}
 
-			update(value);
+			yield_updates(() => update(value));
 		},
 		// TODO better default value handling
-		() => update(is_checkbox ? [] : null)
+		() => yield_updates(() => update(is_checkbox ? [] : null))
 	);
 
 	render_effect(() => {
@@ -128,7 +129,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;
-		update(value);
+		yield_updates(() => update(value));
 	});
 
 	if (get_value() == undefined) {
@@ -187,7 +188,7 @@ function to_number(value) {
  */
 export function bind_files(input, get_value, update) {
 	listen_to_event_and_reset_event(input, 'change', () => {
-		update(input.files);
+		yield_updates(() => update(input.files));
 	});
 	render_effect(() => {
 		input.files = get_value();

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

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

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

@@ -1,3 +1,4 @@
+import { yield_updates } from '../../../runtime.js';
 import { listen } from './shared.js';
 
 /**
@@ -6,6 +7,6 @@ import { listen } from './shared.js';
  */
 export function bind_online(update) {
 	listen(window, ['online', 'offline'], () => {
-		update(navigator.onLine);
+		yield_updates(() => 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 } from '../../../runtime.js';
+import { untrack, yield_updates } 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);
 		}
 
-		update(value);
+		yield_updates(() => 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 } from '../../../runtime.js';
+import { untrack, yield_updates } from '../../../runtime.js';
 
 /**
  * Resize observer singleton.
@@ -88,7 +88,10 @@ 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) => update(entry[type]));
+	var unsub = observer.observe(
+		element,
+		/** @param {any} entry */ (entry) => yield_updates(() => update(entry[type]))
+	);
 	render_effect(() => unsub);
 }
 
@@ -101,7 +104,7 @@ export function bind_element_size(element, type, update) {
 	var unsub = resize_observer_border_box.observe(element, () => update(element[type]));
 
 	effect(() => {
-		untrack(() => update(element[type]));
+		yield_updates(() => untrack(() => 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 } from '../../../runtime.js';
+import { untrack, yield_updates } from '../../../runtime.js';
 import { queue_micro_task } from '../../task.js';
 
 /**
@@ -37,12 +37,14 @@ export function bind_this(element_or_component, update, get_value, get_parts) {
 
 			untrack(() => {
 				if (element_or_component !== get_value(...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);
-					}
+					yield_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);
+						}
+					});
 				}
 			});
 		});

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

@@ -1,4 +1,5 @@
 import { effect, render_effect } from '../../../reactivity/effects.js';
+import { yield_updates } from '../../../runtime.js';
 import { listen } from './shared.js';
 
 /**
@@ -15,7 +16,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?)
 
-		update(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
+		yield_updates(() => update(window[is_scrolling_x ? 'scrollX' : 'scrollY']));
 	};
 
 	addEventListener('scroll', target_handler, {
@@ -53,7 +54,7 @@ export function bind_window_scroll(type, get_value, update) {
 	effect(() => {
 		var value = window[is_scrolling_x ? 'scrollX' : 'scrollY'];
 		if (value === 0) {
-			update(value);
+			yield_updates(() => update(value));
 		}
 	});
 
@@ -69,5 +70,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'], () => update(window[type]));
+	listen(window, ['resize'], () => yield_updates(() => update(window[type])));
 }

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

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