Format JSX
  $ refmt ./input.re
  let x =
    <Window
      style={
        "width": state.width,
        "height": 400,
        "paddingTop": 100,
        "paddingBottom": 100,
        "paddingLeft": 100,
        "paddingRight": 100,
        "justifyContent": CssJustifySpaceBetween,
        "flexDirection": CssFlexDirectionRow,
      }
      onKey={updater(handleInput)}
    />;
  
  let y =
    <Routes
      path={Routes.stateToPath(state)}
      isHistorical=true
      onHashChange={(_oldPath, _oldUrl, newUrl) =>
        updater(
          (latestComponentBag, _) => {
            let currentActualPath =
              Routes.hashOfUri(newUrl);
            let pathFromState =
              Routes.stateToPath(
                latestComponentBag.state,
              );
            currentActualPath == pathFromState
              ? None
              : dispatchEventless(
                  State.UriNavigated(
                    currentActualPath,
                  ),
                  latestComponentBag,
                  (),
                );
          },
          (),
        )
      }
    />;
  
  let z =
    <div
      style={ReactDOMRe.Style.make(
        ~width,
        ~height,
        ~color,
        ~backgroundColor,
        ~margin,
        ~padding,
        ~border,
        ~borderColor,
        ~someOtherAttribute,
        (),
      )}
      key={string_of_int(1)}
    />;
  
  let omega =
    <div
      aList=[
        width,
        height,
        color,
        backgroundColor,
        margin,
        padding,
        border,
        borderColor,
        someOtherAttribute,
      ]
      key={string_of_int(1)}
    />;
  
  let someArray =
    <div
      anArray=[|
        width,
        height,
        color,
        backgroundColor,
        margin,
        padding,
        border,
        borderColor,
        someOtherAttribute,
      |]
      key={string_of_int(1)}
    />;
  
  let tuples =
    <div
      aTuple=(
        width,
        height,
        color,
        backgroundColor,
        margin,
        padding,
        border,
        borderColor,
        someOtherAttribute,
        definitelyBreakere,
      )
      key={string_of_int(1)}
    />;
  
  let icon =
    <Icon
      name={
        switch (state.volume) {
        | v when v < 0.1 => "sound-off"
        | v when v < 0.11 => "sound-min"
        | v when v < 0.51 => "sound-med"
        | _ => "sound-max"
        }
      }
    />;
  
  <MessengerSharedPhotosAlbumViewPhotoReact
    ref=?{
      foo##bar === baz
        ? Some(
            foooooooooooooooooooooooo(
              setRefChild,
            ),
          )
        : None
    }
    key=node##legacy_attachment_id
  />;
  
  /* punning */
  <Foo bar />;
  
  /* punning for explicitly passed optional */
  <Foo ?bar />;
  
  /* Don't pun for explicitly props with attributes */
  <Foo bar=?{[@browser_only] bar} />;
  
  /* don't pun explicitly passed optional with module identifier */
  <Foo bar=?Baz.bar />;
  
  let x = <div />;
  
  <div asd=1 />;
  
  foo #= <bar />;
  
  foo #= <bar />;
  
  let x = [|<div />|];
  
  let x = [|
    <Button onClick=handleStaleClick />,
    <Button onClick=handleStaleClick />,
  |];
  
  let z = <div />;
  
  let z = (
    <Button onClick=handleStaleClick />,
    <Button onClick=handleStaleClick />,
  );
  
  let y = [<div />, <div />];
  
  let y = [
    <Button onClick=handleStaleClick />,
    <Button onClick=handleStaleClick />,
  ];
  
  <Description term={<Text text="Age" />}>
    child
  </Description>;
  <Description
    term={Text.createElement(
      ~text="Age",
      ~children=[],
      (),
    )}>
    child
  </Description>;
  <Description
    term={
      [@JSX] Text.createElement(~text="Age", ())
    }>
    child
  </Description>;
  
  <Description
    term={
      <Text
        superLongPunnedProp
        anotherSuperLongOneCrazyLongThingHere
        text="Age"
      />
    }>
    child
  </Description>;
  <Description
    term={
      <Text
        noPunnedProp={[@attribute] noPunnedProp}
        superLongPunnedProp
        anotherSuperLongOneCrazyLongThingHere
        text="Age"
      />
    }>
    child
  </Description>;
  <Description
    term={
      <Text noPunned={[@attribute] noPunnedProp} />
    }>
    child
  </Description>;
  
  <Foo
    bar={
      <Baz
        superLongPunnedProp
        anotherSuperLongOneCrazyLongThingHere
      />
    }
  />;
  
  <div> <span> {str("hello")} </span> </div>;
  
  <description term={<text text="Age" />}>
    child
  </description>;
  
  <description
    term={text(~text="Age", ~children=[], ())}>
    child
  </description>;
  <description
    term={[@JSX] text(~text="Age", ~children=[])}>
    child
  </description>;
  <description
    term={[@JSX] text(~text="Age", ())}>
    child
  </description>;
  
  <description
    term={
      <div
        superLongPunnedProp
        anotherSuperLongOneCrazyLongThingHere
        text="Age"
      />
    }>
    child
  </description>;
  
  Module.[
    <Component> <div test="asd" /> </Component>,
  ];
  Module.[<Component> <div /> </Component>];
  Module.[<Foo> <Bar /> </Foo>];
  Module.[<Component />];
  
  let (/></) = (a, b) => a + b;
  
  let x = foo /></ bar;
  
  /* https://github.com/facebook/reason/issues/870 */
  <div onClick=this##handleClick>
    <> foo </>
  </div>;
  
  <div onClick=this##handleClick>
    <> {foo(bar)} </>
  </div>;
  
  /* function application */
  <div onClick=this##handleClick>
    <> {foo(bar)} </>
  </div>;
  
  /* tuple, not function application */
  <div onClick=this##handleClick>
    <> foo bar </>
  </div>;
  
  /* https://github.com/facebook/reason/issues/2020 */
  <div />;
  
  <div> foo </div>;
  
  <div />;
  
  <Component
    accept={
      fun
      | Foo => true
      | Bar => false
    }
  />;
  
  <C
    prop=M.{
      a: "xxxxxxxxxxxxxxxxxxxxxx",
      b: "xxxxxxxxxxxxxxxxxxxxxx",
      c: "xxxxxxxxxxxxxxxxxxxxxx",
    }
  />;
  
  <C
    prop=M.[
      "xxxxxxxxxxxxxxxxxxxxxx",
      "xxxxxxxxxxxxxxxxxxxxxx",
      "xxxxxxxxxxxxxxxxxxxxxx",
    ]
  />;
  
  <C
    prop=M.(
      [|
        "xxxxxxxxxxxxxxxxxxxxxx",
        "xxxxxxxxxxxxxxxxxxxxxx",
        "xxxxxxxxxxxxxxxxxxxxxx",
      |]
    )
  />;
  
  <C
    prop=M.(
      "xxxxxxxxxxxxxxxxxxxxxx",
      "xxxxxxxxxxxxxxxxxxxxxx",
      "xxxxxxxxxxxxxxxxxxxxxx",
    )
  />;
  
  <C
    prop=M.(
      Foo(
        "xxxxxxxxxxxxxxxxxxxxxx",
        "xxxxxxxxxxxxxxxxxxxxxx",
        "xxxxxxxxxxxxxxxxxxxxxx",
      )
    )
  />;
  
  /* https://github.com/facebook/reason/issues/2028 */
  <Foo bar=M.[] />;
  
  <Foo bar=M.[]> M.[] </Foo>;
  
  <Foo bar=M.[]> ...M.[] </Foo>;
  
  switch (foo) {
  | `Variant => <Component />
  };
  
  <div> ...c </div>;
  
  <div onClick={event => handleChange(event)} />;
  <div
    onClick={eventWithLongIdent =>
      handleChange(eventWithLongIdent)
    }
  />;
  <div
    onClick={event => {
      Js.log(event);
      handleChange(event);
    }}
  />;
  
  <UncurriedDiv
    onClick={(. event) => {
      Js.logU(. event);
      handleChange(. event);
    }}
  />;
  
  <UncurriedDiv
    onClick={(. eventUncurried) =>
      handleChange(. eventUncurried)
    }
  />;
  
  <StaticDiv
    onClick={(
      foo,
      bar,
      baz,
      lineBreak,
      identifier,
    ) => {
      doStuff(foo, bar, baz);
      bar(lineBreak, identifier);
    }}
  />;
  
  <StaticDiv
    onClick={(
      foo,
      bar,
      baz,
      lineBreak,
      identifier,
    ) => {
      bar(lineBreak, identifier)
    }}
  />;
  
  <AttrDiv
    onClick={[@bar] event => handleChange(event)}
  />;
  <AttrDiv
    onClick={[@bar] eventLongIdentifier =>
      handleChange(eventLongIdentifier)
    }
  />;
  
  <StaticDivNamed
    onClick={(
      ~foo,
      ~bar,
      ~baz,
      ~lineBreak,
      ~identifier,
      (),
    ) =>
      bar(lineBreak, identifier)
    }
  />;
  
  <div
    onClick={(e): event => {
      doStuff();
      bar(foo);
    }}
  />;
  
  <div
    onClick={(e, e2): event => {
      doStuff();
      bar(foo);
    }}
  />;
  
  <div
    onClick={(
      foo,
      bar,
      baz,
      superLongIdent,
      breakLine,
    ): event => {
      doStuff();
      bar(foo);
    }}
  />;
  
  <div
    onClick={(
      foo,
      bar,
      baz,
      superLongIdent,
      breakLine,
    ): (
      event,
      event2,
      event3,
      event4,
      event5,
    ) => {
      doStuff();
      bar(foo);
    }}
  />;
  
  <div
    onClick={(
      foo,
      bar,
      baz,
      superLongIdent,
      breakLine,
    ): event =>
      doStuff()
    }
  />;
  
  <div
    onClick={(
      foo,
      bar,
      baz,
      superLongIdent,
      breakLine,
    ): (
      event,
      event2,
      event3,
      event4,
      event5,
    ) =>
      doStuff()
    }
  />;
  
  <div>
    {switch (color) {
     | Black => ReasonReact.string("black")
     | Red => ReasonReact.string("red")
     }}
  </div>;
  
  ReasonReact.(<> {string("Test")} </>);
  
  <div
    style={
      [@foo]
      ReactDOMRe.Style.make(
        ~width="20px",
        ~height="20px",
        ~borderRadius="100%",
        ~backgroundColor="red",
      )
    }
  />;
  
  <Animated initialValue=0.0 value>
    ...{ReactDOMRe.Style.make(
      ~width="20px",
      ~height="20px",
      ~borderRadius="100%",
      ~backgroundColor="red",
    )}
  </Animated>;
  
  <Animated initialValue=0.0 value>
    ...{value =>
      <div
        style={ReactDOMRe.Style.make(
          ~width="20px",
          ~height="20px",
          ~borderRadius="100%",
          ~backgroundColor="red",
        )}
      />
    }
  </Animated>;
  
  <Animated initialValue=0.0 value>
    ...{(value): ReasonReact.element =>
      <div
        style={ReactDOMRe.Style.make(
          ~width="20px",
          ~height="20px",
          ~borderRadius="100%",
          ~backgroundColor="red",
        )}
      />
    }
  </Animated>;
  
  <Animated initialValue=0.0 value>
    ...{[@foo] value => {
      <div
        style={ReactDOMRe.Style.make(
          ~width="20px",
          ~height="20px",
          ~borderRadius="100%",
          ~backgroundColor="red",
        )}
      />
    }}
  </Animated>;
  
  <Animated initialValue=0.0 value>
    ...{value => {
      let width = "20px";
      let height = "20px";
  
      <div
        style={ReactDOMRe.Style.make(
          ~width,
          ~height,
          ~borderRadius="100%",
          ~backgroundColor="red",
        )}
      />;
    }}
  </Animated>;
  
  <div callback={reduce(() => !state)} />;
  
  <button
    ?id
    className={Cn.make([
      "button",
      "is-fullwidth",
    ])}
    onClick>
    {"Submit" |> ste}
  </button>;
  
  <button
    ?id
    className={Cn.make([|
      "button",
      "is-fullwidth",
    |])}
    onClick>
    {"Submit" |> ste}
  </button>;
  
  <button
    ?id
    className={Cn.make((
      "button",
      "is-fullwidth",
    ))}
    onClick>
    {"Submit" |> ste}
  </button>;
  
  <button ?id className={Cn.make({a: b})} onClick>
    {"Submit" |> ste}
  </button>;
  
  <button
    ?id className={Cn.make({"a": b})} onClick>
    {"Submit" |> ste}
  </button>;
  
  // shouldn't result in a stack overflow
  <X y={z->Belt.Option.getWithDefault("")} />;
  
  <div style={getStyle()}>
    {ReasonReact.string("BugTest")}
  </div>;
  
  <div>
    {let left = limit->Int.toString;
     {j|$left characters left|j}->React.string}
  </div>;
  
  <View style=styles##backgroundImageWrapper>
    {let uri = "/images/header-background.png";
     <Image
       resizeMode=`contain
       style=styles##backgroundImage
       uri
     />}
  </View>;
  
  <div>
    {true
       ? {
         let foo = "foo"; // don't remove semi
         <span> {ReasonReact.string(foo)} </span>;
       }
       : <span>
           {ReasonReact.string("bar")}
         </span>}
  </div>;
  
  let v =
    <A>
      <B>
        ...{_ => {
          let renderX = x =>
            {let y = x ++ x;
             <div key=y />};
          renderX("foo");
        }}
      </B>
    </A>;
  
  <Component
    prop={
      x->Option.map(x => {
        let y = x;
        y ++ y;
      })
    }
  />;
  
  <Component
    prop={
      name:
        x->Option.map(x => {
          let y = x;
          y ++ y;
        }),
    }
  />;
  
  <Component
    prop={
      name:
        x
        ++ Option.map(x => {
             let y = x;
             y ++ y;
           }),
    }
  />;
  
  <Component
    prop={
      name:
        x##Option.map(x => {
          let y = x;
          y ++ y;
        }),
    }
  />;
  
  <Component
    prop={
      name:
        x
        |> Option.map(x => {
             let y = x;
             y ++ y;
           }),
    }
  />;
  
  <A someProp={<> {React.string("Hello")} </>} />;
  
  <A someProp=?{<> {React.string("Hi")} </>} />;
  
  <ActionButton
    one={!validated} two={msg##errorText}>
    <InactionText
      three={msg##prop}
      four={msg##errorText}
    />
  </ActionButton>;
  
  <Foo.bar />;
  
  <Foo.Bar.baz arg="hello" />;
