Better error message when using a non-function as an event handler

[PatrickG]

Describe the problem

When you accidently use a non-function as an event handler, the error message is not very helpful.

chunk-Q366ZBYL.js?v=5d387fed:2931 Uncaught TypeError: delegated.call is not a function
    at HTMLDivElement.handle_event_propagation

Originating from here.

REPL

Describe the proposed solution

Throw an error with a better error message if delegated is not a function. At least in dev mode.

Importance

nice to have

[adiguba]

Hello,

I even think that null should not generate an error, but simply "ignore" the handler...

Note that this only concerns local variables, since it is already handled correctly for props and states :

• null will simply be ignored
• Invalid values (objects, strings...) don't throw error, but show a warning event_handler_invalid

[adiguba]

I found another difference for invalid handler in props/states between dev and prod.

• On dev-mode, it's show the event_handler_invalid warning.
• On prod-mode, it's throw an error.

=> I think that the error should also be raised on dev mode.

[PatrickG]

I came across this error by a user on discord that create a help thread. Their failure was that they did

let handleClick = $props();
// later <button onclick={handleClick}>

instead of

let { handleClick } = $props();

And I found the error message should be clearer than delegated.call is not a function.

[adiguba]

I made a PR to fix that.

The error is still the same, but on dev mode it will print the event_handler_invalid warning just before.