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

.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(
+		context.state.template.push(
-			b.call('$.element', b.id('$$payload'), tag, b.thunk(attributes), b.thunk(children))
+			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,7 +72,8 @@ export function assign_payload(p1, p2) {
  * @param {() => void} children_fn
  * @returns {void}
  */
-export function element(payload, tag, attributes_fn, children_fn) {
+export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
+	if (tag) {
 		payload.out += `<${tag} `;
 		attributes_fn();
 		payload.out += `>`;
@@ -86,6 +87,9 @@ export function element(payload, tag, attributes_fn, children_fn) {
 		}
 	}
 
+	payload.out += '<!---->';
+}
+
 /**
  * Array of `onDestroy` callbacks that should be called at the end of the server render function
  * @type {Function[]}

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, () => {}, () => {});
+	$.element($$payload, tag);
-	$$payload.out += `<!---->`;
 }