fix: improve template literal expression output generation

.changeset/eighty-days-cheat.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve template literal expression output generation

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

@@ -1663,6 +1663,14 @@ function serialize_template_literal(values, visit, state) {
 		if (node.type === 'Text') {
 			const last = /** @type {import('estree').TemplateElement} */ (quasis.at(-1));
 			last.value.raw += sanitize_template_string(node.data);
+		} else if (
+			node.type === 'ExpressionTag' &&
+			node.expression.type === 'Literal'
+		) {
+			const last = /** @type {import('estree').TemplateElement} */ (quasis.at(-1));
+			if (node.expression.value != null) {
+				last.value.raw += sanitize_template_string(node.expression.value + '');
+			}
 		} else {
 			if (node.type === 'ExpressionTag' && node.metadata.contains_call_expression) {
 				contains_call_expression = true;

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

@@ -2803,7 +2803,7 @@ export function mount(component, options) {
 					).c = options.context;
 				}
 				// @ts-expect-error the public typings are not what the actual function looks like
-				accessors = component(anchor, options.props || {}, options.events || {});
+				accessors = component(anchor, options.props || {});
 				if (options.context) {
 					pop();
 				}

packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json

@@ -15,7 +15,9 @@
 						"end": 36,
 						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": ["important"],
+						"modifiers": [
+							"important"
+						],
 						"value": [
 							{
 								"type": "MustacheTag",

packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json

@@ -9,7 +9,10 @@
 				"start": 0,
 				"end": 30,
 				"data": " svelte-ignore foo bar ",
-				"ignores": ["foo", "bar"]
+				"ignores": [
+					"foo",
+					"bar"
+				]
 			}
 		]
 	}

packages/svelte/tests/snapshot/samples/each-string-template/_config.js

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

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -0,0 +1,30 @@
+// 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 Each_string_template($$anchor, $$props) {
+	$.push($$props, false);
+
+	/* Init */
+	var fragment = $.comment($$anchor);
+	var node = $.child_frag(fragment);
+
+	$.each_indexed(
+		node,
+		() => ['foo', 'bar', 'baz'],
+		1,
+		($$anchor, thing, $$index) => {
+			/* Init */
+			var node_1 = $.space($$anchor);
+
+			/* Update */
+			$.text_effect(node_1, () => `${$.stringify($.unwrap(thing))}, `);
+			$.close($$anchor, node_1);
+		},
+		null
+	);
+
+	$.close_frag($$anchor, fragment);
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/each-string-template/_expected/server/index.svelte.js

@@ -0,0 +1,22 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import * as $ from "svelte/internal/server";
+
+export default function Each_string_template($$payload, $$props) {
+	$.push(false);
+
+	const anchor = $.create_anchor($$payload);
+	const each_array = $.ensure_array_like(['foo', 'bar', 'baz']);
+
+	$$payload.out += `${anchor}`;
+
+	for (let $$index = 0; $$index < each_array.length; $$index++) {
+		const thing = each_array[$$index];
+		const anchor_1 = $.create_anchor($$payload);
+
+		$$payload.out += `${anchor_1}${$.escape(thing)},${$.escape(' ')}${anchor_1}`;
+	}
+
+	$$payload.out += `${anchor}`;
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/each-string-template/index.svelte

@@ -0,0 +1,3 @@
+{#each ['foo', 'bar', 'baz'] as thing}
+	{thing},{' '}
+{/each}