From 2fa095b61eeacfddcfd2da973958930ea1e2b4b7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 15 Apr 2024 14:30:54 +0100
Subject: [PATCH] fix: improve spreading of attributes (#11177)

* fix: improve spreading of attributes

* twak
---
 .changeset/nervous-turkeys-end.md             |  5 ++++
 .../client/dom/elements/attributes.js         |  4 ++++
 .../samples/spread-props-2/_config.js         | 23 +++++++++++++++++++
 .../samples/spread-props-2/main.svelte        | 11 +++++++++
 4 files changed, 43 insertions(+)
 create mode 100644 .changeset/nervous-turkeys-end.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte

diff --git a/.changeset/nervous-turkeys-end.md b/.changeset/nervous-turkeys-end.md
new file mode 100644
index 0000000000..a6235a52bd
--- /dev/null
+++ b/.changeset/nervous-turkeys-end.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve spreading of attributes
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 9dd95bb78b..94ea12be99 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -104,6 +104,9 @@ export function set_attributes(element, prev, attrs, lowercase_attributes, css_h
 	var setters = map_get(setters_cache, element.nodeName);
 	if (!setters) map_set(setters_cache, element.nodeName, (setters = get_setters(element)));
 
+	// @ts-expect-error
+	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
+
 	for (key in next) {
 		var value = next[key];
 		if (value === prev?.[key]) continue;
@@ -140,6 +143,7 @@ export function set_attributes(element, prev, attrs, lowercase_attributes, css_h
 				}
 			}
 		} else if (value == null) {
+			attributes[key] = null;
 			element.removeAttribute(key);
 		} else if (key === 'style') {
 			element.style.cssText = value + '';
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js b/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js
new file mode 100644
index 0000000000..81cc057828
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>Toggle</button><h1>Style: not red</h1>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Toggle</button><h1 data-red="true">Style: red</h1>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte
new file mode 100644
index 0000000000..f438964d28
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let isRed = $state(true)
+
+  const attributes = $derived({
+    'data-red': isRed ? true : undefined
+  });
+</script>
+
+<button onclick={() => isRed = !isRed }>Toggle</button>
+
+<h1 {...attributes}>Style: {isRed ? 'red' : 'not red'}</h1>