From ad578a5da544691ab49f02f50d31c212ee23ddfd Mon Sep 17 00:00:00 2001
From: adiGuba <frederic.martini@gmail.com>
Date: Mon, 21 Oct 2024 17:37:09 +0200
Subject: [PATCH] fix: @debug does not work with proxied-state (#13690)

* fix: @debug must use $state.snapshot() on value

* changeset

* add test

---------

Co-authored-by: Dominic Gannaway <dg@domgan.com>
---
 .changeset/sharp-tigers-notice.md             |  5 +++++
 .../3-transform/client/visitors/DebugTag.js   | 12 +++++++---
 .../samples/debug-tag-object/_config.js       | 22 +++++++++++++++++++
 .../samples/debug-tag-object/main.svelte      |  7 ++++++
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sharp-tigers-notice.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/debug-tag-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/debug-tag-object/main.svelte

diff --git a/.changeset/sharp-tigers-notice.md b/.changeset/sharp-tigers-notice.md
new file mode 100644
index 0000000000..b519385066
--- /dev/null
+++ b/.changeset/sharp-tigers-notice.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: @debug does not work with proxied-state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
index 685d305ba4..d2697fd039 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
@@ -9,9 +9,15 @@ import * as b from '../../../../utils/builders.js';
  */
 export function DebugTag(node, context) {
 	const object = b.object(
-		node.identifiers.map((identifier) =>
-			b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
-		)
+		node.identifiers.map((identifier) => {
+			const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
+
+			return b.prop(
+				'init',
+				identifier,
+				context.state.analysis.runes ? visited : b.call('$.untrack', b.thunk(visited))
+			);
+		})
 	);
 
 	const call = b.call('console.log', object);
diff --git a/packages/svelte/tests/runtime-runes/samples/debug-tag-object/_config.js b/packages/svelte/tests/runtime-runes/samples/debug-tag-object/_config.js
new file mode 100644
index 0000000000..5d3440617b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/debug-tag-object/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		const b1 = target.querySelector('button');
+		b1?.click();
+		flushSync();
+		b1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, [
+			{ count: { current: 0 } },
+			{ count: { current: 1 } },
+			{ count: { current: 2 } }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/debug-tag-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/debug-tag-object/main.svelte
new file mode 100644
index 0000000000..ef332772ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/debug-tag-object/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let count = $state({ current: 0 });
+</script>
+
+{@debug count}
+
+<button onclick={()=> count.current++}>+</button>