From a4a789db4dbd43c6fc39de93b4d610ae85a63423 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:27:25 +0000
Subject: [PATCH] fix: improve ssr output of dynamic textarea elements (#10638)

* fix: improve ssr output of dynamic textarea elements

* format
---
 .changeset/nice-avocados-move.md              |  5 +++
 .../compiler/phases/2-analyze/validation.js   | 16 +++++++++
 .../3-transform/server/transform-server.js    | 36 +++++++++----------
 packages/svelte/src/internal/server/index.js  | 25 +++++++++++++
 .../dynamic-element-textarea/_config.js       | 14 ++++++++
 .../dynamic-element-textarea/main.svelte      |  1 +
 .../_expected/client/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          |  2 +-
 .../_expected/server/index.svelte.js          | 13 +------
 9 files changed, 80 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/nice-avocados-move.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte

diff --git a/.changeset/nice-avocados-move.md b/.changeset/nice-avocados-move.md
new file mode 100644
index 0000000000..49f6ed2169
--- /dev/null
+++ b/.changeset/nice-avocados-move.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve ssr output of dynamic textarea elements
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 67d45226f3..b43e5bea65 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -609,6 +609,22 @@ const validation = {
 				error(arg, 'invalid-render-spread-argument');
 			}
 		}
+		const is_inside_textarea = context.path.find((n) => {
+			return (
+				n.type === 'SvelteElement' &&
+				n.name === 'svelte:element' &&
+				n.tag.type === 'Literal' &&
+				n.tag.value === 'textarea'
+			);
+		});
+		if (is_inside_textarea) {
+			error(
+				node,
+				'invalid-tag-placement',
+				'inside <textarea> or <svelte:element this="textarea">',
+				node.expression.name
+			);
+		}
 	},
 	SvelteHead(node) {
 		const attribute = node.attributes[0];
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 1492a9045a..26cccdd992 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
@@ -1274,36 +1274,32 @@ const template_visitors = {
 		context.state.init.push(el_anchor);
 		context.state.template.push(t_expression(anchor_id));
 
-		const [inner_anchor, inner_id] = serialize_anchor(context.state);
-		inner_context.state.init.push(inner_anchor);
-		inner_context.state.template.push(t_string('<'), t_expression(tag));
-		serialize_element_attributes(node, inner_context);
-		inner_context.state.template.push(t_string('>'));
-
-		const before = serialize_template(inner_context.state.template);
 		const main = create_block(node, node.fragment.nodes, {
 			...context,
 			state: { ...context.state, metadata }
 		});
-		const after = serialize_template([
-			t_expression(inner_id),
-			t_string('</'),
-			t_expression(tag),
-			t_string('>')
-		]);
+
+		serialize_element_attributes(node, inner_context);
 
 		context.state.template.push(
 			t_statement(
 				b.if(
 					tag,
-					b.block([
-						...inner_context.state.init,
-						...before,
-						b.if(
-							b.unary('!', b.call('$.VoidElements.has', tag)),
-							b.block([...serialize_template([t_expression(inner_id)]), ...main, ...after])
+
+					b.stmt(
+						b.call(
+							'$.element',
+							b.id('$$payload'),
+							tag,
+							b.thunk(
+								b.block([
+									...inner_context.state.init,
+									...serialize_template(inner_context.state.template)
+								])
+							),
+							b.thunk(b.block(main))
 						)
-					])
+					)
 				)
 			),
 			t_expression(anchor_id)
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 0f9d78afeb..621d052482 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -79,6 +79,31 @@ export function assign_payload(p1, p2) {
 	p1.anchor = p2.anchor;
 }
 
+/**
+ * @param {Payload} payload
+ * @param {string} tag
+ * @param {() => void} attributes_fn
+ * @param {() => void} children_fn
+ * @returns {void}
+ */
+export function element(payload, tag, attributes_fn, children_fn) {
+	payload.out += `<${tag} `;
+	attributes_fn();
+	payload.out += `>`;
+
+	if (!VoidElements.has(tag)) {
+		const anchor = tag !== 'textarea' ? create_anchor(payload) : null;
+		if (anchor !== null) {
+			payload.out += anchor;
+		}
+		children_fn();
+		if (anchor !== null) {
+			payload.out += anchor;
+		}
+		payload.out += `</${tag}>`;
+	}
+}
+
 /**
  * Array of `onDestroy` callbacks that should be called at the end of the server render function
  * @type {Function[]}
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/_config.js
new file mode 100644
index 0000000000..4c0967dae6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<textarea></textarea>',
+
+	test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<textarea></textarea>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte
new file mode 100644
index 0000000000..0ac8ee1e2d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte
@@ -0,0 +1 @@
+<svelte:element this="textarea"></svelte:element>
diff --git a/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
index c9ba1e7c73..4cc594e9d0 100644
--- a/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
@@ -1,4 +1,4 @@
 /* index.svelte.js generated by Svelte VERSION */
 import * as $ from "svelte/internal";
 
-export const object = $.proxy({ ok: true });
+export const object = $.proxy({ ok: true });
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
index d7bc4c8f33..a3b619df6e 100644
--- a/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
@@ -1,4 +1,4 @@
 /* index.svelte.js generated by Svelte VERSION */
 import * as $ from "svelte/internal/server";
 
-export const object = { ok: true };
+export const object = { ok: true };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
index 405a452271..88a0ca6dcd 100644
--- a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
@@ -9,18 +9,7 @@ export default function Svelte_element($$payload, $$props) {
 	const anchor = $.create_anchor($$payload);
 
 	$$payload.out += `${anchor}`;
-
-	if (tag) {
-		const anchor_1 = $.create_anchor($$payload);
-
-		$$payload.out += `<${tag}>`;
-
-		if (!$.VoidElements.has(tag)) {
-			$$payload.out += `${anchor_1}`;
-			$$payload.out += `${anchor_1}</${tag}>`;
-		}
-	}
-
+	if (tag) $.element($$payload, tag, () => {}, () => {});
 	$$payload.out += `${anchor}`;
 	$.bind_props($$props, { tag });
 	$.pop();