Defining a variable named _ causes rollup error duplicate argument name _ when using it in an event handler using the new syntax

[jackvanderbilt-visma]

Describe the bug

When using runes, and using the new event handlers (onclick instead of on:click for example), a variable you do not define _ magically exists out of nowhere, pointing to the event itself, even though I did not define this.

Practical example:

<script>
	let a = $state(1);
	let b = 2;
	let c = $derived(a + b);
</script>

<svelte:options runes />

<button onclick={() => { console.log(_); a += b} }>{c}</button>

Generates the following js:

import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";

// Note the `_` in the generated function here:
var on_click = (_, a, b) => {
	console.log(_);
	$.set(a, $.get(a) + b);
};

var root = $.template(`<button> </button>`);

export default function App($$anchor) {
	let a = $.state(1);
	let b = 2;
	let c = $.derived(() => $.get(a) + b);
	var button = root();

	button.__click = [on_click, a, b];

	var text = $.child(button);

	$.reset(button);
	$.template_effect(() => $.set_text(text, $.get(c)));
	$.append($$anchor, button);
}

$.delegate(["click"]);

The console.log now just logs the event itself, even though we did not explicitly define it in the event handler callback function.

Obviously, I found this out by actively looking for weird quirks in the new generated output versus 4.0. If this was it, I would not have made this issue, as it would be fair to say no user really ever notices this.

I discovered while playing around with this, that if you now try to define a variable _ in your <script> it throws a runtime error.

Example:

<script>
	let a = $state(1);
	let b = 2;
	let c = $derived(a + b);

	// What I expect to be logged in the click handler
	let _ = "Hello world"
</script>

<svelte:options runes />

<button onclick={() => { console.log(_); a += b} }>{c}</button>

js output:

import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";

var on_click = (_, _, a, b) => {
	console.log(_);
	$.set(a, $.get(a) + b);
};

var root = $.template(`<button> </button>`);

export default function App($$anchor) {
	let a = $.state(1);
	let b = 2;
	let c = $.derived(() => $.get(a) + b);
	let _ = "hello world";
	var button = root();

	button.__click = [on_click, _, a, b];

	var text = $.child(button);

	$.reset(button);
	$.template_effect(() => $.set_text(text, $.get(c)));
	$.append($$anchor, button);
}

$.delegate(["click"]);

Unexpected error:

RollupError: ./App.svelte (8:19): Duplicate argument name "_"

This I find to be more of an issue, as I can imagine some actually using _ to define for example a lodash like object, or as a debug variable, which I have actually done in the past.

The solution I think would be to not even generate the _ parameter in the on_click function to begin with if no first parameter is defined in the callback function. That would minimize the JS output further and not cause this problem to even occur.

Reproduction

https://svelte.dev/playground/hello-world?version=5.1.0#H4sIAAAAAAAACm2OzWrDMBCEX2VZerBJiGmPimXoc1QlyPK2FVV3jbVOUozevTjuz6XH-WaGmQVfYqKM5mlB_RwJzQ3gHtl_rOpxHA_5TElX1vtM__EgrMSa0WCbwxRH7Rw7TaTgwcJdVq9U3dfHH9qDhYdfFdbMQFM801B52EF_S367J7Dg8I1SErjIlAaHjtvmb4fb7YiRUaNwhmlmytBsXj-rCoNwSDG826WqwXawQBDOkuiQ5LU61UfwsLPQFyjdEkrbbLXOMe5R6apodJqpPJcvr8ot7DIBAAA=

Logs

Console was cleared
index-DvtQ4obt.js:89 running Svelte compiler version 5.1.0
index-DvtQ4obt.js:113  RollupError: ./App.svelte (8:19): Duplicate argument name "_"
    at Xi (index-DvtQ4obt.js:25:919)
    at F (index-DvtQ4obt.js:25:870)
    at Ie.error (index-DvtQ4obt.js:36:39879)
    at hl.addParameterDeclaration (index-DvtQ4obt.js:32:70248)
    at le.declare (index-DvtQ4obt.js:32:60353)
    at index-DvtQ4obt.js:36:19448
    at Array.map (<anonymous>)
    at Array.op (index-DvtQ4obt.js:36:19439)
    at M (index-DvtQ4obt.js:36:27509)
    at Array.op (index-DvtQ4obt.js:36:27118)
ng @ index-DvtQ4obt.js:113
await in ng
(anonymous) @ index-DvtQ4obt.js:81
setTimeout
(anonymous) @ index-DvtQ4obt.js:81

System Info

none

Severity

annoyance