Add Support for Flow's new component syntax

🔍 Search Terms

"syntax", "flow", "component", "tsx"

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

First of all, I'd like to apologize; this request doesn't satisfy the last three viability checks. But I couldn't submit this if I didn't mark them. That said, if someone from the typescript team could at least read this proposal, I would be extremely grateful.

Recently, flow has added a new syntax to write components and hooks. For react devs, that's huge, and as someone who uses (and loves) typescript, I'd love to have something like this on TSX files too.

I understand that there are a few limitations on what can be done in typescript; for example, I don't expect typescript to check the rules of hooks and other react-specific things. I know that things like Solid and Stencil also use JSX.

To be completely blunt: I WANT SUGAR. Most influencers covering this new feature mentioned that it's extremely unlikely that Typescript will implement it. But I decided to try anyway, even if just to understand the reason.

In a more practical sense, here's what I would expect to see in a realist scenario:

• The changes would only affect TSX files.
• component blocks would be transpiled into function components.
• hook blocks would be transpiled into functions.
• Render types are nice. If I'm correct there's some arcane way of doing the same in typescript, but getting something more explicit wouldn't hurt.

📃 Motivating Example

Here's the post that explains what I'm talking about: https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0

💻 Use Cases

1. What do you want to use this for? Pure and refined Syntax Sugar.
2. What shortcomings exist with current approaches? For components, there are 5-6 ways to deal with props currently, but the new component syntax has the potential to unify how things are done, reducing friction for new developers in large code bases. I recommend checking this video: https://youtu.be/HOFIefkepMA?si=i45CFr72m2GCaH5l
3. What workarounds are you using in the meantime? It's not impossible to write another tool that will take this syntax and output typescript, but that would be yet another tool in an already bloated web dev ecosystem.

Start by reading the linked Flow component-syntax proposal and comparing its component and hook blocks with the requested TSX-only behavior. Define the syntax, render types, and function transpilation requirements before identifying the relevant TypeScript compiler entry points and tests; done means the proposal has an agreed, testable scope.