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

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure set_text applies coercion to objects before diff

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.__t = str;
-		text.nodeValue = value == null ? '' : value + '';
+		text.nodeValue = str == null ? '' : str + '';
 	}
 }
 

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>`);
+	}
+});

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>