Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Code action to wrap in React.string #1037

Open
nojaf opened this issue Sep 20, 2024 · 1 comment
Open

Suggestion: Code action to wrap in React.string #1037

nojaf opened this issue Sep 20, 2024 · 1 comment

Comments

@nojaf
Copy link
Contributor

nojaf commented Sep 20, 2024

So, I just pasted some JSX:

      <thead>
        <tr>
          <th>Nummer</th>
          <th>Voornaam</th>
          <th>Familienaam</th>
          <th>Geboortejaar</th>
        </tr>
      </thead>

And of course, Nummer is just text and not a thing so I get

#Start(1726858554888)

  We've found a bug for you!
  /home/nojaf/projects/tenmileselverdinge-tickets/app/src/components/LiveResults.res:40:15-20

  38 ┆ <th>{React.string(`Positie`)}</th>
  39 ┆ <th>{React.string(`Tijd`)}</th>
  40 ┆ <th>Nummer</th>
  41 ┆ <th>Voornaam</th>
  42 ┆ <th>Familienaam</th>

  The variant constructor Nummer can't be found.
  
  - If it's defined in another module or file, bring it into scope by:
    - Prefixing it with said module name: TheModule.Nummer
    - Or specifying its type: let theValue: TheModule.theType = Nummer
  - Constructors and modules are both capitalized. Did you want the latter?
    Then instead of let foo = Bar, try module Foo = Bar.

#Done(1726858554916)

Would be great if I had a code fix to change Nummer to {React.string(``Nummer``)}.

@zth does this seem reasonable?
Could I detect I'm inside jsx (<th>) and just wrap everything until </th>?

Curious to hear your thoughts!

@zth
Copy link
Collaborator

zth commented Sep 21, 2024

Interesting! This is a bit hairy because you'd need to detect anything that's invalid and goes into JSX. This example detects variants because of the uppercased initial letter, but anything goes here really. I guess the easiest way to go about it is to see if we already track the context that it's a JSX element for the parent of this expression that fails, and if so, special case the errors and produce code actions.

It'd be good to explore as many scenarios for things to paste in there as you can think of, and see what errors are produced today. That should reveal some sort of theme for us to work with.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants