From 93f8329b1bd4e33336908563d6e69c5eee5f9ce4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 12 Sep 2024 09:27:20 +0100
Subject: [PATCH] fix: ensure $inspect effects are fine-grain (#13199)

Don't fire effects that don't need to rerun. Fixes #13189
---
 .changeset/polite-pugs-attend.md              |  5 +++
 .../src/internal/client/reactivity/sources.js | 12 +++++--
 .../svelte/src/internal/client/runtime.js     |  2 +-
 .../samples/inspect-derived-3/Item.svelte     | 13 +++++++
 .../samples/inspect-derived-3/List.svelte     | 17 ++++++++++
 .../samples/inspect-derived-3/_config.js      | 34 +++++++++++++++++++
 .../samples/inspect-derived-3/main.svelte     | 18 ++++++++++
 7 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/polite-pugs-attend.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-3/Item.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-3/List.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-3/main.svelte

diff --git a/.changeset/polite-pugs-attend.md b/.changeset/polite-pugs-attend.md
new file mode 100644
index 0000000000..4f27579a96
--- /dev/null
+++ b/.changeset/polite-pugs-attend.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure $inspect effects are fine-grain
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index c32cc450e1..92bc4f264d 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -16,7 +16,8 @@ import {
 	update_effect,
 	derived_sources,
 	set_derived_sources,
-	flush_sync
+	flush_sync,
+	check_dirtiness
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import {
@@ -178,7 +179,14 @@ export function set(source, value) {
 				flush_sync();
 			}
 			for (const effect of inspects) {
-				update_effect(effect);
+				// Mark clean inspect-effects as maybe dirty and then check their dirtiness
+				// instead of just updating the effects - this way we avoid overfiring.
+				if ((effect.f & CLEAN) !== 0) {
+					set_signal_status(effect, MAYBE_DIRTY);
+				}
+				if (check_dirtiness(effect)) {
+					update_effect(effect);
+				}
 			}
 			inspect_effects.clear();
 		}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index dc103bbea6..1c004538b2 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -153,7 +153,7 @@ export function set_dev_current_component_function(fn) {
 }
 
 export function increment_version() {
-	return current_version++;
+	return ++current_version;
 }
 
 /** @returns {boolean} */
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/Item.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/Item.svelte
new file mode 100644
index 0000000000..4df92e720c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/Item.svelte
@@ -0,0 +1,13 @@
+<script>
+	import {getContext} from 'svelte';
+
+	let { children, value} = $props();
+
+	let listContext = getContext('list');
+
+	let selected = $derived(listContext?.selectedValue === value);
+
+	$inspect(value, selected);
+</script>
+
+<div class:selected>{@render children()}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/List.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/List.svelte
new file mode 100644
index 0000000000..217d5b8866
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/List.svelte
@@ -0,0 +1,17 @@
+<script>
+	import {setContext} from 'svelte';
+
+	let {children, selectedValue} = $props();
+
+	let listContext = $state({ selectedValue});
+
+	$effect(() => {
+		listContext.selectedValue = selectedValue;
+	});
+
+	setContext('list',listContext);
+</script>
+
+<div class="list">
+	{@render children()}
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
new file mode 100644
index 0000000000..d2226f433e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.deepEqual(logs, [
+			'init',
+			'0',
+			true,
+			'init',
+			'1',
+			false,
+			'init',
+			'2',
+			false,
+			'update',
+			'0',
+			false,
+			'update',
+			'1',
+			true
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/main.svelte
new file mode 100644
index 0000000000..e7c11eb73c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import List from './List.svelte';
+	import Item from './Item.svelte';
+
+	let selectedIndex = $state(0);
+	let selectedValue = $derived(`${selectedIndex}`);
+
+	const changeSelection = () => {
+			selectedIndex = (selectedIndex + 1)%3;
+	};
+</script>
+
+<List {selectedValue}>
+	<Item value="0">First</Item>
+	<Item value="1">Second</Item>
+	<Item value="2">Third</Item>
+</List>
+<button onclick={changeSelection}>Change Selection</button>