From 58008479fc8478edebdc6e343738b856bb50d8a9 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:03:18 +0000
Subject: [PATCH] fix: improve $inspect handling of derived objects (#10584)

* fix: improve $inspect handling of derived objects

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

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/khaki-cooks-develop.md             |  5 ++
 .../svelte/src/internal/client/runtime.js     | 12 ++++-
 .../samples/inspect-derived-2/_config.js      | 54 +++++++++++++++++++
 .../samples/inspect-derived-2/main.svelte     | 21 ++++++++
 4 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/khaki-cooks-develop.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte

diff --git a/.changeset/khaki-cooks-develop.md b/.changeset/khaki-cooks-develop.md
new file mode 100644
index 0000000000..530d581132
--- /dev/null
+++ b/.changeset/khaki-cooks-develop.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve $inspect handling of derived objects
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 8c93d1c158..e348d25f82 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -43,6 +43,7 @@ let is_micro_task_queued = false;
 let is_flushing_effect = false;
 // Used for $inspect
 export let is_batching_effect = false;
+let is_inspecting_signal = false;
 
 // Handle effect queues
 
@@ -130,8 +131,15 @@ export function batch_inspect(target, prop, receiver) {
 			return Reflect.apply(value, this, arguments);
 		} finally {
 			is_batching_effect = previously_batching_effect;
-			if (last_inspected_signal !== null) {
-				for (const fn of last_inspected_signal.inspect) fn();
+			if (last_inspected_signal !== null && !is_inspecting_signal) {
+				is_inspecting_signal = true;
+				try {
+					for (const fn of last_inspected_signal.inspect) {
+						fn();
+					}
+				} finally {
+					is_inspecting_signal = false;
+				}
 				last_inspected_signal = null;
 			}
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
new file mode 100644
index 0000000000..0e6cf85884
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
@@ -0,0 +1,54 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let log;
+/**
+ * @type {typeof console.log}}
+ */
+let original_log;
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	before_test() {
+		log = [];
+		original_log = console.log;
+		console.log = (...v) => {
+			log.push(...v);
+		};
+	},
+	after_test() {
+		console.log = original_log;
+	},
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>update</button>\n1`);
+		assert.deepEqual(log, [
+			'init',
+			{
+				data: {
+					derived: 0,
+					list: []
+				},
+				derived: []
+			},
+			'update',
+			{
+				data: {
+					derived: 0,
+					list: [1]
+				},
+				derived: [1]
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte
new file mode 100644
index 0000000000..49dec62f28
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte
@@ -0,0 +1,21 @@
+<script context="module">
+	const data = $state({
+		list: [],
+		derived: 0
+	});
+
+	const derived = $derived(data.list.filter(() => true));
+
+	const state = {
+		data,
+		get derived() { return derived }
+	};
+</script>
+
+<script>
+	data.list.length = 0;
+	$inspect(state);
+</script>
+
+<button onclick={() => (state.data.list.push(1))}>update</button>
+{state.data.list}