Merge branch 'main' into fix-ssr-boundary-in-async

Author: ottomated

.changeset/legal-mangos-peel.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: change title only after any pending work has completed

packages/svelte/CHANGELOG.md

@@ -1,5 +1,35 @@
 # svelte
 
+## 5.43.2
+
+### Patch Changes
+
+- fix: treat each blocks with async dependencies as uncontrolled ([#17077](https://github.com/sveltejs/svelte/pull/17077))
+
+## 5.43.1
+
+### Patch Changes
+
+- fix: transform `$bindable` after `await` expressions ([#17066](https://github.com/sveltejs/svelte/pull/17066))
+
+## 5.43.0
+
+### Minor Changes
+
+- feat: out-of-order rendering ([#17038](https://github.com/sveltejs/svelte/pull/17038))
+
+### Patch Changes
+
+- fix: settle batch after DOM updates ([#17054](https://github.com/sveltejs/svelte/pull/17054))
+
+## 5.42.3
+
+### Patch Changes
+
+- fix: handle `<svelte:head>` rendered asynchronously ([#17052](https://github.com/sveltejs/svelte/pull/17052))
+
+- fix: don't restore batch in `#await` ([#17051](https://github.com/sveltejs/svelte/pull/17051))
+
 ## 5.42.2
 
 ### Patch Changes

packages/svelte/package.json

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

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

@@ -6,7 +6,12 @@ import { walk } from 'zimmerframe';
 import { parse } from '../1-parse/acorn.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
-import { extract_identifiers, has_await_expression } from '../../utils/ast.js';
+import {
+	extract_identifiers,
+	has_await_expression,
+	object,
+	unwrap_pattern
+} from '../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
@@ -543,7 +548,13 @@ export function analyze_component(root, source, options) {
 		snippet_renderers: new Map(),
 		snippets: new Set(),
 		async_deriveds: new Set(),
-		pickled_awaits: new Set()
+		pickled_awaits: new Set(),
+		instance_body: {
+			sync: [],
+			async: [],
+			declarations: [],
+			hoisted: []
+		}
 	};
 
 	if (!runes) {
@@ -676,6 +687,194 @@ export function analyze_component(root, source, options) {
 		}
 	}
 
+	/**
+	 * @param {ESTree.Node} expression
+	 * @param {Scope} scope
+	 * @param {Set<Binding>} touched
+	 * @param {Set<ESTree.Node>} seen
+	 */
+	const touch = (expression, scope, touched, seen = new Set()) => {
+		if (seen.has(expression)) return;
+		seen.add(expression);
+
+		walk(
+			expression,
+			{ scope },
+			{
+				ImportDeclaration(node) {},
+				Identifier(node, context) {
+					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+					if (is_reference(node, parent)) {
+						const binding = context.state.scope.get(node.name);
+						if (binding) {
+							touched.add(binding);
+
+							for (const assignment of binding.assignments) {
+								touch(assignment.value, assignment.scope, touched, seen);
+							}
+						}
+					}
+				}
+			}
+		);
+	};
+
+	/**
+	 * @param {ESTree.Node} node
+	 * @param {Set<ESTree.Node>} seen
+	 * @param {Set<Binding>} reads
+	 * @param {Set<Binding>} writes
+	 */
+	const trace_references = (node, reads, writes, seen = new Set()) => {
+		if (seen.has(node)) return;
+		seen.add(node);
+
+		/**
+		 * @param {ESTree.Pattern} node
+		 * @param {Scope} scope
+		 */
+		function update(node, scope) {
+			for (const pattern of unwrap_pattern(node)) {
+				const node = object(pattern);
+				if (!node) return;
+
+				const binding = scope.get(node.name);
+				if (!binding) return;
+
+				writes.add(binding);
+			}
+		}
+
+		walk(
+			node,
+			{ scope: instance.scope },
+			{
+				_(node, context) {
+					const scope = scopes.get(node);
+					if (scope) {
+						context.next({ scope });
+					} else {
+						context.next();
+					}
+				},
+				AssignmentExpression(node, context) {
+					update(node.left, context.state.scope);
+				},
+				UpdateExpression(node, context) {
+					update(
+						/** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node.argument),
+						context.state.scope
+					);
+				},
+				CallExpression(node, context) {
+					// for now, assume everything touched by the callee ends up mutating the object
+					// TODO optimise this better
+
+					// special case — no need to peek inside effects as they only run once async work has completed
+					const rune = get_rune(node, context.state.scope);
+					if (rune === '$effect') return;
+
+					/** @type {Set<Binding>} */
+					const touched = new Set();
+					touch(node, context.state.scope, touched);
+
+					for (const b of touched) {
+						writes.add(b);
+					}
+				},
+				// don't look inside functions until they are called
+				ArrowFunctionExpression(_, context) {},
+				FunctionDeclaration(_, context) {},
+				FunctionExpression(_, context) {},
+				Identifier(node, context) {
+					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+					if (is_reference(node, parent)) {
+						const binding = context.state.scope.get(node.name);
+						if (binding) {
+							reads.add(binding);
+						}
+					}
+				}
+			}
+		);
+	};
+
+	let awaited = false;
+
+	// TODO this should probably be attached to the scope?
+	var promises = b.id('$$promises');
+
+	/**
+	 * @param {ESTree.Identifier} id
+	 * @param {ESTree.Expression} blocker
+	 */
+	function push_declaration(id, blocker) {
+		analysis.instance_body.declarations.push(id);
+
+		const binding = /** @type {Binding} */ (instance.scope.get(id.name));
+		binding.blocker = blocker;
+	}
+
+	for (let node of instance.ast.body) {
+		if (node.type === 'ImportDeclaration') {
+			analysis.instance_body.hoisted.push(node);
+			continue;
+		}
+
+		if (node.type === 'ExportDefaultDeclaration' || node.type === 'ExportAllDeclaration') {
+			// these can't exist inside `<script>` but TypeScript doesn't know that
+			continue;
+		}
+
+		if (node.type === 'ExportNamedDeclaration') {
+			if (node.declaration) {
+				node = node.declaration;
+			} else {
+				continue;
+			}
+		}
+
+		const has_await = has_await_expression(node);
+		awaited ||= has_await;
+
+		if (awaited && node.type !== 'FunctionDeclaration') {
+			/** @type {Set<Binding>} */
+			const reads = new Set(); // TODO we're not actually using this yet
+
+			/** @type {Set<Binding>} */
+			const writes = new Set();
+
+			trace_references(node, reads, writes);
+
+			const blocker = b.member(promises, b.literal(analysis.instance_body.async.length), true);
+
+			for (const binding of writes) {
+				binding.blocker = blocker;
+			}
+
+			if (node.type === 'VariableDeclaration') {
+				for (const declarator of node.declarations) {
+					for (const id of extract_identifiers(declarator.id)) {
+						push_declaration(id, blocker);
+					}
+
+					// one declarator per declaration, makes things simpler
+					analysis.instance_body.async.push({
+						node: declarator,
+						has_await
+					});
+				}
+			} else if (node.type === 'ClassDeclaration') {
+				push_declaration(node.id, blocker);
+				analysis.instance_body.async.push({ node, has_await });
+			} else {
+				analysis.instance_body.async.push({ node, has_await });
+			}
+		} else {
+			analysis.instance_body.sync.push(node);
+		}
+	}
+
 	if (analysis.runes) {
 		const props_refs = module.scope.references.get('$$props');
 		if (props_refs) {

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

@@ -10,16 +10,13 @@ import * as e from '../../../errors.js';
 export function AwaitExpression(node, context) {
 	const tla = context.state.ast_type === 'instance' && context.state.function_depth === 1;
 
-	// preserve context for
-	//   a) top-level await and
-	//   b) awaits that precede other expressions in template or `$derived(...)`
+	// preserve context for awaits that precede other expressions in template or `$derived(...)`
 	if (
-		tla ||
-		(is_reactive_expression(
+		is_reactive_expression(
 			context.path,
 			context.state.derived_function_depth === context.state.function_depth
 		) &&
-			!is_last_evaluated_expression(context.path, node))
+		!is_last_evaluated_expression(context.path, node)
 	) {
 		context.state.analysis.pickled_awaits.add(node);
 	}
@@ -145,6 +142,9 @@ function is_last_evaluated_expression(path, node) {
 				if (node !== parent.expressions.at(-1)) return false;
 				break;
 
+			case 'VariableDeclarator':
+				return true;
+
 			default:
 				return false;
 		}

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

@@ -172,6 +172,7 @@ export function BindDirective(node, context) {
 	}
 
 	const binding = context.state.scope.get(left.name);
+	node.metadata.binding = binding;
 
 	if (assignee.type === 'Identifier') {
 		// reassignment

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

@@ -81,8 +81,13 @@ export function SnippetBlock(node, context) {
 function can_hoist_snippet(scope, scopes, visited = new Set()) {
 	for (const [reference] of scope.references) {
 		const binding = scope.get(reference);
+		if (!binding) continue;
 
-		if (!binding || binding.scope.function_depth === 0) {
+		if (binding.blocker) {
+			return false;
+		}
+
+		if (binding.scope.function_depth === 0) {
 			continue;
 		}