svelte 5.56.9 → 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.9",
+  "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/migrate/index.js

@@ -1590,7 +1590,12 @@ function migrate_slot_usage(node, path, state) {
  */
 function extract_type_and_comment(declarator, state, path) {
 	const str = state.str;
-	const parent = path.at(-1);
+	let parent = path.at(-1);
+
+	if (parent?.type === 'Program') {
+		// We don't want comments from the program node
+		parent = undefined;
+	}
 
 	// Try to find jsdoc above the declaration
 	let comment_node = /** @type {Node} */ (parent)?.leadingComments?.at(-1);

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/read/style.js

@@ -7,8 +7,11 @@ const REGEX_CLOSING_BRACKET = /[\s\]]/;
 const REGEX_ATTRIBUTE_FLAGS = /[a-zA-Z]+/y; // only `i` and `s` are valid today, but make it future-proof
 const REGEX_COMBINATOR = /(\+|~|>|\|\|)/y;
 const REGEX_PERCENTAGE = /\d+(\.\d+)?%/y;
+// `of` must be preceded by whitespace, otherwise it would be part of the `<an+b>` token
+// (`2nof` is a single dimension token). It does not need to be followed by whitespace,
+// because a `.`, `#`, `[`, `*`, `:` or `&` already ends the `of` identifier — minifiers rely on that
 const REGEX_NTH_OF =
-	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/y;
+	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of(\s+|(?=[.#[*:&])))/y;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/y;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;
@@ -204,15 +207,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (parser.eat('*')) {
 			let name = '*';
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// * is the namespace (which we ignore)
-				name = read_identifier(parser);
+				namespace = name;
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});
@@ -314,15 +320,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// we ignore the namespace when trying to find matching element classes
-				name = read_identifier(parser);
+				namespace = name;
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});
@@ -614,7 +623,8 @@ function read_identifier(parser) {
 		if (char === '\\') {
 			const sequence = parser.match_regex(REGEX_UNICODE_SEQUENCE);
 			if (sequence) {
-				identifier += String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				const character = String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				identifier += character === '\\' ? '\\\\' : character;
 				parser.index += sequence.length;
 			} else {
 				identifier += '\\' + parser.template[parser.index + 1];

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;
 				}
 			}
 		}
@@ -958,7 +963,7 @@ function calculate_blockers(instance, analysis) {
 	 * @param {Set<Binding>} touched
 	 * @param {Set<ESTree.Node>} seen
 	 */
-	const touch = (expression, scope, touched, seen = new Set()) => {
+	const touch = (expression, scope, touched, seen) => {
 		if (seen.has(expression)) return;
 		seen.add(expression);
 
@@ -1015,6 +1020,13 @@ function calculate_blockers(instance, analysis) {
 			}
 		}
 
+		// Share seen nodes across calls so transitive assignments are only visited once.
+		// Keep separate read/write state because the target sets can differ.
+		/** @type {Set<ESTree.Node>} */
+		const writes_seen = new Set();
+		/** @type {Set<ESTree.Node>} */
+		const reads_seen = new Set();
+
 		walk(
 			node,
 			{ scope },
@@ -1044,13 +1056,7 @@ function calculate_blockers(instance, analysis) {
 					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);
-					}
+					touch(node, context.state.scope, writes, writes_seen);
 				},
 				Identifier(node, context) {
 					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
@@ -1066,7 +1072,7 @@ function calculate_blockers(instance, analysis) {
 					// might be called immediately, so we have to touch all references within it. Example:
 					// function foo() { return () => blocker; } foo(); // blocker is touched
 					if (node.argument) {
-						touch(node.argument, context.state.scope, reads);
+						touch(node.argument, context.state.scope, reads, reads_seen);
 					}
 				},
 				// don't look inside functions until they are called
@@ -1227,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();
@@ -1235,12 +1258,15 @@ function calculate_blockers(instance, analysis) {
 				? /** @type {ESTree.FunctionExpression | ESTree.ArrowFunctionExpression} */ (fn.init)
 				: fn;
 
-		trace_references(
-			init.body,
-			reads_writes,
-			reads_writes,
-			/** @type {Scope} */ (instance.scopes.get(init))
-		);
+		const fn_scope = /** @type {Scope} */ (instance.scopes.get(init));
+
+		if (init.body.type === 'BlockStatement') {
+			trace_references(init.body, reads_writes, reads_writes, fn_scope);
+		} else {
+			// A concise arrow body is an implicit return, so treat it like the
+			// `ReturnStatement` visitor in `trace_references` would.
+			touch(init.body, fn_scope, reads_writes, new Set());
+		}
 
 		const max = [...reads_writes].reduce((max, binding) => {
 			if (binding.blocker) {
@@ -1314,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 =