Add missing function declarations for Inline Event Handlers

[Jojoshua]

Description

Setting up a svelte inline event handler could be faster and less error prone, especially for typescript users.

Currently (using VSCode):

• Start typing <input on:keyup="{onKeyUp}" />
• Go to bottom of script section and type

 function onKeyUp(event) {

 }

• No intellisense tells me what type event should be so start hunting
• Go back to on:keyup and click F12 to find type def
• Click KeyboardEventHandler and click F12 to reasonably find the event to use is KeyboardEvent
• Go back to my function and update

  function onKeyUp(event: KeyboardEvent) {

  }

Proposed solution

Instead I would like for the function (fully typed) to be automatically generated, similarly in how adding a nonexistent method in a typescript file and doing CTRL + . will prompt to Add missing function declarations and generate the method fully typed and ready to go.

I would like the same function stubbed out and added to the bottom of the script section.

Alternatives

No response

Additional Information, eg. Screenshots

No response

[jasonlyu123]

There is a typescript code action/ quick fix for this that we support. But currently, it doesn't work with callback functions. See the typescript playground example:

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgBJxAEwDYQMLbAIDWyA3gFDLXID2IBRxAFBAFzICiAbhOAJQdutYJgDcFAL4UKCegGcwyOB3RZcjEsgC85KjXqbiHABYYc+QiSkyz6y02YgIAd2QBZWgFd5EHnzBmAHIEK2Ig-n4JCkxaBC8AWwCAOjhMTH9wABlgRT5oYNCmIIAaZDsLI34ZWPik8FT0zLAcvOcoQrDS5BRtAD5y8w0w1kigA

I think if we want to support this. It might be better if it could be added to typescript. Since we currently don't have any custom quick-fix for typescript/javascript. Even If we want to do it on our own. we can't provide it for the component event handler as it might involve importing a type from some other file. Which is hard to handle on our own.

There is a workaround that currently only works in the new transformation (fix for it in #1555). You can write something like this

<button on:click={e => handleClick(e)} />

Then the add-missing-function quick fix would be able to fix this one. You have to remove the function call after it adds the function declaration.

[Jojoshua]

I think if we want to support this. It might be better if it could be added to typescript.

Makes sense 👍

There is a workaround that currently only works in the new transformation (fix for it in #1555). You can write something like this

<button on:click={e => handleClick(e)} />

I didn't know about this, very cool!

[jasonlyu123]

Created upstream issue https://github.com/microsoft/TypeScript/issues/49928

[jasonlyu123]

Upstream PR is merged but it's not in TypeScript 4.8. So we would still have to wait 4.9 (nearly 3 month from now) for it.

[Jojoshua]

4.9 has landed

[jasonlyu123]

I just tried the code action in ts 4.9. It's funny enough that we now have a quick fix for component event handlers, use:action, transition and animation but not the initially asked element event handler. The reason is that we recently widen the type definition to allow null | undefined on the handler and the typescript quick-fix doesn't support that.

But since the parameter of the element event handler is usually global/standard and typescript already has the feature we could reference for. It's easier to do on our own. I already have a prototype for it. I think we can add this on our own for now. And we can remove that when TypeScript supports it.

Edit: side note just notices use:action, transition and animation are already available before ts 4.9. But it's referencing internal types we use to type check. We'll have to fix that as well.