fix : bug "$0 is not defined" with svelte:element and a single class with a function call (#15396)

* add spread to test

* fix #15386

* fix #15392

* test

* changeset

* use is_text_attribute

Author: adiguba

.changeset/two-dragons-camp.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix : bug "$0 is not defined" on svelte:element with a function call on class

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

@@ -83,9 +83,10 @@ export function SvelteElement(node, context) {
 	if (
 		attributes.length === 1 &&
 		attributes[0].type === 'Attribute' &&
-		attributes[0].name.toLowerCase() === 'class'
+		attributes[0].name.toLowerCase() === 'class' &&
+		is_text_attribute(attributes[0])
 	) {
-		// special case when there only a class attribute
+		// special case when there only a class attribute, without call expression
 		let { value, has_state } = build_attribute_value(
 			attributes[0].value,
 			context,

packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js

@@ -0,0 +1,60 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+	`,
+
+	async test({ assert, target, component }) {
+		component.active = true;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div></div>
+			<div class="red svelte-p153w3"></div>
+			<div class="active"></div>
+			<div class="red svelte-p153w3 active"></div>
+			<div class="blue svelte-p153w3"></div>
+			<div class="blue svelte-p153w3 active"></div>
+		`
+		);
+
+		component.tag = 'span';
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="active"></span>
+			<span class="red svelte-p153w3 active"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3 active"></span>
+		`
+		);
+
+		component.active = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class=""></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	let { tag = "div", active = false } = $props();
+
+	function cn(classname) {
+		return classname;
+	}
+</script>
+
+<svelte:element this={tag}></svelte:element>
+<svelte:element this={tag} class="red"></svelte:element>
+<svelte:element this={tag} class:active={active}></svelte:element>
+<svelte:element this={tag} class="red" class:active={active}></svelte:element>
+<svelte:element this={tag} class={cn("blue")}></svelte:element>
+<svelte:element this={tag} class={cn("blue")} class:active={active}></svelte:element>
+
+<style>
+	.red {
+		color: red;
+	}
+</style>