From da37c928efb5c261af3014c6aae34b5ad28c99b6 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:36:18 +0000
Subject: [PATCH] fix: support dynamic attributes containing call expressions
 (#9443)

Fixes #9403. We weren't taking into account the containment of call expressions logic before.
---
 .changeset/lucky-schools-hang.md                |  5 +++++
 .../src/compiler/phases/2-analyze/index.js      |  2 +-
 .../samples/dynamic-style-attr/_config.js       | 17 +++++++++++++++++
 .../samples/dynamic-style-attr/main.svelte      |  9 +++++++++
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lucky-schools-hang.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte

diff --git a/.changeset/lucky-schools-hang.md b/.changeset/lucky-schools-hang.md
new file mode 100644
index 0000000000..e83a19f3a0
--- /dev/null
+++ b/.changeset/lucky-schools-hang.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure dynamic attributes containing call expressions update
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index c1511e3355..99baf37307 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -762,7 +762,7 @@ const common_visitors = {
 				return false;
 			}
 
-			return chunk.metadata.dynamic;
+			return chunk.metadata.dynamic || chunk.metadata.contains_call_expression;
 		});
 
 		if (is_event_attribute(node)) {
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
new file mode 100644
index 0000000000..f682972179
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<div style="background-color: red">Hello world</div><button>Make blue</button`,
+
+	async test({ assert, target, component }) {
+		const [b1] = target.querySelectorAll('button');
+		flushSync(() => {
+			b1.click();
+		});
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div style="background-color: blue">Hello world</div><button>Make blue</button`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte
new file mode 100644
index 0000000000..f39c691ba3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let color = $state('red');
+
+	const getColor = () => color;
+</script>
+
+<div style="background-color: {getColor()}">Hello world</div>
+
+<button onclick={() => color = 'blue'}>Make blue</button>