From 7ac0d8e7cd184a00c0c0c62a7c6b7f6f98222327 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:54:34 +0100
Subject: [PATCH] fix: ensure set_text applies coercion to objects before diff
 (#13542)

* fix: ensure set_text applies coercion to objects before diff

* lint

* feedback

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

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

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/wet-hats-peel.md                           |  5 +++++
 packages/svelte/src/internal/client/render.js         |  8 +++++---
 .../runtime-runes/samples/array-to-string/_config.js  | 11 +++++++++++
 .../runtime-runes/samples/array-to-string/main.svelte | 11 +++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wet-hats-peel.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-to-string/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/array-to-string/main.svelte

diff --git a/.changeset/wet-hats-peel.md b/.changeset/wet-hats-peel.md
new file mode 100644
index 0000000000..fd67097f5f
--- /dev/null
+++ b/.changeset/wet-hats-peel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure set_text applies coercion to objects before diff
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index de986ae04e..16e2eb0d4e 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -48,11 +48,13 @@ export function set_should_intro(value) {
  * @returns {void}
  */
 export function set_text(text, value) {
+	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
+	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
 	// @ts-expect-error
-	if (value !== (text.__t ??= text.nodeValue)) {
+	if (str !== (text.__t ??= text.nodeValue)) {
 		// @ts-expect-error
-		text.__t = value;
-		text.nodeValue = value == null ? '' : value + '';
+		text.__t = str;
+		text.nodeValue = str == null ? '' : str + '';
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/array-to-string/_config.js b/packages/svelte/tests/runtime-runes/samples/array-to-string/_config.js
new file mode 100644
index 0000000000..800073e1d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-to-string/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>add</button><span>1,2,3,4</span>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/array-to-string/main.svelte b/packages/svelte/tests/runtime-runes/samples/array-to-string/main.svelte
new file mode 100644
index 0000000000..094d146a61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-to-string/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let array = $state([1, 2, 3]);
+
+	function addToArray() {
+		array.push(array.length + 1);
+	}
+</script>
+
+<button onclick={addToArray}>add</button>
+
+<span>{array}</span>