From bbf489504d36b7e76f54d3635f3256b3ef9b9119 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 7 Jul 2024 20:02:11 -0700
Subject: [PATCH] feat: better `<svelte:element>` SSR output (#12339)

---
 .changeset/plenty-clouds-reply.md             |  5 ++++
 .../3-transform/server/transform-server.js    | 14 +++++++----
 packages/svelte/src/internal/server/index.js  | 24 +++++++++++--------
 .../_expected/server/index.svelte.js          |  3 +--
 4 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/plenty-clouds-reply.md

diff --git a/.changeset/plenty-clouds-reply.md b/.changeset/plenty-clouds-reply.md
new file mode 100644
index 0000000000..78dfeb887c
--- /dev/null
+++ b/.changeset/plenty-clouds-reply.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better `<svelte:element>` SSR output
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 581d4dcd03..4c77aa7ffe 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
@@ -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')));
 		}
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 97ddc6c3aa..fc3ad10d30 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/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 += '<!---->';
 }
 
 /**
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 6560589772..4a766f7de5 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
@@ -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);
 }
\ No newline at end of file