Merge 2bd7dd7cf9 into 5edd8b0602

.changeset/early-crabs-rest.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: abort deriveds own AbortSignal when it disconnects

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

@@ -28,6 +28,7 @@ import {
 	skipped_deps,
 	new_deps
 } from '../runtime.js';
+import { without_reactive_context } from '../dom/elements/bindings/shared.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import * as w from '../warnings.js';
@@ -444,6 +445,13 @@ export function update_derived(derived) {
  * @param {Derived} derived
  */
 export function freeze_derived_effects(derived) {
+	if (derived.ac !== null) {
+		without_reactive_context(() => {
+			derived.ac?.abort(STALE_REACTION);
+			derived.ac = null;
+		});
+	}
+
 	if (derived.effects === null) return;
 
 	for (const e of derived.effects) {

packages/svelte/tests/runtime-runes/samples/abort-signal-derived-destroy/Child.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getAbortSignal } from "svelte";
+
+	let { count, aborted = $bindable() } = $props()
+
+	let der = $derived.by(()=>{
+		const signal = getAbortSignal();
+
+		signal.addEventListener("abort", () => {
+			try{
+				aborted++;
+			}catch(e){
+				console.error(e);
+			}
+		});
+		return count;
+	})
+</script>
+
+{der}

packages/svelte/tests/runtime-runes/samples/abort-signal-derived-destroy/_config.js

@@ -0,0 +1,14 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, errors }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, '1 <button></button>');
+		assert.deepEqual(errors, []);
+	}
+});

packages/svelte/tests/runtime-runes/samples/abort-signal-derived-destroy/main.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Child from './Child.svelte'
+
+	let count = $state(0);
+	let aborted = $state(0)
+</script>
+
+{aborted}
+
+<button onclick={() => count++}></button>
+
+{#if count % 2 === 0}
+	<Child {count} bind:aborted={aborted} />
+{/if}

packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/_config.js

@@ -4,9 +4,11 @@ import { flushSync } from 'svelte';
 export default test({
 	async test({ assert, target, errors }) {
 		const btn = target.querySelector('button');
+
 		flushSync(() => {
 			btn?.click();
 		});
+		assert.htmlEqual(target.innerHTML, '1:1 <button></button>');
 		assert.deepEqual(errors, []);
 	}
 });

packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/main.svelte

@@ -19,6 +19,6 @@
 	})
 </script>
 
-{der}
+{der}:{aborted}
 
-<button onclick={() => count++}></button>
+<button onclick={() => count++}></button>