diff --git a/.changeset/fluffy-ducks-happen.md b/.changeset/fluffy-ducks-happen.md new file mode 100644 index 000000000000..0fc6fefc9e97 --- /dev/null +++ b/.changeset/fluffy-ducks-happen.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly transform `{@const foo = await ...}` diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js index 6d9dac8a33d3..389ac093d0f4 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js @@ -291,6 +291,9 @@ export function should_proxy(node, scope) { * @param {ComponentClientTransformState} state * @param {Expression} arg */ -export function create_derived(state, arg) { - return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', arg); +export function create_derived(state, arg, async = false) { + return b.call( + state.analysis.runes ? `$.${async ? 'async_' : ''}derived` : '$.derived_safe_equal', + arg + ); } diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js index 34acdd6bb975..be820b1c0ea9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js @@ -2,7 +2,7 @@ /** @import { AST } from '#compiler' */ /** @import { ComponentContext } from '../types' */ import { dev } from '../../../../state.js'; -import { extract_identifiers } from '../../../../utils/ast.js'; +import { extract_identifiers, is_expression_async } from '../../../../utils/ast.js'; import * as b from '#compiler/builders'; import { create_derived } from '../utils.js'; import { get_value } from './shared/declarations.js'; @@ -17,7 +17,11 @@ export function ConstTag(node, context) { // TODO we can almost certainly share some code with $derived(...) if (declaration.id.type === 'Identifier') { const init = build_expression(context, declaration.init, node.metadata.expression); - let expression = create_derived(context.state, b.thunk(init)); + let expression = create_derived( + context.state, + is_expression_async(init) ? b.arrow([], init, true) : b.thunk(init), + is_expression_async(init) + ); if (dev) { expression = b.call('$.tag', expression, b.literal(declaration.id.name)); @@ -58,10 +62,11 @@ export function ConstTag(node, context) { 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)))) - ]) + ]), + is_expression_async(init) ); - let expression = create_derived(context.state, fn); + let expression = create_derived(context.state, fn, is_expression_async(init)); if (dev) { expression = b.call('$.tag', expression, b.literal('[@const]'));