chore: improve output for <svelte:element>

.changeset/thin-foxes-lick.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: improve `<svelte:element>` generated code

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -347,6 +347,15 @@ function serialize_element_spread_attributes(attributes, context, element, eleme
  * @returns {boolean}
  */
 function serialize_dynamic_element_spread_attributes(attributes, context, element_id) {
+	if (attributes.length === 0) {
+		if (context.state.analysis.stylesheet.id) {
+			context.state.init.push(
+				b.stmt(b.call('$.class_name', element_id, b.literal(context.state.analysis.stylesheet.id)))
+			);
+		}
+		return false;
+	}
+
 	let is_reactive = false;
 
 	/** @type {import('estree').Expression[]} */
@@ -2101,7 +2110,9 @@ export const template_visitors = {
 					'$.element',
 					context.state.node,
 					get_tag,
-					b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
+					inner.length === 0
+						? /** @type {any} */ (undefined)
+						: b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
 					namespace === 'http://www.w3.org/2000/svg'
 						? b.literal(true)
 						: /** @type {any} */ (undefined)

packages/svelte/src/internal/client/render.js

@@ -1542,7 +1542,7 @@ function swap_block_dom(block, from, to) {
 /**
  * @param {Comment} anchor_node
  * @param {() => string} tag_fn
- * @param {null | ((element: Element, anchor: Node) => void)} render_fn
+ * @param {undefined | ((element: Element, anchor: Node) => void)} render_fn
  * @param {any} is_svg
  * @returns {void}
  */
@@ -1582,7 +1582,7 @@ export function element(anchor_node, tag_fn, render_fn, is_svg = false) {
 				block.d = null;
 			}
 			element = next_element;
-			if (element !== null && render_fn !== null) {
+			if (element !== null && render_fn !== undefined) {
 				let anchor;
 				if (current_hydration_fragment !== null) {
 					// Use the existing ssr comment as the anchor so that the inner open and close

packages/svelte/tests/snapshot/samples/svelte-element/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

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

@@ -0,0 +1,17 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal";
+
+export default function Svelte_element($$anchor, $$props) {
+	$.push($$props, true);
+
+	let tag = $.prop_source($$props, "tag", 'hr', false);
+	/* Init */
+	var fragment = $.comment($$anchor);
+	var node = $.child_frag(fragment);
+
+	$.element(node, () => $.get(tag));
+	$.close_frag($$anchor, fragment);
+	$.pop();
+}

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

@@ -0,0 +1,27 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import * as $ from "svelte/internal/server";
+
+export default function Svelte_element($$payload, $$props) {
+	$.push(true);
+
+	let { tag = 'hr' } = $$props;
+	const anchor = $.create_anchor($$payload);
+
+	$$payload.out += `${anchor}`;
+
+	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();
+}

packages/svelte/tests/snapshot/samples/svelte-element/index.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { tag = 'hr' } = $props();
+</script>
+
+<svelte:element this={tag}  />