output of small jsx portions is quite uneditable (transferred from vim-rescript)

[alarbada]

As a standard react javascript developer, I did expect the output of RescriptFormat to moreless be the same of prettier. In my subjective opinion whenever I format this:

@react.component
let make = () => {
  <div>
    <div>
      <p> {React.string("hello world")} </p>
    </div>
    <input />
  </div>
}

I don't expect to be formated like this:

@react.component
let make = () => {
  <div> <div> <p> {React.string("hello world")} </p> </div> <input /> </div>
}

I've seen that once the component includes more and more html the output can be more readable:

@react.component
let make = () => {
  <div>
    <div> <p> {React.string("hello world")} </p> </div>
    <div> <p> {React.string("hello world")} </p> </div>
    <input />
  </div>
}

However, whenever I add another p tag it just adds it in the same line:

@react.component
let make = () => {
  <div>
    <div> <p> {React.string("hello world")} </p> </div>
    <div> <p> {React.string("hello world")} </p> <p> {React.string("hello world")} </p> </div>
    <input />
  </div>
}

Maybe it's just me, but adding more jsx inside the second div is not really comfortable.

As I understand, the rescript rebranding and the new syntax were made partly to appeal to more javascript programmers. Knowing that prettier is somewhat of a standard, I believe that more js programmers will agree with me that the previous component would be easily editable with less tag inlining, like this form example:

@react.component
let make = () => {
  <div>
    <div>
      <p> {React.string("hello world")} </p>
    </div>
    <div>
      <p> {React.string("hello world")} </p>
      <p> {React.string("hello world")} </p>
    </div>
    <input />
  </div>
}

I guess that it comes from refmt or bsrefmt, I have no clue. Is it possible to customize it in bsconfig.json?

Btw, thanks for creating this plugin!

[amiralies]

Hi, Rescript formatter is not customizable as of yet. (the only formatter option is line width which is not exposed by formatter binary atm).

Which version of bs-platform are you using? your last snippet gets formatted like this in bs-platform 8.4:

@react.component
let make = () => {
  <div>
    <div> <p> {React.string("hello world")} </p> </div>
    <div>
      <p> {React.string("hello world")} </p>
      <p> {React.string("hello world")} </p>
    </div>
    <input />
  </div>
}

Playground link

[alarbada]

Yup, sorry for not including that.

The dev dependency bs-platform in the package json is ^8.4.2, and my global packages installed:

$ bsc -version
BuckleScript 8.4.2 ( Using OCaml:4.06.1+BS )

$ bsb -version
8.4.2

[ryyppy]

I will transfer this issue to the syntax repository, since vim-rescript only uses the bsc -format functionality.

Regarding configuration: There are no plans on adding any kind of settings for the formatting to enforce a single code style for the whole community.

Your concerns about the formatting are reasonable though

[chenglou]

So naively, this is the result of having a wider line width, which like @ryyppy said, we likely won't be exposing (though we're down to reconsider the width number itself).

However, it's not rare to break line always when it comes to certain pieces of code, and JSX might be such. What's a conformable heuristics? Always line break on tag? Only break in certain cases?

[alarbada]

@chenglou IMO, seeing the huge popularity of a tool like Prettier, I'd just copy their JSX formatting style. Not because I think it is the best of the world, but rather because it's what every front end programmer is used to. In my eyes, after countless hours looking at prettied react code, the output I showed looked quite ugly.

[stale[bot]]

The rescript-lang/syntax repo is obsolete and will be archived soon. If this issue is still relevant, please reopen in the compiler repo (https://github.com/rescript-lang/rescript-compiler) or comment here to ask for it to be moved. Thank you for your contributions.