svelte 5.56.10 → 5.57.0

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

@@ -3,6 +3,7 @@
 /** @import { ComponentContext } from '../types' */
 import { extract_identifiers, has_await_expression } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { add_state_transformers } from './shared/declarations.js';
 
 /**
@@ -70,7 +71,7 @@ export function add_async_declaration(context, metadata, ids, assignments, kind
 		context.state.consts.push(kind === 'var' ? b.var(id.name) : b.let(id.name));
 	}
 
-	const blockers = [...metadata.expression.dependencies]
+	const blockers = [...metadata.expression.references]
 		.map((dep) => dep.blocker)
 		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 
@@ -85,5 +86,5 @@ export function add_async_declaration(context, metadata, ids, assignments, kind
 		metadata.expression.has_await ||
 		assignments.some((assignment) => has_await_expression(assignment));
 	const body = assignments.length === 1 ? assignments[0].expression : b.block(assignments);
-	run.thunks.push(b.thunk(body, has_await));
+	run.thunks.push(has_await ? async_thunk(body, metadata.expression) : b.thunk(body));
 }

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

@@ -12,6 +12,7 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 import { build_expression, add_svelte_meta } from './shared/utils.js';
 
@@ -313,7 +314,9 @@ export function EachBlock(node, context) {
 
 	const has_await = node.metadata.expression.has_await;
 
-	const get_collection = b.thunk(collection, has_await);
+	const get_collection = has_await
+		? async_thunk(collection, node.metadata.expression)
+		: b.thunk(collection);
 	const thunk = has_await ? b.thunk(b.call('$.get', b.id('$$collection'))) : get_collection;
 
 	const render_args = [b.id('$$anchor'), item];

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

@@ -141,14 +141,9 @@ export function Fragment(node, context) {
 				flags |= TEMPLATE_USE_IMPORT_NODE;
 			}
 
-			if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
-				// special case — we can use `$.comment` instead of creating a unique template
-				state.init.unshift(b.var(id, b.call('$.comment')));
-			} else {
-				const template_name = transform_template(state, 'root', flags);
+			const template_name = transform_template(state, 'root', flags);
 
-				state.init.unshift(b.var(id, b.call(template_name)));
-			}
+			state.init.unshift(b.var(id, b.call(template_name)));
 
 			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 		}

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

@@ -2,6 +2,7 @@
 /** @import { ComponentContext } from '../types' */
 import { is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { build_expression } from './shared/utils.js';
 
 /**
@@ -46,7 +47,7 @@ export function HtmlTag(node, context) {
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					has_await ? b.array([async_thunk(expression, node.metadata.expression)]) : b.void0,
 					b.arrow(
 						has_await ? [context.state.node, b.id('$$html')] : [context.state.node],
 						b.block([statement])

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

@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
@@ -117,7 +118,7 @@ export function IfBlock(node, context) {
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					has_await ? b.array([async_thunk(expression, node.metadata.expression)]) : b.void0,
 					b.arrow(
 						has_await ? [context.state.node, b.id('$$condition')] : [context.state.node],
 						b.block(statements)

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

@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
@@ -31,7 +32,7 @@ export function KeyBlock(node, context) {
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					has_await ? b.array([async_thunk(expression, node.metadata.expression)]) : b.void0,
 					b.arrow(
 						has_await ? [context.state.node, b.id('$$key')] : [context.state.node],
 						b.block([statement])

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

@@ -1,10 +1,9 @@
-/** @import { ArrayExpression, Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression } from 'estree' */
+/** @import { ArrayExpression, Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import {
 	cannot_be_set_statically,
-	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element
 } from '../../../../../utils.js';
@@ -13,7 +12,6 @@ import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js'
 import * as b from '#compiler/builders';
 import {
 	create_attribute,
-	ExpressionMetadata,
 	is_custom_element_node,
 	is_customizable_select_element
 } from '../../../nodes.js';
@@ -231,11 +229,18 @@ export function RegularElement(node, context) {
 				continue;
 			}
 
+			// `<select defaultValue>` needs the options to exist before it can mark one
+			// as selected, so it is handled after the children, alongside `value`
+			if (node.name === 'select' && get_attribute_name(node, attribute) === 'defaultValue') {
+				continue;
+			}
+
 			const name = get_attribute_name(node, attribute);
 
 			if (
 				!is_custom_element &&
 				!cannot_be_set_statically(attribute.name) &&
+				(name !== 'value' || node.name !== 'textarea') &&
 				(attribute.value === true || is_text_attribute(attribute)) &&
 				(name !== 'class' || class_directives.length === 0) &&
 				(name !== 'style' || style_directives.length === 0)
@@ -434,7 +439,7 @@ export function RegularElement(node, context) {
 			state: child_state
 		});
 
-		if (needs_reset) {
+		if (needs_reset && !fold_reset_into_child(child_state.init, context.state.node)) {
 			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
 		}
 	}
@@ -513,6 +518,34 @@ export function RegularElement(node, context) {
 		}
 	}
 
+	// deferred from the attribute loop above, so that the options it selects from
+	// have been created and had their values assigned
+	if (!has_spread && name === 'select') {
+		const default_value = /** @type {AST.Attribute[]} */ (attributes).find(
+			(attribute) => get_attribute_name(node, attribute) === 'defaultValue'
+		);
+
+		if (default_value) {
+			const { value, has_state } = build_attribute_value(default_value.value, context, (v, m) =>
+				context.state.memoizer.add(v, m)
+			);
+
+			(has_state ? context.state.update : context.state.init).push(
+				b.stmt(b.call('$.set_default_select_value', node_id, value))
+			);
+		}
+
+		const value_attribute = lookup.get('value');
+		const dynamic_value =
+			value_attribute !== undefined &&
+			value_attribute.value !== true &&
+			!is_text_attribute(value_attribute);
+
+		if (default_value || dynamic_value || bindings.has('value')) {
+			context.state.init.push(b.stmt(b.call('$.init_select', node_id)));
+		}
+	}
+
 	context.state.template.pop_element();
 }
 
@@ -528,18 +561,12 @@ export function build_class_directives_object(
 ) {
 	let properties = [];
 
-	const metadata = new ExpressionMetadata();
-
 	for (const d of class_directives) {
-		metadata.merge(d.metadata.expression);
-
 		const expression = /** @type Expression */ (context.visit(d.expression));
-		properties.push(b.init(d.name, expression));
+		properties.push(b.init(d.name, memoizer.add(expression, d.metadata.expression)));
 	}
 
-	const directives = b.object(properties);
-
-	return memoizer.add(directives, metadata);
+	return b.object(properties);
 }
 
 /**
@@ -555,23 +582,17 @@ export function build_style_directives_object(
 	const normal = b.object([]);
 	const important = b.object([]);
 
-	const metadata = new ExpressionMetadata();
-
 	for (const d of style_directives) {
-		metadata.merge(d.metadata.expression);
-
 		const expression =
 			d.value === true
 				? build_getter(b.id(d.name), context.state)
 				: build_attribute_value(d.value, context).value;
 
 		const object = d.modifiers.includes('important') ? important : normal;
-		object.properties.push(b.init(d.name, expression));
+		object.properties.push(b.init(d.name, memoizer.add(expression, d.metadata.expression)));
 	}
 
-	const directives = important.properties.length ? b.array([normal, important]) : normal;
-
-	return memoizer.add(directives, metadata);
+	return important.properties.length ? b.array([normal, important]) : normal;
 }
 
 /**
@@ -715,28 +736,32 @@ function build_element_special_value_attribute(
 	);
 
 	const evaluated = context.state.scope.evaluate(value);
-	const assignment = b.assignment('=', b.member(node_id, '__value'), value);
 
-	const set_value_assignment = b.assignment(
-		'=',
-		b.member(node_id, 'value'),
-		evaluated.is_defined ? assignment : b.logical('??', assignment, b.literal(''))
-	);
+	/** @param {Expression} value */
+	const build_update = (value) => {
+		const assignment = b.assignment('=', b.member(node_id, '__value'), value);
 
-	const update = b.stmt(
-		is_select_with_value
-			? b.sequence([
-					set_value_assignment,
-					// This ensures a one-way street to the DOM in case it's <select {value}>
-					// and not <select bind:value>. We need it in addition to $.init_select
-					// because the select value is not reflected as an attribute, so the
-					// mutation observer wouldn't notice.
-					b.call('$.select_option', node_id, value)
-				])
-			: synthetic
-				? assignment
-				: set_value_assignment
-	);
+		const set_value_assignment = b.assignment(
+			'=',
+			b.member(node_id, 'value'),
+			evaluated.is_defined ? assignment : b.logical('??', assignment, b.literal(''))
+		);
+
+		return b.stmt(
+			is_select_with_value
+				? b.sequence([
+						set_value_assignment,
+						// This ensures a one-way street to the DOM in case it's <select {value}>
+						// and not <select bind:value>. We need it in addition to $.init_select
+						// because the select value is not reflected as an attribute, so the
+						// mutation observer wouldn't notice.
+						b.call('$.select_option', node_id, value)
+					])
+				: synthetic
+					? assignment
+					: set_value_assignment
+		);
+	};
 
 	if (has_state) {
 		const id = b.id(state.scope.generate(`${node_id.name}_value`));
@@ -747,12 +772,49 @@ function build_element_special_value_attribute(
 		const init = element === 'option' ? b.object([]) : undefined;
 
 		state.init.push(b.var(id, init));
-		state.update.push(b.if(b.binary('!==', id, b.assignment('=', id, value)), b.block([update])));
+
+		// the guard already evaluated `value` into `id`, so read that back rather than
+		// evaluating the same expression (and its signal reads) a second time
+		state.update.push(
+			b.if(b.binary('!==', id, b.assignment('=', id, value)), b.block([build_update(id)]))
+		);
 	} else {
-		state.init.push(update);
+		state.init.push(build_update(value));
+	}
+}
+
+/**
+ * `<p>{text}</p>` and friends produce `var x = $.child(p, true); $.reset(p);`. That pair is
+ * by far the most common shape in compiled output, and `$.only_child` does both, so fold the
+ * two together when the `$.child(...)` is the last thing we emitted for this element.
+ * @param {Statement[]} init
+ * @param {Expression} node_id
+ * @returns {boolean} whether the reset was folded in
+ */
+function fold_reset_into_child(init, node_id) {
+	const last = init.at(-1);
+
+	if (
+		node_id?.type !== 'Identifier' ||
+		last?.type !== 'VariableDeclaration' ||
+		last.declarations.length !== 1
+	) {
+		return false;
 	}
 
-	if (is_select_with_value) {
-		state.init.push(b.stmt(b.call('$.init_select', node_id)));
+	const call = last.declarations[0].init;
+
+	if (
+		call?.type !== 'CallExpression' ||
+		call.callee.type !== 'Identifier' ||
+		call.callee.name !== '$.child' ||
+		call.arguments[0]?.type !== 'Identifier' ||
+		call.arguments[0].name !== node_id.name
+	) {
+		return false;
 	}
+
+	call.callee = b.id('$.only_child');
+
+	return true;
 }

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

@@ -4,6 +4,7 @@
 import { dev, locator } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
+import { async_thunk } from '../utils.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import {
 	build_attribute_value,
@@ -147,7 +148,7 @@ export function SvelteElement(node, context) {
 					'$.async',
 					context.state.node,
 					node.metadata.expression.blockers(),
-					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					has_await ? b.array([async_thunk(expression, node.metadata.expression)]) : b.void0,
 					b.arrow(
 						has_await ? [context.state.node, b.id('$$tag')] : [context.state.node],
 						b.block(statements)

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

@@ -6,7 +6,13 @@ import { extract_paths, save } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
-import { get_prop_source, is_prop_source, is_state_source, should_proxy } from '../utils.js';
+import {
+	async_thunk,
+	get_prop_source,
+	is_prop_source,
+	is_state_source,
+	should_proxy
+} from '../utils.js';
 import { get_value } from './shared/declarations.js';
 
 /**
@@ -200,9 +206,10 @@ export function VariableDeclaration(node, context) {
 			}
 
 			if (rune === '$derived' || rune === '$derived.by') {
-				const is_async = context.state.analysis.async_deriveds.has(
+				const metadata = context.state.analysis.async_deriveds.get(
 					/** @type {CallExpression} */ (init)
 				);
+				const is_async = metadata !== undefined;
 
 				if (declarator.id.type === 'Identifier') {
 					let expression = /** @type {Expression} */ (context.visit(value));
@@ -213,7 +220,7 @@ export function VariableDeclaration(node, context) {
 						/** @type {Expression} */
 						let call = b.call(
 							'$.async_derived',
-							b.thunk(expression, true),
+							async_thunk(expression, metadata),
 							dev && b.literal(declarator.id.name),
 							location ? b.literal(location) : undefined
 						);
@@ -246,7 +253,7 @@ export function VariableDeclaration(node, context) {
 
 							call = b.call(
 								'$.async_derived',
-								b.thunk(expression, true),
+								async_thunk(expression, metadata),
 								dev &&
 									b.literal(
 										`[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`

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

@@ -30,6 +30,7 @@ export function build_attribute_effect(
 ) {
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
+	const is_select = element.type === 'RegularElement' && element.name === 'select';
 
 	const memoizer = new Memoizer();
 
@@ -48,7 +49,11 @@ export function build_attribute_effect(
 				context.state.init.push(b.var(id, value));
 				values.push(b.init(attribute.name, b.id(id)));
 			} else {
-				values.push(b.init(attribute.name, value));
+				const name =
+					is_select && normalize_attribute(attribute.name) === 'defaultValue'
+						? 'defaultValue'
+						: attribute.name;
+				values.push(b.init(name, value));
 			}
 		} else {
 			let value = /** @type {Expression} */ (context.visit(attribute));

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

@@ -161,7 +161,7 @@ export function is_static_element(node) {
 		}
 
 		if (
-			['input', 'textarea'].includes(node.name) &&
+			['input', 'textarea', 'select'].includes(node.name) &&
 			['value', 'checked'].includes(attribute.name)
 		) {
 			return false;
@@ -171,11 +171,6 @@ export function is_static_element(node) {
 			return false;
 		}
 
-		// We need to apply src and loading after appending the img to the DOM for lazy loading to work
-		if (node.name === 'img' && attribute.name === 'loading') {
-			return false;
-		}
-
 		if (attribute.value !== true && !is_text_attribute(attribute)) {
 			return false;
 		}

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

@@ -8,7 +8,7 @@ import { sanitize_template_string } from '../../../../../utils/sanitize_template
 import { regex_is_valid_identifier } from '../../../../patterns.js';
 import is_reference from 'is-reference';
 import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
-import { build_getter, is_state_source } from '../../utils.js';
+import { async_thunk, build_getter, is_state_source } from '../../utils.js';
 import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
@@ -16,10 +16,10 @@ import { ExpressionMetadata } from '../../../../nodes.js';
  * from templates and replacing them with `$0`, `$1` etc
  */
 export class Memoizer {
-	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	/** @type {Array<{ id: Identifier, expression: Expression, metadata: ExpressionMetadata }>} */
 	#sync = [];
 
-	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	/** @type {Array<{ id: Identifier, expression: Expression, metadata: ExpressionMetadata }>} */
 	#async = [];
 
 	/** @type {Set<Expression>} */
@@ -43,7 +43,7 @@ export class Memoizer {
 
 		const id = b.id('#'); // filled in later
 
-		(metadata.has_await ? this.#async : this.#sync).push({ id, expression });
+		(metadata.has_await ? this.#async : this.#sync).push({ id, expression, metadata });
 
 		return id;
 	}
@@ -84,7 +84,7 @@ export class Memoizer {
 		if (this.#async.length === 0) return;
 		// use `b.arrow` rather than `b.thunk` so that deferred async/template effects
 		// always read live bindings rather than a possibly stale snapshot.
-		return b.array(this.#async.map((memo) => b.arrow([], memo.expression, true)));
+		return b.array(this.#async.map((memo) => async_thunk(memo.expression, memo.metadata)));
 	}
 
 	sync_values() {

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

@@ -148,7 +148,7 @@ export function server_component(analysis, options) {
 	const legacy_reactive_declarations = [];
 
 	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');
 		}
@@ -165,7 +165,7 @@ export function server_component(analysis, options) {
 			}
 		}
 
-		instance.body.push(statement[1]);
+		instance.body.push(statement);
 	}
 
 	if (legacy_reactive_declarations.length > 0) {
@@ -210,14 +210,25 @@ export function server_component(analysis, options) {
 		];
 	}
 
-	if (
-		[...analysis.instance.scope.declarations.values()].some(
-			(binding) => binding.kind === 'store_sub'
-		)
-	) {
+	const store_subs = [...analysis.instance.scope.declarations.values()].filter(
+		(binding) => binding.kind === 'store_sub'
+	);
+
+	// a blocked subscription is only created once its promise resolves, so its teardown must wait until the render is done
+	const defer_store_teardown = store_subs.some((binding) => binding.blocker);
+
+	if (store_subs.length > 0) {
 		instance.body.unshift(b.var('$$store_subs'));
+
+		const unsubscribe = b.if(
+			b.id('$$store_subs'),
+			b.stmt(b.call('$.unsubscribe_stores', b.id('$$store_subs')))
+		);
+
 		template.body.push(
-			b.if(b.id('$$store_subs'), b.stmt(b.call('$.unsubscribe_stores', b.id('$$store_subs'))))
+			defer_store_teardown
+				? b.stmt(b.call('$$renderer.on_destroy', b.arrow([], b.block([unsubscribe]))))
+				: unsubscribe
 		);
 	}
 
@@ -257,7 +268,7 @@ export function server_component(analysis, options) {
 		);
 	}
 
-	let should_inject_context = dev || analysis.needs_context;
+	let should_inject_context = dev || analysis.needs_context || defer_store_teardown;
 
 	if (should_inject_context) {
 		component_block = b.block([

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

@@ -110,7 +110,7 @@ function build_assignment(operator, left, right, context) {
 			context.visit(build_assignment_value(operator, left, right))
 		);
 
-		return b.call(binding.node, value);
+		return b.call(object, value);
 	}
 
 	return null;

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

@@ -66,7 +66,7 @@ export function add_async_declaration(context, metadata, ids, assignments, kind
 		context.state.init.push(kind === 'var' ? b.var(id.name) : b.let(id.name));
 	}
 
-	const blockers = [...metadata.expression.dependencies]
+	const blockers = [...metadata.expression.references]
 		.map((dep) => dep.blocker)
 		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
 

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

@@ -2,7 +2,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
+import {
+	block_close,
+	block_open,
+	block_open_else,
+	create_child_block,
+	prepend_block_marker
+} from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -51,7 +57,7 @@ export function EachBlock(node, context) {
 
 		const fallback = /** @type {BlockStatement} */ (context.visit(node.fallback));
 
-		fallback.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
+		prepend_block_marker(fallback, /** @type {string} */ (block_open_else.value));
 
 		statements.push(
 			b.if(

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

@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { block_close, create_child_block } from './shared/utils.js';
+import { block_close, create_child_block, prepend_block_marker } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
@@ -10,7 +10,7 @@ import { block_close, create_child_block } from './shared/utils.js';
  */
 export function IfBlock(node, context) {
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	consequent.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[0-->`))));
+	prepend_block_marker(consequent, `<!--[0-->`);
 
 	/** @type {IfStatement} */
 	let if_statement = b.if(/** @type {Expression} */ (context.visit(node.test)), consequent);
@@ -22,7 +22,7 @@ export function IfBlock(node, context) {
 	// Walk the else-if chain, flattening branches
 	for (const elseif of node.metadata.flattened ?? []) {
 		const branch = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
-		branch.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[${index++}-->`))));
+		prepend_block_marker(branch, `<!--[${index++}-->`);
 
 		current_if = current_if.alternate = b.if(
 			/** @type {Expression} */ (context.visit(elseif.test)),
@@ -34,7 +34,7 @@ export function IfBlock(node, context) {
 	// Handle final else (or remaining async chain)
 	const final_alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
 
-	final_alternate.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[-1-->`))));
+	prepend_block_marker(final_alternate, `<!--[-1-->`);
 	current_if.alternate = final_alternate;
 
 	context.state.template.push(

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

@@ -46,7 +46,7 @@ export function RegularElement(node, context) {
 		node.attributes.some(
 			(attribute) =>
 				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
-					attribute.name === 'value') ||
+					(attribute.name === 'value' || attribute.name.toLowerCase() === 'defaultvalue')) ||
 				attribute.type === 'SpreadAttribute'
 		);
 	const is_option_special = name === 'option';