fix: take async into account for bindings/transitions/animations/attachments (#17198)

* fix: take async into account for bindings/transitions/animations/attachments

- block on async work
- error at compile time on await expressions. Right now it gives confusing errors later at compile time or at runtime

Fixes #17194

* this was weird

Author: dummdidumm

.changeset/itchy-forks-greet.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: error at compile time instead of at runtime on await expressions inside bindings/transitions/animations/attachments

.changeset/plain-bikes-smile.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: take async blockers into account for bindings/transitions/animations/attachments

documentation/docs/98-reference/.generated/compile-errors.md

@@ -561,6 +561,12 @@ Cannot use `await` in deriveds and template expressions, or at the top level of
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_await_expression
+
+```
+`use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+```
+
 ### illegal_element_attribute
 
 ```

packages/svelte/messages/compile-errors/template.md

@@ -231,6 +231,10 @@ The same applies to components:
 
 > Expected whitespace
 
+## illegal_await_expression
+
+> `use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+
 ## illegal_element_attribute
 
 > `<%name%>` does not support non-event attributes or spread attributes

packages/svelte/src/compiler/errors.js

@@ -1148,6 +1148,15 @@ export function expected_whitespace(node) {
 	e(node, 'expected_whitespace', `Expected whitespace\nhttps://svelte.dev/e/expected_whitespace`);
 }
 
+/**
+ * `use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function illegal_await_expression(node) {
+	e(node, 'illegal_await_expression', `\`use:\`, \`transition:\` and \`animate:\` directives, attachments and bindings do not support await expressions\nhttps://svelte.dev/e/illegal_await_expression`);
+}
+
 /**
  * `<%name%>` does not support non-event attributes or spread attributes
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -654,8 +654,7 @@ function read_attribute(parser) {
 			}
 		}
 
-		/** @type {AST.Directive} */
-		const directive = {
+		const directive = /** @type {AST.Directive} */ ({
 			start,
 			end,
 			type,
@@ -664,7 +663,7 @@ function read_attribute(parser) {
 			metadata: {
 				expression: new ExpressionMetadata()
 			}
-		};
+		});
 
 		// @ts-expect-error we do this separately from the declaration to avoid upsetting typescript
 		directive.modifiers = modifiers;

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -24,6 +24,7 @@ import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
 import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { AnimateDirective } from './visitors/AnimateDirective.js';
 import { AttachTag } from './visitors/AttachTag.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
@@ -142,6 +143,7 @@ const visitors = {
 			pop_ignore();
 		}
 	},
+	AnimateDirective,
 	ArrowFunctionExpression,
 	AssignmentExpression,
 	AttachTag,

packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js

@@ -0,0 +1,15 @@
+/** @import { Context } from '../types' */
+/** @import { AST } from '#compiler'; */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AST.AnimateDirective} node
+ * @param {Context} context
+ */
+export function AnimateDirective(node, context) {
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
+}

packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js

@@ -1,7 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import * as e from '../../../errors.js';
 
 /**
  * @param {AST.AttachTag} node
@@ -10,4 +10,8 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function AttachTag(node, context) {
 	mark_subtree_dynamic(context.path);
 	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js

@@ -161,6 +161,7 @@ export function BindDirective(node, context) {
 
 		const [get, set] = node.expression.expressions;
 		// We gotta jump across the getter/setter functions to avoid the expression metadata field being reset to null
+		// as we want to collect the functions' blocker/async info
 		context.visit(get.type === 'ArrowFunctionExpression' ? get.body : get, {
 			...context.state,
 			expression: node.metadata.expression
@@ -169,6 +170,11 @@ export function BindDirective(node, context) {
 			...context.state,
 			expression: node.metadata.expression
 		});
+
+		if (node.metadata.expression.has_await) {
+			e.illegal_await_expression(node);
+		}
+
 		return;
 	}
 
@@ -267,4 +273,8 @@ export function BindDirective(node, context) {
 	}
 
 	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }