fix: ensure more bindings run without active context

dummdidumm · dummdidumm · commit d34b1be9be4c · 2025-04-22T11:46:58.000+02:00
Continuation of #14194, fixes #15742
diff --git a/.changeset/strange-rocks-beam.md b/.changeset/strange-rocks-beam.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure more bindings run without active context
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -12,10 +12,14 @@ import { add_form_reset_listener } from '../misc.js';
  * then listens to the given events until the render effect context is destroyed
  * @param {EventTarget} target
  * @param {Array<string>} events
- * @param {(event?: Event) => void} handler
+ * @param {(event?: Event) => void} event_handler
  * @param {any} call_handler_immediately
  */
-export function listen(target, events, handler, call_handler_immediately = true) {
+export function listen(target, events, event_handler, call_handler_immediately = true) {
+	// Just like user-defined events, our internal events shouldn't have any reactive context
+	/** @type {typeof event_handler} */
+	const handler = (e) => without_reactive_context(() => event_handler(e));
+
 	if (call_handler_immediately) {
 		handler();
 	}
@@ -32,6 +36,9 @@ export function listen(target, events, handler, call_handler_immediately = true)
 }
 
 /**
+ * Runs a function without a reactive context.
+ * This is important for events which should "start fresh" and not inherit
+ * context that accidentally happens to be active at the time of the event.
  * @template T
  * @param {() => T} fn
  */
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/window.js b/packages/svelte/src/internal/client/dom/elements/bindings/window.js
@@ -62,5 +62,5 @@ export function bind_window_scroll(type, get, set = get) {
  * @param {(size: number) => void} set
  */
 export function bind_window_size(type, set) {
-	listen(window, ['resize'], () => without_reactive_context(() => set(window[type])));
+	listen(window, ['resize'], () => set(window[type]));
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js
@@ -2,6 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	test({ assert, logs }) {
-		assert.deepEqual(logs, [false]);
+		assert.deepEqual(logs, ['bind:activeElement false', 'bind:value false']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte
@@ -1,24 +1,29 @@
 <script>
 	let bar = $state('');
 
-	const foo = {
-		set bar(v) {
-
-			console.log($effect.tracking());
-
+	const value = {
+		set value(v) {
+			console.log('bind:value ' + $effect.tracking());
 			bar = v;
 		},
-		get bar() {
+		get value() {
 			return bar;
 		}
-	}
+	};
+
+	const active = {
+		set bar(_v) {
+			console.log('bind:activeElement ' + $effect.tracking());
+		}
+	};
 
 	let input;
 
 	$effect(() => {
 		input.value = 'everybody';
 		input.dispatchEvent(new window.Event('input'));
-	})
+	});
 </script>
 
-<input type="text" bind:value={foo.bar} bind:this={input}>
+<svelte:document bind:activeElement={active.bar} />
+<input type="text" bind:value={value.value} bind:this={input}>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: ensure more bindings run without active context
Original file line number	Diff line number	Diff line change
`@@ -62,5 +62,5 @@ export function bind_window_scroll(type, get, set = get) {`
`62`	`62`	`* @param {(size: number) => void} set`
`63`	`63`	`*/`
`64`	`64`	`export function bind_window_size(type, set) {`
`65`		`- listen(window, ['resize'], () => without_reactive_context(() => set(window[type])));`
	`65`	`+ listen(window, ['resize'], () => set(window[type]));`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import { test } from '../../test';`
`2`	`2`
`3`	`3`	`export default test({`
`4`	`4`	`test({ assert, logs }) {`
`5`		`- assert.deepEqual(logs, [false]);`
	`5`	`+ assert.deepEqual(logs, ['bind:activeElement false', 'bind:value false']);`
`6`	`6`	`}`
`7`	`7`	`});`