diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index bdd09cb137..20c66680df 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1379,7 +1379,6 @@ function process_children(nodes, parent, { visit, state }) { state.template.push(' '); - /** @type {import('estree').Expression} */ let text_id = expression; if (text_id.type !== 'Identifier') { @@ -1428,17 +1427,22 @@ function process_children(nodes, parent, { visit, state }) { state.template.push(' '); - const name = state.scope.generate('text'); + let text_id = expression; + + if (text_id.type !== 'Identifier') { + text_id = b.id(state.scope.generate('text')); + state.init.push(b.var(text_id, expression)); + } + const contains_call_expression = sequence.some( (n) => n.type === 'ExpressionTag' && n.metadata.contains_call_expression ); - state.init.push(b.var(name, expression)); const assignment = serialize_template_literal(sequence, visit, state)[1]; - const init = b.stmt(b.assignment('=', b.id(`${name}.nodeValue`), assignment)); + const init = b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), assignment)); const singular = b.stmt( b.call( '$.text_effect', - b.id(name), + text_id, b.thunk(serialize_template_literal(sequence, visit, state)[1]) ) ); @@ -1451,13 +1455,13 @@ function process_children(nodes, parent, { visit, state }) { ) { state.update.push({ singular, - grouped: b.stmt(b.call('$.text', b.id(name), assignment)) + grouped: b.stmt(b.call('$.text', text_id, assignment)) }); } else { state.init.push(init); } - expression = b.call('$.sibling', b.id(name)); + expression = b.call('$.sibling', text_id); } for (let i = 0; i < nodes.length; i += 1) { @@ -1493,10 +1497,15 @@ function process_children(nodes, parent, { visit, state }) { node.metadata.is_controlled = true; visit(node, state); } else { - const name = state.scope.generate(node.type === 'RegularElement' ? node.name : 'node'); - const id = b.id(name); + let id = expression; + + if (id.type !== 'Identifier') { + const name = state.scope.generate(node.type === 'RegularElement' ? node.name : 'node'); + id = b.id(name); + + state.init.push(b.var(id, expression)); + } - state.init.push(b.var(name, expression)); expression = b.call('$.sibling', id); visit(node, { diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js index 3f92e76526..ec2c3ba7ad 100644 --- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js @@ -3,9 +3,6 @@ import "svelte/internal/disclose-version"; import * as $ from "svelte/internal"; -var Button_default = $.template(` `, true); -var frag = $.template(``, true); - export default function Function_prop_no_getter($$anchor, $$props) { $.push($$props, true); @@ -16,7 +13,7 @@ export default function Function_prop_no_getter($$anchor, $$props) { } /* Init */ - var fragment = $.open_frag($$anchor, true, frag); + var fragment = $.open_frag($$anchor, true, $.comment); var node = $.child_frag(fragment); Button(node, { @@ -24,11 +21,11 @@ export default function Function_prop_no_getter($$anchor, $$props) { onmouseup, children: ($$anchor, $$slotProps) => { /* Init */ - var fragment_1 = $.open_frag($$anchor, true, Button_default); - var text = $.child_frag(fragment_1); + var fragment_1 = $.open_frag($$anchor, true, $.space); + var node_1 = $.child_frag(fragment_1); /* Update */ - $.text_effect(text, () => `clicks: ${$.stringify($.get(count))}`); + $.text_effect(node_1, () => `clicks: ${$.stringify($.get(count))}`); $.close_frag($$anchor, fragment_1); } });