feat: add a codefix to fix class to className in react & add spelling suggest for JSX attributes

[Jack-Works]

Add a code fix to fix class in JSX (to className) or for in JSX (to htmlFor). This is useful for copy-paste HTML code into a JSX file.

Before:

After (fix all):

[sandersn]

I don't know how JSX name resolution works here, but I'm surprised that it's a type assignability error instead of a name resolution error. If it were the latter, you could probably just special-case the spelling correction algorithm and use the existing did-you-mean codefix.

Switching which error is issued actually might be the right fix for this.

[orta]

I manually do this all the time!

[Jack-Works]

If it were the latter, you could probably just special-case the spelling correction algorithm and use the existing did-you-mean codefix.

Yes, in my last try I tried to use it but it seems like JSX never emit diag 2551 (... not exist on type ..., do you mean ...?)

// The following 2 property both misspelled with doubled last letter
const x = <a onCompositionUpdateCapturee={() => {}} />;
// Property '...' does not exist on type '...'.ts(2322)
window.AbortControllerr
// Property '...' does not exist on type '...'. Did you mean '...'?ts(2551)

I'll try to investigate this again

[Jack-Works]

Oh I found a comment:

https://github.com/microsoft/TypeScript/blob/c219fdae08607e07ec875d2137fcba7c2d93792c/src/compiler/checker.ts#L15984
TODO: Spelling suggestions for excess jsx attributes (needs new diagnostic messages)

🤔 let me try it

[Jack-Works]

OK it's working now

TODO

• Add test for this change

[Jack-Works]

@andrewbranch
I have re-implemented this with spelling checking logic. It's working well on the InstinctElements but the code fix not working well on class components because the suggestion is wrapped in a "No overload matches this call." diag therefore the fixSpelling doesn't recognize that. Resolved by changing fixSpelling.

[Jack-Works]

Done. I'll add some test for it later

[Jack-Works]

Test added. ready for review

[andrewbranch]

🌟

[sandersn]

@sheetalkamat are you OK with this change now? @andrewbranch likes it at least =)

[sandersn]

It's not a spelling mistake, it is another type of mistake.

I think it's cross-language interference. This is like an editor that lets you paste in Norwegian and offers to translate it to Swedish.

[DanielRosenwasser]

There's technically the possibility of an empty symbol name here, but not clear when that comes up.

Also, as a nit, whenever we have an if/else pair we generally wrap those in curlies.

[Jack-Works]

how to handle a symbol without name?

[DanielRosenwasser]

if (suggestion !== undefined)

[DanielRosenwasser]

Thanks @Jack-Works!