better jsx output #369

lib/6to5/generation/generators/expressions.js

@@ -55,10 +55,30 @@ exports.ThisExpression = function () {
   this.push("this");
 };
 
-exports.CallExpression = function (node, print) {
+exports.CallExpression = function (node, print, parent) {
   print(node.callee);
+
   this.push("(");
-  print.join(node.arguments, { separator: ", " });
+
+  var separator = ",";
+
+  if (node._prettyPrint) {
+    separator += "\n";
+    this.newline();
+    this.indent();
+  } else {
+    separator += " ";
+  }
+
+  print.join(node.arguments, {
+    separator: separator
+  });
+
+  if (node._prettyPrint) {
+    this.newline();
+    this.dedent();
+  }
+
   this.push(")");
 };
 

lib/6to5/transformation/transformers/react.js

@@ -32,7 +32,7 @@ exports.XJSExpressionContainer = function (node) {
 exports.XJSAttribute = {
   exit: function (node) {
     var value = node.value || t.literal(true);
-    return t.property("init", node.name, value);
+    return t.inherits(t.property("init", node.name, value), node);
   }
 };
 
@@ -103,30 +103,29 @@ exports.XJSOpeningElement = {
 
     args.push(props);
 
+    var setPrettyPrint = function (call, args) {
+      if (args.length >= 3) {
+        call._prettyPrint = true;
+      }
+      return call;
+    };
+
     if (reactCompat) {
       if (tagName && isTag(tagName)) {
-        return t.callExpression(
+        return setPrettyPrint(t.callExpression(
           t.memberExpression(
-            t.memberExpression(
+            t.memberExpression(t.identifier("React"), t.identifier("DOM")),
-              t.identifier('React'),
-              t.identifier('DOM'),
-              false
-            ),
             tagExpr,
             t.isLiteral(tagExpr)
           ),
           args
-        );
+        ), args);
-      } else {
-        return t.callExpression(
-          tagExpr,
-          args
-        );
       }
     } else {
       tagExpr = t.memberExpression(t.identifier("React"), t.identifier("createElement"));
-      return t.callExpression(tagExpr, args);
     }
+
+    return setPrettyPrint(t.callExpression(tagExpr, args), args);
   }
 };
 
@@ -148,16 +147,16 @@ exports.XJSElement = {
           var isLastLine = +i === lines.length - 1;
 
           // replace rendered whitespace tabs with spaces
-          var trimmedLine = line.replace(/\t/g, ' ');
+          var trimmedLine = line.replace(/\t/g, " ");
 
           // trim whitespace touching a newline
           if (!isFirstLine) {
-            trimmedLine = trimmedLine.replace(/^[ ]+/, '');
+            trimmedLine = trimmedLine.replace(/^[ ]+/, "");
           }
 
           // trim whitespace touching an endline
           if (!isLastLine) {
-            trimmedLine = trimmedLine.replace(/[ ]+$/, '');
+            trimmedLine = trimmedLine.replace(/[ ]+$/, "");
           }
 
           if (trimmedLine) {

test/fixtures/transformation/react/adds-appropriate-newlines-when-using-spread-attribute/expected.js

@@ -1,3 +1,2 @@
 React.createElement(Component, React.__spread({}, this.props, {
-  sound: "moo"
+  sound: "moo" }));
-}));

test/fixtures/transformation/react/compat-convert-component/expected.js

@@ -1,3 +1 @@
-var x = Component({
+var x = Component({ foo: "bar" }, Namespace.Component(null));
-  foo: "bar"
-}, Namespace.Component(null));

test/fixtures/transformation/react/compat-convert-tags/expected.js

@@ -1,3 +1 @@
-var x = React.DOM.div({
+var x = React.DOM.div({ foo: "bar" }, React.DOM["font-face"](null));
-  foo: "bar"
-}, React.DOM["font-face"](null));

test/fixtures/transformation/react/should-allow-constructor-as-prop/expected.js

@@ -1,3 +1 @@
-React.createElement(Component, {
+React.createElement(Component, { constructor: "foo" });
-  constructor: "foo"
-});

test/fixtures/transformation/react/should-insert-commas-after-expressions-before-whitespace/expected.js

@@ -2,5 +2,4 @@ var x = React.createElement("div", {
   attr1: "foo" + "bar",
   attr2: "foo" + "bar" + "baz" + "bug",
   attr3: "foo" + "bar" + "baz" + "bug",
-  attr4: "baz"
+  attr4: "baz" });
-});

test/fixtures/transformation/react/wraps-props-in-react-spread-for-first-spread-attributes/expected.js

@@ -1,4 +1 @@
-React.createElement(Component, React.__spread({}, x, {
+React.createElement(Component, React.__spread({}, x, { y: 2, z: true }));
-  y: 2,
-  z: true
-}));

test/fixtures/transformation/react/wraps-props-in-react-spread-for-last-spread-attributes/expected.js

@@ -1,4 +1 @@
-React.createElement(Component, React.__spread({
+React.createElement(Component, React.__spread({ y: 2, z: true }, x));
-  y: 2,
-  z: true
-}, x));

test/fixtures/transformation/react/wraps-props-in-react-spread-for-middle-spread-attributes/expected.js

@@ -1,5 +1 @@
-React.createElement(Component, React.__spread({
+React.createElement(Component, React.__spread({ y: 2 }, x, { z: true }));
-  y: 2
-}, x, {
-  z: true
-}));