fix template effects

Author: Rich-Harris

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

@@ -7,7 +7,7 @@ import { is_ignored } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
-import { build_template_chunk, get_expression_id } from './utils.js';
+import { build_expression, build_template_chunk, get_expression_id } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -121,7 +121,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 			return { value: b.literal(chunk.data), has_state: false };
 		}
 
-		let expression = /** @type {Expression} */ (context.visit(chunk.expression));
+		let expression = build_expression(context, chunk.expression, chunk.metadata.expression);
 
 		return {
 			value: memoize(expression, chunk.metadata.expression),

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

@@ -66,7 +66,7 @@ export function build_template_chunk(
 			state.scope.get('undefined')
 		) {
 			let value = memoize(
-				/** @type {Expression} */ (context.visit(node.expression, state)),
+				build_expression(context, node.expression, node.metadata.expression, state),
 				node.metadata.expression
 			);
 
@@ -367,8 +367,8 @@ export function validate_mutation(node, context, expression) {
  * @param {Expression} expression
  * @param {ExpressionMetadata} metadata
  */
-export function build_expression(context, expression, metadata) {
-	const value = /** @type {Expression} */ (context.visit(expression));
+export function build_expression(context, expression, metadata, state = context.state) {
+	const value = /** @type {Expression} */ (context.visit(expression, state));
 
 	if (context.state.analysis.runes) {
 		return value;
@@ -385,7 +385,7 @@ export function build_expression(context, expression, metadata) {
 			continue;
 		}
 
-		var getter = build_getter({ ...binding.node }, context.state);
+		var getter = build_getter({ ...binding.node }, state);
 
 		if (binding.kind === 'bindable_prop') {
 			getter = b.call('$.deep_read_state', getter);

packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js

@@ -5,8 +5,8 @@ export default test({
 	test({ assert, target }) {
 		const button = target.querySelector('button');
 
-		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 10 - 10`);
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 12 - 12`);
 		flushSync(() => button?.click());
-		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 11 - 10`);
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 13 - 12`);
 	}
 });

packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte

@@ -30,7 +30,7 @@
     {x}
 {/key}
 
-<button on:click={() => count1++}>inc</button>
+<button data-foo={fn(true)} on:click={() => count1++}>{fn('inc')}</button>
 {count1} - {count2}