svelte 5.43.13 → 5.43.14

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.43.13",
+  "version": "5.43.14",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

package/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

package/src/compiler/migrate/index.js

@@ -1058,8 +1058,6 @@ const template = {
 		handle_identifier(node, state, path);
 	},
 	RegularElement(node, { state, path, next }) {
-		migrate_slot_usage(node, path, state);
-		handle_events(node, state);
 		// Strip off any namespace from the beginning of the node name.
 		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
 
@@ -1067,8 +1065,12 @@ const template = {
 			let trimmed_position = node.end - 2;
 			while (state.str.original.charAt(trimmed_position - 1) === ' ') trimmed_position--;
 			state.str.remove(trimmed_position, node.end - 1);
-			state.str.appendRight(node.end, `</${node.name}>`);
+			state.str.appendLeft(node.end, `</${node.name}>`);
 		}
+
+		migrate_slot_usage(node, path, state);
+		handle_events(node, state);
+
 		next();
 	},
 	SvelteSelf(node, { state, next }) {

package/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;

package/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,

package/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);
+	}
+}

package/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);
+	}
 }

package/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);
+	}
 }

package/src/compiler/phases/2-analyze/visitors/TransitionDirective.js

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

package/src/compiler/phases/2-analyze/visitors/UseDirective.js

@@ -1,6 +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.UseDirective} node
@@ -8,5 +9,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function UseDirective(node, context) {
 	mark_subtree_dynamic(context.path);
-	context.next();
+
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }

package/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js

@@ -15,14 +15,24 @@ export function AnimateDirective(node, context) {
 			: b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
 
 	// in after_update to ensure it always happens after bind:this
-	context.state.after_update.push(
-		b.stmt(
-			b.call(
-				'$.animation',
-				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name)))),
-				expression
-			)
+	let statement = b.stmt(
+		b.call(
+			'$.animation',
+			context.state.node,
+			b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name)))),
+			expression
 		)
 	);
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.after_update.push(statement);
 }

package/src/compiler/phases/3-transform/client/visitors/AttachTag.js

@@ -9,6 +9,18 @@ import { build_expression } from './shared/utils.js';
  */
 export function AttachTag(node, context) {
 	const expression = build_expression(context, node.expression, node.metadata.expression);
-	context.state.init.push(b.stmt(b.call('$.attach', context.state.node, b.thunk(expression))));
+	let statement = b.stmt(b.call('$.attach', context.state.node, b.thunk(expression)));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
 	context.next();
 }

package/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js

@@ -25,5 +25,17 @@ export function TransitionDirective(node, context) {
 	}
 
 	// in after_update to ensure it always happens after bind:this
-	context.state.after_update.push(b.stmt(b.call('$.transition', ...args)));
+	let statement = b.stmt(b.call('$.transition', ...args));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.after_update.push(statement);
 }

package/src/compiler/phases/3-transform/client/visitors/UseDirective.js

@@ -32,6 +32,18 @@ export function UseDirective(node, context) {
 	}
 
 	// actions need to run after attribute updates in order with bindings/events
-	context.state.init.push(b.stmt(b.call('$.action', ...args)));
+	let statement = b.stmt(b.call('$.action', ...args));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
 	context.next();
 }

package/src/compiler/phases/3-transform/client/visitors/shared/component.js

@@ -296,6 +296,9 @@ export function build_component(node, component_name, context) {
 				);
 			}
 
+			// TODO also support await expressions here?
+			memoizer.check_blockers(attribute.metadata.expression);
+
 			push_prop(b.prop('init', b.call('$.attachment'), expression, true));
 		}
 	}

package/src/compiler/phases/3-transform/server/visitors/shared/component.js

@@ -142,6 +142,10 @@ export function build_inline_component(node, expression, context) {
 					true
 				);
 			}
+		} else if (attribute.type === 'AttachTag') {
+			// While we don't run attachments on the server, on the client they might generate a surrounding blocker function which generates
+			// extra comments, and to prevent hydration mismatches we therefore have to account for them here to generate similar comments on the server.
+			optimiser.check_blockers(attribute.metadata.expression);
 		}
 	}
 

package/src/internal/client/dom/elements/transitions.js

@@ -1,13 +1,7 @@
 /** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, TransitionFn, TransitionManager } from '#client' */
 import { noop, is_function } from '../../../shared/utils.js';
 import { effect } from '../../reactivity/effects.js';
-import {
-	active_effect,
-	active_reaction,
-	set_active_effect,
-	set_active_reaction,
-	untrack
-} from '../../runtime.js';
+import { active_effect, untrack } from '../../runtime.js';
 import { loop } from '../../loop.js';
 import { should_intro } from '../../render.js';
 import { current_each_item } from '../blocks/each.js';

package/src/internal/client/reactivity/async.js

@@ -26,6 +26,7 @@ import {
 } from './deriveds.js';
 import { aborted } from './effects.js';
 import { hydrate_next, hydrating, set_hydrate_node, skip_nodes } from '../dom/hydration.js';
+import { current_each_item, set_current_each_item } from '../dom/blocks/each.js';
 
 /**
  * @param {Array<Promise<void>>} blockers
@@ -89,7 +90,11 @@ export function flatten(blockers, sync, async, fn) {
  * @param {(values: Value[]) => any} fn
  */
 export function run_after_blockers(blockers, fn) {
-	flatten(blockers, [], [], fn);
+	var each_item = current_each_item; // TODO should this be part of capture?
+	flatten(blockers, [], [], (v) => {
+		set_current_each_item(each_item);
+		fn(v);
+	});
 }
 
 /**

package/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.43.13';
+export const VERSION = '5.43.14';
 export const PUBLIC_VERSION = '5';