feat: add a codefix to fix class to className in react & add spelling suggest for JSX attributes by Jack-Works · Pull Request #37907 · microsoft/TypeScript

Jack-Works · Apr 11, 2020

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 · May 5, 2020

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 · May 5, 2020

I manually do this all the time!

Jack-Works · May 6, 2020

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 · May 6, 2020

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 · May 6, 2020

OK it's working now

TODO

Add test for this change

Jack-Works · May 6, 2020

@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 · May 6, 2020

Done. I'll add some test for it later

Jack-Works · May 7, 2020

Test added. ready for review

andrewbranch

🌟

sandersn · May 21, 2020

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

sandersn · Jun 18, 2020

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.

This reverts commit 1513326.

DanielRosenwasser · Jun 22, 2020

+                                    const propName = symbolToString(prop);
+                                    const suggestionSymbol = getSuggestedSymbolForNonexistentJSXAttribute(propName, errorTarget);
+                                    const suggestion = suggestionSymbol ? symbolToString(suggestionSymbol) : undefined;
+                                    if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);


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.

how to handle a symbol without name?

if (suggestion !== undefined)

DanielRosenwasser · Jun 23, 2020

Thanks @Jack-Works!

sandersn assigned andrewbranch May 5, 2020

sandersn added the For Uncommitted Bug PR for untriaged, rejected, closed or missing bug label May 5, 2020

sandersn assigned orta and unassigned andrewbranch May 5, 2020

andrewbranch reviewed May 5, 2020

View reviewed changes

Comment thread src/services/codefixes/fixReactClassNameAndHTMLFor.ts Outdated

Comment thread src/services/codefixes/fixReactClassNameAndHTMLFor.ts Outdated

Jack-Works force-pushed the feat/class-to-classname branch from 1513326 to 769c52c Compare May 6, 2020 14:54

sheetalkamat reviewed May 6, 2020

View reviewed changes

Comment thread src/compiler/checker.ts Outdated

Jack-Works changed the title ~~feat: add a codefix to fix class to className in react~~ feat: add a codefix to fix class to className in react & add spelling suggest for JSX attributes May 7, 2020

sheetalkamat requested changes May 7, 2020

View reviewed changes

Comment thread src/compiler/core.ts Outdated

andrewbranch approved these changes May 7, 2020

View reviewed changes

sheetalkamat requested changes May 21, 2020

View reviewed changes

Comment thread src/compiler/core.ts

Comment thread src/compiler/core.ts Outdated

Jack-Works requested review from DanielRosenwasser, sheetalkamat and weswigham June 18, 2020 07:44

sandersn requested changes Jun 18, 2020

View reviewed changes

Comment thread src/compiler/checker.ts Outdated

Comment thread src/compiler/checker.ts Outdated

Comment thread src/compiler/core.ts Outdated

Jack-Works added 5 commits June 19, 2020 10:50

feat: add a codefix to fix class to className in react

9fe25ca

feat: add name suggestion for JSX

0975baf

feat: support spell checking in JSX attribute

8c8f845

Revert "feat: add a codefix to fix class to className in react"

c8abf6f

This reverts commit 1513326.

feat: re-impl react class name fix

5853d2a

Jack-Works added 6 commits June 19, 2020 10:50

chore: revert change in checker

d38096a

chore: make isJsxAttr required

c36fe23

test: add test for it

ffb35a3

fix: lint error

cdd14cc

chore: save space

d33256c

chore: resolve review

4fce495

Jack-Works force-pushed the feat/class-to-classname branch from 78c5f67 to 4fce495 Compare June 19, 2020 03:28

Jack-Works requested a review from sandersn June 19, 2020 03:29

Jack-Works added 2 commits June 19, 2020 11:35

chore: more change

41a1cd9

change

ddfab96

sandersn requested changes Jun 22, 2020

View reviewed changes

Comment thread src/compiler/checker.ts Outdated

inline local functions

ac87e82

DanielRosenwasser reviewed Jun 22, 2020

View reviewed changes

Comment thread src/compiler/checker.ts Outdated

DanielRosenwasser reviewed Jun 22, 2020

View reviewed changes

Comment thread src/compiler/checker.ts Outdated

DanielRosenwasser reviewed Jun 22, 2020

View reviewed changes

chore: resolve suggestions

8dc4f7e

Jack-Works requested review from DanielRosenwasser and sandersn June 23, 2020 00:10

DanielRosenwasser merged commit e6aedfd into microsoft:master Jun 23, 2020

Jack-Works deleted the feat/class-to-classname branch April 23, 2022 02:51

microsoft locked as resolved and limited conversation to collaborators Oct 21, 2025

Search code, repositories, users, issues, pull requests...

Conversation

Jack-Works commented Apr 11, 2020

Uh oh!

sandersn commented May 5, 2020

Uh oh!

orta commented May 5, 2020

Uh oh!

Uh oh!

Uh oh!

Jack-Works commented May 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jack-Works commented May 6, 2020

Uh oh!

Jack-Works commented May 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

Jack-Works commented May 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jack-Works commented May 6, 2020

Uh oh!

Uh oh!

Jack-Works commented May 7, 2020

Uh oh!

Uh oh!

andrewbranch left a comment

Choose a reason for hiding this comment

Uh oh!

sandersn commented May 21, 2020

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sandersn commented Jun 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DanielRosenwasser Jun 22, 2020

Choose a reason for hiding this comment

Uh oh!

Jack-Works Jun 23, 2020

Choose a reason for hiding this comment

Uh oh!

DanielRosenwasser Jun 23, 2020

Choose a reason for hiding this comment

Uh oh!

DanielRosenwasser commented Jun 23, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Jack-Works commented May 6, 2020 •

edited

Loading

Jack-Works commented May 6, 2020 •

edited

Loading

Jack-Works commented May 6, 2020 •

edited

Loading

sandersn commented Jun 18, 2020 •

edited

Loading