From 1b675c0264f260b217bf159befb7065f16b62f52 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 15 Jan 2024 15:20:17 +0100
Subject: [PATCH] fix: transform textarea and contenteditable binding
 expressions (#10187)

fixes #10185
---
 .changeset/big-cars-serve.md                    |  5 +++++
 .../3-transform/client/visitors/template.js     | 10 +++-------
 .../3-transform/server/transform-server.js      | 17 ++++++++++++-----
 .../samples/binding-store/_config.js            |  8 ++++++++
 .../samples/binding-store/main.svelte           |  4 +++-
 5 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/big-cars-serve.md

diff --git a/.changeset/big-cars-serve.md b/.changeset/big-cars-serve.md
new file mode 100644
index 0000000000..ada0f61ba9
--- /dev/null
+++ b/.changeset/big-cars-serve.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: transform textarea and contenteditable binding expressions
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 6b07a5afd2..3e7cc21403 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
@@ -2595,16 +2595,14 @@ export const template_visitors = {
 			);
 		}
 
-		const getter = b.thunk(
-			/** @type {import('estree').Expression} */ (context.visit(node.expression))
-		);
+		const getter = b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression)));
 		const assignment = b.assignment('=', node.expression, b.id('$$value'));
 		const setter = b.arrow(
 			[b.id('$$value')],
 			serialize_set_binding(
 				assignment,
 				context,
-				() => /** @type {import('estree').Expression} */ (context.visit(assignment)),
+				() => /** @type {import('estree').Expression} */ (visit(assignment)),
 				{
 					skip_proxy_and_freeze: true
 				}
@@ -2767,9 +2765,7 @@ export const template_visitors = {
 							group_getter = b.thunk(
 								b.block([
 									b.stmt(serialize_attribute_value(value, context)[1]),
-									b.return(
-										/** @type {import('estree').Expression} */ (context.visit(node.expression))
-									)
+									b.return(/** @type {import('estree').Expression} */ (visit(node.expression)))
 								])
 							);
 						}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index e068802b7c..49b92191ff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -1452,9 +1452,6 @@ const template_visitors = {
 			context.state.init.push(b.stmt(b.call('$.add_snippet_symbol', node.expression)));
 		}
 	},
-	BindDirective(node, context) {
-		// TODO
-	},
 	Component(node, context) {
 		const state = context.state;
 		const [dec, id] = serialize_anchor(state);
@@ -1694,9 +1691,19 @@ function serialize_element_attributes(node, context) {
 			if (binding?.omit_in_ssr) continue;
 
 			if (ContentEditableBindings.includes(attribute.name)) {
-				content = { escape: false, expression: attribute.expression };
+				content = {
+					escape: false,
+					expression: /** @type {import('estree').Expression} */ (
+						context.visit(attribute.expression)
+					)
+				};
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
-				content = { escape: true, expression: attribute.expression };
+				content = {
+					escape: true,
+					expression: /** @type {import('estree').Expression} */ (
+						context.visit(attribute.expression)
+					)
+				};
 			} else if (attribute.name === 'group') {
 				const value_attribute = /** @type {import('#compiler').Attribute | undefined} */ (
 					node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value')
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js
index 81c83d73de..b8c4ab1f9a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js
@@ -4,11 +4,15 @@ export default test({
 	html: `
 		<input>
 		<p>hello world</p>
+		<textarea></textarea>
+		<div contenteditable="true">world</div>
 	`,
 
 	ssrHtml: `
 		<input value="world">
 		<p>hello world</p>
+		<textarea>world</textarea>
+		<div contenteditable="true">world</div>
 	`,
 
 	async test({ assert, component, target, window }) {
@@ -34,6 +38,8 @@ export default test({
 			`
 			<input>
 			<p>hello everybody</p>
+			<textarea></textarea>
+			<div contenteditable="true">everybody</div>
 		`
 		);
 
@@ -44,6 +50,8 @@ export default test({
 			`
 			<input>
 			<p>hello goodbye</p>
+			<textarea></textarea>
+			<div contenteditable="true">goodbye</div>
 		`
 		);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte
index fd022a34b3..2bcf939af5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte
@@ -6,4 +6,6 @@
 </script>
 
 <input bind:value={$name}>
-<p>hello {$name}</p>
\ No newline at end of file
+<p>hello {$name}</p>
+<textarea bind:value={$name} />
+<div contenteditable="true" bind:innerHTML={$name}></div>