fix: wait on dependencies of async bindings (#17120)

dummdidumm · web-flow · commit 68d4f9c3b680 · 2025-11-07T17:40:33.000-05:00
* fix: wait on dependencies of async bindings Correctly takes into account blockers for bindings. Also ensures it works for functional bindings. During that I also noticed a bug in our `nodes_end` assignment logic, which the added test also regresses against. Fixes #17092 Fixes #17090 * ensure async static props/attributes are awaited * wait on blockers in binding validation * await dependencies of style directives * tidy
diff --git a/.changeset/eleven-cases-sing.md b/.changeset/eleven-cases-sing.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure async static props/attributes are awaited
diff --git a/.changeset/five-coats-travel.md b/.changeset/five-coats-travel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: wait on dependencies of async bindings
diff --git a/.changeset/huge-walls-hang.md b/.changeset/huge-walls-hang.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: await dependencies of style directives
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -159,6 +159,16 @@ export function BindDirective(node, context) {
 
 		mark_subtree_dynamic(context.path);
 
+		const [get, set] = node.expression.expressions;
+		// We gotta jump across the getter/setter functions to avoid the expression metadata field being reset to null
+		context.visit(get.type === 'ArrowFunctionExpression' ? get.body : get, {
+			...context.state,
+			expression: node.metadata.expression
+		});
+		context.visit(set.type === 'ArrowFunctionExpression' ? set.body : set, {
+			...context.state,
+			expression: node.metadata.expression
+		});
 		return;
 	}
 
@@ -247,13 +257,14 @@ export function BindDirective(node, context) {
 
 		node.metadata = {
 			binding_group_name: group_name,
-			parent_each_blocks: each_blocks
+			parent_each_blocks: each_blocks,
+			expression: node.metadata.expression
 		};
 	}
 
 	if (binding?.kind === 'each' && binding.metadata?.inside_rest) {
 		w.bind_invalid_each_rest(binding.node, binding.node.name);
 	}
 
-	context.next();
+	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -23,16 +23,17 @@ export function StyleDirective(node, context) {
 			if (binding.kind !== 'normal') {
 				node.metadata.expression.has_state = true;
 			}
+			if (binding.blocker) {
+				node.metadata.expression.dependencies.add(binding);
+			}
 		}
 	} else {
 		context.next();
 
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
 
-			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
-			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-			node.metadata.expression.has_await ||= chunk.metadata.expression.has_await;
+			node.metadata.expression.merge(chunk.metadata.expression);
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -250,10 +250,13 @@ export function BindDirective(node, context) {
 
 	let statement = defer ? b.stmt(b.call('$.effect', b.thunk(call))) : b.stmt(call);
 
-	// TODO this doesn't account for function bindings
-	if (node.metadata.binding?.blocker) {
+	if (node.metadata.expression.is_async()) {
 		statement = b.stmt(
-			b.call(b.member(node.metadata.binding.blocker, b.id('then')), b.thunk(b.block([statement])))
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
 		);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -484,21 +484,6 @@ function setup_select_synchronization(value_binding, context) {
 	);
 }
 
-/**
- * @param {ExpressionMetadata} target
- * @param {ExpressionMetadata} source
- */
-function merge_metadata(target, source) {
-	target.has_assignment ||= source.has_assignment;
-	target.has_await ||= source.has_await;
-	target.has_call ||= source.has_call;
-	target.has_member_expression ||= source.has_member_expression;
-	target.has_state ||= source.has_state;
-
-	for (const r of source.references) target.references.add(r);
-	for (const b of source.dependencies) target.dependencies.add(b);
-}
-
 /**
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
@@ -514,7 +499,7 @@ export function build_class_directives_object(
 	const metadata = new ExpressionMetadata();
 
 	for (const d of class_directives) {
-		merge_metadata(metadata, d.metadata.expression);
+		metadata.merge(d.metadata.expression);
 
 		const expression = /** @type Expression */ (context.visit(d.expression));
 		properties.push(b.init(d.name, expression));
@@ -541,7 +526,7 @@ export function build_style_directives_object(
 	const metadata = new ExpressionMetadata();
 
 	for (const d of style_directives) {
-		merge_metadata(metadata, d.metadata.expression);
+		metadata.merge(d.metadata.expression);
 
 		const expression =
 			d.value === true
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -171,8 +171,6 @@ export function build_component(node, component_name, context) {
 				attribute.value,
 				context,
 				(value, metadata) => {
-					if (!metadata.has_state && !metadata.has_await) return value;
-
 					// When we have a non-simple computation, anything other than an Identifier or Member expression,
 					// then there's a good chance it needs to be memoized to avoid over-firing when read within the
 					// child component (e.g. `active={i === index}`)
@@ -198,7 +196,12 @@ export function build_component(node, component_name, context) {
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
+			const expression = /** @type {Expression} */ (
+				context.visit(attribute.expression, { ...context.state, memoizer })
+			);
+
+			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
+			memoizer.check_blockers(attribute.metadata.expression);
 
 			if (
 				dev &&
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -122,7 +122,7 @@ export function build_attribute_value(value, context, memoize = (value) => value
 
 		return {
 			value: memoize(expression, chunk.metadata.expression),
-			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.has_await
+			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.is_async()
 		};
 	}
 
@@ -170,7 +170,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
 	if (class_directives.length) {
 		next = build_class_directives_object(class_directives, context);
 		has_state ||= class_directives.some(
-			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
 		);
 
 		if (has_state) {
@@ -240,7 +240,7 @@ export function build_set_style(node_id, attribute, style_directives, context) {
 	if (style_directives.length) {
 		next = build_style_directives_object(style_directives, context);
 		has_state ||= style_directives.some(
-			(d) => d.metadata.expression.has_state || d.metadata.expression.has_await
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
 		);
 
 		if (has_state) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -31,11 +31,7 @@ export class Memoizer {
 	 * @param {boolean} memoize_if_state
 	 */
 	add(expression, metadata, memoize_if_state = false) {
-		for (const binding of metadata.dependencies) {
-			if (binding.blocker) {
-				this.#blockers.add(binding.blocker);
-			}
-		}
+		this.check_blockers(metadata);
 
 		const should_memoize =
 			metadata.has_call || metadata.has_await || (memoize_if_state && metadata.has_state);
@@ -52,6 +48,17 @@ export class Memoizer {
 		return id;
 	}
 
+	/**
+	 * @param {ExpressionMetadata} metadata
+	 */
+	check_blockers(metadata) {
+		for (const binding of metadata.dependencies) {
+			if (binding.blocker) {
+				this.#blockers.add(binding.blocker);
+			}
+		}
+	}
+
 	apply() {
 		return [...this.#sync, ...this.#async].map((memo, i) => {
 			memo.id.name = `$${i}`;
@@ -348,6 +355,7 @@ export function validate_binding(state, binding, expression) {
 			b.call(
 				'$.validate_binding',
 				b.literal(state.analysis.source.slice(binding.start, binding.end)),
+				binding.metadata.expression.blockers(),
 				b.thunk(
 					state.store_to_invalidate ? b.sequence([b.call('$.mark_store_binding'), obj]) : obj
 				),
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -107,6 +107,9 @@ export function build_inline_component(node, expression, context) {
 
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
+			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
+			optimiser.check_blockers(attribute.metadata.expression);
+
 			if (attribute.expression.type === 'SequenceExpression') {
 				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
 					.expressions;
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -121,6 +121,8 @@ export function build_element_attributes(node, context, transform) {
 				expression = b.call(expression.expressions[0]);
 			}
 
+			expression = transform(expression, attribute.metadata.expression);
+
 			if (is_content_editable_binding(attribute.name)) {
 				content = expression;
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -347,16 +347,11 @@ export class PromiseOptimiser {
 	#blockers = new Set();
 
 	/**
-	 *
 	 * @param {Expression} expression
 	 * @param {ExpressionMetadata} metadata
 	 */
 	transform = (expression, metadata) => {
-		for (const binding of metadata.dependencies) {
-			if (binding.blocker) {
-				this.#blockers.add(binding.blocker);
-			}
-		}
+		this.check_blockers(metadata);
 
 		if (metadata.has_await) {
 			this.has_await = true;
@@ -368,6 +363,17 @@ export class PromiseOptimiser {
 		return expression;
 	};
 
+	/**
+	 * @param {ExpressionMetadata} metadata
+	 */
+	check_blockers(metadata) {
+		for (const binding of metadata.dependencies) {
+			if (binding.blocker) {
+				this.#blockers.add(binding.blocker);
+			}
+		}
+	}
+
 	apply() {
 		if (this.expressions.length === 0) {
 			return b.empty;
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
@@ -115,6 +115,21 @@ export class ExpressionMetadata {
 	is_async() {
 		return this.has_await || this.#get_blockers().size > 0;
 	}
+
+	/**
+	 * @param {ExpressionMetadata} source
+	 */
+	merge(source) {
+		this.has_state ||= source.has_state;
+		this.has_call ||= source.has_call;
+		this.has_await ||= source.has_await;
+		this.has_member_expression ||= source.has_member_expression;
+		this.has_assignment ||= source.has_assignment;
+		this.#blockers = null; // so that blockers are recalculated
+
+		for (const r of source.references) this.references.add(r);
+		for (const b of source.dependencies) this.dependencies.add(b);
+	}
 }
 
 /**
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
@@ -210,6 +210,7 @@ export namespace AST {
 			binding?: Binding | null;
 			binding_group_name: Identifier;
 			parent_each_blocks: EachBlock[];
+			expression: ExpressionMetadata;
 		};
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
@@ -20,7 +20,7 @@ import {
 	TEMPLATE_USE_MATHML,
 	TEMPLATE_USE_SVG
 } from '../../../constants.js';
-import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, TEXT_NODE } from '#client/constants';
+import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, EFFECT_RAN, TEXT_NODE } from '#client/constants';
 
 /**
  * @param {TemplateNode} start
@@ -344,7 +344,13 @@ export function comment() {
  */
 export function append(anchor, dom) {
 	if (hydrating) {
-		/** @type {Effect} */ (active_effect).nodes_end = hydrate_node;
+		var effect = /** @type {Effect} */ (active_effect);
+		// When hydrating and outer component and an inner component is async, i.e. blocked on a promise,
+		// then by the time the inner resolves we have already advanced to the end of the hydrated nodes
+		// of the parent component. Check for defined for that reason to avoid rewinding the parent's end marker.
+		if ((effect.f & EFFECT_RAN) === 0 || effect.nodes_end === null) {
+			effect.nodes_end = hydrate_node;
+		}
 		hydrate_next();
 		return;
 	}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -102,7 +102,8 @@ export {
 	for_await_track_reactivity_loss,
 	run,
 	save,
-	track_reactivity_loss
+	track_reactivity_loss,
+	run_after_blockers
 } from './reactivity/async.js';
 export { eager, flushSync as flush } from './reactivity/batch.js';
 export {
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
@@ -84,6 +84,14 @@ export function flatten(blockers, sync, async, fn) {
 	}
 }
 
+/**
+ * @param {Array<Promise<void>>} blockers
+ * @param {(values: Value[]) => any} fn
+ */
+export function run_after_blockers(blockers, fn) {
+	flatten(blockers, [], [], fn);
+}
+
 /**
  * Captures the current effect context so that we can restore it after
  * some asynchronous work has happened (so that e.g. `await a + b`
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/Child.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/Child.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/async-style-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/async-style-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/main.svelte

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: ensure async static props/attributes are awaited
Original file line number	Diff line number	Diff line change
`@@ -23,16 +23,17 @@ export function StyleDirective(node, context) {`
`23`	`23`	`if (binding.kind !== 'normal') {`
`24`	`24`	`node.metadata.expression.has_state = true;`
`25`	`25`	`}`
	`26`	`+ if (binding.blocker) {`
	`27`	`+ node.metadata.expression.dependencies.add(binding);`
	`28`	`+ }`
`26`	`29`	`}`
`27`	`30`	`} else {`
`28`	`31`	`context.next();`
`29`	`32`
`30`	`33`	`for (const chunk of get_attribute_chunks(node.value)) {`
`31`	`34`	`if (chunk.type !== 'ExpressionTag') continue;`
`32`	`35`
`33`		`- node.metadata.expression.has_state \|\|= chunk.metadata.expression.has_state;`
`34`		`- node.metadata.expression.has_call \|\|= chunk.metadata.expression.has_call;`
`35`		`- node.metadata.expression.has_await \|\|= chunk.metadata.expression.has_await;`
	`36`	`+ node.metadata.expression.merge(chunk.metadata.expression);`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`	`}`