JSX ternary is strange

-            {__DEV__ ? this.renderDevApp() : (
-              <div>
-                {routes.map((route) =>
-                  <MatchAsync
-                    key={`${route.to}-async`}
-                    pattern={route.to}
-                    exactly={route.to === '/'}
-                    getComponent={routeES6Modules[route.value]}
-                  />,
-                )}
-              </div>
-            )}
+            {__DEV__ ? this.renderDevApp() : <div>
+                  {
+                    routes.map(route => (
+                      <MatchAsync
+                        key={`${route.to}-async`}
+                        pattern={route.to}
+                        exactly={route.to === '/'}
+                        getComponent={routeES6Modules[route.value]}
+                      />
+                    ))
+                  }
+                </div>}

Just ran prettier on the codebase at work after your 0.0.9 release and this is a really strange diff.

https://jlongster.github.io/prettier/#{“content”%3A"class App extends PureComponent {\n props%3A Props%3B\n\n render() {\n return (\n <div className%3D{styles.container}>\n <div className%3D{styles.content}>\n <Header %2F>\n {__DEV__ %3F this.renderDevApp() %3A (\n <div>\n {routes.map((route) %3D>\n <MatchAsync\n key%3D{`%24{route.to}-async`}\n pattern%3D{route.to}\n exactly%3D{route.to %3D%3D%3D ‘%2F’}\n getComponent%3D{routeES6Modules[route.value]}\n %2F>%2C\n )%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Atrue%2C%22trailingComma%22%3Atrue%2C%22bracketSpacing%22%3Afalse%7D%7D

[arnarthor]

I agree that consistency is key. Having all ternaries the same should definitely be the end goal.

In my original diff it’s strange though both due to the indent being to big and the closing braces after the closing div is in the wrong place as well.

If we’re thinking of consistency for this, my vote would be this

{__DEV__ 
  ? this.renderDevApp() 
  : <div>
      {
        routes.map(route => (
          <MatchAsync
            key={`${route.to}-async`}
            pattern={route.to}
            exactly={route.to === '/'}
            getComponent={routeES6Modules[route.value]}
          />
        ))
      }
    </div>
}

Since this is the format that I’ve noticed ternaries in non-jsx code have.

[vjeux]

@zachlysobey the goal of prettier is to format the existing AST but not modify it. This is out of scope to replace ternaries into if/then/else.

In practice, we are doing a few tiny exceptions like removing spurious ; which are EmptyExpression.