svelte 5.56.9 → 5.57.0

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

@@ -2,6 +2,7 @@
 /** @import { Binding } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
+/** @import { ExpressionMetadata } from '../../nodes.js' */
 /** @import { Scope } from '../../scope.js' */
 import * as b from '#compiler/builders';
 import { is_simple_expression, save } from '../../../utils/ast.js';
@@ -164,20 +165,46 @@ export function should_proxy(node, scope) {
 	return true;
 }
 
+/**
+ * An async thunk. If an `await` inside restores the reaction context via `$.save`,
+ * the body exits through `$.unsave` so the context cannot leak into foreign microtasks
+ * that run before the returned promise settles
+ * @param {Expression | BlockStatement} body
+ * @param {ExpressionMetadata} metadata
+ */
+export function async_thunk(body, metadata) {
+	if (!metadata.has_pickled_await) {
+		return b.arrow([], body, true);
+	}
+
+	const block = body.type === 'BlockStatement' ? body : b.block([b.return(body)]);
+
+	return b.arrow(
+		[],
+		b.block([
+			{
+				type: 'TryStatement',
+				block,
+				handler: null,
+				finalizer: b.block([b.stmt(b.call('$.unsave'))])
+			}
+		]),
+		true
+	);
+}
+
 /**
  * Svelte legacy mode should use safe equals in most places, runes mode shouldn't
  * @param {ComponentClientTransformState} state
  * @param {Expression | BlockStatement} expression
- * @param {boolean} [async]
+ * @param {ExpressionMetadata} [metadata]
  */
-export function create_derived(state, expression, async = false) {
-	const thunk = b.thunk(expression, async);
-
-	if (async) {
-		return save(b.call('$.async_derived', thunk));
-	} else {
-		return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', thunk);
+export function create_derived(state, expression, metadata) {
+	if (metadata?.has_await) {
+		return save(b.call('$.async_derived', async_thunk(expression, metadata)));
 	}
+
+	return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', b.thunk(expression));
 }
 
 /**

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

@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, LogicalOperator, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types.js' */
 import * as b from '#compiler/builders';
@@ -79,8 +79,13 @@ function build_assignment(operator, left, right, context) {
 
 			// special case — assignment to private state field
 			if (left.property.type === 'PrivateIdentifier') {
+				const logical_operator = ['||=', '&&=', '??='].includes(operator)
+					? /** @type {LogicalOperator} */ (operator.slice(0, -1))
+					: null;
 				let value = /** @type {Expression} */ (
-					context.visit(build_assignment_value(operator, left, right))
+					context.visit(
+						logical_operator === null ? build_assignment_value(operator, left, right) : right
+					)
 				);
 
 				const needs_proxy =
@@ -88,7 +93,15 @@ function build_assignment(operator, left, right, context) {
 					is_non_coercive_operator(operator) &&
 					should_proxy(value, context.state.scope);
 
-				return b.call('$.set', left, value, needs_proxy && b.true);
+				const assignment = b.call('$.set', left, value, needs_proxy && b.true);
+
+				return logical_operator === null
+					? assignment
+					: b.logical(
+							logical_operator,
+							/** @type {Expression} */ (context.visit(left)),
+							assignment
+						);
 			}
 		}
 	}

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

@@ -1,9 +1,9 @@
 /** @import { BlockStatement, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { extract_identifiers, is_expression_async } from '../../../../utils/ast.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
-import { create_derived } from '../utils.js';
+import { async_thunk, create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 import { build_expression, add_svelte_meta } from './shared/utils.js';
 
@@ -15,10 +15,10 @@ export function AwaitBlock(node, context) {
 	context.state.template.push_comment();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
-	const expression = b.thunk(
-		build_expression(context, node.expression, node.metadata.expression),
-		node.metadata.expression.has_await
-	);
+	const input = build_expression(context, node.expression, node.metadata.expression);
+	const expression = node.metadata.expression.has_await
+		? async_thunk(input, node.metadata.expression)
+		: b.thunk(input);
 
 	let then_block;
 	let catch_block;

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

@@ -1,7 +1,7 @@
 /** @import { CallExpression, Expression, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { dev, is_ignored } from '../../../../state.js';
+import { dev, ignore_map, is_ignored } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { binding_properties } from '../../../bindings.js';
@@ -40,9 +40,15 @@ export function BindDirective(node, context) {
 			validate_binding(context.state, node, expression);
 		}
 
-		const assignment = /** @type {Expression} */ (
-			context.visit(b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value')))
+		const raw_assignment = b.assignment(
+			'=',
+			/** @type {Pattern} */ (node.expression),
+			b.id('$$value')
 		);
+		// The assignment is generated, so inherit any ignores attached to the binding
+		ignore_map.set(raw_assignment, ignore_map.get(node) ?? []);
+
+		const assignment = /** @type {Expression} */ (context.visit(raw_assignment));
 
 		if (dev) {
 			// in dev, create named functions, so that `$inspect(...)` delivers
@@ -58,16 +64,7 @@ export function BindDirective(node, context) {
 			get = b.thunk(expression);
 
 			/** @type {Expression | undefined} */
-			set = b.unthunk(
-				b.arrow(
-					[b.id('$$value')],
-					/** @type {Expression} */ (
-						context.visit(
-							b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
-						)
-					)
-				)
-			);
+			set = b.unthunk(b.arrow([b.id('$$value')], assignment));
 
 			if (get === set) {
 				set = undefined;

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

@@ -19,7 +19,7 @@ export function ConstTag(node, context) {
 	if (declaration.id.type === 'Identifier') {
 		const init = build_expression(context, declaration.init, node.metadata.expression);
 
-		let expression = create_derived(context.state, init, node.metadata.expression.has_await);
+		let expression = create_derived(context.state, init, node.metadata.expression);
 
 		if (dev) {
 			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
@@ -45,20 +45,31 @@ export function ConstTag(node, context) {
 			transform
 		});
 
-		// TODO optimise the simple `{ x } = y` case — we can just return `y`
-		// instead of destructuring it only to return a new object
+		const is_simple_object_pattern =
+			declaration.id.type === 'ObjectPattern' &&
+			declaration.id.properties.every(
+				(p) =>
+					p.type === 'Property' &&
+					!p.computed &&
+					p.key.type === 'Identifier' &&
+					p.value.type === 'Identifier' &&
+					p.key.name === p.value.name
+			);
+
 		const init = build_expression(
 			{ ...context, state: child_state },
 			declaration.init,
 			node.metadata.expression
 		);
 
-		const block = b.block([
-			b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
-			b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
-		]);
+		const block = is_simple_object_pattern
+			? b.block([b.return(init)])
+			: b.block([
+					b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
+					b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
+				]);
 
-		let expression = create_derived(context.state, block, node.metadata.expression.has_await);
+		let expression = create_derived(context.state, block, node.metadata.expression);
 
 		if (dev) {
 			expression = b.call('$.tag', expression, b.literal('[@const]'));

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;
 }
 
 /**
@@ -664,14 +685,25 @@ function build_element_attribute_update(element, node_id, name, value, attribute
  * @param {ComponentContext} context
  */
 function build_custom_element_attribute_update_assignment(node_id, attribute, context) {
-	const { value, has_state } = build_attribute_value(attribute.value, context);
+	const memoizer = new Memoizer();
+	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
+		memoizer.add(value, metadata)
+	);
 
 	// don't lowercase name, as we set the element's property, which might be case sensitive
 	const call = b.call('$.set_custom_element_data', node_id, b.literal(attribute.name), value);
 
 	// this is different from other updates — it doesn't get grouped,
 	// because set_custom_element_data may not be idempotent
-	const update = has_state ? b.call('$.template_effect', b.thunk(call)) : call;
+	const update = has_state
+		? b.call(
+				'$.template_effect',
+				b.arrow(memoizer.apply(), call),
+				memoizer.sync_values(),
+				memoizer.async_values(),
+				memoizer.blockers()
+			)
+		: call;
 
 	context.state.init.push(b.stmt(update));
 }
@@ -704,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`));
@@ -736,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/UpdateExpression.js

@@ -13,7 +13,6 @@ export function UpdateExpression(node, context) {
 
 	if (
 		argument.type === 'MemberExpression' &&
-		argument.object.type === 'ThisExpression' &&
 		argument.property.type === 'PrivateIdentifier' &&
 		context.state.state_fields.has('#' + argument.property.name)
 	) {

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'}]`