svelte 5.42.2 → 5.43.0

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

@@ -1,4 +1,4 @@
-/** @import { Expression, Identifier, Node, Statement, BlockStatement } from 'estree' */
+/** @import { Expression, Identifier, Node, Statement, BlockStatement, ArrayExpression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ServerTransformState } from '../../types.js' */
 
@@ -77,12 +77,11 @@ export function process_children(nodes, { visit, state }) {
 	}
 
 	for (const node of nodes) {
-		if (node.type === 'ExpressionTag' && node.metadata.expression.has_await) {
+		if (node.type === 'ExpressionTag' && node.metadata.expression.is_async()) {
 			flush();
-			const visited = /** @type {Expression} */ (visit(node.expression));
-			state.template.push(
-				b.stmt(b.call('$$renderer.push', b.thunk(b.call('$.escape', visited), true)))
-			);
+
+			const expression = /** @type {Expression} */ (visit(node.expression));
+			state.template.push(create_push(b.call('$.escape', expression), node.metadata.expression));
 		} else if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') {
 			sequence.push(node);
 		} else {
@@ -275,9 +274,50 @@ export function create_child_block(body, async) {
 /**
  * Creates a `$$renderer.async(...)` expression statement
  * @param {BlockStatement | Expression} body
+ * @param {ArrayExpression} blockers
+ * @param {boolean} has_await
+ * @param {boolean} needs_hydration_markers
+ */
+export function create_async_block(
+	body,
+	blockers = b.array([]),
+	has_await = true,
+	needs_hydration_markers = true
+) {
+	return b.stmt(
+		b.call(
+			needs_hydration_markers ? '$$renderer.async_block' : '$$renderer.async',
+			blockers,
+			b.arrow([b.id('$$renderer')], body, has_await)
+		)
+	);
+}
+
+/**
+ * @param {Expression} expression
+ * @param {ExpressionMetadata} metadata
+ * @param {boolean} needs_hydration_markers
+ * @returns {Expression | Statement}
  */
-export function create_async_block(body) {
-	return b.stmt(b.call('$$renderer.async', b.arrow([b.id('$$renderer')], body, true)));
+export function create_push(expression, metadata, needs_hydration_markers = false) {
+	if (metadata.is_async()) {
+		let statement = b.stmt(b.call('$$renderer.push', b.thunk(expression, metadata.has_await)));
+
+		const blockers = metadata.blockers();
+
+		if (blockers.elements.length > 0) {
+			statement = create_async_block(
+				b.block([statement]),
+				blockers,
+				false,
+				needs_hydration_markers
+			);
+		}
+
+		return statement;
+	}
+
+	return expression;
 }
 
 /**
@@ -291,17 +331,36 @@ export function call_component_renderer(body, component_fn_id) {
 	);
 }
 
+/**
+ * A utility for optimising promises in templates. Without it code like
+ * `<Component foo={await fetch()} bar={await other()} />` would be transformed
+ * into two blocking promises, with it it's using `Promise.all` to await them.
+ * It also keeps track of blocking promises, i.e. those that need to be resolved before continuing.
+ */
 export class PromiseOptimiser {
 	/** @type {Expression[]} */
 	expressions = [];
 
+	has_await = false;
+
+	/** @type {Set<Expression>} */
+	#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);
+			}
+		}
+
 		if (metadata.has_await) {
+			this.has_await = true;
+
 			const length = this.expressions.push(expression);
 			return b.id(`$$${length - 1}`);
 		}
@@ -310,6 +369,10 @@ export class PromiseOptimiser {
 	};
 
 	apply() {
+		if (this.expressions.length === 0) {
+			return b.empty;
+		}
+
 		if (this.expressions.length === 1) {
 			return b.const('$$0', this.expressions[0]);
 		}
@@ -327,4 +390,12 @@ export class PromiseOptimiser {
 			b.await(b.call('Promise.all', promises))
 		);
 	}
+
+	blockers() {
+		return b.array([...this.#blockers]);
+	}
+
+	is_async() {
+		return this.expressions.length > 0 || this.#blockers.size > 0;
+	}
 }

package/src/compiler/phases/3-transform/shared/transform-async.js

@@ -0,0 +1,102 @@
+/** @import * as ESTree from 'estree' */
+/** @import { ComponentAnalysis } from '../../types' */
+import * as b from '#compiler/builders';
+
+/**
+ * Transforms the body of the instance script in such a way that await expressions are made non-blocking as much as possible.
+ *
+ * Example Transformation:
+ * ```js
+ * let x = 1;
+ * let data = await fetch('/api');
+ * let y = data.value;
+ * ```
+ * becomes:
+ * ```js
+ * let x = 1;
+ * var data, y;
+ * var $$promises = $.run([
+ *   () => data = await fetch('/api'),
+ *   () => y = data.value
+ * ]);
+ * ```
+ * where `$$promises` is an array of promises that are resolved in the order they are declared,
+ * and which expressions in the template can await on like `await $$promises[0]` which means they
+ * wouldn't have to wait for e.g. `$$promises[1]` to resolve.
+ *
+ * @param {ComponentAnalysis['instance_body']} instance_body
+ * @param {ESTree.Expression} runner
+ * @param {(node: ESTree.Node) => ESTree.Node} transform
+ * @returns {Array<ESTree.Statement | ESTree.VariableDeclaration>}
+ */
+export function transform_body(instance_body, runner, transform) {
+	// Any sync statements before the first await expression
+	const statements = instance_body.sync.map(
+		(node) => /** @type {ESTree.Statement | ESTree.VariableDeclaration} */ (transform(node))
+	);
+
+	// Declarations for the await expressions (they will asign to them; need to be hoisted to be available in whole instance scope)
+	if (instance_body.declarations.length > 0) {
+		statements.push(
+			b.declaration(
+				'var',
+				instance_body.declarations.map((id) => b.declarator(id))
+			)
+		);
+	}
+
+	// Thunks for the await expressions
+	if (instance_body.async.length > 0) {
+		const thunks = instance_body.async.map((s) => {
+			if (s.node.type === 'VariableDeclarator') {
+				const visited = /** @type {ESTree.VariableDeclaration} */ (
+					transform(b.var(s.node.id, s.node.init))
+				);
+
+				if (visited.declarations.length === 1) {
+					return b.thunk(
+						b.assignment('=', s.node.id, visited.declarations[0].init ?? b.void0),
+						s.has_await
+					);
+				}
+
+				// if we have multiple declarations, it indicates destructuring
+				return b.thunk(
+					b.block([
+						b.var(visited.declarations[0].id, visited.declarations[0].init),
+						...visited.declarations
+							.slice(1)
+							.map((d) => b.stmt(b.assignment('=', d.id, d.init ?? b.void0)))
+					]),
+					s.has_await
+				);
+			}
+
+			if (s.node.type === 'ClassDeclaration') {
+				return b.thunk(
+					b.assignment(
+						'=',
+						s.node.id,
+						/** @type {ESTree.ClassExpression} */ ({ ...s.node, type: 'ClassExpression' })
+					),
+					s.has_await
+				);
+			}
+
+			if (s.node.type === 'ExpressionStatement') {
+				const expression = /** @type {ESTree.Expression} */ (transform(s.node.expression));
+
+				return expression.type === 'AwaitExpression'
+					? b.thunk(expression, true)
+					: b.thunk(b.unary('void', expression), s.has_await);
+			}
+
+			return b.thunk(b.block([/** @type {ESTree.Statement} */ (transform(s.node))]), s.has_await);
+		});
+
+		// TODO get the `$$promises` ID from scope
+		statements.push(b.var('$$promises', b.call(runner, b.array(thunks))));
+	}
+
+	return statements;
+}

package/src/compiler/phases/nodes.js

@@ -1,5 +1,6 @@
 /** @import { Expression, PrivateIdentifier } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
+import * as b from '#compiler/builders';
 
 /**
  * All nodes that can appear elsewhere than the top level, have attributes and can contain children
@@ -91,6 +92,29 @@ export class ExpressionMetadata {
 	 * @type {Set<Binding>}
 	 */
 	references = new Set();
+
+	/** @type {null | Set<Expression>} */
+	#blockers = null;
+
+	#get_blockers() {
+		if (!this.#blockers) {
+			this.#blockers = new Set();
+
+			for (const d of this.dependencies) {
+				if (d.blocker) this.#blockers.add(d.blocker);
+			}
+		}
+
+		return this.#blockers;
+	}
+
+	blockers() {
+		return b.array([...this.#get_blockers()]);
+	}
+
+	is_async() {
+		return this.has_await || this.#get_blockers().size > 0;
+	}
 }
 
 /**

package/src/compiler/phases/scope.js

@@ -108,6 +108,9 @@ export class Binding {
 	/** @type {Array<{ node: Identifier; path: AST.SvelteNode[] }>} */
 	references = [];
 
+	/** @type {Array<{ value: Expression; scope: Scope }>} */
+	assignments = [];
+
 	/**
 	 * For `legacy_reactive`: its reactive dependencies
 	 * @type {Binding[]}
@@ -129,6 +132,15 @@ export class Binding {
 	mutated = false;
 	reassigned = false;
 
+	/**
+	 * Instance-level declarations may follow (or contain) a top-level `await`. In these cases,
+	 * any reads that occur in the template must wait for the corresponding promise to resolve
+	 * otherwise the initial value will not have been assigned
+	 * TODO the blocker is set during transform which feels a bit grubby
+	 * @type {Expression | null}
+	 */
+	blocker = null;
+
 	/**
 	 *
 	 * @param {Scope} scope
@@ -143,6 +155,10 @@ export class Binding {
 		this.initial = initial;
 		this.kind = kind;
 		this.declaration_kind = declaration_kind;
+
+		if (initial) {
+			this.assignments.push({ value: /** @type {Expression} */ (initial), scope });
+		}
 	}
 
 	get updated() {
@@ -859,7 +875,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	/** @type {[Scope, { node: Identifier; path: AST.SvelteNode[] }][]} */
 	const references = [];
 
-	/** @type {[Scope, Pattern | MemberExpression][]} */
+	/** @type {[Scope, Pattern | MemberExpression, Expression][]} */
 	const updates = [];
 
 	/**
@@ -1047,12 +1063,13 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 
 		// updates
 		AssignmentExpression(node, { state, next }) {
-			updates.push([state.scope, node.left]);
+			updates.push([state.scope, node.left, node.right]);
 			next();
 		},
 
 		UpdateExpression(node, { state, next }) {
-			updates.push([state.scope, /** @type {Identifier | MemberExpression} */ (node.argument)]);
+			const expression = /** @type {Identifier | MemberExpression} */ (node.argument);
+			updates.push([state.scope, expression, expression]);
 			next();
 		},
 
@@ -1273,10 +1290,11 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		BindDirective(node, context) {
-			updates.push([
-				context.state.scope,
-				/** @type {Identifier | MemberExpression} */ (node.expression)
-			]);
+			if (node.expression.type !== 'SequenceExpression') {
+				const expression = /** @type {Identifier | MemberExpression} */ (node.expression);
+				updates.push([context.state.scope, expression, expression]);
+			}
+
 			context.next();
 		},
 
@@ -1311,7 +1329,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		scope.reference(node, path);
 	}
 
-	for (const [scope, node] of updates) {
+	for (const [scope, node, value] of updates) {
 		for (const expression of unwrap_pattern(node)) {
 			const left = object(expression);
 			const binding = left && scope.get(left.name);
@@ -1319,6 +1337,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			if (binding !== null && left !== binding.node) {
 				if (left === expression) {
 					binding.reassigned = true;
+					binding.assignments.push({ value, scope });
 				} else {
 					binding.mutated = true;
 				}

package/src/compiler/utils/ast.js

@@ -1,4 +1,4 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Scope } from '#compiler' */
 /** @import * as ESTree from 'estree' */
 import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';

package/src/compiler/utils/builders.js

@@ -82,6 +82,17 @@ export function block(body) {
 	return { type: 'BlockStatement', body };
 }
 
+/**
+ * @param {ESTree.Identifier | null} id
+ * @param {ESTree.ClassBody} body
+ * @param {ESTree.Expression | null} [superClass]
+ * @param {ESTree.Decorator[]} [decorators]
+ * @returns {ESTree.ClassExpression}
+ */
+export function class_expression(id, body, superClass, decorators = []) {
+	return { type: 'ClassExpression', body, superClass, decorators };
+}
+
 /**
  * @param {string} name
  * @param {ESTree.Statement} body
@@ -184,7 +195,7 @@ export function declaration(kind, declarations) {
 
 /**
  * @param {ESTree.Pattern | string} pattern
- * @param {ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclarator}
  */
 export function declarator(pattern, init) {
@@ -520,7 +531,7 @@ const this_instance = {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclaration}
  */
 function let_builder(pattern, init) {
@@ -529,7 +540,7 @@ function let_builder(pattern, init) {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} init
+ * @param {ESTree.Expression | null} init
  * @returns {ESTree.VariableDeclaration}
  */
 function const_builder(pattern, init) {
@@ -538,7 +549,7 @@ function const_builder(pattern, init) {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclaration}
  */
 function var_builder(pattern, init) {

package/src/internal/client/dom/blocks/async.js

@@ -14,10 +14,11 @@ import { get_boundary } from './boundary.js';
 
 /**
  * @param {TemplateNode} node
+ * @param {Array<Promise<void>>} blockers
  * @param {Array<() => Promise<any>>} expressions
  * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
  */
-export function async(node, expressions, fn) {
+export function async(node, blockers = [], expressions = [], fn) {
 	var boundary = get_boundary();
 	var batch = /** @type {Batch} */ (current_batch);
 	var blocking = !boundary.is_pending();
@@ -35,7 +36,7 @@ export function async(node, expressions, fn) {
 		set_hydrate_node(end);
 	}
 
-	flatten([], expressions, (values) => {
+	flatten(blockers, [], expressions, (values) => {
 		if (was_hydrating) {
 			set_hydrating(true);
 			set_hydrate_node(previous_hydrate_node);
@@ -47,12 +48,12 @@ export function async(node, expressions, fn) {
 
 			fn(node, ...values);
 		} finally {
+			if (was_hydrating) {
+				set_hydrating(false);
+			}
+
 			boundary.update_pending_count(-1);
 			batch.decrement(blocking);
 		}
-
-		if (was_hydrating) {
-			set_hydrating(false);
-		}
 	});
 }

package/src/internal/client/dom/blocks/await.js

@@ -12,7 +12,7 @@ import {
 import { queue_micro_task } from '../task.js';
 import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
 import { is_runes } from '../../context.js';
-import { flushSync, is_flushing_sync } from '../../reactivity/batch.js';
+import { Batch, flushSync, is_flushing_sync } from '../../reactivity/batch.js';
 import { BranchManager } from './branches.js';
 import { capture, unset_context } from '../../reactivity/async.js';
 
@@ -69,7 +69,11 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 				if (destroyed) return;
 
 				resolved = true;
-				restore();
+				// We don't want to restore the previous batch here; {#await} blocks don't follow the async logic
+				// we have elsewhere, instead pending/resolve/fail states are each their own batch so to speak.
+				restore(false);
+				// Make sure we have a batch, since the branch manager expects one to exist
+				Batch.ensure();
 
 				if (hydrating) {
 					// `restore()` could set `hydrating` to `true`, which we very much

package/src/internal/client/dom/blocks/boundary.js

@@ -34,7 +34,7 @@ import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
-import { Batch, effect_pending_updates } from '../../reactivity/batch.js';
+import { Batch } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
@@ -110,12 +110,6 @@ export class Boundary {
 	 */
 	#effect_pending = null;
 
-	#effect_pending_update = () => {
-		if (this.#effect_pending) {
-			internal_set(this.#effect_pending, this.#local_pending_count);
-		}
-	};
-
 	#effect_pending_subscriber = createSubscriber(() => {
 		this.#effect_pending = source(this.#local_pending_count);
 
@@ -329,7 +323,10 @@ export class Boundary {
 		this.#update_pending_count(d);
 
 		this.#local_pending_count += d;
-		effect_pending_updates.add(this.#effect_pending_update);
+
+		if (this.#effect_pending) {
+			internal_set(this.#effect_pending, this.#local_pending_count);
+		}
 	}
 
 	get_effect_pending() {

package/src/internal/client/dom/blocks/svelte-head.js

@@ -3,22 +3,13 @@ import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hyd
 import { create_text, get_first_child, get_next_sibling } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 import { COMMENT_NODE, HEAD_EFFECT } from '#client/constants';
-import { HYDRATION_START } from '../../../../constants.js';
-
-/**
- * @type {Node | undefined}
- */
-let head_anchor;
-
-export function reset_head_anchor() {
-	head_anchor = undefined;
-}
 
 /**
+ * @param {string} hash
  * @param {(anchor: Node) => void} render_fn
  * @returns {void}
  */
-export function head(render_fn) {
+export function head(hash, render_fn) {
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
 	// therefore we need to skip that when we detect that we're not in hydration mode.
 	let previous_hydrate_node = null;
@@ -30,15 +21,13 @@ export function head(render_fn) {
 	if (hydrating) {
 		previous_hydrate_node = hydrate_node;
 
-		// There might be multiple head blocks in our app, so we need to account for each one needing independent hydration.
-		if (head_anchor === undefined) {
-			head_anchor = /** @type {TemplateNode} */ (get_first_child(document.head));
-		}
+		var head_anchor = /** @type {TemplateNode} */ (get_first_child(document.head));
 
+		// There might be multiple head blocks in our app, and they could have been
+		// rendered in an arbitrary order — find one corresponding to this component
 		while (
 			head_anchor !== null &&
-			(head_anchor.nodeType !== COMMENT_NODE ||
-				/** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
+			(head_anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (head_anchor).data !== hash)
 		) {
 			head_anchor = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
 		}
@@ -48,7 +37,10 @@ export function head(render_fn) {
 		if (head_anchor === null) {
 			set_hydrating(false);
 		} else {
-			head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(head_anchor)));
+			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
+			head_anchor.remove(); // in case this component is repeated
+
+			set_hydrate_node(start);
 		}
 	}
 
@@ -61,7 +53,6 @@ export function head(render_fn) {
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);
-			head_anchor = hydrate_node; // so that next head block starts from the correct node
 			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
 		}
 	}

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

@@ -483,6 +483,7 @@ function set_attributes(
  * @param {(...expressions: any) => Record<string | symbol, any>} fn
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
+ * @param {Array<Promise<void>>} blockers
  * @param {string} [css_hash]
  * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]
@@ -492,11 +493,12 @@ export function attribute_effect(
 	fn,
 	sync = [],
 	async = [],
+	blockers = [],
 	css_hash,
 	should_remove_defaults = false,
 	skip_warning = false
 ) {
-	flatten(sync, async, (values) => {
+	flatten(blockers, sync, async, (values) => {
 		/** @type {Record<string | symbol, any> | undefined} */
 		var prev = undefined;
 

package/src/internal/client/index.js

@@ -100,6 +100,7 @@ export {
 export {
 	async_body,
 	for_await_track_reactivity_loss,
+	run,
 	save,
 	track_reactivity_loss
 } from './reactivity/async.js';

package/src/internal/client/proxy.js

@@ -267,7 +267,7 @@ export function proxy(value) {
 					if (other_s !== undefined) {
 						set(other_s, UNINITIALIZED);
 					} else if (i in target) {
-						// If the item exists in the original, we need to create a uninitialized source,
+						// If the item exists in the original, we need to create an uninitialized source,
 						// else a later read of the property would result in a source being created with
 						// the value of the original item at that index.
 						other_s = with_parent(() => source(UNINITIALIZED, stack));