New rule: prefer-event-forwarding

[mcmxcdev]

Motivation

In our dev team, some devs tend to redefine event handlers as props which makes code more verbose than it needs to be.

Button.svelte

export let onClick = () => {}
...

<button on:click={onClick}>Click me</button>

Instead, we can rely on event forwarding like this:

Button.svelte

// no onClick prop
...

<button on:click>Click me</button>

See more: https://learn.svelte.dev/tutorial/event-forwarding

Description

The rule should report on props that mirror native HTML event handlers and suggest simplifying them with event forwarding.

Examples

<!-- ✓ GOOD -->
<button on:click>Click me</button>

<!-- ✗ BAD -->
<script>
export let onClick = () => {}
</script>

<button on:click={onClick}>Click me</button>

Additional comments

No response

[bfanger]

Svelte 5 is moving into direction of using props for event handlers:

Instead of doing to 'forward' the event from the element to the component, the component should accept an onclick callback prop:

<script>
  let { onclick } = $props();
</script>

<button {onclick}>Click me</button>

https://svelte-5-preview.vercel.app/docs/event-handlers#bubbling-events

So although I agree that using on:click forwarding in Svelte 3 & 4 was nice and preferable, It will make upgrading slightly harder.

[ptrxyz]

Non the less is Svelte 4 supported for the foreseeable future. So I think this should be considered.