diff --git a/.changeset/eleven-beers-yell.md b/.changeset/eleven-beers-yell.md new file mode 100644 index 0000000000..9f38d30e9c --- /dev/null +++ b/.changeset/eleven-beers-yell.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +feat: use implicit return for each block keys diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 71a51b9347..644901eca6 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -2317,11 +2317,13 @@ export const template_visitors = { const key_function = node.key ? b.arrow( [node.context.type === 'Identifier' ? node.context : b.id('$$item'), index], - b.block( - declarations.concat( - b.return(/** @type {import('estree').Expression} */ (context.visit(node.key))) - ) - ) + declarations.length > 0 + ? b.block( + declarations.concat( + b.return(/** @type {import('estree').Expression} */ (context.visit(node.key))) + ) + ) + : /** @type {import('estree').Expression} */ (context.visit(node.key)) ) : b.literal(null); @@ -2347,16 +2349,16 @@ export const template_visitors = { args.push( context.state.node, - each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection), b.literal(each_type), + each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection), key_function, b.arrow([b.id('$$anchor'), item, index], b.block(declarations.concat(children))) ); } else { args.push( context.state.node, - each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection), b.literal(each_type), + each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection), b.arrow([b.id('$$anchor'), item, index], b.block(declarations.concat(children))) ); } diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index d74f6adad5..02ec4b94e7 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -46,15 +46,15 @@ export function set_current_each_item(item) { /** * @template V * @param {Element | Comment} anchor The next sibling node, or the parent node if this is a 'controlled' block - * @param {() => V[]} get_collection * @param {number} flags + * @param {() => V[]} get_collection * @param {null | ((item: V) => string)} get_key * @param {(anchor: null, item: V, index: import('#client').MaybeSource) => void} render_fn * @param {null | ((anchor: Node | null) => void)} fallback_fn * @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn * @returns {void} */ -function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, reconcile_fn) { +function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, reconcile_fn) { /** @type {import('#client').EachState} */ var state = { flags, items: [] }; @@ -193,28 +193,28 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re /** * @template V * @param {Element | Comment} anchor - * @param {() => V[]} get_collection * @param {number} flags + * @param {() => V[]} get_collection * @param {null | ((item: V) => string)} get_key * @param {(anchor: null, item: V, index: import('#client').MaybeSource) => void} render_fn * @param {null | ((anchor: Node | null) => void)} [fallback_fn] * @returns {void} */ -export function each_keyed(anchor, get_collection, flags, get_key, render_fn, fallback_fn = null) { - each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, reconcile_tracked_array); +export function each_keyed(anchor, flags, get_collection, get_key, render_fn, fallback_fn = null) { + each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, reconcile_tracked_array); } /** * @template V * @param {Element | Comment} anchor - * @param {() => V[]} get_collection * @param {number} flags + * @param {() => V[]} get_collection * @param {(anchor: null, item: V, index: import('#client').MaybeSource) => void} render_fn * @param {null | ((anchor: Node | null) => void)} [fallback_fn] * @returns {void} */ -export function each_indexed(anchor, get_collection, flags, render_fn, fallback_fn = null) { - each(anchor, get_collection, flags, null, render_fn, fallback_fn, reconcile_indexed_array); +export function each_indexed(anchor, flags, get_collection, render_fn, fallback_fn = null) { + each(anchor, flags, get_collection, null, render_fn, fallback_fn, reconcile_indexed_array); } /** diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js index 06b05e4abf..7e1177d2b7 100644 --- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js @@ -10,7 +10,7 @@ export default function Each_string_template($$anchor, $$props) { var fragment = $.comment($$anchor); var node = $.first_child(fragment); - $.each_indexed(node, () => ['foo', 'bar', 'baz'], 1, ($$anchor, thing, $$index) => { + $.each_indexed(node, 1, () => ['foo', 'bar', 'baz'], ($$anchor, thing, $$index) => { var text = $.space_frag($$anchor); $.render_effect(() => $.set_text(text, `${$.stringify($.unwrap(thing))}, `));