feat: allow effects to return AbortController

packages/svelte/src/ambient.d.ts

@@ -234,7 +234,7 @@ declare namespace $derived {
  * https://svelte.dev/docs/svelte/$effect
  * @param fn The function to execute
  */
-declare function $effect(fn: () => void | (() => void)): void;
+declare function $effect(fn: () => void | (() => void) | AbortController): void;
 
 declare namespace $effect {
 	/**
@@ -253,7 +253,7 @@ declare namespace $effect {
 	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
 	 * @param fn The function to execute
 	 */
-	export function pre(fn: () => void | (() => void)): void;
+	export function pre(fn: () => void | (() => void) | AbortController): void;
 
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.

packages/svelte/src/internal/client/reactivity/effects.js

@@ -381,7 +381,11 @@ export function execute_effect_teardown(effect) {
 		set_is_destroying_effect(true);
 		set_active_reaction(null);
 		try {
-			teardown.call(null);
+			if (typeof teardown === 'function') {
+				teardown.call(null);
+			} else {
+				teardown.abort('effect destroyed');
+			}
 		} finally {
 			set_is_destroying_effect(previously_destroying_effect);
 			set_active_reaction(previous_reaction);

packages/svelte/src/internal/client/reactivity/types.d.ts

@@ -52,7 +52,7 @@ export interface Effect extends Reaction {
 	/** The effect function */
 	fn: null | (() => void | (() => void));
 	/** The teardown function returned from the effect function */
-	teardown: null | (() => void);
+	teardown: null | (() => void) | AbortController;
 	/** Transition managers created with `$.transition` */
 	transitions: null | TransitionManager[];
 	/** Next sibling child effect created inside the parent signal */

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

@@ -524,8 +524,12 @@ export function update_effect(effect) {
 		destroy_effect_deriveds(effect);
 
 		execute_effect_teardown(effect);
-		var teardown = update_reaction(effect);
-		effect.teardown = typeof teardown === 'function' ? teardown : null;
+		var teardown = update_reaction(effect) ?? null;
+		// Avoid doing an instanceof check on the hot-path
+		effect.teardown =
+			teardown === null || typeof teardown === 'function' || teardown instanceof AbortController
+				? teardown
+				: null;
 		effect.version = current_version;
 
 		if (DEV) {

packages/svelte/types/index.d.ts

@@ -2892,7 +2892,7 @@ declare namespace $derived {
  * https://svelte.dev/docs/svelte/$effect
  * @param fn The function to execute
  */
-declare function $effect(fn: () => void | (() => void)): void;
+declare function $effect(fn: () => void | (() => void) | AbortController): void;
 
 declare namespace $effect {
 	/**
@@ -2911,7 +2911,7 @@ declare namespace $effect {
 	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
 	 * @param fn The function to execute
 	 */
-	export function pre(fn: () => void | (() => void)): void;
+	export function pre(fn: () => void | (() => void) | AbortController): void;
 
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.