Poor results with refmt and JSX

reasonreact
#1

Is it just me or does refmt have some real problems with handling JSX? Here’s an example of an auto-formatted JSX snippet:

  <SidebarPanelO className="z-20 left-full" isExpanded>
    {facets->Array.length > 0 ? <div className="p-4"> {facets->Array.map(({label}) => {
            <PillC className="w-auto mr-2 mb-3" closable=true> {label->React.string} </PillC>
          })->React.array} </div> : <div
          className="flex font-bold justify-center items-center text-center w-full h-16">
          {React.string("No filters selected.")}
        </div>}
  </SidebarPanelO>

I think it’s almost unreadable, certainly not idiomatic JSX styling coming from the JS world.

Is my experience with formatting normal? Does anyone have suggestions on how to improve these results?

#2

SieveR on Discord helped me out:

  1. Turns out that I was mistaken. I had assumed that the VS Code plugin that I was using (https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode) used refmt behind the scenes, but actually ReScript syntax uses bsc -format, which is a separate tool.
  2. There was a JSX formatting bug fixed in 8.4.2: https://github.com/rescript-lang/syntax/issues/182. Upgrading fixed my problem.

It would help if the ReScript docs mentioned how formatting uses bsc -format as there currently isn’t any explanation about formatting. I just saw refmt pop up in searches for “ReScript formatting” and “ReasonML formatting.”

#3

It would be better to raise this as an issue on the ReScript forum, or even better, as a GitHub issue on their website repo.