🐛 BUG: JSX typed method parameters result in an unwanted ending semicolon.

[mrtnvh]

Describe the Bug

Prettier/this plugin will add an unwanted semicolon at the end of methods with typed parameters.

(Just can't figure out how else to describe this)

Original:

<ul>
	{items.map((item: any) => <li>{item}</li>)}
</ul>

Formatted:

<ul>
	{items.map((item: any) => <li>{item}</li>);}
</ul>

This unwanted semicolon results in ts errors:

'}' expected.ts(1005)
Unexpected token. Did you mean `{'}'}` or `}`?ts(1381)

Error is not occurring in v0.4.0 nor when the explicitly set types of the method are omitted.

Steps to Reproduce

1. https://stackblitz.com/edit/astro-lslult?file=src/pages/index.astro
2. In console, run npm run format
3. See the semicolon appear.

[Princesseuh]

The underlying issue that cause this is that the parser we use inside expressions since 0.5.0 is super good for everything but it does not support TypeScript correctly, unfortunately. Hoping to find a solution soon

[jasikpark]

I imagine this is related to the JS block v.s. JS expression block confusion we were talking about the other day, right? https://discord.com/channels/830184174198718474/878341752799494154/1006912308867498175

[Princesseuh]

I imagine this is related to the JS block v.s. JS expression block confusion we were talking about the other day, right? https://discord.com/channels/830184174198718474/878341752799494154/1006912308867498175

Nope! This issue is specifically that the __js_expression parser does not support TypeScript and so it falls back to babel-ts, albeit in non-expression mode due to wanting to support comments. What we need to do is either find a way to use only a single parser and support everything Astro does, or at least run babel-ts in expression mode in cases where it should

Whereas the issue we discussed the other day on Discord is simply the end formatting being different depending on certain contexts (but the actual parsing is the same!)