Generic on TSX (React Component) gets incorrectly converted

[renato-bohler]

Description

This plugin incorrectly fixes the generics syntax for React components with a single type parameter (<T>).

For example: if you open a TypeScript + React project and create a MyComponent.tsx file with the following content:

type MyComponentProps<T> = {
  data: T;
};

function MyComponent<T>({ data }: MyComponentProps<T>) {
  return (<div>{/* JSX content */}</div>)
};

When auto-fixing, you'll end up with:

type MyComponentProps<T> = {
  data: T;
};

const MyComponent = <T>({ data }: MyComponentProps<T>) => <div>{/* JSX content */}</div>;

This is not valid syntax, given that <T> in TSX is interpreted as an opening tag. To fix this, users must manually add a trailing comma to the type argument T, transforming it into <T,>.

https://github.com/JamieMason/eslint-plugin-prefer-arrow-functions/assets/25781956/63c8f0c3-b584-4c81-af74-d9875fb02443

Suggested Solution

Automatically add the trailing comma if the error is being fixed on a .tsx file.

Help Needed

I can try to work on this if we get https://github.com/JamieMason/eslint-plugin-prefer-arrow-functions/pull/25 and https://github.com/JamieMason/eslint-plugin-prefer-arrow-functions/pull/26 going, don't want to stack too many requests 😅

[JamieMason]

These are all great, thanks. Most of my spare time is spent working on syncpack but I will get to these when I can. Keep them coming, thanks

[renato-bohler]

Ah, sweet! Coincidentally, we're studying using syncpack as well. Didn't know both had the same maintainer 😅