improve output for <svelte:element>

Author: Rich-Harris

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/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 v5.0.0-next.13)
+// 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 v5.0.0-next.13)
+// 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}  />