fix: keep effect in the graph if it has an abort controller (#16430)

paoloricciuti · web-flow · commit c2da1ebb85d6 · 2025-07-18T12:07:06.000-04:00
diff --git a/.changeset/four-kings-drum.md b/.changeset/four-kings-drum.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: keep effect in the graph if it has an abort controller
diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -532,7 +532,9 @@ function flush_queued_effects(effects) {
 				// here (rather than in `update_effect`) allows us to skip the work for
 				// immediate effects.
 				if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-					if (effect.teardown === null) {
+					// if there's no teardown or abort controller we completely unlink
+					// the effect from the graph
+					if (effect.teardown === null && effect.ac === null) {
 						// remove this effect from the graph
 						unlink_effect(effect);
 					} else {
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/Component.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	$effect(() => {
+		const signal = getAbortSignal()
+		signal.addEventListener('abort', () => console.log('abort'))
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, ['abort']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/dependencyless-abort-signal/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+
+	let show = $state(true)
+</script>
+
+<button onclick={() => (show = !show)}>click</button>
+{#if show}
+	<Component />
+{/if}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: keep effect in the graph if it has an abort controller