Optimize callbacks inside each block with loop variable names #16414
Description
Describe the bug
Buttons B and C have identical callbacks, but the generated JS output differs:
// B
button_1.__click = (e) => {
const index = Number(e.currentTarget.dataset.index);
console.log(index);
};// C
var on_click = (e, state) => {
const i = Number(e.currentTarget.dataset.index);
$.set(state, $.get(state) + (i + 1));
};
button_2.__click = [on_click];This is because the index variable name is reused inside the callback:
{#each { length: 1 } as _, index}
<!-- New callback per-loop -->
<button type="button" onclick={() => console.log(index)}>A</button>
<!-- New callback per-loop -->
<button
type="button"
data-index={index}
onclick={(e) => {
const index = Number(e.currentTarget.dataset.index)!;
console.log(index);
}}>B</button
>
<!-- Shared callback between loops -->
<button
type="button"
data-index={index}
onclick={(e) => {
// Variable name has been changed for optimization.
const i = Number(e.currentTarget.dataset.index)!;
console.log(i);
}}>C</button
>
{/each}If the loop variables (e.g. index) are redefined in the first line (e.g. const index =), they can be optimized.
(Without renaming index to i in this case.)
Reproduction
https://svelte.dev/playground/93ce89c9e31248b3947dc23ae54e5992?version=5.36.5
Logs
System Info
-Severity
annoyance