svelte 5.55.10 → 5.56.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.55.10",
+  "version": "5.56.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -139,20 +139,22 @@
   ],
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.60.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",
+    "baseline-browser-mapping": "^2.10.32",
     "dts-buddy": "^0.5.5",
     "esbuild": "^0.25.10",
     "rollup": "^4.59.0",
     "source-map": "^0.7.4",
     "tinyglobby": "^0.2.12",
     "typescript": "^5.5.4",
-    "vitest": "^2.1.9"
+    "vitest": "^2.1.9",
+    "web-features": "^3.29.0"
   },
   "dependencies": {
     "@jridgewell/remapping": "^2.3.4",
@@ -178,9 +180,10 @@
     "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
     "check:tsgo": "tsgo --project tsconfig.runtime.json --skipLibCheck && tsgo --skipLibCheck",
     "check:watch": "tsc --watch",
-    "generate": "node scripts/process-messages && node ./scripts/generate-types.js",
+    "generate": "node scripts/process-messages && node ./scripts/generate-types.js && pnpm generate:browser-support",
     "generate:version": "node ./scripts/generate-version.js",
     "generate:types": "node ./scripts/generate-types.js && tsc -p tsconfig.generated.json",
+    "generate:browser-support": "node ./scripts/generate-browser-support.ts",
     "knip": "pnpm dlx knip"
   }
 }

package/src/compiler/errors.js

@@ -1004,6 +1004,24 @@ export function debug_tag_invalid_arguments(node) {
 	e(node, 'debug_tag_invalid_arguments', `{@debug ...} arguments must be identifiers, not arbitrary expressions\nhttps://svelte.dev/e/debug_tag_invalid_arguments`);
 }
 
+/**
+ * Declaration tags must be `let` or `const` declarations
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_invalid_type(node) {
+	e(node, 'declaration_tag_invalid_type', `Declaration tags must be \`let\` or \`const\` declarations\nhttps://svelte.dev/e/declaration_tag_invalid_type`);
+}
+
+/**
+ * Declaration tags cannot be used in legacy mode
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_no_legacy_mode(node) {
+	e(node, 'declaration_tag_no_legacy_mode', `Declaration tags cannot be used in legacy mode\nhttps://svelte.dev/e/declaration_tag_no_legacy_mode`);
+}
+
 /**
  * Directive value must be a JavaScript expression enclosed in curly braces
  * @param {null | number | NodeLike} node

package/src/compiler/legacy.js

@@ -262,6 +262,10 @@ export function convert(source, ast) {
 				};
 			},
 			// @ts-ignore
+			DeclarationTag(node) {
+				return node;
+			},
+			// @ts-ignore
 			KeyBlock(node, { visit }) {
 				remove_surrounding_whitespace_nodes(node.fragment.nodes);
 				return {

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

@@ -1,10 +1,11 @@
-/** @import { Comment, Program } from 'estree' */
+/** @import { Comment, Program, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from './index.js' */
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 import * as e from '../../errors.js';
+import { find_matching_bracket } from './utils/bracket.js';
 
 const JSParser = acorn.Parser;
 const TSParser = JSParser.extend(tsPlugin());
@@ -98,6 +99,48 @@ export function parse_expression_at(parser, source, index) {
 	}
 }
 
+/**
+ * @param {Parser} parser
+ * @param {string} source
+ * @param {number} index
+ * @returns {Statement}
+ */
+export function parse_statement_at(parser, source, index) {
+	const acorn = parser.ts ? TSParser : JSParser;
+	let end = find_matching_bracket(source, index, '{');
+	if (end === undefined) e.unexpected_eof(source.length);
+
+	while (source[end - 1] === ';') {
+		end -= 1;
+	}
+
+	const padded_source = `${' '.repeat(index)}${source.slice(index, end)}`;
+	const { onComment, add_comments } = get_comment_handlers(
+		padded_source,
+		parser.root.comments,
+		index
+	);
+
+	try {
+		const ast = acorn.parse(padded_source, {
+			onComment,
+			sourceType: 'module',
+			ecmaVersion: 16,
+			locations: true
+		});
+
+		add_comments(ast);
+
+		const statement = /** @type {Statement} */ (
+			/** @type {unknown} */ (/** @type {Program} */ (ast).body[0])
+		);
+		statement.end = Math.min(/** @type {number} */ (statement.end), end);
+		return statement;
+	} catch (e) {
+		handle_parse_error(e);
+	}
+}
+
 const regex_position_indicator = / \(\d+:\d+\)$/;
 
 /**

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

@@ -302,7 +302,10 @@ export class Parser {
 	}
 
 	pop() {
-		this.fragments.pop();
+		const fragment = this.fragments.pop();
+		if (fragment?.metadata.transparent && fragment.nodes.some((n) => n.type === 'DeclarationTag')) {
+			fragment.metadata.transparent = false;
+		}
 		return this.stack.pop();
 	}
 

package/src/compiler/phases/1-parse/state/tag.js

@@ -1,16 +1,20 @@
-/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern } from 'estree' */
+/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from '../index.js' */
 import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
 import { ExpressionMetadata } from '../../nodes.js';
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at, parse_statement_at } from '../acorn.js';
 import read_pattern from '../read/context.js';
 import read_expression, { get_loose_identifier } from '../read/expression.js';
 import { create_fragment } from '../utils/create.js';
-import { match_bracket } from '../utils/bracket.js';
+import { find_matching_bracket, match_bracket } from '../utils/bracket.js';
 
 const regex_whitespace_with_closing_curly_brace = /\s*}/y;
+const regex_supported_declaration = /(?:let|const)\b/y;
+// All except `type` are reserved keywords and cannot be used as variable names.
+// For type we check if it's not something like `type .x` / `type ()` / `type % 2` / ...
+const regex_unsupported_declaration = /(?:(?:var|interface|enum)\b)|(?:type\s+[^?.(`<[&|%^}])/y;
 
 const pointy_bois = { '<': '>' };
 
@@ -31,6 +35,20 @@ export default function tag(parser) {
 		}
 	}
 
+	const declaration = read_declaration(parser);
+	if (declaration) {
+		parser.append({
+			type: 'DeclarationTag',
+			start,
+			end: parser.index,
+			declaration: /** @type {VariableDeclaration} */ (declaration),
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
+		});
+		return;
+	}
+
 	const expression = read_expression(parser);
 
 	parser.allow_whitespace();
@@ -47,6 +65,76 @@ export default function tag(parser) {
 	});
 }
 
+/**
+ * @param {Parser} parser
+ * @returns {null | import('estree').VariableDeclaration}
+ */
+function read_declaration(parser) {
+	const start = parser.index;
+
+	const unsupported = parser.match_regex(regex_unsupported_declaration);
+	if (unsupported) {
+		e.declaration_tag_invalid_type({ start, end: start + unsupported.length });
+	}
+
+	if (!parser.match_regex(regex_supported_declaration)) {
+		return null;
+	}
+
+	/** @type {import('estree').Statement | import('estree').VariableDeclaration} */
+	let declaration;
+	try {
+		declaration = parse_statement_at(parser, parser.template, start);
+	} catch (error) {
+		if (!parser.loose) throw error;
+
+		const end = find_matching_bracket(parser.template, start, '{');
+		if (end === undefined) throw error;
+
+		parser.index = end;
+		const kind = parser.template.startsWith('const', start) ? 'const' : 'let';
+
+		declaration = {
+			type: 'VariableDeclaration',
+			kind,
+			declarations: [
+				{
+					type: 'VariableDeclarator',
+					id: {
+						type: 'Identifier',
+						name: '',
+						start: parser.index,
+						end: parser.index
+					},
+					init: null,
+					start: parser.index,
+					end: parser.index
+				}
+			],
+			start,
+			end
+		};
+	}
+
+	if (declaration.type !== 'VariableDeclaration') {
+		e.declaration_tag_invalid_type({
+			start: declaration.start ?? start,
+			end: declaration.end ?? parser.index
+		});
+	}
+
+	// TODO support using
+	if (declaration.kind !== 'let' && declaration.kind !== 'const') {
+		e.declaration_tag_invalid_type(declaration);
+	}
+
+	parser.index = /** @type {number} */ (declaration.end);
+	parser.allow_whitespace();
+	parser.eat('}', true);
+
+	return declaration;
+}
+
 /** @param {Parser} parser */
 function open(parser) {
 	let start = parser.index - 2;

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

@@ -36,6 +36,7 @@ import { ClassDeclaration } from './visitors/ClassDeclaration.js';
 import { ClassDirective } from './visitors/ClassDirective.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportDefaultDeclaration } from './visitors/ExportDefaultDeclaration.js';
@@ -157,6 +158,7 @@ const visitors = {
 	ClassDirective,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportDefaultDeclaration,
@@ -312,6 +314,7 @@ export function analyze_module(source, options) {
 			options: /** @type {ValidatedCompileOptions} */ (options),
 			fragment: null,
 			parent_element: null,
+			in_declaration_tag: false,
 			reactive_statement: null,
 			derived_function_depth: -1
 		},
@@ -718,6 +721,7 @@ export function analyze_component(root, source, options) {
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
@@ -785,6 +789,7 @@ export function analyze_component(root, source, options) {
 				options,
 				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				reactive_statement: null,

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

@@ -255,6 +255,9 @@ export function CallExpression(node, context) {
 		if (expression.has_await) {
 			context.state.analysis.async_deriveds.add(node);
 		}
+
+		// Tell surrounding declaration tag about metadata for correct calculation of blockers etc
+		if (context.state.in_declaration_tag) context.state.expression?.merge(expression);
 	} else if (rune === '$inspect') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {

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

@@ -1,8 +1,8 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
-import * as b from '#compiler/builders';
 import { validate_opening_tag } from './shared/utils.js';
+import { mark_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -44,28 +44,5 @@ export function ConstTag(node, context) {
 		derived_function_depth: context.state.function_depth + 1
 	});
 
-	const has_await = node.metadata.expression.has_await;
-	const blockers = [...node.metadata.expression.dependencies]
-		.map((dep) => dep.blocker)
-		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
-
-	if (has_await || context.state.async_consts || blockers.length > 0) {
-		const run = (context.state.async_consts ??= {
-			id: context.state.analysis.root.unique('promises'),
-			declaration_count: 0
-		});
-		node.metadata.promises_id = run.id;
-
-		const bindings = context.state.scope.get_bindings(declaration);
-
-		// keep the counter in sync with the number of thunks pushed in ConstTag in transform
-		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
-		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
-		const length = run.declaration_count + (blockers.length > 0 ? 1 : 0);
-		run.declaration_count += blockers.length > 0 ? 2 : 1;
-		const blocker = b.member(run.id, b.literal(length), true);
-		for (const binding of bindings) {
-			binding.blocker = blocker;
-		}
-	}
+	mark_async_declaration(context, node.metadata, [declaration]);
 }

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

@@ -0,0 +1,58 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+import * as e from '../../../errors.js';
+import { validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {AST.DeclarationTag} node
+ * @param {Context} context
+ */
+export function DeclarationTag(node, context) {
+	validate_opening_tag(node, context.state, node.declaration.kind[0]);
+	if (!context.state.analysis.runes && !context.state.analysis.maybe_runes) {
+		e.declaration_tag_no_legacy_mode(node);
+	}
+
+	context.visit(node.declaration, {
+		...context.state,
+		in_declaration_tag: true,
+		expression: node.metadata.expression
+	});
+
+	mark_async_declaration(context, node.metadata, node.declaration.declarations);
+}
+
+/**
+ * @param {Context} context
+ * @param {AST.ConstTag['metadata'] | AST.DeclarationTag['metadata']} metadata
+ * @param {import('estree').VariableDeclarator[]} declarations
+ */
+export function mark_async_declaration(context, metadata, declarations) {
+	const has_await = metadata.expression.has_await;
+	const blockers = [...metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (has_await || context.state.async_consts || blockers.length > 0) {
+		const run = (context.state.async_consts ??= {
+			id: context.state.analysis.root.unique('promises'),
+			declaration_count: 0
+		});
+		metadata.promises_id = run.id;
+
+		const bindings = declarations.flatMap((declaration) =>
+			context.state.scope.get_bindings(declaration)
+		);
+
+		// keep the counter in sync with the number of thunks pushed in transform
+		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
+		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
+		const length = run.declaration_count + (blockers.length > 0 ? 1 : 0);
+		run.declaration_count += blockers.length > 0 ? 2 : 1;
+		const blocker = b.member(run.id, b.literal(length), true);
+		for (const binding of bindings) {
+			binding.blocker = blocker;
+		}
+	}
+}

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

@@ -162,7 +162,7 @@ export function Identifier(node, context) {
 		if (binding.metadata?.is_template_declaration && context.state.options.experimental.async) {
 			let snippet_name;
 
-			// Find out if this references a {@const ...} declaration of an implicit children snippet
+			// Find out if this references a {@const ...}/{let/const ...} declaration of an implicit children snippet
 			// when it is itself inside a snippet block at the same level. If so, error.
 			for (let i = context.path.length - 1; i >= 0; i--) {
 				const parent = context.path[i];

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

@@ -4,7 +4,7 @@
 /** @import { Visitors, ComponentClientTransformState, ClientTransformState } from './types' */
 import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';
-import { build_getter, is_state_source } from './utils.js';
+import { build_getter, get_transform } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
 import { AnimateDirective } from './visitors/AnimateDirective.js';
@@ -22,6 +22,7 @@ import { ClassBody } from './visitors/ClassBody.js';
 import { Comment } from './visitors/Comment.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
@@ -66,20 +67,7 @@ const visitors = {
 		const scope = state.scopes.get(node);
 
 		if (scope && scope !== state.scope) {
-			const transform = { ...state.transform };
-
-			for (const [name, binding] of scope.declarations) {
-				if (
-					binding.kind === 'normal' ||
-					// Reads of `$state(...)` declarations are not
-					// transformed if they are never reassigned
-					(binding.kind === 'state' && !is_state_source(binding, state.analysis))
-				) {
-					delete transform[name];
-				}
-			}
-
-			next({ ...state, transform, scope });
+			next({ ...state, transform: get_transform(scope, state), scope });
 		} else {
 			next();
 		}
@@ -99,6 +87,7 @@ const visitors = {
 	Comment,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportNamedDeclaration,
@@ -152,6 +141,7 @@ export function client_component(analysis, options) {
 		scopes: analysis.module.scopes,
 		is_instance: false,
 		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
+		templates: new Map(),
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),

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

@@ -1,3 +1,4 @@
+/** @import { TemplateLiteral } from 'estree' */
 /** @import { Namespace } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../types.js' */
 /** @import { Node } from './types.js' */
@@ -31,14 +32,29 @@ function build_locations(nodes) {
 
 /**
  * @param {ComponentClientTransformState} state
- * @param {Namespace} namespace
+ * @param {string} name
  * @param {number} [flags]
  */
-export function transform_template(state, namespace, flags = 0) {
+export function transform_template(state, name, flags = 0) {
+	const namespace = state.metadata.namespace;
 	const tree = state.options.fragments === 'tree';
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
+	const key =
+		tree || dev
+			? null
+			: get_template_key(
+					/** @type {TemplateLiteral} */ (expression),
+					state.metadata.namespace,
+					flags
+				);
+
+	if (key !== null) {
+		const existing = state.templates.get(key);
+		if (existing !== undefined) return existing;
+	}
+
 	if (tree) {
 		if (namespace === 'svg') flags |= TEMPLATE_USE_SVG;
 		if (namespace === 'mathml') flags |= TEMPLATE_USE_MATHML;
@@ -63,5 +79,26 @@ export function transform_template(state, namespace, flags = 0) {
 		);
 	}
 
-	return call;
+	const id = state.scope.root.unique(name);
+	state.hoisted.push(b.var(id, call));
+
+	if (key !== null) {
+		state.templates.set(key, id);
+	}
+
+	return id;
+}
+
+/**
+ * Returns a stable key for templates that are safe to deduplicate - plain
+ * `$.from_html`/`from_svg`/`from_mathml` factories with literal arguments - or `null`
+ * for anything else. Dev-mode templates are wrapped in `$.add_locations(...)`, which
+ * embeds per-call-site locations, so they never produce a key and are never shared.
+ * @param {TemplateLiteral} template
+ * @param {Namespace} namespace
+ * @param {number} flags
+ * @returns {string | null}
+ */
+function get_template_key(template, namespace, flags) {
+	return `${namespace} ${flags} ${template.quasis[0].value.raw}`;
 }

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

@@ -179,3 +179,24 @@ export function create_derived(state, expression, async = false) {
 		return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', thunk);
 	}
 }
+
+/**
+ * @param {Scope} scope
+ * @param {ClientTransformState} state
+ */
+export function get_transform(scope, state) {
+	const transform = { ...state.transform };
+
+	for (const [name, binding] of scope.declarations) {
+		if (
+			binding.kind === 'normal' ||
+			// Reads of `$state(...)` declarations are not
+			// transformed if they are never reassigned
+			(binding.kind === 'state' && !is_state_source(binding, state.analysis))
+		) {
+			delete transform[name];
+		}
+	}
+
+	return transform;
+}

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

@@ -7,6 +7,7 @@ import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 import { build_expression } from './shared/utils.js';
+import { add_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -26,7 +27,7 @@ export function ConstTag(node, context) {
 
 		context.state.transform[declaration.id.name] = { read: get_value };
 
-		add_const_declaration(context.state, declaration.id, expression, node.metadata);
+		add_const_declaration(context, declaration.id, expression, node.metadata);
 	} else {
 		const identifiers = extract_identifiers(declaration.id);
 		const tmp = b.id(context.state.scope.generate('computed_const'));
@@ -63,7 +64,7 @@ export function ConstTag(node, context) {
 			expression = b.call('$.tag', expression, b.literal('[@const]'));
 		}
 
-		add_const_declaration(context.state, tmp, expression, node.metadata);
+		add_const_declaration(context, tmp, expression, node.metadata);
 
 		for (const node of identifiers) {
 			context.state.transform[node.name] = {
@@ -74,38 +75,26 @@ export function ConstTag(node, context) {
 }
 
 /**
- * @param {ComponentContext['state']} state
+ * @param {ComponentContext} context
  * @param {Identifier} id
  * @param {Expression} expression
  * @param {AST.ConstTag['metadata']} metadata
  */
-function add_const_declaration(state, id, expression, metadata) {
+function add_const_declaration(context, id, expression, metadata) {
 	// we need to eagerly evaluate the expression in order to hit any
 	// 'Cannot access x before initialization' errors
 	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
 
-	const blockers = [...metadata.expression.dependencies]
-		.map((dep) => dep.blocker)
-		.filter((b) => b !== null && b.object !== state.async_consts?.id);
-
 	if (metadata.promises_id) {
-		const run = (state.async_consts ??= {
-			id: metadata.promises_id,
-			thunks: []
-		});
-
-		state.consts.push(b.let(id));
-
-		if (blockers.length === 1) {
-			run.thunks.push(b.thunk(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
-		} else if (blockers.length > 0) {
-			run.thunks.push(b.thunk(b.call('$.wait', b.array(blockers))));
-		}
-
-		// keep the number of thunks pushed in sync with ConstTag in analysis phase
-		const assignment = b.assignment('=', id, expression);
-		run.thunks.push(b.thunk(assignment, metadata.expression.has_await));
+		add_async_declaration(
+			context,
+			metadata,
+			[id],
+			[b.stmt(b.assignment('=', id, expression))],
+			'let'
+		);
 	} else {
+		const { state } = context;
 		state.consts.push(b.const(id, expression));
 		state.consts.push(...after);
 	}