Suggestion: Code action to wrap in React.string

[nojaf]

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]

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.