feat: better <svelte:element> SSR output (#12339)

Author: Rich-Harris

.changeset/plenty-clouds-reply.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better `<svelte:element>` SSR output

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1338,12 +1338,18 @@ const template_visitors = {
 			context.visit(node.fragment, state)
 		);
 
-		const body = b.stmt(
-			b.call('$.element', b.id('$$payload'), tag, b.thunk(attributes), b.thunk(children))
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.element',
+					b.id('$$payload'),
+					tag,
+					attributes.body.length > 0 && b.thunk(attributes),
+					children.body.length > 0 && b.thunk(children)
+				)
+			)
 		);
 
-		context.state.template.push(b.if(tag, body), block_anchor);
-
 		if (context.state.options.dev) {
 			context.state.template.push(b.stmt(b.call('$.pop_element')));
 		}

packages/svelte/src/internal/server/index.js

@@ -72,18 +72,22 @@ export function assign_payload(p1, p2) {
  * @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)) {
-		children_fn();
-		if (!RawTextElements.includes(tag)) {
-			payload.out += BLOCK_ANCHOR;
+export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
+	if (tag) {
+		payload.out += `<${tag} `;
+		attributes_fn();
+		payload.out += `>`;
+
+		if (!VoidElements.has(tag)) {
+			children_fn();
+			if (!RawTextElements.includes(tag)) {
+				payload.out += BLOCK_ANCHOR;
+			}
+			payload.out += `</${tag}>`;
 		}
-		payload.out += `</${tag}>`;
 	}
+
+	payload.out += '<!---->';
 }
 
 /**

packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js

@@ -3,6 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Svelte_element($$payload, $$props) {
 	let { tag = 'hr' } = $$props;
 
-	if (tag) $.element($$payload, tag, () => {}, () => {});
-	$$payload.out += `<!---->`;
+	$.element($$payload, tag);
 }