JSX preserve mode: better output formatting (indentation)

[cknitt]

Output currently looks something like this (some part of a real-world example):

function MyComponent(props) {

  // ...

  return <ReactNative.View key={kind}  style={[
    styles.singleReaction,
    styles.row
  ]}>
  <ReactNative.Text key={index.toString()}  style={[
    styles.darkGreyText,
    styles.reactionsCount
  ]}>
  {Primitive_option.some(param[1])}
  </ReactNative.Text>
  <ReactNative.Text key={kind}  style={[
    styles.darkGreyText,
    styles.reactionsKind
  ]}>
  {Primitive_option.some(kind)}
  </ReactNative.Text>
  </ReactNative.View>;
}

For comparison, this is was prettier does (in addition to breaking the line if it gets too long):

function MyComponent(props) {

  // ...

  return (
    <ReactNative.View key={kind} style={[styles.singleReaction, styles.row]}>
      <ReactNative.Text key={index.toString()} style={[styles.darkGreyText, styles.reactionsCount]}>
        {Primitive_option.some(param[1])}
      </ReactNative.Text>
      <ReactNative.Text key={kind} style={[styles.darkGreyText, styles.reactionsKind]}>
        {Primitive_option.some(kind)}
      </ReactNative.Text>
    </ReactNative.View>
  );
}

We should at least do some indentation to the right level and not have two spaces between props I think.

Regarding line breaking, I think we should either not do it, or maybe just break before every prop for simplicity?