General JSX Improvements

Remaining

• Expand last argument of arrow function

const els = items.map(item => (
  <div className="whatever">
    <span>{children}</span>
  </div>
));

Right now turns to

const els = items.map(
  item => (
    <div className="whatever">
      <span>{children}</span>
    </div>
  )
);

• Wrong indent for arrow functions inside of {}

<Something>
  {() => (
      <SomethingElse>
        <span />
      </SomethingElse>
    )}
</Something>;

• single arrays and objects should stay on the same line and not put on the next indent

<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true"
      }
    ]
  }
/>;

should be

<View
  style={[
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true"
    }
  ]}
/>;

and

<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true"
    }
  }
/>;

should be

<View
  style={{
    someVeryLongStyle1: "true",
    someVeryLongStyle2: "true"
  }}
/>;

Fixed

• Put parenthesis for bracket-less arrow functions

const StatelessComponent = ({ children }) => (
  <div className="whatever">
    <span>{children}</span>
  </div>
);

• Put parenthesis for return

function StatelessComponent({ children }) {
  return (
    <div className="whatever">
      <span>{children}</span>
    </div>
  );
}

• Puts parenthesis for variable declaration

const comp4 = (
  <div style={styles} key="something">
    Create wrapping parens and indent <strong>all the things</strong>.
  </div>
);

• Preserve space between text nodes and jsx elements in a single line

<span>
    foo <span>bar</span>
</span>

• Properly escape quotes

<div id='"' />;

should turn into

<div id="&quot;" />;

• Use double quotes for jsx attributes even with --single-quote

<div id="a" />

• Should print names with . correctly

<route.page />;

• brackets should be on the same line as the attributes

const MyComponent = (props) => 
    <div>{
        some.very.very.very.very.very.very.very.very.very.very.long.props.text
    }</div>

should be

const MyComponent = props => (
  <div>
    {some.very.very.very.very.very.very.very.very.very.very.long.props.text}
  </div>
);

(Note: the original issue has been replaced with this list of remaining items, so comments below might not make sense)

[vjeux]

Need to make each attribute on its own line when they overflow

<div a="1" b="2" c="3" d="4" e="5" f="6" g="7" h="8"/>

should be

<div
  a="1"
  b="2"
  c="3"
  d="4"
  e="5"
  f="6"
  g="7"
  h="8"
/>

https://vjeux.github.io/prettier-browser/#{"content"%3A"<div a%3D\"1\" b%3D\"2\" c%3D\"3\" d%3D\"4\" e%3D\"5\" f%3D\"6\" g%3D\"7\" h%3D\"8\"%2F>"%2C"options"%3A{"printWidth"%3A33%2C"tabWidth"%3A2%2C"singleQuote"%3Afalse%2C"trailingComma"%3Afalse%2C"bracketSpacing"%3Atrue}}

[vjeux]

single quote settings should not affect jsx attributes. I’ve never seen anyone write <div className='a' />

<div id="a" />

should remain

<div id="a" />

even with singleQuote option enabled

https://vjeux.github.io/prettier-browser/#{"content"%3A"<div id%3D\"a\" %2F>"%2C"options"%3A{"printWidth"%3A34%2C"tabWidth"%3A2%2C"singleQuote"%3Atrue%2C"trailingComma"%3Afalse%2C"bracketSpacing"%3Atrue}}