fix: improve ssr output of dynamic textarea elements

Author: trueadm

.changeset/nice-avocados-move.md

@@ -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/2-analyze/validation.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)

packages/svelte/src/compiler/phases/3-transform/server/transform-server.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/src/internal/server/index.js

@@ -31,4 +31,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json

@@ -73,4 +73,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/action-with-call/output.json

@@ -38,4 +38,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json

@@ -39,4 +39,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json

@@ -23,4 +23,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/action/output.json

@@ -88,4 +88,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/animation/output.json

@@ -38,4 +38,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json

@@ -38,4 +38,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-containing-solidus/output.json

@@ -52,4 +52,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-curly-bracket/output.json

@@ -44,4 +44,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-dynamic-boolean/output.json

@@ -80,4 +80,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-dynamic/output.json

@@ -105,4 +105,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-empty/output.json

@@ -30,4 +30,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-escaped/output.json

@@ -45,4 +45,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-multiple/output.json

@@ -34,4 +34,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json

@@ -22,4 +22,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-static-boolean/output.json

@@ -30,4 +30,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-static/output.json

@@ -15,7 +15,9 @@
 						"end": 36,
 						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": ["important"],
+						"modifiers": [
+							"important"
+						],
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -45,4 +47,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json

@@ -23,4 +23,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-style-directive-shorthand/output.json

@@ -359,4 +359,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-style-directive-string/output.json

@@ -45,4 +45,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-style-directive/output.json

@@ -38,4 +38,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-style/output.json

@@ -30,4 +30,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json

@@ -46,4 +46,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json

@@ -183,4 +183,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/await-catch/output.json

@@ -252,4 +252,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/await-then-catch/output.json

@@ -109,4 +109,4 @@
 			"sourceType": "module"
 		}
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json

@@ -119,4 +119,4 @@
 			"sourceType": "module"
 		}
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/binding/output.json

@@ -9,8 +9,11 @@
 				"start": 0,
 				"end": 30,
 				"data": " svelte-ignore foo bar ",
-				"ignores": ["foo", "bar"]
+				"ignores": [
+					"foo",
+					"bar"
+				]
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json

@@ -13,4 +13,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/comment/output.json

@@ -77,4 +77,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/component-dynamic/output.json

@@ -22,4 +22,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/convert-entities-in-element/output.json

@@ -13,4 +13,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/convert-entities/output.json

@@ -81,4 +81,4 @@
 			"styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n"
 		}
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/css/output.json

@@ -47,4 +47,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json

@@ -77,4 +77,4 @@
 			}
 		]
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/dynamic-element-variable/output.json

@@ -479,4 +479,4 @@
 			"sourceType": "module"
 		}
 	}
-}
+}

packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json

@@ -265,4 +265,4 @@
 			"sourceType": "module"
 		}
 	}
-}
+}