diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js index c5b1d9def3..f211f64d7c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js @@ -11,35 +11,22 @@ import { build_expression } from './shared/utils.js'; export function KeyBlock(node, context) { context.state.template.push_comment(); - const key = build_expression(context, node.expression, node.metadata.expression); + const { has_await } = node.metadata.expression; + + const expression = build_expression(context, node.expression, node.metadata.expression); + const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression); const body = /** @type {Expression} */ (context.visit(node.fragment)); - if (node.metadata.expression.has_await) { - context.state.init.push( - b.stmt( - b.call( - '$.async', - context.state.node, - b.array([b.thunk(key, true)]), - b.arrow( - [context.state.node, b.id('$$key')], - b.block([ - b.stmt( - b.call( - '$.key', - context.state.node, - b.thunk(b.call('$.get', b.id('$$key'))), - b.arrow([b.id('$$anchor')], body) - ) - ) - ]) - ) - ) - ) - ); - } else { - context.state.init.push( - b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body))) + let call = b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)); + + if (has_await) { + call = b.call( + '$.async', + context.state.node, + b.array([b.thunk(expression, true)]), + b.arrow([context.state.node, b.id('$$key')], b.block([b.stmt(call)])) ); } + + context.state.init.push(b.stmt(call)); } diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js index 0023764e1b..5e3c42019f 100644 --- a/packages/svelte/src/internal/client/dom/blocks/key.js +++ b/packages/svelte/src/internal/client/dom/blocks/key.js @@ -15,7 +15,7 @@ import { current_batch } from '../../reactivity/batch.js'; * @param {(anchor: Node) => TemplateNode | void} render_fn * @returns {void} */ -export function key_block(node, get_key, render_fn) { +export function key(node, get_key, render_fn) { if (hydrating) { hydrate_next(); } diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 8f3b86536d..a8c04e9d4c 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -13,7 +13,7 @@ export { async } from './dom/blocks/async.js'; export { validate_snippet_args } from './dev/validation.js'; export { await_block as await } from './dom/blocks/await.js'; export { if_block as if } from './dom/blocks/if.js'; -export { key_block as key } from './dom/blocks/key.js'; +export { key } from './dom/blocks/key.js'; export { css_props } from './dom/blocks/css-props.js'; export { index, each } from './dom/blocks/each.js'; export { html } from './dom/blocks/html.js';