combine jsx and react transformer so we can make the jsx output correct - #143

lib/6to5/transformation/transform.js

@@ -49,7 +49,6 @@ _.each({
   numericLiterals:          require("./transformers/numeric-literals"),
 
   react:                    require("./transformers/react"),
-  jsx:                      require("./transformers/jsx"),
 
   _aliasFunctions:          require("./transformers/_alias-functions"),
   _blockHoist:              require("./transformers/_block-hoist"),

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

@@ -1,101 +0,0 @@
-// Based upon the excellent jsx-transpiler by Ingvar Stepanyan (RReverser)
-// https://github.com/RReverser/jsx-transpiler
-
-var esutils = require("esutils");
-var t       = require("../../types");
-var _       = require("lodash");
-
-var JSX_ANNOTATION_REGEX = /^\*\s*@jsx\s+([^\s]+)/;
-
-exports.Program = function (node, parent, file) {
-  var jsx = "React.DOM";
-
-  // looking for namespace annotation
-  _.each(node.leadingComments, function (comment) {
-    var matches = JSX_ANNOTATION_REGEX.exec(comment.value);
-    if (matches) jsx = matches[1];
-  });
-
-  // prebuilding AST node
-  file.jsx = jsx.split(".").map(t.identifier).reduce(function (object, property) {
-    return t.memberExpression(object, property);
-  });
-};
-
-exports.XJSIdentifier = function (node) {
-  if (esutils.keyword.isIdentifierName(node.name)) {
-    node.type = "Identifier";
-  } else {
-    return t.literal(node.name);
-  }
-};
-
-exports.XJSNamespacedName = function () {
-  throw new Error("Namespace tags are not supported. ReactJSX is not XML.");
-};
-
-exports.XJSMemberExpression = {
-  exit: function (node) {
-    node.computed = t.isLiteral(node.property);
-    node.type = "MemberExpression";
-  }
-};
-
-exports.XJSExpressionContainer = function (node) {
-  return node.expression;
-};
-
-exports.XJSAttribute = {
-  exit: function (node) {
-    var value = node.value || t.literal(true);
-    return t.property("init", node.name, value);
-  }
-};
-
-exports.XJSOpeningElement = {
-  exit: function (node, parent, file) {
-    var tagExpr = node.name;
-
-    if (t.isIdentifier(tagExpr)) {
-      var tagName = tagExpr.name;
-
-      if (/[a-z]/.exec(tagName[0]) || _.contains(tagName, "-")) {
-        tagExpr = t.memberExpression(file.jsx, tagExpr);
-      }
-    }
-
-    var props = node.attributes;
-    if (props.length) {
-      props = t.objectExpression(props);
-    } else {
-      props = t.literal(null);
-    }
-
-    return t.callExpression(tagExpr, [props]);
-  }
-};
-
-exports.XJSElement = {
-  exit: function (node) {
-    var callExpr = node.openingElement;
-    var children = node.children;
-
-    _.each(children, function (child, i) {
-      var val = child.value;
-      if (t.isLiteral(child) && _.isString(val)) {
-        val = val.replace(/\n(\s+)/g, " ");
-
-        i = +i;
-        if (i === 0) val = val.trimLeft();
-        if (i === children.length - 1) val = val.trimRight();
-
-        if (!val) return;
-        child.value = val;
-      }
-
-      callExpr.arguments.push(child);
-    });
-
-    return t.inherits(callExpr, node);
-  }
-};

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

@@ -1,5 +1,101 @@
-var t = require("../../types");
-var _ = require("lodash");
+// Based upon the excellent jsx-transpiler by Ingvar Stepanyan (RReverser)
+// https://github.com/RReverser/jsx-transpiler
+
+// jsx
+
+var esutils = require("esutils");
+var t       = require("../../types");
+var _       = require("lodash");
+
+exports.XJSIdentifier = function (node) {
+  if (esutils.keyword.isIdentifierName(node.name)) {
+    node.type = "Identifier";
+  } else {
+    return t.literal(node.name);
+  }
+};
+
+exports.XJSNamespacedName = function (node, parent, file) {
+  throw file.errorWithNode(node, "Namespace tags are not supported. ReactJSX is not XML.");
+};
+
+exports.XJSMemberExpression = {
+  exit: function (node) {
+    node.computed = t.isLiteral(node.property);
+    node.type = "MemberExpression";
+  }
+};
+
+exports.XJSExpressionContainer = function (node) {
+  return node.expression;
+};
+
+exports.XJSAttribute = {
+  exit: function (node) {
+    var value = node.value || t.literal(true);
+    return t.property("init", node.name, value);
+  }
+};
+
+exports.XJSOpeningElement = {
+  exit: function (node, parent, file) {
+    var tagExpr = node.name;
+    var args = [];
+
+    var tagName;
+    if (t.isIdentifier(tagExpr)) {
+      tagName = tagExpr.name;
+    } else if (t.isLiteral(tagExpr)) {
+      tagName = tagExpr.value;
+    }
+
+    if (tagName && (/[a-z]/.exec(tagName[0]) || _.contains(tagName, "-"))) {
+      args.push(t.literal(tagName));
+    } else {
+      args.push(tagExpr);
+    }
+
+    var props = node.attributes;
+    if (props.length) {
+      var first = props[0];
+      if (t.isXJSSpreadAttribute(first)) {
+        props.shift();
+        props = t.callExpression(
+          t.memberExpression(t.identifier("React"), t.identifier("__spread")),
+          [t.objectExpression([]), first.argument, t.objectExpression(props)]
+        );
+      } else {
+        props = t.objectExpression(props);
+      }
+    } else {
+      props = t.literal(null);
+    }
+
+    args.push(props);
+
+    tagExpr = t.memberExpression(t.identifier("React"), t.identifier("createElement"));
+    return t.callExpression(tagExpr, args);
+  }
+};
+
+exports.XJSElement = {
+  exit: function (node) {
+    var callExpr = node.openingElement;
+    var children = node.children;
+
+    var childrenToRender = node.children.filter(function(child) {
+      return !(t.isLiteral(child) && _.isString(child.value) && child.value.match(/^[ \t]*[\r\n][ \t\r\n]*$/));
+    });
+
+    _.each(childrenToRender, function (child, i) {
+      callExpr.arguments.push(child);
+    });
+
+    return t.inherits(callExpr, node);
+  }
+};
+
+// display names
 
 var addDisplayName = function (id, call) {
   if (!call || !t.isCallExpression(call)) return;

lib/6to5/types/visitor-keys.json

@@ -71,6 +71,6 @@
   "XJSMemberExpression":      ["object", "property"],
   "XJSNamespacedName":        ["namespace", "name"],
   "XJSOpeningElement":        ["name", "attributes"],
-  "XJSSpreadAttribute":       [],
+  "XJSSpreadAttribute":       ["argument"],
   "YieldExpression":          ["argument"]
 }

test/fixtures/transformation/jsx/annotation/actual.js

@@ -1,3 +0,0 @@
-/** @jsx CUSTOM_DOM */
-
-<a></a>

test/fixtures/transformation/jsx/annotation/expected.js

@@ -1,5 +0,0 @@
-/** @jsx CUSTOM_DOM */
-
-"use strict";
-
-CUSTOM_DOM.a(null);

test/fixtures/transformation/jsx/empty/actual.js

@@ -1 +0,0 @@
-<X>{}</X>

test/fixtures/transformation/jsx/empty/expected.js

@@ -1,3 +0,0 @@
-"use strict";
-
-X(null, null);

test/fixtures/transformation/jsx/everything/actual.js

@@ -1,2 +0,0 @@
-<X data-prop={x ? <Y prop={2} /> : <Z>
-</Z>}></X>

test/fixtures/transformation/jsx/everything/expected.js

@@ -1,7 +0,0 @@
-"use strict";
-
-X({
-  "data-prop": x ? Y({
-    prop: 2
-  }) : Z(null)
-});

test/fixtures/transformation/jsx/expressions/actual.js

@@ -1,5 +0,0 @@
-(<X>{a}</X>);
-
-(<X>{a} {b}</X>);
-
-(<X prop={a} yes></X>);

test/fixtures/transformation/jsx/expressions/expected.js

@@ -1,10 +0,0 @@
-"use strict";
-
-(X(null, a));
-
-(X(null, a, " ", b));
-
-(X({
-  prop: a,
-  yes: true
-}));

test/fixtures/transformation/jsx/known-tags/actual.js

@@ -1 +0,0 @@
-<a></a>

test/fixtures/transformation/jsx/known-tags/expected.js

@@ -1,3 +0,0 @@
-"use strict";
-
-React.DOM.a(null);

test/fixtures/transformation/jsx/member-expression/actual.js

@@ -1 +0,0 @@
-<Test.X></Test.X>

test/fixtures/transformation/jsx/member-expression/expected.js

@@ -1,3 +0,0 @@
-"use strict";
-
-Test.X(null);

test/fixtures/transformation/jsx/no-xml-namespaces/actual.js

@@ -1 +0,0 @@
-<Test:X></Test:X>

test/fixtures/transformation/jsx/self-closing-tags/actual.js

@@ -1,3 +0,0 @@
-(<X />);
-
-(<X prop="1" />);

test/fixtures/transformation/jsx/self-closing-tags/expected.js

@@ -1,7 +0,0 @@
-"use strict";
-
-(X(null));
-
-(X({
-  prop: "1"
-}));

test/fixtures/transformation/jsx/simple-tags/actual.js

@@ -1 +0,0 @@
-<X></X>

test/fixtures/transformation/jsx/simple-tags/expected.js

@@ -1,3 +0,0 @@
-"use strict";
-
-X(null);

test/fixtures/transformation/jsx/tags-with-children/actual.js

@@ -1,3 +0,0 @@
-(<X prop="2"><Y /></X>);
-
-(<X prop="2"><Y /><Z /></X>);

test/fixtures/transformation/jsx/tags-with-children/expected.js

@@ -1,9 +0,0 @@
-"use strict";
-
-(X({
-  prop: "2"
-}, Y(null)));
-
-(X({
-  prop: "2"
-}, Y(null), Z(null)));

test/fixtures/transformation/jsx/tags-with-literals/actual.js

@@ -1,13 +0,0 @@
-(<X>   </X>);
-
-(<X>
-</X>);
-
-(<X>
-  string
-</X>);
-
-(<X>
-  string
-  string
-  </X>);

test/fixtures/transformation/jsx/tags-with-literals/expected.js

@@ -1,9 +0,0 @@
-"use strict";
-
-(X(null));
-
-(X(null));
-
-(X(null, "string"));
-
-(X(null, "string string"));

test/fixtures/transformation/react/.should-not-strip-nbsp-even-coupled-with-other-whitespace/actual.js

@@ -0,0 +1 @@
+<div>&nbsp; </div>;

test/fixtures/transformation/react/.should-not-strip-nbsp-even-coupled-with-other-whitespace/expected.js

@@ -0,0 +1 @@
+React.createElement("div", null, "\u00A0 ");

test/fixtures/transformation/react/.should-not-strip-tags-with-a-single-child-of-nbsp/actual.js

@@ -0,0 +1 @@
+<div>&nbsp;</div>;

test/fixtures/transformation/react/.should-not-strip-tags-with-a-single-child-of-nbsp/expected.js

@@ -0,0 +1 @@
+React.createElement("div", null, "\u00A0");

test/fixtures/transformation/react/.should-properly-handle-comments-adjacent-to-children/actual.js

@@ -0,0 +1,13 @@
+var x = (
+  <div>
+    {/* A comment at the beginning */}
+    {/* A second comment at the beginning */}
+    <span>
+      {/* A nested comment */}
+    </span>
+    {/* A sandwiched comment */}
+    <br />
+    {/* A comment at the end */}
+    {/* A second comment at the end */}
+  </div>
+);

test/fixtures/transformation/react/.should-properly-handle-comments-adjacent-to-children/expected.js

@@ -0,0 +1,11 @@
+var x = (React.createElement("div", null,
+  /* A comment at the beginning */
+  /* A second comment at the beginning */
+  React.createElement("span", null
+    /* A nested comment */
+  ),
+  /* A sandwiched comment */
+  React.createElement("br", null)
+  /* A comment at the end */
+  /* A second comment at the end */
+));

test/fixtures/transformation/react/.should-properly-handle-comments-between-props/actual.js

@@ -0,0 +1,10 @@
+var x = (
+  <div
+    /* a multi-line
+       comment */
+    attr1="foo">
+    <span // a double-slash comment
+      attr2="bar"
+    />
+  </div>
+);

test/fixtures/transformation/react/.should-properly-handle-comments-between-props/expected.js

@@ -0,0 +1,8 @@
+var x = (React.createElement("div", {
+  /* a multi-line
+     comment */
+  attr1: "foo"},
+  React.createElement("span", {// a double-slash comment
+    attr2: "bar"}
+  )
+));

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

@@ -0,0 +1,3 @@
+<Component
+  {...this.props}
+  sound="moo" />

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

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

test/fixtures/transformation/react/display-name-assignment-expression/expected.js

@@ -1,5 +1,3 @@
-"use strict";
-
 var Component;
 Component = React.createClass({
   displayName: "Component",

test/fixtures/transformation/react/display-name-if-missing/expected.js

@@ -1,5 +1,3 @@
-"use strict";
-
 var Whateva = React.createClass({
   displayName: "Whatever",
   render: function () {

test/fixtures/transformation/react/display-name-object-declaration/expected.js

@@ -1,5 +1,3 @@
-"use strict";
-
 exports = {
   Component: React.createClass({
     displayName: "Component",

test/fixtures/transformation/react/display-name-property-assignment/expected.js

@@ -1,5 +1,3 @@
-"use strict";
-
 exports.Component = React.createClass({
   displayName: "Component",
 

test/fixtures/transformation/react/display-name-variable-declaration/expected.js

@@ -1,5 +1,3 @@
-"use strict";
-
 var Component = React.createClass({
   displayName: "Component",
 

test/fixtures/transformation/react/options.json

@@ -0,0 +1,3 @@
+{
+  "blacklist": ["useStrict"]
+}

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

@@ -0,0 +1 @@
+<Component constructor="foo" />;

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

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

test/fixtures/transformation/react/should-allow-deeper-js-namespacing/actual.js

@@ -0,0 +1 @@
+<Namespace.DeepNamespace.Component />;

test/fixtures/transformation/react/should-allow-deeper-js-namespacing/expected.js

@@ -0,0 +1 @@
+React.createElement(Namespace.DeepNamespace.Component, null);

test/fixtures/transformation/react/should-allow-js-namespacing/actual.js

@@ -0,0 +1 @@
+<Namespace.Component />;

test/fixtures/transformation/react/should-allow-js-namespacing/blacklist.js

@@ -0,0 +1 @@
+React.createElement(Namespace.Component, null);

test/fixtures/transformation/react/should-allow-js-namespacing/expected.js

@@ -0,0 +1 @@
+React.createElement(Namespace.Component, null);

test/fixtures/transformation/react/should-avoid-wrapping-in-extra-parens-if-not-needed/actual.js

@@ -0,0 +1,15 @@
+var x = <div>
+  <Component />
+</div>;
+
+var x = <div>
+  {this.props.children}
+</div>;
+
+var x = <Composite>
+  {this.props.children}
+</Composite>;
+
+var x = <Composite>
+  <Composite2 />
+</Composite>;

test/fixtures/transformation/react/should-avoid-wrapping-in-extra-parens-if-not-needed/expected.js

@@ -0,0 +1,7 @@
+var x = React.createElement("div", null, React.createElement(Component, null));
+
+var x = React.createElement("div", null, this.props.children);
+
+var x = React.createElement(Composite, null, this.props.children);
+
+var x = React.createElement(Composite, null, React.createElement(Composite2, null));

test/fixtures/transformation/react/should-convert-simple-tags/actual.js

@@ -0,0 +1 @@
+var x = <div></div>;

test/fixtures/transformation/react/should-convert-simple-tags/expected.js

@@ -0,0 +1 @@
+var x = React.createElement("div", null);

test/fixtures/transformation/react/should-convert-simple-text/actual.js

@@ -0,0 +1 @@
+var x = <div>text</div>;

test/fixtures/transformation/react/should-convert-simple-text/expected.js

@@ -0,0 +1 @@
+var x = React.createElement("div", null, "text");

test/fixtures/transformation/react/should-disallow-xml-namespacing/actual.js

@@ -0,0 +1 @@
+<Namespace:Component />;

test/fixtures/transformation/react/should-handle-has-own-property-correctly/actual.js

@@ -0,0 +1 @@
+<hasOwnProperty>testing</hasOwnProperty>;

test/fixtures/transformation/react/should-handle-has-own-property-correctly/expected.js

@@ -0,0 +1 @@
+React.createElement("hasOwnProperty", null, "testing");

test/fixtures/transformation/react/should-have-correct-comma-in-nested-children/actual.js

@@ -0,0 +1,5 @@
+var x = <div>
+  <div><br /></div>
+  <Component>{foo}<br />{bar}</Component>
+  <br />
+</div>;

test/fixtures/transformation/react/should-have-correct-comma-in-nested-children/expected.js

@@ -0,0 +1 @@
+var x = React.createElement("div", null, React.createElement("div", null, React.createElement("br", null)), React.createElement(Component, null, foo, React.createElement("br", null), bar), React.createElement("br", null));

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

@@ -0,0 +1,16 @@
+var x =
+  <div
+    attr1={
+      "foo" + "bar"
+    }
+    attr2={
+      "foo" + "bar" +
+
+      "baz" + "bug"
+    }
+    attr3={
+      "foo" + "bar" +
+      "baz" + "bug"
+    }
+    attr4="baz">
+  </div>

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

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

test/fixtures/transformation/react/should-transform-known-hyphenated-tags/actual.js

@@ -0,0 +1 @@
+<font-face />;

test/fixtures/transformation/react/should-transform-known-hyphenated-tags/expected.js

@@ -0,0 +1 @@
+React.createElement("font-face", null);

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

@@ -0,0 +1,2 @@
+<Component { ... x } y
+={2 } z />

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

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