fix: improve ssr output of dynamic textarea elements (#10638)

* fix: improve ssr output of dynamic textarea elements

* format

.changeset/nice-avocados-move.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve ssr output of dynamic textarea elements

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];

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),
+		serialize_element_attributes(node, inner_context);
-			t_string('</'),
-			t_expression(tag),
-			t_string('>')
-		]);
 
 		context.state.template.push(
 			t_statement(
 				b.if(
 					tag,
-					b.block([
+
-						...inner_context.state.init,
+					b.stmt(
-						...before,
+						b.call(
-						b.if(
+							'$.element',
-							b.unary('!', b.call('$.VoidElements.has', tag)),
+							b.id('$$payload'),
-							b.block([...serialize_template([t_expression(inner_id)]), ...main, ...after])
+							tag,
+							b.thunk(
+								b.block([
+									...inner_context.state.init,
+									...serialize_template(inner_context.state.template)
+								])
+							),
+							b.thunk(b.block(main))
 						)
-					])
+					)
 				)
 			),
 			t_expression(anchor_id)

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[]}

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>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte

@@ -0,0 +1 @@
+<svelte:element this="textarea"></svelte:element>

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 });

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 };

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) $.element($$payload, tag, () => {}, () => {});
-	if (tag) {
-		const anchor_1 = $.create_anchor($$payload);
-
-		$$payload.out += `<${tag}>`;
-
-		if (!$.VoidElements.has(tag)) {
-			$$payload.out += `${anchor_1}`;
-			$$payload.out += `${anchor_1}</${tag}>`;
-		}
-	}
-
 	$$payload.out += `${anchor}`;
 	$.bind_props($$props, { tag });
 	$.pop();