diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js index 9b4886aa7c..fb74721af0 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js @@ -78,6 +78,7 @@ export function RegularElement(node, context) { } let select_with_value = false; + let select_with_value_async = false; const template_start = state.template.length; if (node.name === 'select') { @@ -86,8 +87,12 @@ export function RegularElement(node, context) { (attribute.type === 'Attribute' || attribute.type === 'BindDirective') && attribute.name === 'value' ); - if (node.attributes.some((attribute) => attribute.type === 'SpreadAttribute')) { + + const spread = node.attributes.find((attribute) => attribute.type === 'SpreadAttribute'); + if (spread) { select_with_value = true; + select_with_value_async ||= spread.metadata.expression.has_await; + state.template.push( b.stmt( b.assignment( @@ -113,6 +118,13 @@ export function RegularElement(node, context) { ); } else if (value) { select_with_value = true; + + if (value.type === 'Attribute' && value.value !== true) { + select_with_value_async ||= (Array.isArray(value.value) ? value.value : [value.value]).some( + (tag) => tag.type === 'ExpressionTag' && tag.metadata.expression.has_await + ); + } + const left = b.id('$$payload.local.select_value'); if (value.type === 'Attribute') { state.template.push( @@ -212,7 +224,7 @@ export function RegularElement(node, context) { // TODO this will always produce correct results (because it will produce an async function if the surrounding component is async) // but it will false-positive and create unnecessary async functions (eg. when the component is async but the select element is not) // we could probably optimize by checking if the select element is async. Might be worth it. - context.state.analysis.suspends_without_fallback + select_with_value_async ) ); } diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js index aa072bb09b..3dd78a7638 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js @@ -233,9 +233,7 @@ export function build_inline_component(node, expression, context) { // if the current component is an async component, but it may produce async functions where they're // not necessary -- eg. when the component is asynchronous but the child content is not. // May or may not be worth optimizing. - b.block([ - call_child_payload(b.block(block.body), context.state.analysis.suspends_without_fallback) - ]) + b.block([call_child_payload(b.block(block.body), node.fragment.metadata.is_async)]) ); if (slot_name === 'default' && !has_children_prop) {