wait on blockers in binding validation

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

@@ -355,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
 				),

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

@@ -5,6 +5,7 @@ import { FILENAME } from '../../constants.js';
 import { render_effect } from './reactivity/effects.js';
 import * as w from './warnings.js';
 import { capture_store_binding } from './reactivity/store.js';
+import { run_after_blockers } from './reactivity/async.js';
 
 /**
  * @param {() => any} collection
@@ -40,44 +41,47 @@ export function validate_each_keys(collection, key_fn) {
 
 /**
  * @param {string} binding
+ * @param {Array<Promise<void>>} blockers
  * @param {() => Record<string, any>} get_object
  * @param {() => string} get_property
  * @param {number} line
  * @param {number} column
  */
-export function validate_binding(binding, get_object, get_property, line, column) {
-	var warned = false;
+export function validate_binding(binding, blockers, get_object, get_property, line, column) {
+	run_after_blockers(blockers, () => {
+		var warned = false;
 
-	var filename = dev_current_component_function?.[FILENAME];
+		var filename = dev_current_component_function?.[FILENAME];
 
-	render_effect(() => {
-		if (warned) return;
+		render_effect(() => {
+			if (warned) return;
 
-		var [object, is_store_sub] = capture_store_binding(get_object);
+			var [object, is_store_sub] = capture_store_binding(get_object);
 
-		if (is_store_sub) return;
+			if (is_store_sub) return;
 
-		var property = get_property();
+			var property = get_property();
 
-		var ran = false;
+			var ran = false;
 
-		// by making the (possibly false, but it would be an extreme edge case) assumption
-		// that a getter has a corresponding setter, we can determine if a property is
-		// reactive by seeing if this effect has dependencies
-		var effect = render_effect(() => {
-			if (ran) return;
+			// by making the (possibly false, but it would be an extreme edge case) assumption
+			// that a getter has a corresponding setter, we can determine if a property is
+			// reactive by seeing if this effect has dependencies
+			var effect = render_effect(() => {
+				if (ran) return;
 
-			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			object[property];
-		});
+				// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+				object[property];
+			});
 
-		ran = true;
+			ran = true;
 
-		if (effect.deps === null) {
-			var location = `${filename}:${line}:${column}`;
-			w.binding_property_non_reactive(binding, location);
+			if (effect.deps === null) {
+				var location = `${filename}:${line}:${column}`;
+				w.binding_property_non_reactive(binding, location);
 
-			warned = true;
-		}
+				warned = true;
+			}
+		});
 	});
 }