svelte 5.56.9 → 5.57.0

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/css/index.js

@@ -355,7 +355,11 @@ const visitors = {
 						continue;
 					}
 
-					if (selector.type === 'TypeSelector' && selector.name === '*') {
+					if (
+						selector.type === 'TypeSelector' &&
+						selector.name === '*' &&
+						selector.namespace === undefined
+					) {
 						context.state.code.update(selector.start, selector.end, modifier);
 					} else {
 						context.state.code.appendLeft(selector.end, modifier);

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/LabeledStatement.js

@@ -8,6 +8,7 @@ import * as b from '#compiler/builders';
  */
 export function LabeledStatement(node, context) {
 	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		context.next();
 		return;
 	}
 

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';

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

@@ -1,4 +1,4 @@
-/** @import { BlockStatement } from 'estree' */
+/** @import { BlockStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
@@ -84,6 +84,9 @@ export function SvelteBoundary(node, context) {
 	}
 
 	const props = b.object([]);
+	/** @type {Statement[]} */
+	const init = [];
+
 	if (failed_attribute && !failed_snippet) {
 		const failed_callee = build_attribute_value(
 			failed_attribute.value,
@@ -95,13 +98,15 @@ export function SvelteBoundary(node, context) {
 
 		props.properties.push(b.init('failed', failed_callee));
 	} else if (failed_snippet) {
-		context.visit(failed_snippet, context.state);
+		context.visit(failed_snippet, { ...context.state, init });
 		props.properties.push(b.init('failed', failed_snippet.expression));
 	}
 
-	context.state.template.push(
-		b.stmt(b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body)))
+	const boundary = b.stmt(
+		b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body))
 	);
+
+	context.state.template.push(init.length > 0 ? b.block([...init, boundary]) : boundary);
 }
 
 /**

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

@@ -102,9 +102,11 @@ export function VariableDeclaration(node, context) {
 				} else {
 					const call = /** @type {CallExpression} */ (declarator.init);
 
-					let rhs = value;
+					// - cannot be a SpreadElement because refused during analysis
+					// - use args[0] rather than value to avoid visiting twice (above in const value = ... and below in for-ofs)
+					let rhs = /** @type {Expression} */ (call.arguments[0]);
 
-					if (rune !== '$derived' || call.arguments[0].type !== 'Identifier') {
+					if (rune === '$derived.by' || call.arguments[0].type !== 'Identifier') {
 						const id = b.id(context.state.scope.generate('$$d'));
 
 						rhs = b.call(id);

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

@@ -3,7 +3,7 @@
 /** @import { ComponentContext, ComponentServerTransformState } from '../../types.js' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import { binding_properties } from '../../../../bindings.js';
-import { create_attribute, ExpressionMetadata, is_custom_element_node } from '../../../../nodes.js';
+import { ExpressionMetadata, is_custom_element_node } from '../../../../nodes.js';
 import { regex_starts_with_newline } from '../../../../patterns.js';
 import * as b from '#compiler/builders';
 import {
@@ -21,6 +21,11 @@ import { escape_html } from '../../../../../../escaping.js';
 
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
+/**
+ * @typedef {{ type: 'transformed', name: string, expression: Expression }} TransformedAttribute
+ * An attribute whose expression has already been transformed and must not be visited again.
+ */
+
 /**
  * Writes the output to the template output. Some elements may have attributes on them that require the
  * their output to be the child content instead. In this case, an object is returned.
@@ -29,7 +34,7 @@ const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
  * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 export function build_element_attributes(node, context, transform) {
-	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute | TransformedAttribute>} */
 	const attributes = [];
 
 	/** @type {AST.ClassDirective[]} */
@@ -145,42 +150,26 @@ export function build_element_attributes(node, context, transform) {
 						attr.value[0].data === 'checkbox'
 				);
 
-				attributes.push(
-					create_attribute('checked', null, -1, -1, [
-						{
-							type: 'ExpressionTag',
-							start: -1,
-							end: -1,
-							expression: is_checkbox
-								? b.call(
-										b.member(attribute.expression, 'includes'),
-										build_attribute_value(value_attribute.value, context, transform)
-									)
-								: b.binary(
-										'===',
-										attribute.expression,
-										build_attribute_value(value_attribute.value, context, transform)
-									),
-							metadata: {
-								expression: new ExpressionMetadata()
-							}
-						}
-					])
-				);
+				attributes.push({
+					type: 'transformed',
+					name: 'checked',
+					expression: is_checkbox
+						? b.call(
+								b.member(expression, 'includes'),
+								build_attribute_value(value_attribute.value, context, transform)
+							)
+						: b.binary(
+								'===',
+								expression,
+								build_attribute_value(value_attribute.value, context, transform)
+							)
+				});
 			} else {
-				attributes.push(
-					create_attribute(attribute.name, null, -1, -1, [
-						{
-							type: 'ExpressionTag',
-							start: -1,
-							end: -1,
-							expression,
-							metadata: {
-								expression: new ExpressionMetadata()
-							}
-						}
-					])
-				);
+				attributes.push({
+					type: 'transformed',
+					name: get_attribute_name(node, attribute),
+					expression
+				});
 			}
 		} else if (attribute.type === 'SpreadAttribute') {
 			attributes.push(attribute);
@@ -217,7 +206,21 @@ export function build_element_attributes(node, context, transform) {
 	} else {
 		const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
 
-		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
+		for (const attribute of /** @type {Array<AST.Attribute | TransformedAttribute>} */ (
+			attributes
+		)) {
+			if (attribute.type === 'transformed') {
+				context.state.template.push(
+					b.call(
+						'$.attr',
+						b.literal(attribute.name),
+						attribute.expression,
+						is_boolean_attribute(attribute.name) && b.true
+					)
+				);
+				continue;
+			}
+
 			const name = get_attribute_name(node, attribute);
 			const can_use_literal =
 				(name !== 'class' || class_directives.length === 0) &&
@@ -298,15 +301,19 @@ function get_attribute_name(element, attribute) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective | TransformedAttribute>} attributes
  * @param {ComponentContext} context
  * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 export function build_spread_object(element, attributes, context, transform) {
+	const is_select = element.type === 'RegularElement' && element.name === 'select';
 	const object = b.object(
 		attributes.map((attribute) => {
-			if (attribute.type === 'Attribute') {
-				const name = get_attribute_name(element, attribute);
+			if (attribute.type === 'transformed') {
+				return b.prop('init', b.key(attribute.name), attribute.expression);
+			} else if (attribute.type === 'Attribute') {
+				let name = get_attribute_name(element, attribute);
+				if (is_select && name === 'defaultvalue') name = 'defaultValue';
 				const value = build_attribute_value(
 					attribute.value,
 					context,
@@ -317,10 +324,9 @@ export function build_spread_object(element, attributes, context, transform) {
 				return b.prop('init', b.key(name), value);
 			} else if (attribute.type === 'BindDirective') {
 				const name = get_attribute_name(element, attribute);
+				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 				const value =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: /** @type {Expression} */ (context.visit(attribute.expression));
+					expression.type === 'SequenceExpression' ? b.call(expression.expressions[0]) : expression;
 
 				return b.prop('init', b.key(name), value);
 			}
@@ -340,7 +346,7 @@ export function build_spread_object(element, attributes, context, transform) {
 /**
  *
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | TransformedAttribute>} attributes
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
@@ -356,7 +362,7 @@ function build_element_spread_attributes(
 ) {
 	const args = prepare_element_spread(
 		element,
-		/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */ (attributes),
+		attributes,
 		style_directives,
 		class_directives,
 		context,
@@ -410,7 +416,7 @@ export function prepare_element_spread_object(element, context, transform) {
 /**
  * Prepare args for $.attributes(...): compute object, css_hash, classes, styles and flags.
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective | TransformedAttribute>} attributes
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context

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

@@ -180,6 +180,36 @@ export function build_template(template) {
 	return statements;
 }
 
+/**
+ * Prepends a hydration marker (e.g. `<!--[0-->`) to a branch. The branch has already been
+ * turned into statements by `build_template`, so if it happens to start with a static
+ * `$$renderer.push(...)` we fold the marker into that call rather than emitting a second one.
+ * @param {BlockStatement} block
+ * @param {string} marker
+ */
+export function prepend_block_marker(block, marker) {
+	const first = block.body[0];
+
+	if (
+		first?.type === 'ExpressionStatement' &&
+		first.expression.type === 'CallExpression' &&
+		first.expression.callee.type === 'Identifier' &&
+		first.expression.callee.name === '$$renderer.push' &&
+		first.expression.arguments.length === 1 &&
+		first.expression.arguments[0].type === 'TemplateLiteral'
+	) {
+		const quasi = first.expression.arguments[0].quasis[0];
+
+		// markers never contain characters that need escaping in a template literal
+		quasi.value.cooked = marker + quasi.value.cooked;
+		quasi.value.raw = marker + quasi.value.raw;
+
+		return;
+	}
+
+	block.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(marker))));
+}
+
 /**
  *
  * @param {AST.Attribute['value']} value
@@ -286,7 +316,7 @@ export function build_getter(node, state) {
 	}
 
 	if (binding.kind === 'derived') {
-		return (binding.declaration_kind === 'var' ? b.maybe_call : b.call)(binding.node);
+		return (binding.declaration_kind === 'var' ? b.maybe_call : b.call)(node);
 	}
 
 	return node;

package/src/compiler/phases/bindings.js

@@ -23,7 +23,9 @@ export const binding_properties = {
 		event: 'durationchange',
 		omit_in_ssr: true
 	},
-	focused: {},
+	focused: {
+		omit_in_ssr: true // no corresponding HTML attribute
+	},
 	paused: {
 		valid_elements: ['audio', 'video'],
 		omit_in_ssr: true,

package/src/compiler/phases/nodes.js

@@ -77,6 +77,9 @@ export class ExpressionMetadata {
 	/** True if the expression contains `await` */
 	has_await = false;
 
+	/** True if an `await` restores the reaction context afterwards, so the thunk must end it */
+	has_pickled_await = false;
+
 	/** True if the expression includes a member expression */
 	has_member_expression = false;
 
@@ -142,6 +145,7 @@ export class ExpressionMetadata {
 		this.has_state ||= source.has_state;
 		this.has_call ||= source.has_call;
 		this.has_await ||= source.has_await;
+		this.has_pickled_await ||= source.has_pickled_await;
 		this.has_member_expression ||= source.has_member_expression;
 		this.has_assignment ||= source.has_assignment;
 		this.#blockers = null; // so that blockers are recalculated