From 83f30bf0e8eeb46252cd326fa0fadbe6e926dbf8 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 22 Mar 2024 18:36:24 +0000
Subject: [PATCH] fix: allow runes for variable declarations in the template
 (#10879)

---
 .changeset/red-poets-study.md                 |  5 +++++
 .../3-transform/client/visitors/template.js   |  3 ++-
 .../samples/state-in-template/_config.js      | 19 +++++++++++++++++++
 .../samples/state-in-template/main.svelte     | 19 +++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/red-poets-study.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte

diff --git a/.changeset/red-poets-study.md b/.changeset/red-poets-study.md
new file mode 100644
index 0000000000..3a9338f32a
--- /dev/null
+++ b/.changeset/red-poets-study.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow runes for variable declarations in the template
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 01daedb26c..cc018e91cf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -3223,5 +3223,6 @@ export const template_visitors = {
 			node: b.id('$.document')
 		});
 	},
-	CallExpression: javascript_visitors_runes.CallExpression
+	CallExpression: javascript_visitors_runes.CallExpression,
+	VariableDeclaration: javascript_visitors_runes.VariableDeclaration
 };
diff --git a/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js b/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js
new file mode 100644
index 0000000000..093c240424
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-in-template/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<form><input name="name"><button>Add</button></form>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<form><input name="name"><button>Add</button></form><div></div>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte
new file mode 100644
index 0000000000..b0eb8f8c6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { Set } from 'svelte/reactivity';
+	const set = new Set();
+</script>
+
+<form onsubmit={e => {
+	e.preventDefault();
+	const data = new FormData(e.target);
+	const state = $state({ name: data.get('name') });
+	set.add(state);
+	e.target.reset();
+}}>
+	<input name="name" />
+	<button>Add</button>
+</form>
+
+{#each set as item}
+	<div>{item.name}</div>
+{/each}