svelte 5.56.10 → 5.57.0

package/elements.d.ts

@@ -1352,6 +1352,9 @@ export interface HTMLSelectAttributes extends HTMLAttributes<HTMLSelectElement>
 	required?: boolean | undefined | null;
 	size?: number | undefined | null;
 	value?: any;
+	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
+	defaultValue?: any;
+	defaultvalue?: any;
 
 	'on:change'?: ChangeEventHandler<HTMLSelectElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLSelectElement> | undefined | null;

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.56.10",
+  "version": "5.57.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -139,13 +139,14 @@
   ],
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.62.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.2",
     "@types/aria-query": "^5.0.4",
     "@types/node": "^20.11.5",
+    "@types/trusted-types": "^2.0.7",
     "baseline-browser-mapping": "^2.10.32",
     "dts-buddy": "^0.5.5",
     "esbuild": "^0.28.1",
@@ -161,7 +162,6 @@
     "@jridgewell/sourcemap-codec": "^1.5.0",
     "@sveltejs/acorn-typescript": "^1.0.10",
     "@types/estree": "^1.0.5",
-    "@types/trusted-types": "^2.0.7",
     "acorn": "^8.12.1",
     "aria-query": "5.3.1",
     "axobject-query": "^4.1.0",

package/src/compiler/phases/1-parse/acorn.js

@@ -59,7 +59,7 @@ export function parse(source, comments, typescript, is_script) {
 
 		return /** @type {Program} */ (ast);
 	} catch (err) {
-		// TODO the `return` in necessary for TS<7 due to a bug; otherwise
+		// TODO the `return` is necessary for TS<7 due to a bug; otherwise
 		// the `finally` block is regarded as unreachable
 		return handle_parse_error(err);
 	} finally {

package/src/compiler/phases/1-parse/utils/html.js

@@ -20,7 +20,7 @@ function reg_exp_entity(entity_name, is_attribute_value) {
 
 /** @param {boolean} is_attribute_value */
 function get_entity_pattern(is_attribute_value) {
-	const reg_exp_num = '#(?:x[a-fA-F\\d]+|\\d+)(?:;)?';
+	const reg_exp_num = '#(?:[xX][a-fA-F\\d]+|\\d+)(?:;)?';
 	const reg_exp_entities = Object.keys(entities).map(
 		/** @param {any} entity_name */ (entity_name) => reg_exp_entity(entity_name, is_attribute_value)
 	);
@@ -50,7 +50,7 @@ export function decode_character_references(html, is_attribute_value) {
 			// Handle named entities
 			if (entity[0] !== '#') {
 				code = entities[entity];
-			} else if (entity[1] === 'x') {
+			} else if (entity[1] === 'x' || entity[1] === 'X') {
 				code = parseInt(entity.substring(2), 16);
 			} else {
 				code = parseInt(entity.substring(1), 10);
@@ -60,7 +60,7 @@ export function decode_character_references(html, is_attribute_value) {
 				return match;
 			}
 
-			return String.fromCodePoint(validate_code(code));
+			return String.fromCodePoint(validate_code(code, is_attribute_value));
 		}
 	);
 }
@@ -75,10 +75,15 @@ const NUL = 0;
 // Also see: https://en.wikipedia.org/wiki/Plane_(Unicode)
 // Also see: https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
 
-/** @param {number} code */
-function validate_code(code) {
-	// line feed becomes generic whitespace
-	if (code === 10) {
+/**
+ * @param {number} code
+ * @param {boolean} is_attribute_value
+ */
+function validate_code(code, is_attribute_value) {
+	// line feed becomes generic whitespace, since it is collapsed along with the
+	// surrounding whitespace anyway. In an attribute value it is significant, so it
+	// is left alone there
+	if (code === 10 && !is_attribute_value) {
 		return 32;
 	}
 

package/src/compiler/phases/2-analyze/css/css-prune.js

@@ -122,6 +122,13 @@ const any_selector = {
  */
 const seen = new Set();
 
+/**
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ */
+function is_inside_svelte_head(node) {
+	return node.metadata.path.some((ancestor) => ancestor.type === 'SvelteHead');
+}
+
 /**
  *
  * @param {Compiler.AST.CSS.StyleSheet} stylesheet
@@ -143,6 +150,9 @@ export function prune(stylesheet, elements) {
 				seen.clear();
 
 				if (
+					// Elements rendered through <svelte:head> are not style-scopable.
+					// Prevent css hash injection (class="s-...") on tags like <meta>, <link>, <script>.
+					!is_inside_svelte_head(element) &&
 					apply_selector(
 						selectors,
 						/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),

package/src/compiler/phases/2-analyze/index.js

@@ -285,7 +285,7 @@ export function analyze_module(source, options) {
 		runes: true,
 		immutable: true,
 		tracing: false,
-		async_deriveds: new Set(),
+		async_deriveds: new Map(),
 		comments,
 		classes: new Map(),
 		pickled_awaits: new Set()
@@ -557,7 +557,7 @@ export function analyze_component(root, source, options) {
 		source,
 		snippet_renderers: new Map(),
 		snippets: new Set(),
-		async_deriveds: new Set(),
+		async_deriveds: new Map(),
 		pickled_awaits: new Set(),
 		instance_body: {
 			sync: [],
@@ -832,6 +832,11 @@ export function analyze_component(root, source, options) {
 					} else {
 						e.export_undefined(specifier, name);
 					}
+				} else if (binding.initial?.type === 'SnippetBlock') {
+					// If a snippet is exported, a consumer could only import this named export and not the default export (the component).
+					// In this case we need to set hasGlobal of our output to true so that e.g. vite-plugin-svelte does not tell Vite to
+					// tree-shake the CSS if the default export is not used.
+					analysis.css.has_global = true;
 				}
 			}
 		}
@@ -1228,6 +1233,23 @@ function calculate_blockers(instance, analysis) {
 
 	flush_sync_group();
 
+	// a store subscription must wait on whatever blocks the store itself; this must happen
+	// before function tracing so that functions reading `$store` inherit the blocker
+	for (const [name, binding] of instance.scope.declarations) {
+		if (binding.kind !== 'store_sub') continue;
+
+		const store_blocker = instance.scope.get(name.slice(1))?.blocker;
+		if (!store_blocker) continue;
+
+		if (
+			!binding.blocker ||
+			/** @type {ESTree.SimpleLiteral & { value: number }} */ (binding.blocker.property).value <
+				/** @type {ESTree.SimpleLiteral & { value: number }} */ (store_blocker.property).value
+		) {
+			binding.blocker = store_blocker;
+		}
+	}
+
 	for (const fn of functions) {
 		/** @type {Set<Binding>} */
 		const reads_writes = new Set();
@@ -1318,7 +1340,8 @@ function order_reactive_statements(unsorted_reactive_declarations) {
 	 * @returns
 	 */
 	const add_declaration = (node, declaration) => {
-		if ([...reactive_declarations.values()].includes(declaration)) return;
+		// Visited set: each ReactiveStatement is stored under exactly one LabeledStatement node
+		if (reactive_declarations.has(node)) return;
 
 		for (const binding of declaration.dependencies) {
 			if (declaration.assignments.has(binding)) continue;

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

@@ -1,6 +1,7 @@
 /** @import { AwaitExpression, Expression, SpreadElement, Property } from 'estree' */
 /** @import { Context } from '../types' */
 /** @import { AST } from '#compiler' */
+/** @import { ExpressionMetadata } from '../../nodes.js' */
 import * as e from '../../../errors.js';
 
 /**
@@ -10,15 +11,20 @@ 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 awaits that precede other expressions in template or `$derived(...)`
 	if (
 		is_reactive_expression(
 			context.path,
 			context.state.derived_function_depth === context.state.function_depth
-		) &&
-		!is_last_evaluated_expression(context.path, node)
+		)
 	) {
-		context.state.analysis.pickled_awaits.add(node);
+		const expression = /** @type {ExpressionMetadata} */ (context.state.expression);
+
+		// preserve context for awaits that precede other expressions in template or `$derived(...)`,
+		// and for any await that follows one, so the restored context ends at the next suspension
+		if (expression.has_pickled_await || !is_last_evaluated_expression(context.path, node)) {
+			context.state.analysis.pickled_awaits.add(node);
+			expression.has_pickled_await = true;
+		}
 	}
 
 	let suspend = tla;

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

@@ -253,7 +253,7 @@ export function CallExpression(node, context) {
 		});
 
 		if (expression.has_await) {
-			context.state.analysis.async_deriveds.add(node);
+			context.state.analysis.async_deriveds.set(node, expression);
 		}
 
 		// Tell surrounding declaration tag about metadata for correct calculation of blockers etc

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

@@ -43,7 +43,8 @@ export function DeclarationTag(node, context) {
  */
 export function mark_async_declaration(context, metadata, declarations) {
 	const has_await = metadata.expression.has_await;
-	const blockers = [...metadata.expression.dependencies]
+	// reads inside closures must block too, like they do in template expressions
+	const blockers = [...metadata.expression.references]
 		.map((dep) => dep.blocker)
 		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 

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

@@ -1,4 +1,4 @@
-/** @import { ExportNamedDeclaration, Identifier } from 'estree' */
+/** @import { ExportNamedDeclaration, Identifier, VariableDeclaration } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 import { extract_identifiers } from '../../../utils/ast.js';
@@ -23,15 +23,6 @@ export function ExportNamedDeclaration(node, context) {
 	}
 
 	if (node.declaration?.type === 'VariableDeclaration') {
-		// in runes mode, forbid `export let`
-		if (
-			context.state.analysis.runes &&
-			context.state.ast_type === 'instance' &&
-			node.declaration.kind === 'let'
-		) {
-			e.legacy_export_invalid(node);
-		}
-
 		for (const declarator of node.declaration.declarations) {
 			for (const id of extract_identifiers(declarator.id)) {
 				const binding = context.state.scope.get(id.name);
@@ -46,6 +37,15 @@ export function ExportNamedDeclaration(node, context) {
 				}
 			}
 		}
+
+		// in runes mode, forbid `export let`
+		if (
+			context.state.analysis.runes &&
+			context.state.ast_type === 'instance' &&
+			node.declaration.kind === 'let'
+		) {
+			e.legacy_export_invalid(node);
+		}
 	}
 
 	if (context.state.analysis.runes) {

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

@@ -3,6 +3,7 @@
 import * as e from '../../../errors.js';
 import { is_event_attribute } from '../../../utils/ast.js';
 import { disallow_children } from './shared/special-element.js';
+import { check_global_event_reference } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteBody} node
@@ -11,10 +12,9 @@ import { disallow_children } from './shared/special-element.js';
 export function SvelteBody(node, context) {
 	disallow_children(node);
 	for (const attribute of node.attributes) {
-		if (
-			attribute.type === 'SpreadAttribute' ||
-			(attribute.type === 'Attribute' && !is_event_attribute(attribute))
-		) {
+		if (attribute.type === 'Attribute' && is_event_attribute(attribute)) {
+			check_global_event_reference(attribute, context);
+		} else if (attribute.type === 'SpreadAttribute' || attribute.type === 'Attribute') {
 			e.svelte_body_illegal_attribute(attribute);
 		}
 	}

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

@@ -3,6 +3,7 @@
 import { disallow_children } from './shared/special-element.js';
 import * as e from '../../../errors.js';
 import { is_event_attribute } from '../../../utils/ast.js';
+import { check_global_event_reference } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteDocument} node
@@ -12,10 +13,9 @@ export function SvelteDocument(node, context) {
 	disallow_children(node);
 
 	for (const attribute of node.attributes) {
-		if (
-			attribute.type === 'SpreadAttribute' ||
-			(attribute.type === 'Attribute' && !is_event_attribute(attribute))
-		) {
+		if (attribute.type === 'Attribute' && is_event_attribute(attribute)) {
+			check_global_event_reference(attribute, context);
+		} else if (attribute.type === 'SpreadAttribute' || attribute.type === 'Attribute') {
 			e.illegal_element_attribute(attribute, 'svelte:document');
 		}
 	}

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

@@ -3,6 +3,7 @@
 import { disallow_children } from './shared/special-element.js';
 import * as e from '../../../errors.js';
 import { is_event_attribute } from '../../../utils/ast.js';
+import { check_global_event_reference } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteWindow} node
@@ -12,10 +13,9 @@ export function SvelteWindow(node, context) {
 	disallow_children(node);
 
 	for (const attribute of node.attributes) {
-		if (
-			attribute.type === 'SpreadAttribute' ||
-			(attribute.type === 'Attribute' && !is_event_attribute(attribute))
-		) {
+		if (attribute.type === 'Attribute' && is_event_attribute(attribute)) {
+			check_global_event_reference(attribute, context);
+		} else if (attribute.type === 'SpreadAttribute' || attribute.type === 'Attribute') {
 			e.illegal_element_attribute(attribute, 'svelte:window');
 		}
 	}

package/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js

@@ -373,11 +373,23 @@ export function check_element(node, context) {
 		}
 	}
 
-	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
+	// `focus`/`blur` don't bubble, so an element that isn't focusable itself can only be notified
+	// about focus changes inside it through `focusin`/`focusout` — accept those as well
+	if (
+		!has_spread &&
+		handlers.has('mouseover') &&
+		!handlers.has('focus') &&
+		!handlers.has('focusin')
+	) {
 		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
 	}
 
-	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
+	if (
+		!has_spread &&
+		handlers.has('mouseout') &&
+		!handlers.has('blur') &&
+		!handlers.has('focusout')
+	) {
 		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
 	}
 

package/src/compiler/phases/2-analyze/visitors/shared/element.js

@@ -9,6 +9,7 @@ import {
 	validate_attribute_name,
 	validate_slot_attribute
 } from './attribute.js';
+import { check_global_event_reference } from './utils.js';
 
 const EVENT_MODIFIERS = [
 	'preventDefault',
@@ -64,14 +65,7 @@ export function validate_element(node, context) {
 					e.attribute_invalid_event_handler(attribute);
 				}
 
-				const value = get_attribute_expression(attribute);
-				if (
-					value.type === 'Identifier' &&
-					value.name === attribute.name &&
-					!context.state.scope.get(value.name)
-				) {
-					w.attribute_global_event_reference(attribute, attribute.name);
-				}
+				check_global_event_reference(attribute, context);
 			}
 
 			if (attribute.name === 'slot') {

package/src/compiler/phases/2-analyze/visitors/shared/utils.js

@@ -4,7 +4,11 @@
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers, get_parent } from '../../../../utils/ast.js';
+import {
+	extract_identifiers,
+	get_attribute_expression,
+	get_parent
+} from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
@@ -298,3 +302,21 @@ export function validate_export(node, scope, name) {
 		e.state_invalid_export(node);
 	}
 }
+
+/**
+ * Warns when an event attribute uses the shorthand form (`{onclick}`) but the
+ * referenced name isn't declared, so it silently resolves to the global handler.
+ * @param {AST.Attribute & { value: [AST.ExpressionTag] | AST.ExpressionTag }} attribute
+ * @param {Context} context
+ */
+export function check_global_event_reference(attribute, context) {
+	const value = get_attribute_expression(attribute);
+
+	if (
+		value.type === 'Identifier' &&
+		value.name === attribute.name &&
+		!context.state.scope.get(value.name)
+	) {
+		w.attribute_global_event_reference(attribute, attribute.name);
+	}
+}

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

@@ -247,11 +247,11 @@ export function client_component(analysis, options) {
 	}
 
 	for (const [node] of analysis.reactive_statements) {
-		const statement = [...state.legacy_reactive_statements].find(([n]) => n === node);
+		const statement = state.legacy_reactive_statements.get(node);
 		if (statement === undefined) {
 			throw new Error('Could not find reactive statement');
 		}
-		instance.body.push(statement[1]);
+		instance.body.push(statement);
 	}
 
 	if (analysis.reactive_statements.size > 0) {

package/src/compiler/phases/3-transform/client/transform-template/index.js

@@ -39,6 +39,12 @@ export function transform_template(state, name, flags = 0) {
 	const namespace = state.metadata.namespace;
 	const tree = state.options.fragments === 'tree';
 
+	const { nodes } = state.template;
+	const is_lone_anchor = nodes.length === 1 && nodes[0].type === 'comment';
+
+	// special case - `$.comment` creates the anchor more cheaply than cloning a template
+	if (is_lone_anchor) return b.id('$.comment');
+
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
 	const key =

package/src/compiler/phases/3-transform/client/utils.js

@@ -2,6 +2,7 @@
 /** @import { Binding } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
+/** @import { ExpressionMetadata } from '../../nodes.js' */
 /** @import { Scope } from '../../scope.js' */
 import * as b from '#compiler/builders';
 import { is_simple_expression, save } from '../../../utils/ast.js';
@@ -164,20 +165,46 @@ export function should_proxy(node, scope) {
 	return true;
 }
 
+/**
+ * An async thunk. If an `await` inside restores the reaction context via `$.save`,
+ * the body exits through `$.unsave` so the context cannot leak into foreign microtasks
+ * that run before the returned promise settles
+ * @param {Expression | BlockStatement} body
+ * @param {ExpressionMetadata} metadata
+ */
+export function async_thunk(body, metadata) {
+	if (!metadata.has_pickled_await) {
+		return b.arrow([], body, true);
+	}
+
+	const block = body.type === 'BlockStatement' ? body : b.block([b.return(body)]);
+
+	return b.arrow(
+		[],
+		b.block([
+			{
+				type: 'TryStatement',
+				block,
+				handler: null,
+				finalizer: b.block([b.stmt(b.call('$.unsave'))])
+			}
+		]),
+		true
+	);
+}
+
 /**
  * Svelte legacy mode should use safe equals in most places, runes mode shouldn't
  * @param {ComponentClientTransformState} state
  * @param {Expression | BlockStatement} expression
- * @param {boolean} [async]
+ * @param {ExpressionMetadata} [metadata]
  */
-export function create_derived(state, expression, async = false) {
-	const thunk = b.thunk(expression, async);
-
-	if (async) {
-		return save(b.call('$.async_derived', thunk));
-	} else {
-		return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', thunk);
+export function create_derived(state, expression, metadata) {
+	if (metadata?.has_await) {
+		return save(b.call('$.async_derived', async_thunk(expression, metadata)));
 	}
+
+	return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', b.thunk(expression));
 }
 
 /**

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

@@ -1,9 +1,9 @@
 /** @import { BlockStatement, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { extract_identifiers, is_expression_async } from '../../../../utils/ast.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { create_derived } from '../utils.js';
+import { async_thunk, create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 import { build_expression, add_svelte_meta } from './shared/utils.js';
 
@@ -15,10 +15,10 @@ export function AwaitBlock(node, context) {
 	context.state.template.push_comment();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
-	const expression = b.thunk(
-		build_expression(context, node.expression, node.metadata.expression),
-		node.metadata.expression.has_await
-	);
+	const input = build_expression(context, node.expression, node.metadata.expression);
+	const expression = node.metadata.expression.has_await
+		? async_thunk(input, node.metadata.expression)
+		: b.thunk(input);
 
 	let then_block;
 	let catch_block;

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

@@ -1,7 +1,7 @@
 /** @import { CallExpression, Expression, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { dev, is_ignored } from '../../../../state.js';
+import { dev, ignore_map, is_ignored } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { binding_properties } from '../../../bindings.js';
@@ -40,9 +40,15 @@ export function BindDirective(node, context) {
 			validate_binding(context.state, node, expression);
 		}
 
-		const assignment = /** @type {Expression} */ (
-			context.visit(b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value')))
+		const raw_assignment = b.assignment(
+			'=',
+			/** @type {Pattern} */ (node.expression),
+			b.id('$$value')
 		);
+		// The assignment is generated, so inherit any ignores attached to the binding
+		ignore_map.set(raw_assignment, ignore_map.get(node) ?? []);
+
+		const assignment = /** @type {Expression} */ (context.visit(raw_assignment));
 
 		if (dev) {
 			// in dev, create named functions, so that `$inspect(...)` delivers
@@ -58,16 +64,7 @@ export function BindDirective(node, context) {
 			get = b.thunk(expression);
 
 			/** @type {Expression | undefined} */
-			set = b.unthunk(
-				b.arrow(
-					[b.id('$$value')],
-					/** @type {Expression} */ (
-						context.visit(
-							b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
-						)
-					)
-				)
-			);
+			set = b.unthunk(b.arrow([b.id('$$value')], assignment));
 
 			if (get === set) {
 				set = undefined;

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

@@ -19,7 +19,7 @@ export function ConstTag(node, context) {
 	if (declaration.id.type === 'Identifier') {
 		const init = build_expression(context, declaration.init, node.metadata.expression);
 
-		let expression = create_derived(context.state, init, node.metadata.expression.has_await);
+		let expression = create_derived(context.state, init, node.metadata.expression);
 
 		if (dev) {
 			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
@@ -45,20 +45,31 @@ export function ConstTag(node, context) {
 			transform
 		});
 
-		// TODO optimise the simple `{ x } = y` case — we can just return `y`
-		// instead of destructuring it only to return a new object
+		const is_simple_object_pattern =
+			declaration.id.type === 'ObjectPattern' &&
+			declaration.id.properties.every(
+				(p) =>
+					p.type === 'Property' &&
+					!p.computed &&
+					p.key.type === 'Identifier' &&
+					p.value.type === 'Identifier' &&
+					p.key.name === p.value.name
+			);
+
 		const init = build_expression(
 			{ ...context, state: child_state },
 			declaration.init,
 			node.metadata.expression
 		);
 
-		const block = b.block([
-			b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
-			b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
-		]);
+		const block = is_simple_object_pattern
+			? b.block([b.return(init)])
+			: b.block([
+					b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
+					b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
+				]);
 
-		let expression = create_derived(context.state, block, node.metadata.expression.has_await);
+		let expression = create_derived(context.state, block, node.metadata.expression);
 
 		if (dev) {
 			expression = b.call('$.tag', expression, b.literal('[@const]'));