feat: warn on invalid event handlers

[Rich-Harris]

Demo

People coming from certain other frameworks, such as one that rhymes with 'foo', are often in the unfortunate habit of calling their event handlers inline, rather than simply passing a function:

<button onclick={increment()}>
  increment
</button>

<button onclick={count += 1}>
  increment
</button>

We can catch a lot of these cases: if the handler is something like a call expression or an assignment expression, and the value isn't a function at the time we try to call it, print a warning. That's what this PR does.

What this doesn't capture is the case where onclick is a prop, because onclick={undefined} is acceptable. Though as I type this it occurs to me that we can warn in case of a handler that is not a function and is also not nullish, as would be the case here:

<Button onclick={count += 1}>

Will update the PR. done

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: d5d1f46

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

This doesn't apply to spread props, that can be a follow-up

[paoloricciuti]

This made me realise something that is actually counterintuitive...technically upon opening the page count should be 3 because we are invoking increment() inline...instead the function is actually called only when you click on the button.

something like this should probably work (i don't know how i would use this but it feels counter intuitive)

[Rich-Harris]

We generate a derived in some cases to avoid repeating setup work. Our three options:

1. Don't create the derived, and live with the extra setup work on every invocation (tbh in 99% of cases this is fine)
2. Eagerly evaluate the derived, so the side effect happens immediately (but only once). This would mean more code for many components
3. Do nothing