Rescript-compiler: Refmt out of date? Removal of semicolon in ppx extension point nested in JSX

Created on 22 Feb 2019 · 6Comments · Source: rescript-lang/rescript-compiler

Since upgrading from 4.0.6 to the latest bs-platform (currently 4.0.18 installed), I'm seeing the following piece of code (which uses let-anything ppx), being formatted incorrectly with bsrefmt:

module Prop = {
  let let_ = (children, render) => children(render);
};

module Dummy = {
  type context = {locale: string};
  let use = children => <> {children({locale: "en-US"})} </>;
};

let component = ReasonReact.statelessComponent(__MODULE__);

let make = _children => {
  ...component,
  render: _ =>
    <div>
      {
        let%Prop {locale} = Dummy.use;

        <div> <p> {"Bob" |> ReasonReact.string} </p> </div>;
      }
    </div>,
};

Formattes into the following with syntax error due to missing semicolon after Dummy.use on line 16. Error: 1254: <syntax error> [18, 8]:

module Prop = {
  let let_ = (children, render) => children(render);
};

module Dummy = {
  type context = {locale: string};
  let use = children => <> {children({locale: "en-US"})} </>;
};

let component = ReasonReact.statelessComponent(__MODULE__);

let make = _children => {
  ...component,
  render: _ =>
    <div>
      {let%Prop {locale} = Dummy.use

       <div> <p> {"Bob" |> ReasonReact.string} </p> </div>}
    </div>,
};

I've checked out and built refmt from reason master (bspacks) and here it appears to format correctly.

Worth noting is that if render didn't have an outer react component, in this case <div> it would format correctly. So the issue is specifically within an expression of jsx.

HIGH

Source

cem2ran

Most helpful comment

done in master

bobzhang on 16 Mar 2019

❤2

All 6 comments

cc @chenglou

bobzhang on 23 Feb 2019

Worth noting is that if render didn't have an outer react component, in this case <div> it would format correctly. So the issue is specifically within an expression of jsx.

There is also a case that can't be avoided by rearranging your code (at least I don't know how). It's when you using function-as-child:

let make = _children => {
  ...component,
  render: _self => {
    <Dummy>
      {state =>
         {
           let var = someFn(state);
           <div> var->ReasonReact.string </div>
         }
      }
    </Dummy>;
  },
};

Semicolon will be removed which will result in syntax error