diff --git a/lib/6to5/transformation/transformers/react.js b/lib/6to5/transformation/transformers/react.js
index 50895a6e95..b63bae1fad 100644
--- a/lib/6to5/transformation/transformers/react.js
+++ b/lib/6to5/transformation/transformers/react.js
@@ -36,8 +36,13 @@ exports.XJSAttribute = {
}
};
+var isTag = function(tagName) {
+ return (/^[a-z]|\-/).test(tagName);
+};
+
exports.XJSOpeningElement = {
- exit: function (node) {
+ exit: function (node, parent, file) {
+ var reactCompat = file.opts && file.opts.reactCompat;
var tagExpr = node.name;
var args = [];
@@ -48,10 +53,12 @@ exports.XJSOpeningElement = {
tagName = tagExpr.value;
}
- if (tagName && (/[a-z]/.exec(tagName[0]) || tagName.indexOf("-") >= 0)) {
- args.push(t.literal(tagName));
- } else {
- args.push(tagExpr);
+ if (!reactCompat) {
+ if (tagName && isTag(tagName)) {
+ args.push(t.literal(tagName));
+ } else {
+ args.push(tagExpr);
+ }
}
var props = node.attributes;
@@ -96,6 +103,28 @@ exports.XJSOpeningElement = {
args.push(props);
+ if (reactCompat) {
+ if (tagName && isTag(tagName)) {
+ return t.callExpression(
+ t.memberExpression(
+ t.memberExpression(
+ t.identifier('React'),
+ t.identifier('DOM'),
+ false
+ ),
+ tagExpr,
+ t.isLiteral(tagExpr)
+ ),
+ args
+ );
+ } else {
+ return t.callExpression(
+ tagExpr,
+ args
+ );
+ }
+ }
+
tagExpr = t.memberExpression(t.identifier("React"), t.identifier("createElement"));
return t.callExpression(tagExpr, args);
}
diff --git a/test/fixtures/transformation/react/compat-convert-component/actual.js b/test/fixtures/transformation/react/compat-convert-component/actual.js
new file mode 100644
index 0000000000..240396e8a8
--- /dev/null
+++ b/test/fixtures/transformation/react/compat-convert-component/actual.js
@@ -0,0 +1,3 @@
+var x =