fix: improve signal consumer removal logic (#9837)

.changeset/rich-tables-sing.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve signal consumer removal logic

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

@@ -382,13 +382,15 @@ function remove_consumer(signal, start_index, remove_unowned) {
 			let consumers_length = 0;
 			if (consumers !== null) {
 				consumers_length = consumers.length - 1;
-				if (consumers_length === 0) {
+				const index = consumers.indexOf(signal);
-					dependency.c = null;
+				if (index !== -1) {
-				} else {
+					if (consumers_length === 0) {
-					const index = consumers.indexOf(signal);
+						dependency.c = null;
-					// Swap with last element and then remove.
+					} else {
-					consumers[index] = consumers[consumers_length];
+						// Swap with last element and then remove.
-					consumers.pop();
+						consumers[index] = consumers[consumers_length];
+						consumers.pop();
+					}
 				}
 			}
 			if (remove_unowned && consumers_length === 0 && (dependency.f & UNOWNED) !== 0) {

packages/svelte/tests/runtime-runes/samples/effect-dependencies/_config.js

@@ -0,0 +1,52 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [b1, b2] = target.querySelectorAll('button');
+		flushSync(() => {
+			b1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div><button>A</button><button>B</button></div><div>A</div>`
+		);
+
+		flushSync(() => {
+			b2.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div><button>A</button><button>B</button></div><div>B\n12</div>`
+		);
+
+		flushSync(() => {
+			b1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div><button>A</button><button>B</button></div><div>A</div>`
+		);
+
+		flushSync(() => {
+			b2.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div><button>A</button><button>B</button></div><div>B\n12</div>`
+		);
+
+		flushSync(() => {
+			b1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div><button>A</button><button>B</button></div><div>A</div>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/effect-dependencies/main.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	class Things {
+		tab = $state('A');
+
+		data = $state([{no: 1}, {no: 2}]);
+		list = $derived(this.filter());
+
+		filter() {
+			this.tab;
+			return this.data;
+		}
+	}
+
+	const things = new Things();
+</script>
+
+<div>
+		<button onclick={() => things.tab = 'A'} >A</button>
+		<button onclick={() => things.tab = 'B'} >B</button>
+</div>
+
+<div>
+	{#if things.tab === 'A'}
+			A
+	{:else}
+		B
+		{#each things.list as item}
+			{item.no}
+		{/each}
+	{/if}
+</div>