fix: improve template literal expression output generation (#10147)

* fix: improve template literal expression output generation

* do not proxy template literal

Author: trueadm

.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/utils.js

@@ -615,6 +615,7 @@ export function should_proxy_or_freeze(node) {
 	if (
 		!node ||
 		node.type === 'Literal' ||
+		node.type === 'TemplateLiteral' ||
 		node.type === 'ArrowFunctionExpression' ||
 		node.type === 'FunctionExpression' ||
 		node.type === 'UnaryExpression' ||

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

@@ -1663,6 +1663,11 @@ 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/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -45,4 +45,4 @@ export default function Main($$anchor, $$props) {
 
 	$.close_frag($$anchor, fragment);
 	$.pop();
-}
+}

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}

packages/svelte/tests/snapshot/samples/state-proxy-literal/_config.js

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