svelte 5.39.5 → 5.39.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.39.5",
+  "version": "5.39.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -147,7 +147,7 @@
     "@types/aria-query": "^5.0.4",
     "@types/node": "^20.11.5",
     "dts-buddy": "^0.5.5",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.25.10",
     "rollup": "^4.22.4",
     "source-map": "^0.7.4",
     "tinyglobby": "^0.2.12",

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

@@ -382,7 +382,10 @@ export function check_element(node, context) {
 	}
 
 	// element-specific checks
-	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
+	const is_labelled =
+		attribute_map.has('aria-label') ||
+		attribute_map.has('aria-labelledby') ||
+		attribute_map.has('title');
 
 	switch (node.name) {
 		case 'a':

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

@@ -12,8 +12,19 @@ export function TitleElement(node, context) {
 		/** @type {any} */ (node.fragment.nodes),
 		context
 	);
+	const evaluated = context.state.scope.evaluate(value);
 
-	const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value));
+	const statement = b.stmt(
+		b.assignment(
+			'=',
+			b.id('$.document.title'),
+			evaluated.is_known
+				? b.literal(evaluated.value)
+				: evaluated.is_defined
+					? value
+					: b.logical('??', value, b.literal(''))
+		)
+	);
 
 	if (has_state) {
 		context.state.update.push(statement);

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

@@ -7,11 +7,10 @@ import { is_void } from '../../../../../utils.js';
 import { dev, locator } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_element_attributes, build_spread_object } from './shared/element.js';
+import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
 import {
 	process_children,
 	build_template,
-	build_attribute_value,
 	create_child_block,
 	PromiseOptimiser
 } from './shared/utils.js';
@@ -37,9 +36,27 @@ export function RegularElement(node, context) {
 
 	const optimiser = new PromiseOptimiser();
 
-	state.template.push(b.literal(`<${node.name}`));
-	const body = build_element_attributes(node, { ...context, state }, optimiser.transform);
-	state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
+	// If this element needs special handling (like <select value> / <option>),
+	// avoid calling build_element_attributes here to prevent evaluating/awaiting
+	// attribute expressions twice. We'll handle attributes in the special branch.
+	const is_select_special =
+		node.name === 'select' &&
+		node.attributes.some(
+			(attribute) =>
+				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+					attribute.name === 'value') ||
+				attribute.type === 'SpreadAttribute'
+		);
+	const is_option_special = node.name === 'option';
+	const is_special = is_select_special || is_option_special;
+
+	let body = /** @type {Expression | null} */ (null);
+	if (!is_special) {
+		// only open the tag in the non-special path
+		state.template.push(b.literal(`<${node.name}`));
+		body = build_element_attributes(node, { ...context, state }, optimiser.transform);
+		state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
+	}
 
 	if ((node.name === 'script' || node.name === 'style') && node.fragment.nodes.length === 1) {
 		state.template.push(
@@ -95,27 +112,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (
-		node.name === 'select' &&
-		node.attributes.some(
-			(attribute) =>
-				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
-					attribute.name === 'value') ||
-				attribute.type === 'SpreadAttribute'
-		)
-	) {
-		const attributes = build_spread_object(
-			node,
-			node.attributes.filter(
-				(attribute) =>
-					attribute.type === 'Attribute' ||
-					attribute.type === 'BindDirective' ||
-					attribute.type === 'SpreadAttribute'
-			),
-			context,
-			optimiser.transform
-		);
-
+	if (is_select_special) {
 		const inner_state = { ...state, template: [], init: [] };
 		process_children(trimmed, { ...context, state: inner_state });
 
@@ -124,7 +121,9 @@ export function RegularElement(node, context) {
 			b.block([...state.init, ...build_template(inner_state.template)])
 		);
 
-		const statement = b.stmt(b.call('$$renderer.select', attributes, fn));
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest));
 
 		if (optimiser.expressions.length > 0) {
 			context.state.template.push(
@@ -137,19 +136,7 @@ export function RegularElement(node, context) {
 		return;
 	}
 
-	if (node.name === 'option') {
-		const attributes = build_spread_object(
-			node,
-			node.attributes.filter(
-				(attribute) =>
-					attribute.type === 'Attribute' ||
-					attribute.type === 'BindDirective' ||
-					attribute.type === 'SpreadAttribute'
-			),
-			context,
-			optimiser.transform
-		);
-
+	if (is_option_special) {
 		let body;
 
 		if (node.metadata.synthetic_value_node) {
@@ -167,7 +154,9 @@ export function RegularElement(node, context) {
 			);
 		}
 
-		const statement = b.stmt(b.call('$$renderer.option', attributes, body));
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest));
 
 		if (optimiser.expressions.length > 0) {
 			context.state.template.push(

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

@@ -242,7 +242,12 @@ export function build_inline_component(node, expression, context) {
 			params.push(pattern);
 		}
 
-		const slot_fn = b.arrow(params, b.block(block.body));
+		const slot_fn = b.arrow(
+			params,
+			node.fragment.metadata.has_await
+				? b.block([create_async_block(b.block(block.body))])
+				: b.block(block.body)
+		);
 
 		if (slot_name === 'default' && !has_children_prop) {
 			if (

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

@@ -358,39 +358,108 @@ function build_element_spread_attributes(
 	context,
 	transform
 ) {
+	const args = prepare_element_spread(
+		element,
+		/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */ (attributes),
+		style_directives,
+		class_directives,
+		context,
+		transform
+	);
+
+	let call = b.call('$.attributes', ...args);
+
+	context.state.template.push(call);
+}
+
+/**
+ * Prepare args for $.attributes(...): compute object, css_hash, classes, styles and flags.
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
+ * @returns {[ObjectExpression,Literal | undefined, ObjectExpression | undefined, ObjectExpression | undefined, Literal | undefined]}
+ */
+export function prepare_element_spread_object(element, context, transform) {
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */
+	const select_attributes = [];
+	/** @type {AST.ClassDirective[]} */
+	const class_directives = [];
+	/** @type {AST.StyleDirective[]} */
+	const style_directives = [];
+
+	for (const attribute of element.attributes) {
+		if (
+			attribute.type === 'Attribute' ||
+			attribute.type === 'BindDirective' ||
+			attribute.type === 'SpreadAttribute'
+		) {
+			select_attributes.push(attribute);
+		} else if (attribute.type === 'ClassDirective') {
+			class_directives.push(attribute);
+		} else if (attribute.type === 'StyleDirective') {
+			style_directives.push(attribute);
+		}
+	}
+
+	return prepare_element_spread(
+		element,
+		select_attributes,
+		style_directives,
+		class_directives,
+		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 {AST.StyleDirective[]} style_directives
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
+ * @returns {[ObjectExpression,Literal | undefined, ObjectExpression | undefined, ObjectExpression | undefined, Literal | undefined]}
+ */
+export function prepare_element_spread(
+	element,
+	attributes,
+	style_directives,
+	class_directives,
+	context,
+	transform
+) {
+	/** @type {ObjectExpression | undefined} */
 	let classes;
+	/** @type {ObjectExpression | undefined} */
 	let styles;
 	let flags = 0;
 
-	let has_await = false;
-
 	if (class_directives.length) {
-		const properties = class_directives.map((directive) => {
-			has_await ||= directive.metadata.expression.has_await;
-
-			return b.init(
+		const properties = class_directives.map((directive) =>
+			b.init(
 				directive.name,
 				directive.expression.type === 'Identifier' && directive.expression.name === directive.name
 					? b.id(directive.name)
-					: /** @type {Expression} */ (context.visit(directive.expression))
-			);
-		});
+					: transform(
+							/** @type {Expression} */ (context.visit(directive.expression)),
+							directive.metadata.expression
+						)
+			)
+		);
 
 		classes = b.object(properties);
 	}
 
 	if (style_directives.length > 0) {
-		const properties = style_directives.map((directive) => {
-			has_await ||= directive.metadata.expression.has_await;
-
-			return b.init(
+		const properties = style_directives.map((directive) =>
+			b.init(
 				directive.name,
 				directive.value === true
 					? b.id(directive.name)
 					: build_attribute_value(directive.value, context, transform, true)
-			);
-		});
-
+			)
+		);
 		styles = b.object(properties);
 	}
 
@@ -403,17 +472,12 @@ function build_element_spread_attributes(
 	}
 
 	const object = build_spread_object(element, attributes, context, transform);
-
 	const css_hash =
 		element.metadata.scoped && context.state.analysis.css.hash
 			? b.literal(context.state.analysis.css.hash)
 			: undefined;
 
-	const args = [object, css_hash, classes, styles, flags ? b.literal(flags) : undefined];
-
-	let call = b.call('$.attributes', ...args);
-
-	context.state.template.push(call);
+	return [object, css_hash, classes, styles, flags ? b.literal(flags) : undefined];
 }
 
 /**

package/src/compiler/warnings.js

@@ -174,11 +174,11 @@ export function a11y_click_events_have_key_events(node) {
 }
 
 /**
- * Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+ * Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
  * @param {null | NodeLike} node
  */
 export function a11y_consider_explicit_label(node) {
-	w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\` or \`aria-labelledby\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
+	w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\`, \`aria-labelledby\` or \`title\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
 }
 
 /**

package/src/internal/client/dom/blocks/await.js

@@ -22,7 +22,7 @@ import {
 	set_dev_current_component_function,
 	set_dev_stack
 } from '../../context.js';
-import { flushSync } from '../../reactivity/batch.js';
+import { flushSync, is_flushing_sync } from '../../reactivity/batch.js';
 
 const PENDING = 0;
 const THEN = 1;
@@ -126,7 +126,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 
 				// without this, the DOM does not update until two ticks after the promise
 				// resolves, which is unexpected behaviour (and somewhat irksome to test)
-				flushSync();
+				if (!is_flushing_sync) flushSync();
 			}
 		}
 	}

package/src/internal/client/dom/elements/attributes.js

@@ -6,7 +6,7 @@ import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '#client/constants';
-import { queue_idle_task } from '../task.js';
+import { queue_micro_task } from '../task.js';
 import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
@@ -65,7 +65,7 @@ export function remove_input_defaults(input) {
 
 	// @ts-expect-error
 	input.__on_r = remove_defaults;
-	queue_idle_task(remove_defaults);
+	queue_micro_task(remove_defaults);
 	add_form_reset_listener();
 }
 

package/src/internal/client/dom/task.js

@@ -1,34 +1,15 @@
 import { run_all } from '../../shared/utils.js';
 import { is_flushing_sync } from '../reactivity/batch.js';
 
-// Fallback for when requestIdleCallback is not available
-const request_idle_callback =
-	typeof requestIdleCallback === 'undefined'
-		? (/** @type {() => void} */ cb) => setTimeout(cb, 1)
-		: requestIdleCallback;
-
 /** @type {Array<() => void>} */
 let micro_tasks = [];
 
-/** @type {Array<() => void>} */
-let idle_tasks = [];
-
 function run_micro_tasks() {
 	var tasks = micro_tasks;
 	micro_tasks = [];
 	run_all(tasks);
 }
 
-function run_idle_tasks() {
-	var tasks = idle_tasks;
-	idle_tasks = [];
-	run_all(tasks);
-}
-
-export function has_pending_tasks() {
-	return micro_tasks.length > 0 || idle_tasks.length > 0;
-}
-
 /**
  * @param {() => void} fn
  */
@@ -51,26 +32,11 @@ export function queue_micro_task(fn) {
 	micro_tasks.push(fn);
 }
 
-/**
- * @param {() => void} fn
- */
-export function queue_idle_task(fn) {
-	if (idle_tasks.length === 0) {
-		request_idle_callback(run_idle_tasks);
-	}
-
-	idle_tasks.push(fn);
-}
-
 /**
  * Synchronously run any queued tasks.
  */
 export function flush_tasks() {
-	if (micro_tasks.length > 0) {
+	while (micro_tasks.length > 0) {
 		run_micro_tasks();
 	}
-
-	if (idle_tasks.length > 0) {
-		run_idle_tasks();
-	}
 }

package/src/internal/client/reactivity/async.js

@@ -244,7 +244,6 @@ export async function async_body(fn) {
 		if (pending) {
 			batch.flush();
 		} else {
-			batch.activate();
 			batch.decrement();
 		}